// 组件 Props 定义 interface IProps { width?: number | string, // 组件宽 height?: number | string, // 组件高 className?: string, // 组件classname columns: Array< columns > , // 跟antd的table的column的概念类似 nodeMenu?: Array< menu > , // 节点右键菜单配置 edgeMenu?: Array< menu > , // 线段右键菜单配置 actionMenu?: action[], // 右上角菜单配置，默认配置的key为 zoom-in(缩小), zoom-out(放大), fit(适配画布) config?: config, // 往下看 data: IData, // 数据入参，往下看 emptyContent?: JSX.Element; // 当表字段为空时显示内容 emptyWidth?: number | string; // 当表字段为空时表容器宽度 onLoaded(canvas: any): void, // 渲染完毕事件 onChange(data: any): void, // 图内数据变化事件 onFocusNode(node: any): void, // 聚焦节点事件 onFocusEdge(edge: any): void, // 聚焦线段事件 onFocusCanvas(): void, // 聚焦空白处事件 onDblClickNode ? (node: any) : void, // 双击节点事件 onSelect(nodes: any, edges: any): void, // 画布框选事件 selectable: boolean, // 是否可框选 }; // 节点字段每列的属性设置 interface columns { title?: string, // 每列的名字 key: string, // 每列的唯一标志，对应数据上的key值 width?: number, // 每列宽度(px) primaryKey: boolean, // 这列的key对应的value是否作为键值对 render?: (value: any, rowData: any) => void // 可自定义每列的样式 } // 画布显示配置 interface config { butterfly: any; // butterfly-dag的配置，参考：https://github.com/alibaba/butterfly/blob/dev/v4/docs/zh-CN/canvas.md showActionIcon?: boolean, // 是否展示操作icon：放大，缩小，聚焦 allowKeyboard?: boolean, // 允许键盘删除事件，TODO: 以后支持shift多选 collapse:{ enable: boolean, // 允许节点收缩 defaultMode: string // 默认以"展开/收缩"形式展示 }, titleRender?: (title: JSX.Element) => void, // 节点title的渲染方法 titleExtIconRender?: (node: JSX.Element) => void, // 节点右侧按钮的渲染方法 labelRender?: (label: JSX.Element) => void, // 线段label的渲染方法 minimap: { // 是否开启缩略图 enable: boolean, config: { nodeColor: any, // 节点颜色 activeNodeColor: any // 节点激活颜色 } } } // 输入数据定义 interface IData { nodes: { // 节点 id: string | number; title: string; fields: {id: string, [key: string]: any}[]; // 当前节点字段列表 [key: string]: any; }[], edges: { id: string | number, sourceNode: string, // 源节点ID targetNode: string, // 目标节点ID source: string, // 源节点列ID target: string, // 目标节点列ID }[] } // '节点/线段'的右键菜单配置 interface menu { title?: string, // 每列的展示的名字 key: string, // 每列的唯一标志，对应数据上的key值 render?: (key: string) => JSX.Element, // 支持每列的自定义样式 onClick?: (key: string, data: any) => void, // 每列的点击回调 } // action菜单（右上角） interface action { key: string; // 唯一标识 title: string; // 名字 icon: string | JSX.Element; // 图标 onClick: (canvas: any) => void; // 响应函数 disable: boolean; // false 则不显示 }