a simple dag editor tool for web

Demo

GitHub

usage

install

yarn add simple-dag-editor

init

import { Editor } from 'simple-dag-editor'

const editor = new Editor({
  container: string, // editor container dom selector
  page: string,  // editor canvas page container dom selector
  itempanel: string,  // editor items panel container dom selector
})

register shape

editor.registerShape(shapeName, shape)

interface IShape {
  shape: string,  // shape name
  w: number,  // width
  h: number,  // height
  name: string, // node-item shown text
  anchors: IAnchor,
  [customProp: string]: any,  // any custom define property
}
interface IAnchor {
  input?: number,     // input count
  output?: number,    // output count
}

callback

interface INode extends IShape {
  x: number,  // canvas position
  y: number,  // canvas postion
}

interface IEdge {
  id: string,
  source: string,   // source node id
  sourceAnchorIndex: number,    // source node output anchor index
  target: string,   // target node id
  targetAnchorIndex: number,    // target node input anchor index
}

interface callback {
  selectedNodeChange: (node: INode) => void,
  nodeAdded: (node: INode) => void,
  nodeDeleted: (nodeId: string) => void,
  edgeAdded: (edge: IEdge) => void,
  edgeDeleted: (edge: IEdge) => void,
}

editor.on(`${callbackEventName}`, callback)

TODO

• ~~nodeDeleted~~
• ~~nodeAdded~~
• ~~select edge~~
• ~~delete edge~~
• ~~edgeAdded & edgeDeleted callback~~
• ~~drag canvas~~
• scale
• editor.update()