React版小蝴蝶(butterfly-react)

July 25, 2021 · View on GitHub

安装

$ npm i butterfly-react butterfly-dag -S

用法

请参考 React Demo

属性

Prop类型说明默认值
nodesINode[] (定义放下看)[]
egdesIEdge[] (定义往下看)[]
groupsIGroup[] (定义往下看)[]
optionsObject参考官网定义
onEdgesChange(IEdge[]) => void;
onCreateEdge(IEdge) => void;
onReconnectEdge(res(同原生重连返回参数)) => void;当线从一个锚点拖拽到新的锚点时触发
onDeleteEdge(IEdge) => void;
classNameString
onLoaded(canvas) => void;画布加载完毕后返回画布实例
  interface INode {
    id: string | number;          // 推荐string
    render: () => JSX.Element;    // 自定义渲染函数
    // ... 上述为必填属性, 其他属性参考官网https://github.com/alibaba/butterfly/blob/master/docs/zh-CN/node.md#node-attr
  }

  interface IEdge {
    id: string | number;         // 推荐 string
    labelRender?: () => JSX.ESLint; // 自定义label渲染函数,可不填
    // ...其他属性参考官方https://github.com/alibaba/butterfly/blob/master/docs/zh-CN/edge.md
  }

  interface IGroup {
    id: string | number;
  }