Event

17 min read

The events in this chapter can be binded or unbinded to graph by graph.on and graph.off.

The parameters of callbacks for common events, Node events, and Edge events are described in Behavior API.

Interaction Events

Listen to the interaction events such as click, mousemove by the following way:

graph.on(eventName, evt => {
  // some operations
})

Where, the event object evt has the properties:

  • type: The type of the event
  • name: The name of the event
  • x: The x coordinate on the canvas
  • y: The y coordinate on the canvas
  • clientX: The x coordinate about the client
  • clientY: The y coordinate about the client
  • canvasX: The x coordinate about parent DOM of the canvas
  • canvasY: The y coordinate about parent DOM of the canvas

(The differences between x/y, clientX/clientY, and canvasX/canvasY can be found in Coordinate Systems in G6

  • item: The item being manipulated, which can be a node, an edge, or a Combo)
  • target: The target Shape on the item being manupulated, or the canvas instance
  • bubbles: Whether bubbles
  • defaultPrevented: Whether prevent the original event
  • originalEvent: The original client event object. where the button can be used to distinguish the left/middle/right button of the mouse on some events like click or dblclick
  • timeStamp: The time stamp the event triggered
  • propagationStopped: Wheher stop the propogation
  • propagationPath: The triggering path

eventName can be refered to the following parts.

Common Interaction Event

Event NameDescription
clickActivated by clicking the left button of mouse or Enter button.
dblclickActivated by double clicking the left button of mouse.
mouseenterActivated when mouse enters an item. This is not a bubbled event, which means this event will not be activated when the mouse moves to the descendant items.
mousemoveActivated while the mouse is moving inside an item. It cannot be activated by keyboard.
mouseoutActivated while the mouse moves out of an item.
mouseoverActivated when the mouse moves over an item.
mouseleaveActivated when the mouse leaves an item. This is not a bubbled event, which means this event will not be activated when the mouse leaves the descendant items.
mousedownActivated when the left or right button is clicked down. It cannot be activated by keyboard.
mouseupActivated when the left or right button is released. It cannot be activated by keyboard.
contextmenuOpen the context menu when user clicks the right button of mouse. Demo.
dragstartActivated when user begins to drag. This event is applied on a dragged item.
dragActivated during the dragging process. This event is applied on a dragged item.
dragendActivated when user stops dragging. This event is applied on a dragged item.
dragenterActivated when user drags an item into a target item. This event is applied on a dragged item.
dragleaveActivated when user drags an item out of a target item. This event is applied on the target item.
dropActivated when user drops an item on a target item. This event is applied on the target item.
keydownActivated when user presses down a button on keyboard.
keyupActivated when user releases a button on keyboard.
wheelActivated when user scroll the wheel.
touchstartActivated when a finger touches the screen. If there are fingers on the screen already, it will be activated too.
touchmoveActivated during the processes of finger moving on the screen. Call preventDefault() to prevent scrolling.
touchendActivated when a finger leaves the screen.

Node Interaction Event

Event NameDescription
node:clickActivated when user clicks the left button of the mouse on the node.
node:dblclickActivated when user double clicks the left button of the mouse on the node.
node:mouseenterActivated when the mouse enters the node.
node:mousemoveActivated while the mouse is moving inside the node. It cannot be activated by keyboard.
node:mouseoutActivated while the mouse moves out of the node.
node:mouseoverActivated when the mouse moves over the node.
node:mouseleaveActivated when the mouse leaves the node.
node:mousedownActivated when the left or right button is clicked down on the node. It cannot be activated by keyboard.
node:mouseupActivated when the left or right button is released on the node. It cannot be activated by keyboard.
node:dragstartActivated when user begins to drag the node. This event is applied on the dragged node.
node:dragActivated during the dragging process on the node. This event is applied on the dragged node.
node:dragendActivated when user stops dragging on the node. This event is applied on the dragged node.
node:dragenterActivated when user drags an item into a target node item. This event is applied on the target node item.
node:dragleaveActivated when user drags an item out of a target node item. This event is applied on the target node item.
node:dragoverActivated when user drags an item over a target node item. This event is applied on the target node item
node:dropActivated when user drops an item on a target item. This event is applied on the target item.
node:touchstartOn touch screen, this event is activated when user begin to touch the node
node:touchmoveOn touch screen, this event is activated when user is touching the node
node:touchendOn touch screen, this event is activated when user finish touching the node
node:contextmenuOpen the context menu when user clicks the right button of mouse on the node. Demo.

Edge Interaction Event

Event NameDescription
edge:clickActivated when user clicks the left button of the mouse on the edge.
edge:dblclickActivated when user double clicks the left button of the mouse on the edge.
edge:mouseenterActivated when the mouse enters the edge.
edge:mousemoveActivated while the mouse is moving inside the edge. It cannot be activated by keyboard.
edge:mouseoutActivated while the mouse moves out of the edge.
edge:mouseoverActivated when the mouse moves over the edge.
edge:mouseleaveActivated when the mouse leaves the edge.
edge:mousedownActivated when the left or right button is clicked down on the edge. It cannot be activated by keyboard.
edge:mouseupActivated when the left or right button is released on the edge. It cannot be activated by keyboard.
edge:dragenterActivated when user drags an item into a target edge item. This event is applied on the target edge item.
edge:dragleaveActivated when user drags an item out of a target edge item. This event is applied on the target edge item.
edge:dragoverActivated when user drags an item over a target edge item. This event is applied on the target edge item
edge:dropActivated when user drops an item on a target edge item. This event is applied on the target edge item.
edge:contextmenuOpen the context menu when user clicks the right button of mouse on the edge. Demo.

Combo Interaction Event

Combo inherit all the interaction events of Node.

Canvas Interaction Event

Event NameDescription
canvas:clickActivated when user clicks the left button of the mouse on the canvas.
canvas:dblclickActivated when user double clicks the left button of the mouse on the canvas.
canvas:mouseenterActivated when the mouse enters the canvas.
canvas:mousemoveActivated while the mouse is moving inside the canvas. It cannot be activated by keyboard.
canvas:mouseoutActivated while the mouse moves out of the canvas.
canvas:mouseoverActivated when the mouse moves over the canvas.
canvas:mouseleaveActivated when the mouse leaves the canvas.
canvas:mousedownActivated when the left or right button is clicked down on the canvas. It cannot be activated by keyboard.
canvas:mouseupActivated when the left or right button is released on the canvas. It cannot be activated by keyboard.
canvas:contextmenuOpen the context menu when user clicks the right button of mouse on the canvas. Demo.
canvas:dragstartActivated when user begins to drag the canvas. This event is applied on the dragged canvas.
canvas:dragActivated during the dragging process on the canvas. This event is applied on the dragged canvas.
canvas:dragendActivated when user stops dragging on the canvas. This event is applied on the dragged canvas.
canvas:dragenterActivated when user drags the canvas into a target item. This event is applied on the target item.
canvas:dragleaveActivated when user drags the canvas out of a target item. This event is applied on the target item.
canvas:dropActivated when user drags and drops an item on the canvas.
canvas:touchstartOn touch screen, this event is activated when user begin to touch the canvas
canvas:touchmoveOn touch screen, this event is activated when user is touching the canvas
canvas:touchendOn touch screen, this event is activated when user finish touching the canvas

Timing Events

Before and after being called some functions, G6 exports the timing events. These timing events can be listened by the following way:

graph.on(timingEventName, evt => {
  // some operations
})

timingEventName is shown below:

Event NameDescription
beforerenderEmitted before graph.render / graph.read being called.
afterrenderEmitted after graph.render / graph.read being called.
beforeadditemEmitted before graph.add / graph.addItem being called.
afteradditemEmitted after graph.add / graph.addItem being called.
beforeremoveitemEmitted before graph.remove / graph.removeItem being called.
afterremoveitemEmitted after graph.remove / graph.removeItem being called.
beforeupdateitemEmitted before graph.update / graph.updateItem being called.
afterupdateitemEmitted after graph.update / graph.updateItem being called.
beforeitemvisibilitychangeEmitted before graph.showItem / graph.hideItem being called.
afteritemvisibilitychangeEmitted after graph.showItem / graph.hideItem being called.
beforeitemstatechangeEmitted before graph.setItemState being called.
afteritemstatechangeEmitted after graph.setItemState being called.
beforeitemrefreshEmitted before graph.refreshItem being called.
afteritemrefreshEmitted after graph.refreshItem being called.
beforeitemstatesclearEmitted before graph.clearItemStates being called.
afteritemstatesclearEmitted after graph.clearItemStates being called.
beforemodechangeEmitted before graph.setMode / graph.addBehaviors / graph.removeBehaviors being called.
aftermodechangeEmitted after graph.setMode / graph.addBehaviors / graph.removeBehaviors being called.
beforelayoutEmitted before graph layout. graph.render will layout the graph, so graph.render will activate this event as well.
afterlayoutEmitted after graph layout being done. graph.render will layout the graph, so graph.render will activate this event as well.
beforegraphrefreshpositionEmitted before graph.refreshPositions beging called
aftergraphrefreshpositionEmitted after graph.refreshPositions beging called
beforegraphrefreshEmitted before graph.refresh beging called
aftergraphrefreshEmitted after graph.refresh beging called
beforeanimateEmitted before global animation
afteranimateEmitted after global animation
beforecreateedgeEmitted before an edge is created by the built-in behavior create-edge
aftercreateedgeEmitted after an edge is created by the built-in behavior create-edge
beforecollapseexpandcomboEmitted before an combo is collapsed or expanded, the parameter action indicates collapse or expand
aftercollapseexpandcomboEmitted after an combo is collapsed or expanded, the parameter action indicates collapse or expand
graphstatechangeEmitted after graph.updateItemState being called.
afteractivaterelationsEmitted while activating a node by 'activate-relations' Behavior which is assigned to the the instance of Graph.
nodeselectchangeEmitted while the selected items are changed by 'brush-select', 'click-select' or 'lasso-select' Behavior which is assigned to the instance of Graph.
itemcollapsedEmitted while a node is clicked to collapse or expand by 'collapse-expand' Behavior which is assigned to the instance of TreeGraph.
tooltipchangeEmitted after the show/hide state is changed by 'tooltip' or 'edge-tooltip' Behavior which is assigned to the instance of Graph.
wheelzoomEmitted after the canvas is zoomed by 'zoom-canvas' Behavior which is assigned to the instance of Graph.
viewportchangeEmitted after the canvas is translated by graph.moveTo, graph.translate, and graph.zoom.
dragnodeendEmitted while drag node end by 'drag-node' Behavior.
stackchangeEmitted while the redo or undo stacks are changed.

Timing Events in the Plugins

TimeBar plugin:

Event NameDescription
valuechangeEmitted when the value range of the timebar is chaged.
timebarstartplayEmitted when the timeline starts to play.
timebarendplayEmitted when the timeline ends playing.

Tooltip:

Event NameDescription
tooltipchangeEmitted when the Tooltip is changed.

Callback Parameters

The callback paramters are different from custom events.

beforerender / afterrender

No parameters.

beforeadditem

NameTypeDescription
typeStringThe type of the item to be added.
modelObjectThe data model of the item to be added.

afteradditem

NameTypeDescription
itemItemThe added item.
modelObjectThe data model of the added item.

beforeremoveitem / afterremoveitem

NameTypeDescription
itemItemThe removed item data model.
type'node' / 'edge' / 'combo'The type of removed item.

beforeupdateitem / afterupdateitem

NameTypeDescription
itemItemThe updated item.
modelObjectThe data model of the item to be updated.

beforeitemvisibilitychange / afteritemvisibilitychange

NameTypeDescription
itemItemThe manipulated item.
visibleBooleanWhether the item is visible. true for visible, false for invisible.

beforeitemstatechange / afteritemstatechange

NameTypeDescription
itemItemThe manipulated item.
stateStringThe state name.
enabledBooleanWheter the state is enabled. true for enabled, false for unabled.

beforeitemstatesclear / afteritemstatesclear

NameTypeDescription
itemItemThe manipulated item.
statesArray / StringThe states to be cleared.

beforemodechange / aftermodechange

NameTypeDescription
modeStringThe name of current mode.

beforeitemrefresh / afteritemrefresh

NameTypeDescription
itemItemThe manipulated item.

beforelayout / afterlayout

No parameters.

afteractivaterelations

NameTypeDescription
itemItemThe manipulated item.
actionStringThe name of the manipulation.

graphstatechange

NameTypeDescription
statesObjectThe items with different states, e.g. { hover: [Node, Node], selected: [ Node ] }

afteractivaterelations

NameTypeDescription
itemItemThe manipulated item currently
actionStringThe current action name

nodeselectchange

NameTypeDescription
targetItemThe manipulated item.
selectedItemsObjectAll selected items, formed as { nodes: [...], edges: [...]}.

beforecreateedge / aftercreateedge

beforecreateedge has no parameters. The parameters of aftercreateedge are:

NameTypeDescription
edgeItemThe created edge

beforecollapseexpandcombo / aftercollapseexpandcombo

NameTypeDescription
actionstringThe action, 'collapse' or 'expand'
comboItemThe manipulated combo

itemcollapsed

NameTypeDescription
itemItemThe manipulated item.
collapsedBooleanThe collapsed state of the manipulated item after this operation.

tooltipchange

NameTypeDescription
itemItemThe manipulated item.
actionStringThe 'show' or 'hide' state of this tooltip.

wheelzoom

NameTypeDescription
deltaXNumberThe x-axis direction of the wheel scroll, value is 1, 0, or -1, where 0 means no scrolling on this direction.
deltaYNumberThe y-axis direction of the wheel scroll, value is 1, 0, or -1, where 0 means no scrolling on this direction.
... Other parameters of wheel event.

viewportchange

NameTypeDescription
action'translate' / 'move' / 'zoom'The action of view port changing.
matrixArrayThe matrix of the graph after the view port changed.

dragnodeend

NameTypeDescription
itemsItem[]The manipulated items.
targetItemnull/Node/ComboThe position where the node is placed after dragging, the default is null, that is, placed on the canvas.

stackchange

NameTypeDescription
redoStackObject[]The redo stack.
undoStackObject[]The undo stack.

valuechange

NameTypeDescription
valuenumber[]The current value range, value[0] is the start and value[1] is the end.

timelinestart / timelineend

No parameters.

tooltipchange

NameTypeDescription
itemItemThe item the tooltip related to (a node or an edge).
action'show' / 'hide'The current action.