HTMLGraph
Star

Change State Events

HTMLGraph offers a basic event system to handle changes in the canvas state. Events can be subscribed to via the subscribe method provided by the EventHandler instance. Once the listener is no longer necessary, simply call unsubscribe with the same callback to remove it.

Graph Node Events #

    
canvas.graph.onAfterNodeAdded.subscribe((nodeId) => {
  console.log('new node has just been added');
  console.log(canvas.graph.getNode(nodeId));
});

  
    
canvas.graph.onAfterNodeUpdated.subscribe((nodeId) => {
  console.log('node has just been updated');
  console.log(canvas.graph.getNode(nodeId));
});

  
    
canvas.graph.onAfterNodePriorityUpdated.subscribe((nodeId) => {
  console.log('node z-index has just been changed');
  console.log(canvas.graph.getNode(nodeId).priority);
});

  
    
canvas.graph.onBeforeNodeRemoved.subscribe((nodeId) => {
  console.log('node is about to be removed');
  console.log(canvas.graph.getNode(nodeId));
});

Note: Nodes removed via canvas.clear() are managed separately within the canvas.graph.onBeforeClear handler.

Graph Port Events #

    
canvas.graph.onAfterPortMarked.subscribe((portId) => {
  console.log('new port has just been marked');
  console.log(canvas.graph.getPort(portId));
});

  
    
canvas.graph.onAfterPortUpdated.subscribe((portId) => {
  console.log('port has just been updated');
  console.log(canvas.graph.getPort(portId));
});

  
    
canvas.graph.onBeforePortUnmarked.subscribe((portId) => {
  console.log('port is about to be unmarked');
  console.log(canvas.graph.getPort(portId));
});

Note: Ports unmarked via canvas.clear() are managed separately within the canvas.graph.onBeforeClear handler.

Graph Edge Events #

    
canvas.graph.onAfterEdgeAdded.subscribe((edgeId) => {
  console.log('new edge has just been added');
  console.log(canvas.graph.getEdge(edgeId));
});

  
    
canvas.graph.onAfterEdgeUpdated.subscribe((edgeId) => {
  console.log('edge has just been updated');
  console.log(canvas.graph.getEdge(edgeId));
});

  
    
canvas.graph.onAfterEdgePriorityUpdated.subscribe((edgeId) => {
  console.log('edge z-index has just been changed');
  console.log(canvas.graph.getEdge(edgeId).priority);
});

  
    
canvas.graph.onBeforeEdgeRemoved.subscribe((edgeId) => {
  console.log('edge is about to be removed');
  console.log(canvas.graph.getEdge(edgeId));
});

Note: Edges removed via canvas.clear() are managed separately within the canvas.graph.onBeforeClear handler.

Other Graph Events #

    
canvas.graph.onBeforeClear.subscribe(() => {
  console.log('all nodes, ports, and edges are about to be removed');
});

Viewport Events #

    
canvas.viewport.onBeforeUpdated.subscribe(() => {
  console.log('viewport state is about to be updated');
  console.log(canvas.viewport.getViewportMatrix());
});

  
    
canvas.viewport.onAfterUpdated.subscribe(() => {
  console.log('viewport state has just been updated');
  console.log(canvas.viewport.getViewportMatrix());
});

  
    
canvas.viewport.onAfterResize.subscribe(() => {
  console.log('viewport has just been resized');
  console.log(canvas.viewport.getDimensions());
});

Canvas Events #

    
canvas.onBeforeDestroy.subscribe(() => {
  console.log('canvas is about to be destroyed');
});