pointerdblclick |
Triggered when pointer is double-clicked on a target (a dblclick event is detected).
The callback function is passed cellView , evt , x and y as arguments.
cell:pointerdblclick |
Triggered when pointer is double-clicked on a cell. |
link:pointerdblclick |
Triggered when pointer is double-clicked on a link. |
element:pointerdblclick |
Triggered when pointer is double-clicked on an element. |
blank:pointerdblclick |
Triggered when pointer is double-clicked on the paper outside any cell.
The callback function is passed evt , x and y as arguments.
|
|
pointerclick |
Triggered when pointer is clicked on a target without pointer movement (a click or touchend event is detected). Occurs alongside pointerdown and pointerup events.
The callback function is passed cellView , evt , x and y as arguments.
cell:pointerclick |
Triggered when pointer is clicked on a cell. |
link:pointerclick |
Triggered when pointer is clicked on a link. |
element:pointerclick |
Triggered when pointer is clicked on an element. |
blank:pointerclick |
Triggered when pointer is clicked on the paper outside any cell.
The callback function is passed evt , x and y as arguments.
|
|
contextmenu |
Triggered when pointer is right-clicked on a target (a contextmenu event is detected).
The callback function is passed cellView , evt , x and y as arguments.
cell:contextmenu |
Triggered when pointer is right-clicked on a cell. |
link:contextmenu |
Triggered when pointer is right-clicked on a link. |
element:contextmenu |
Triggered when pointer is right-clicked on an element. |
blank:contextmenu |
Triggered when pointer is right-clicked on the paper outside any cell.
The callback function is passed evt , x and y as arguments.
|
|
pointerdown |
Triggered when pointer is pressed down on a target (a mousedown or touchstart event is detected). The paper also starts delegating respective pointermove and pointerup events (including their touch counterparts; see below).
The callback function is passed cellView , evt , x and y as arguments.
cell:pointerdown |
Triggered when pointer is pressed down on a cell. |
link:pointerdown |
Triggered when pointer is pressed down on a link. |
element:pointerdown |
Triggered when pointer is pressed down on an element. |
blank:pointerdown |
Triggered when pointer is pressed down on the paper outside any cell.
The callback function is passed evt , x and y as arguments.
|
|
pointermove |
Triggered when pointer is moved over a target while pressed down (a mousemove or touchmove event is detected).
The callback function is passed cellView , evt , x and y as arguments.
cell:pointermove |
Triggered when pointer is moved over a cell. |
link:pointermove |
Triggered when pointer is moved over a link. |
element:pointermove |
Triggered when pointer is moved over an element. |
blank:pointermove |
Triggered when pointer is moved over the paper outside any cell.
The callback function is passed evt , x and y as arguments.
|
|
pointerup |
Triggered when pointer is released on a target after being pressed down (a mouseup or touchend event is detected).
The callback function is passed cellView , evt , x and y as arguments.
cell:pointerup |
Triggered when pointer is released on a cell. |
link:pointerup |
Triggered when pointer is relased on a link. |
element:pointerup |
Triggered when pointer is released on an element. |
blank:pointerup |
Triggered when pointer is released on the paper outside any cell.
The callback function is passed evt , x and y as arguments.
|
Calling evt.stopPropagation() prevents triggering a subsequent pointerclick event.
|
mouseover |
Triggered when pointer begins to hover directly over a target.
The callback function is passed cellView and evt as arguments.
cell:mouseover |
Triggered when pointer begins to hover directly over a cell. |
link:mouseover |
Triggered when pointer begins to hover directly over a link. |
element:mouseover |
Triggered when pointer begins to hover directly over an element. |
blank:mouseover |
Triggered when pointer begins to hover over the svg element of the paper outside any cell.
The callback function is passed evt as argument.
|
|
mouseout |
Triggered when pointer ceases to hover directly over a target.
The callback function is passed cellView and evt as arguments.
cell:mouseout |
Triggered when pointer ceases to hover directly over a cell. |
link:mouseout |
Triggered when pointer ceases to hover directly over a link. |
element:mouseout |
Triggered when pointer ceases to hover directly over an element. |
blank:mouseout |
Triggered when pointer ceases to hover over the svg element of the paper outside any cell.
The callback function is passed evt as argument.
|
|
mouseenter |
Triggered when pointer enters the area above a target.
The callback function is passed cellView and evt as arguments.
cell:mouseenter |
Triggered when pointer enters the area above a cell. |
link:mouseenter |
Triggered when pointer enters the area above a link. |
element:mouseenter |
Triggered when pointer enters the area above an element. |
paper:mouseenter |
Triggered when pointer enters the area of the paper (including paper border, if present).
The callback function is passed evt as argument.
|
|
mouseleave |
Triggered when pointer leaves the area above a target.
The callback function is passed cellView and evt as arguments.
cell:mouseleave |
Triggered when pointer leaves the area above a cell. |
link:mouseleave |
Triggered when pointer leaves the area above a link. |
element:mouseleave |
Triggered when pointer leaves the area above an element. |
paper:mouseleave |
Triggered when pointer leaves the area of the paper (including paper border, if present).
The callback function is passed evt as argument. |
|
mousewheel |
Triggered when mouse wheel is rotated while pointer is on a target.
The callback function is passed cellView , evt , x , y and delta as arguments.
cell:mousewheel |
Triggered when mouse wheel is rotated while the pointer is on a cell. |
link:mousewheel |
Triggered when mouse wheel is rotated while the pointer is on a link. |
element:mousewheel |
Triggered when mouse wheel is rotated while the pointer is on an element. |
blank:mousewheel |
Triggered when mouse wheel is rotated while the pointer is on the paper outside any cell.
The callback function is passed evt , x , y and delta as arguments.
|
|
magnet |
Triggered when interacting with a magnet target.
The callback function is passed elementView , evt , magnetSVGElement , x , y as arguments.
element:magnet:pointerclick |
Triggered when pointer is clicked on an element magnet and no link was created yet from this magnet (controlled by magnetThreshold option). Calling evt.stopPropagation() prevents triggering cell:pointerclick and element:pointerclick events. |
element:magnet:pointerdblclick |
Triggered when pointer is double-clicked on an element magnet. Calling evt.stopPropagation() prevents triggering cell:pointerdblclick and element:pointerdblclick events. |
element:magnet:contextmenu |
Triggered when pointer is right-clicked on an element magnet. Calling evt.stopPropagation() prevents triggering cell:contextmenu and element:contextmenu events. |
|
|
cell:highlight |
Triggered when the cellView.highlight method is called on a link or element view.
The callback function is invoked with the following arguments:
- cellView - highlighted CellView
- node - highlighted node (SVGElement) of the CellView
- options - options used when
cellView.highlight(node, options) was called. The type property is added to the option object and specifies what type of highlighting interactions caused the highlight.
// Disable built-in highlighting
paper.options.highlighting = false;
// Handle each type of the highlight manually
paper.on('cell:highlight', (cellView, node, options) => {
switch (options.type) {
case: joint.dia.CellView.Highlighting.CONNECTING: {
joint.highlighters.stroke.add(cellView, node, 'id1', { attrs: { 'stroke': 'blue' }});
break;
}
case: joint.dia.CellView.Highlighting.EMBEDDING: {
joint.highlighters.stroke.add(cellView, node, 'id2', { attrs: { 'stroke': 'red' }});
break;
}
default: {
joint.highlighters.stroke.add(cellView, node, 'id3');
break;
}
}
});
|
cell:unhighlight |
Triggered when the cellView.unhighlight method is called on a link or element view.
The callback function is invoked with the following arguments:
- cellView - highlighted CellView
- node - highlighted node (SVGElement) of the CellView
- options - options used when
cellView.unhighlight(node, options) was called. The type property is added to the option object and specifies what type of highlighting interactions caused the unhighlight.
// Disable built-in highlighting
paper.options.highlighting = false;
// Handle each type of the highlight manually
paper.on('cell:unhighlight', (cellView, _node, options) => {
switch (options.type) {
case: joint.dia.CellView.Highlighting.CONNECTING: {
joint.dia.Highlighter.remove(cellView, 'id1');
break;
}
case: joint.dia.CellView.Highlighting.EMBEDDING: {
joint.dia.Highlighter.remove(cellView, 'id2');
break;
}
default: {
joint.dia.Highlighter.remove(cellView, 'id3');
break;
}
}
});
|
cell:highlight:invalid |
Triggered when a highlighter makes an attempt to highlight a node, that doesn't exist on the CellView (e.g. a port was highlighted and now it is removed).
The callback function is passed cellView , highlighterId and highlighter as arguments.
paper.on('cell:highlight:invalid', (cellView, id) => {
// Remove the invalid highlighter
joint.dia.HighlighterView.remove(cellView, id);
});
element1.addPort({ id: 'port1' });
const elementView1 = element1.findView(paper);
const highlighter1 = joint.highlighters.mask.add(elementView1, { port: 'port1' }, 'highlighter-id'));
// The following line will trigger the event with (elementView1, 'highlighter-id', highlighter1) arguments.
element1.removePorts();
|
link:connect |
Triggered when a link is connected to a cell. The event is triggered after the user reconnects a link.
The callback function is passed linkView , evt , elementViewConnected , magnet and arrowhead as arguments.
|
link:disconnect |
Triggered when a link is disconnected from a cell. The event is triggered after the user reconnects a link.
The callback function is passed linkView , evt , elementViewDisconnected , magnet and arrowhead as arguments.
|
link:snap:connect |
Triggered when a link is connected to a cell. The event (or multiple events) can be triggered while the user is reconnecting a link and snapLinks option is enabled.
The callback function is passed linkView , evt , elementViewConnected , magnet and arrowhead as arguments.
|
link:snap:disconnect |
Triggered when a link is disconnected from a cell. The event (or multiple events) can be triggered while the user is reconnecting a link and snapLinks option is enabled.
The callback function is passed linkView , evt , elementViewDisconnected , magnet and arrowhead as arguments.
|
render:done |
Triggered when all scheduled updates are done (i.e. all scheduled batches have finished).
|
[custom] |
Custom cell event can be triggered on pointerdown with Event attribute. Calling evt.stopPropagation() prevents triggering all subsequent events.
|