JointJS Non-interactive elements
Asked Answered
I

4

6

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

Intestinal answered 3/6, 2014 at 13:25 Comment(0)
D
19

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.

Demasculinize answered 12/9, 2014 at 17:29 Comment(0)
E
3
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

Entoblast answered 8/3, 2016 at 4:27 Comment(0)
V
1

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();
    }
});
Valdivia answered 20/4, 2017 at 8:18 Comment(0)
T
0

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');
Tournai answered 18/3, 2019 at 20:22 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.