JointJS Non-interactive elements

Question

I want to disable the movement of elements and links in JointJS Diagrams while keeping alive other featurs like hyperlinking of elements and highlighting of link on mouse:hover. I referred to the following links: https://groups.google.com/forum/#!searchin/jointjs/drag/jointjs/R0KZwKqfRbI/rGLJz3t4Un0J https://groups.google.com/forum/#!searchin/jointjs/read$20only/jointjs/o8CKU6N7EOI/1KGNFCQQHGUJ

But they didn't help me. I tried: paper.$el.css('pointer-events', 'none'); But it disables everything. I want to disable only element and link dragging

Answer 1

Assuming that I understand you correctly than the 2nd link should give you the answer. You simply have to make the paper non-interactive:

var paper = new joint.dia.Paper({
    el: '#paper',
    width: 500,
    height: 500,
    gridSize: 1,
    graph: new joint.dia.Graph,
    interactive: false
});

This should disable any movement of elements/links/vertices while maintaining the highlighting features.

Answer 2

paper.$el.css('pointer-events', 'none');

will disable the movement of everything on paper. If you want to disable the movement of specific element,use it.

element.attr({rect:{style:{'pointer-events':'none'}}});

Detail here: Make elements 'not selectable' in jointjs

Answer 3

My suggestion is to get the event object and to use your own ligic for disable/keepalive. How you do that:

   var b_paperDraggable = false;
   var b_paperPropertise = false;

paper.on('cell:pointerdown', function (cellView) {

    if (b_paperDraggable == true) {
        //...
    }
    if (b_paperPropertise == true) {

        openPropInModal(cellView.model.id, cellView.model.attributes.elmTypeID);
        $("#modal-container").modal();
    }
});

Answer 4

The solution for me is add cell.model.attr('./pointer-events','none'); for example you need search the model:

For example after the create element:

var cell = paper.findViewByModel(graph.getLastCell());
cell.model.attr('./pointer-events','none');