// 组件 Props 定义 interface IProps { width?: number | string, // 组件宽 height?: number | string, // 组件高 className?: string, // 组件classname columns: Array< columns > , // 跟antd的table的column的概念类似 nodeMenu: Array< menu > , // 节点右键菜单配置 edgeMenu: Array< menu > , // 线段右键菜单配置 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, // 聚焦空白处事件 }; // 节点字段每列的属性设置 interface columns { title?: string, // 每列的名字 key: string, // 每列的唯一标志，对应数据上的key值 width?: number, // 每列宽度(px) primaryKey: boolean, // 这列的key对应的value是否作为键值对 render?: (value: any, rowData: any) => void // 可自定义每列的样式 } // 画布显示配置 interface config { 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, // 每列的点击回调 }