butterfly-react

July 25, 2021 · View on GitHub

Install

Using npm:

$ npm i butterfly-react butterfly-dag -S

Usage

please refer to React Demo

属性

PropTypeDescriptionDefault
nodesINode[][]
egdesIEdge[][]
groupsIGroup[][]
optionsObjectsee
onEdgesChange(IEdge[]) => void;
onCreateEdge(IEdge) => void;
onReconnectEdge(res) => void;Triggered when a line is dragged from an anchor to a new endpoint
onDeleteEdge(IEdge) => void;
classNameString
onLoaded(canvas) => void;Canvans onLoaded event

res

  • Same as the original(butterfly-dag) reconnection return parameter
  • If you don't understand, you can console.log

INode

  interface INode {
    id: string | number;          // recommend string (require)
    render: () => JSX.Element;    // Custom render function (require)
    // Other Options see https://github.com/alibaba/butterfly/blob/master/docs/zh-CN/node.md#node-attr
  }

IEdge

  interface IEdge {
    id: string | number;         // recommend string (require)
    labelRender?: () => JSX.ESLint; // Custom label render function (optional)
    // Other Options see https://github.com/alibaba/butterfly/blob/master/docs/zh-CN/edge.md
  }

IGroup

  interface IGroup {
    id: string | number;
  }