aliyun/react-visual-modeling

// 组件 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 则不显示
}