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 ?

Conal

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());
});

Halfbound

With this solution sometimes the cells get lost when the window is resized to smaller. Is there a way to setdimensions for the cell element too during window resize – Shrunken

You can do anything in the resize event handler. You could call paper.scale() (and possibly also paper.setOrigin()) to change the view to include all the details you had before, but you'll need to figure out what arguments to pass to those. – Halfbound

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.

Dulcet

I do not see that anywhere in the linked documentation, and it doesn't work, at least for me – Accede

Worked for me. It's in the documentation, at least in the new version: resources.jointjs.com/docs/jointjs/v3.3/… – Doer

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

Wiseacre

$('#modelCanvas').width() equals to 0 in my case. For it helps somebody. – Lustring

Not the best answer as this isn't truly responsive (ie this wouldn't help turning a phablet from landscape to portrait) as changing of media break point afte the initial load won't update the paper. SpoonMeiser's answer bellow is better as it includes the javascript support so that it is truly responsive. – Zipnick

Answer 4

You can just change the size of the div containing your paper:

document.getElementById("your-paper-container").setAttribute("style", "height: " + window.innerHeight + "px; overflow: scroll;");

You could change the code window.innterHeight to a variable if you have some additional elements within your page:

headers = 210;
height = window.innerHeight - headers;
document.getElementById("paper-container").setAttribute("style", "height: " + height + "px; overflow: scroll;");

Taskwork