UI Events

These events are fired by the Surface widget. Note that some of these events are also fired by the underlying Toolkit, but the surface payload provides the related UI element information.

Binding to Surface events

Event listeners can be bound to the surface widget in one of three ways:

• via the bind method
• in the events parameter to a render call on an instance of the Toolkit
• in the individual Node, Group, Port and Edge definitions in the view parameter to a render call.

The full list of bindable events is listed below.

Using bind

const surface = toolkitInstance.render(someElement, {
  ...
});

surface.bind("canvasClick", (e) => {
  console.log("click on the canvas");
});

surface.bind("node:added", (params) => {
 
});

Declarative binding

const surface = toolkitInstance.render(someElement, {
  ...
  events:{
      canvasClick:(e) => {
        console.log("click on the canvas");
      },
      "node:added":(params) => {}
  }
});

Each of the entries in the events block is equivalent to first instantiating the surface and then calling bind on it.

Suspending Events

You can suspend/enable events from the surface widget with this method:

surface.setSuspendEvents(true);

You can also wrap the underlying Toolkit's batch command (which runs a series of operations without making any rendering changes) with the surface widget's batch command:

surface.batch(() => {
  toolkit.addNode({id:"foo"});
  toolkit.addNode({id:"bar"});
  toolkit.addNode({source:"foo", target:"bar"});
});

This is equivalent to:

surface.setSuspendEvents(true);
toolkit.batch(() => {
  toolkit.addNode({id:"foo"});
  toolkit.addNode({id:"bar"});
  toolkit.addNode({source:"foo", target:"bar"});
});
surface.setSuspendEvents(false);

---

Event List

Event	Constant	Description	Payload
node:added	EVENT_NODE_ADDED	Fired whenever a new node is added to the data model
group:added	EVENT_GROUP_ADDED	Fired whenever a new node is added to the data model
group:removed	EVENT_GROUP_REMOVED	Fired when a group is removed
group:resized	EVENT_GROUP_RESIZE	Fired when a group has been resized
edge:added	EVENT_EDGE_ADDED	Fired when a new edge has been added
pan	EVENT_PAN	Fired when the surface has just been panned.
zoom	EVENT_ZOOM	Fired when the surface's zoom has just changed
node:move:start	EVENT_NODE_MOVE_START	Fired when a node/group has just begun to be dragged
node:move	EVENT_NODE_MOVE	Fired continuously while a node/group is being dragged
node:move:end	EVENT_NODE_MOVE_END	Fired when a node has just been dragged
group:move:end	EVENT_GROUP_MOVE_END	Fired when a group has just been dragged
modeChanged	EVENT_SURFACE_MODE_CHANGED	Fired when the mode for a surface was changed
destroy	EVENT_DESTROY	Fired when a surface has been destroyed
group:collapse	EVENT_GROUP_COLLAPSE	Fired when a group has been collapsed
group:expand	EVENT_GROUP_EXPAND	Fired when a group has been expanded