jointjs - How to make a paper draggable

Question

If the paper is too big for the div it's shown in, I'd like to make the paper draggable.

I tried the papers blank:pointerdown and pointerup events but was not able to just follow the mousemovement. I also tried to make the element of the paper draggable via jquery, but nothing seems to do the trick...

Is there any way to do this?

Answer 1

This can be achieved with a combination of JointJS events and document events. The graph display is encapsulated in a div:

<div id='diagram'></div>

Then add the event handlers for JointJS, first the pointerdown event where we store the start position of the drag:

paper.on('blank:pointerdown',
    function(event, x, y) {
        dragStartPosition = { x: x, y: y};
    }
);

Then the end of the drag (pointerup) when we delete the variable we store the position in (it also acts as a flag whether there is an active drag in progress):

paper.on('cell:pointerup blank:pointerup', function(cellView, x, y) {
    delete dragStartPosition;
});

As JointJS does not expose a "paper pointer move" event, we need to use the mousemove document event. For example, with JQuery:

$("#diagram")
    .mousemove(function(event) {
        if (dragStartPosition)
            paper.translate(
                event.offsetX - dragStartPosition.x, 
                event.offsetY - dragStartPosition.y);
    });

We get the drag start coordinates and the current pointer position and update the paper position using the paper.translate() call.

WARNING: if you scale the paper (using paper.scale()), you have to also scale the starting position of the drag:

var scale = V(paper.viewport).scale();
dragStartPosition = { x: x * scale.sx, y: y * scale.sy};

The calls to paper.translate() will then update to the proper position.