interactive
- Configure which of the default interactions with elements and links should be enabled.
The property value defaults to { labelMove: false }
. This can be overwritten in three ways: with a boolean value, with an object specifying interaction keys, or with a function.
If set to false
, all interactions with elements and links are disabled. If set to true
, all interactions are enabled.
// disable all interaction
var paper = new joint.dia.Paper({
// ...
interactive: false,
});
// enable all interaction (including labelMove)
var paper = new joint.dia.Paper({
// ...
interactive: true,
});
Using an object, specific interactions may be disabled by assigning false
to their corresponding property name. It is not necessary to pass true
values; all omitted properties are assigned true
by default. (Note that the passed object is not merged with the default; unless labelMove
is explicitly excluded, it becomes enabled.) A full list of recognized interaction keys is provided below.
// disable arrowheadMove
var paper = new joint.dia.Paper({
// ...
interactive: { arrowheadMove: false }
});
// disable all element interactions
var paper = new joint.dia.Paper({
// ...
interactive: { elementMove: false, addLinkFromMagnet: false }
});
If defined as a function, the function is passed cellView
(the elementView/linkView the user is about to interact with) as the first parameter, followed by the name of the event ('pointerdown'
, 'pointermove'
, ...) that triggered the interaction. The return value of the function is then interpreted in the way specified above (false
causes all interaction to be disabled, an object disables specific interactions, etc.).
// disable link interactions for cellViews when a custom property is set
var paper = new joint.dia.Paper({
// ...
interactive: function(cellView) {
if (cellView.model.get('disableLinkInteractions')) {
return {
linkMove: false,
labelMove: false,
arrowheadMove: false,
vertexMove: false,
vertexAdd: false,
vertexRemove: false,
useLinkTools: false,
};
}
// otherwise
return true;
}
});
The example below has all interactions on the link and on the elements enabled. This is the default behavior:
The following tables present a list of all recognized interaction keys, followed by an example of a paper with only the related interactive property set to true
(and all other properties set to false
).
Links:
linkMove |
Is the user allowed to move the link? |
---|---|
labelMove |
Is the user allowed to move the link label? |
arrowheadMove |
Deprecated. Use a link tool instead. (Is the user allowed to move the arrowheads?) |
vertexMove |
Deprecated. Use a link tool instead. (Is the user allowed to move the vertices?) |
vertexAdd |
Deprecated. Use a link tool instead. (Is the user allowed to add vertices by clicking along the link path?) |
vertexRemove |
Deprecated. Use a link tool instead. (Is the user allowed to remove vertices?) |
useLinkTools |
Deprecated. (Is the user allowed to use the default link buttons?) |
Elements:
elementMove |
Is the user allowed to move the element? |
---|---|
addLinkFromMagnet |
Is the user allowed to add connections from magnets/ports? |
The stopDelegation
option is special. If it is true
(default), the element's elementMove
option determines whether the element responds to user drag.
However, if stopDelegation
is false
and the element is embedded within a parent, the user's dragging is delegated to the embedding parent. The parent's elementMove
option then determines whether both elements respond to user drag. The behavior is recursive. If the embedding parent has stopDelegation: false
, it delegates to its own embedding parent's elementMove
option and so on. If all children within an embedding have stopDelegation
set to false
, then no matter which element is dragged by the user, the whole embedding is dragged.
If the element is not embedded within an element, the stopDelegation
option is ignored (treated as true
). There is no other element to delegate to. Then elementMove
determines whether the element responds to user drag.
In the following example, both embedded elements have stopDelegation: false
. Thus, when the embedded element is dragged by the user, the parent ancestor (Movable
) is dragged instead. When the parent ancestor has elementMove
disabled (Not movable
), nothing happens.
stopDelegation |
---|