Prevent JointJS elements from generating off paper

Question

I'm using JointJS in a React environment to create a Directed graph from some Neo4j data. My problem is that elements are being generated off the paper As pictured here, "test6" is generated mostly off the page and "test10" isn't even shown. I would like all elements to be displayed on the paper, without overlapping each other or links if possible.

My paper is defined with only a width dimension set equal to the div width and the div is styled to be 100% width

...
width: $('#paper').width(),
...

and

render(){
        return(
            <React.Fragment>
                <div id="paper" style={{width:'100%'}}></div>
            </React.Fragment>
        )
    }

The code for generating an element is as follows:

function makeElement(node) {
    var maxLineLength = _.max(node.name.split('\n'), function(l) { return l.length; }).length;

    var letterSize = 12;
    var width = 2 * (letterSize * (0.6 * maxLineLength + 1));
    var height = 2 * ((node.name.split('\n').length + 1) * letterSize);

    return new joint.shapes.basic.Rect({
        id: node.id,
        size: { width: 100, height: height },
        attrs: {
            type:'node',
            text: { 
              text: node.name, 
              'font-size': letterSize, 
              'font-family': 'monospace' },
            rect: {
                width: width, height: height,
                rx: 5, ry: 5,
                stroke: '#555'
            }
        }
    });
}

Thanks in advance :)

EDIT: I don't have the exact solution yet, but in the meantime I used this to make the paper draggable to view all nodes

Prevent JointJS elements from generating off paper

0 Answers0