The following list contains events that you can react on in a paper:

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.

An example of a simple blank:pointerdown event listener:

paper.on('blank:pointerdown', function(evt, x, y) {
  alert('pointerdown on a blank area in the paper.')
})

Consecutive pointerdown, pointermove and pointerup events can share information through the evt.data object:

// Create a new link by dragging
paper.on({
  'blank:pointerdown': function(evt, x, y) {
    var link = new joint.dia.Link();
    link.set('source', { x: x, y: y });
    link.set('target', { x: x, y: y });
    link.addTo(this.model);
    evt.data = { link: link, x: x, y: y };
  },
  'blank:pointermove': function(evt, x, y) {
    evt.data.link.set('target', { x: x, y: y });
  },
  'blank:pointerup': function(evt) {
    var target = evt.data.link.get('target');
    if (evt.data.x === target.x && evt.data.y === target.y) {
        // remove zero-length links
        evt.data.link.remove();
    }
  }
});