How to make jointjs paper responsive?

Question

I just discover javascript library JointJs and I implemented a graph with paper and rects.

But I can't make it responsive when I reduce the browser size my graph doesn't display correctly.

How can I make my paper responsive with jointjs ?

Answer 1

You can initially set the paper to be the same dimensions as it's containing element, but that's only calculated initially when the paper is created. If you want to paper to change size as you resize your browser, you'll need to react to resize events.

Firstly, you'll need to set overflow to hidden on your container, otherwise its dimensions will stretch to fit its child, and it won't shrink if you shrink the browser.

#modelCanvas {
    overflow: hidden;
}

You'll have to make sure your #modelCanvaselement will stretch to fill available space by some method, either setting height: 100% (in situations where that will work) or using flexbox or absolute positioning.

Secondly, you'll need a resize event handler

$(window).resize(function() {
    var canvas = $('#modelCanvas');
    paper.setDimensions(canvas.width(), canvas.height());
});

Answer 2

From the docs on setDimensions (http://resources.jointjs.com/docs/jointjs/v2.2/joint.html#dia.Paper.prototype.setDimensions), you can set width: '100%', height: '100%' and then control the responsive display with your css.

Then, something like:

$(window).on('resize', joint.util.debounce(function() {
    paper.scaleContentToFit({ padding: 10 });
}));

and/or also set a min-width/min-height in px to the paper in css and add an overflow: auto to the parent.

Answer 3

I Recommend using a responsive layout css such as bootstrap I personally recommend pure css (http://purecss.io) and the rest is easy once you set a base layout for the html page which contains the JointJS paper.

For example let's suppose you made the html base and you created specifically a div container called "modelCanvas" this div was made with a responsive css (For this example I used pure CSS).

<div id="modelCanvas" style="height:100%;width:100%; overflow-y: auto; overflow-x: auto;background-image:url(../res/tiny_grid.png);background-repeat:repeat;">

Now into the JS part of your web site you, we'll initialize required JointJS paper and graph init

var graph = new joint.dia.Graph;

var paper = new joint.dia.Paper({
 el: $('#modelCanvas'),
 gridSize: 10,
 height: $('#modelCanvas').height(),
 width: $('#modelCanvas').width(),
 gridSize: 1,
 model: graph,
});

Now the JointJS paper is responsive Best, AG