Node Based Graph Editor

• Typed Connection Ports
• Single-/Multiedge Ports
• Configurable Node Kinds
• Custom HTML Nodes
• Form Data Synchronization
• Auto-Layout

API

See src/demo.ts for the example Application

Editor

// Settings
interface EditorConfig {
    container: HTMLElement; // Viewport
    nodeKinds?: NodeKind[]; // Initial Node Kinds
    enableGrid?: boolean;
    gridSize?: number;	
    snapToGrid?: boolean;
    maxHistorySize?: number;
    curveType?: 'smooth' | 'monotone' | 'straight' | 'orthogonal'; // edge Rendering
  	typeColors?: Record<string, string>; // Port Tints
    minZoom?: number;
    maxZoom?: number;
    contextMenuItems?: ContextMenuItem[]; // Custom Actions
  }

  // Nodes
  editor.addNode(node)
  editor.getNode(nodeId)
  editor.removeNode(nodeId)
  editor.updateNodePosition(nodeId, x, y)
  editor.updateNodeData(nodeId, data)

  // Edges
  editor.addEdge(edge)
  editor.getEdge(edgeId)
  editor.removeEdge(edgeId)
  editor.getNodeEdges(nodeId)
  editor.getInputEdges(nodeId, portId?)
  editor.getOutputEdges(nodeId, portId?)


  // Selection
  editor.selectNode(nodeId)
  editor.deselectNode(nodeId)
  editor.toggleNodeSelection(nodeId)
  editor.toggleEdgeSelection(edgeId)
  editor.selectAll()
  editor.deleteSelected()
  editor.getSelection()
  editor.clearSelection()

  // Clipboard
  editor.copySelection()
  editor.cutSelection()
  editor.pasteClipboard()

  // Viewport
  editor.zoomTo(level)
  editor.pan(dx, dy)
  editor.fitView(padding?)
  editor.zoomToSelection(padding?)
  editor.autoLayout(options?)
  editor.getViewportState()

  // Node Kinds
  editor.getNodeKinds()
  editor.setNodeKinds(kinds)
  editor.addNodeKind(kind)
  editor.updateNodeKind(kind)
  editor.getNodeKind(kindId)
  editor.getNodePortDefinition(nodeId, portId, type)

  // History
  editor.undo()
  editor.redo()
  editor.canUndo()
  editor.canRedo()
  editor.getCommandHistory()

  // Events / lifecycle
  editor.getEvents()
  editor.clear()
  editor.destroy()

Events

• node:added
• node:removed
• node:moved
• node:updated
• edge:added
• edge:removed
• selection:changed
• viewport:changed
• graph:cleared

Graph Utils

GraphUtil.detectCycle(graph)
GraphUtil.topologicalSort(graph)
GraphUtil.getUpstreamNodes(graph, nodeId)
GraphUtil.getDownstreamNodes(graph, nodeId)
GraphUtil.getDependencies(graph, nodeId)
GraphUtil.findConnectedComponents(graph)
GraphUtil.findRootNodes(graph)
GraphUtil.findLeafNodes(graph)
GraphUtil.calculateNodeDepths(graph)
GraphUtil.getNeighbors(graph)