Appearance

  2. Events

Events ​

addEdges ​

Event triggered when some edges are added to the graph.

Properties

addGraph ​

Event triggered when a graph is added (using addGraph method)

Properties

addNodes ​

Event triggered when some nodes are added to the graph.

Properties

animate ​

Triggered when the animation is called on nodes or edges.

Properties

  • duration number - The duration of the animation in milliseconds
  • easing Easing
  • elements NodeList|EdgeList - The nodes and edges affected by the animation
  • updatesPositions boolean - Whether the elements are being moved

beforeRemoveNodes ​

Triggers right before the nodes are removed, but they are still in the graph and their data is accessible.

Properties

clearGraph ​

Event triggered when ogma.clearGraph is called.

Properties

click ​

Event triggered when the user presses and releases a mouse button without moving in between. Also triggers as a left button when the user presses and releases their finger (on touch devices).

Properties

connectNodes ​

Triggered when two nodes are connected using the module.

Properties

destroy ​

Fired before Ogma instance is destroyed. Can be useful to remove some event listeners.

doubleclick ​

Event triggered when the user presses and releases a mouse button twice without moving in between.

Properties

dragEnd ​

Event triggered when the user releases a mouse button, if a onDragStart has been emitted before.

Properties

dragProgress ​

Event triggered every time the user moves the mouse after a onDragStart event has been emitted, as long as the user doesn't release the mouse. If a node or edge was under the cursor when the first onDragStart event was emitted, it is passed as the target property.

Properties

dragStart ​

Event triggered when the user presses a mouse button and then moves the mouse (without releasing the button).

Properties

drop ​

Triggered when the user drops an element into the Ogma container. Note that x and y arguments are Graph coordinates.

Properties

  • domEvent DragEvent
  • x number
  • y number

edgeClassAdded_MyClass ​

Triggered when the specified class (MyClass) is added to some edges.

Properties

edgeClassRemoved_MyClass ​

Triggered when the specified class (MyClass) is removed from some edges.

Properties

edgesSelected ​

Event triggered when edges are selected

Properties

edgesUnSelected ​

Event triggered when edges are unselected

Properties

frame ​

Event triggered when a frame is rendered.

geoDisabled ​

Triggered when the geo mode is switched off

geoEnabled ​

Triggered when the geo mode is activated

geoLoaded ​

Triggered when the background map images are loaded

gestureEnd ​

Event triggered when the user stop touching the screen with two fingers.

Properties

  • domEvent Event

gestureProgress ​

Event triggered when the users moves two fingers.

Properties

  • angle number
  • domEvent Event
  • dx number
  • dy number
  • scale number
  • x number
  • y number

gestureStart ​

Event triggered when the user touch the screen with two fingers.

Properties

  • domEvent Event

idle ​

Triggered when the graph is idle (no more camera movements, no more layout iterations).

keydown ​

Event triggered when the user presses the keyboard button.

Properties

  • domEvent KeyboardEvent
  • key string
  • keyCode number

keyup ​

Event triggered when the user releases the keyboard button.

Properties

  • domEvent KeyboardEvent
  • key string
  • keyCode number

layoutComputed ​

This event is fired after the layout algorithm has finished the calculations, but before the positions are applied. Use it for UI interactions, because if you would add position manipulations into the listener, they can interfere with the layout results.

Properties

  • name string

layoutEnd ​

Trigger the specified function when two nodes are connected using the module.

Properties

layoutStart ​

Triggered when two nodes are connected using the module.

Properties

mousedown ​

Event triggered when the user presses a mouse button. Also triggers as a left button when the user presses their finger (on touch devices).

Properties

mousemove ​

Event triggered when the user moves the mouse (or their finger in touch devices).

Properties

  • domEvent Event
  • dx number
  • dy number
  • source InputSource
  • x number
  • y number

mouseout ​

Event triggered when a node or edge stops being hovered.

Properties

  • domEvent Event - The original DOM event.
  • source InputSource - The source of the event.
  • target InputTarget - The target of the event.
  • x number - The x coordinate of the mouse.
  • y number - The y coordinate of the mouse.

mouseover ​

Event triggered when a node or edge is hovered.

Properties

mouseup ​

Event triggered when the user releases a mouse button. Also triggers as a left button when the user releases their finger (on touch devices).

Properties

mousewheel ​

Event triggered when the user uses the mouse wheel.

Properties

  • delta number - The delta of the mouse wheel.
  • domEvent Event - The original DOM event.
  • source InputSource - The source of the event.
  • target InputTarget - The target of the event.
  • x number - The x coordinate of the mouse.
  • y number - The y coordinate of the mouse.

move ​

Event triggered when camera is moving.

nodeClassAdded_MyClass ​

Triggered when the specified class (MyClass) is added to some nodes.

Properties

nodeClassRemoved_MyClass ​

Triggered when the specified class (MyClass) is removed from some nodes.

Properties

nodesDragEnd ​

Triggered when the user stop dragging some nodes.

Properties

  • end Array<{x: number, y: number}>
  • nodes NodeList
  • start Array<{x: number, y: number}>

nodesDragProgress ​

Triggered when the user drags some nodes.

Properties

nodesDragStart ​

Triggered when the user starts to drag some nodes.

Properties

nodesSelected ​

Event triggered when nodes are selected

Properties

nodesUnselected ​

Event triggered when nodes are unselected

Properties

refreshStyleRule ​

Property {StyleRule} rule Rule that has been applied

removeEdges ​

Event triggered when some edges are removed from the graph.

Properties

removeNodes ​

Event triggered when some nodes are removed from the graph.

Properties

rendererStateChange ​

Triggered when the renderer is requested, successfully initialized or encounters an error.

Properties

resize ​

Properties

  • difHeigh number
  • difWidth number
  • height, number
  • prevHeight number
  • prevWidth number
  • width number

rotate ​

Event triggered when camera is moving.

tooltipHide ​

Event triggered when a tooltip is hidden.

Properties

  • tooltip HTMLElement

tooltipShow ​

Event triggered when a tooltip is shown.

Properties

  • tooltip HTMLElement

transformationDestroyed ​

Triggered when a transformation is destroyed

Properties

transformationDisabled ​

Triggered when a transformation is disabled

Properties

transformationEnabled ​

Triggered when a transformation is activated

Properties

transformationRefresh ​

Triggered when a transformation is refreshed

Properties

transformationSetIndex ​

Triggered when a transformation index is set

Properties

updateEdgeData ​

Properties

  • changes changes: Array<{property: PropertyPath, edges: EdgeList, previousValues: Array<any>, newValues: Array<any>}>

updateNodeData ​

Trigger the specified function when the data of some nodes is updated.

Properties

  • changes Array<{property: PropertyPath, nodes: NodeList, previousValues: Array<any>, newValues: Array<any>}>

viewChanged ​

Event triggered when a camera movement (zoom, panning, rotation) is finished.

viewExportStart ​

Event triggered when exporting the graph in png, jpg or svg.

Properties

  • camera Camera

zoomStart ​

Triggered when camera starts zoom.

Properties

  • duration number
  • easing Easing
  • endZoom number Target zoom leve
  • startZoom number Zoom level at the start of the zoom.