Page Events

Usage

import GGEditor, { Flow } from 'gg-editor';

<GGEditor>
  <Flow
    onClick={(e) => {
      console.log(e);
    }}
  />
</GGEditor>

Event Target

Property Description
action The actions includes: add, update, remove, changeData.
item The item in the graph.
shape The sharp of the graph.
x The x cooridate of the item.
y The y cooridate of the item.
domX The x cooridate of the item to the DOM.
domY The y cooridate of the item to the DOM.
domEvent The native DOM event.
currentItem The current item in the drag event.
currentShape The current sharp in the drag event .
toShape The sharp in mouseleave and dragleave events.
toItem The item in mouseleave and dragleave events.

Event list

Synthetic Events

These SyntheticEvent are available with the one of the following prefixes: node, edge, group, guide or anchor. For example:

import GGEditor, { Flow } from 'gg-editor';

<GGEditor>
  <Flow
    onClick={() => {}}       // triggered when chlicking on a canvas
    onNodeClick={() => {}}   // triggered when chlicking on a node in a canvas
    onEdgeClick={() => {}}   // triggered when chlicking on an edge in a canvas
    onGroupClick={() => {}}  // triggered when chlicking on a group in a canvas
    onGuideClick={() => {}}  // triggered when chlicking on a guide in a canvas
    onAnchorClick={() => {}} // triggered when chlicking on an anchor in a canvas
  />
</GGEditor>
Event Name Description
onClick The onClick event is fired when a pointing device button (usually a mouse’s primary button) is pressed and released on a single item.
onDoubleClick The onDoubleClick event is fired when a pointing device button (usually a mouse’s primary button) is clicked twice on a single item.
onMouseEnter The onMouseEnter event is fired when a pointing device (usually a mouse) is moved over the item that has the listener attached.
onMouseLeave The onMouseLeave event is fired when the pointer of a pointing device (usually a mouse) is moved out of an item that has the listener attached to it.
onMouseDown The onMouseDown event is fired when a pointing device button is pressed on an item.
onMouseUp The onMouseUp event is fired when a pointing device button is released over an item.
onMouseMove The onMouseMove event is fired when a pointing device (usually a mouse) is moved while over an item.
onDragStart The onDragStart event is fired when the user starts dragging an item.
onDrag The onDrag event is fired every few hundred milliseconds as an item is being dragged by the user.
onDragEnd The onDragEnd event is fired when a drag operation is being ended (by releasing a mouse button or hitting the escape key).
onDragEnter The onDragEnter event is fired when a dragged item enters a valid drop target.
onDragLeave The onDragLeave event is fired when a dragged item leaves a valid drop target.
onDrop The onDrop event is fired when an item is dropped on a valid drop target.
onContextMenu The onContextMenu event is fired when the right button of the mouse is clicked (before the context menu is displayed), or when the context menu key is pressed (in which case the context menu is displayed at the bottom left of the focused element, unless the element is a tree, in which case the context menu is displayed at the bottom left of the current row).

Other Events

Event Name Description
onMouseWheel The onMouseWheel interface represents events that occur due to the user turning a mouse wheel.
onKeyDown The onKeyDown event is fired when a key is pressed down
onKeyUp The onKeyUp event is fired when a key is released.
onBeforeChange This event is fired before the onChange event.
onAfterChange This event is fired after the onChange event.
onBeforeChangeSize This event is fired before the size is changed.
onAfterChangeSize This event is fired after the size is changed.
onBeforeViewportChange This event is fired before the onViewportChange event.
onAfterViewportChange This event is fired after the onViewportChange event.
onBeforeItemActived This event is fired before the item is activated.
onAfterItemActived This event is fired after the item is activated.
onBeforeItemInactivated This event is fired before the item is inactivated.
onAfterItemInactivated This event is fired after the item is inactivated.
onBeforeItemSelected This event is fired before the item is selected.
onAfterItemSelected This event is fired after the item is selected.
onBeforeItemUnselected This event is fired before the item is unselected.
onAfterItemUnselected This event is fired after the item is selected.
onKeyUpEditLabel This event is fired when a key is released and the focus is on the label editing model.