Visbar-blueprint

Visbar搭建蓝图

快速开始

npm i visbar-blueprint --save
# 或
yarn add visbar-blueprint --save

<BluePrint config={blueprintConfig} initGraph={{}} onChange={this.handleChange} />

必要依赖

• react
• react-dom
• antd
• jquery
• react-monaco-editor

入参配置

| 参数名 | 参数描述 | 参数类型 | 默认值 | | --- | --- | --- | --- | | config | 蓝图大纲树配置 | any | {} | | initGraph | 初始化蓝图状态 | any | - | | onChange | 蓝图状态数据变更的回调 | (graph: any) => any | - |

数据结构:

config数据结构:

interface IBaseConfig {
  name: string;   // 控件名
  action: {       // 控件的触发动作集合
    ...
  },
  event: {        // 控件触发的事件集合
    ...
  }
}
type ConfigType = { [id: string]: IBaseConfig; }

graph数据结构(蓝图输出数据结构)

interface NextPointer {
  id: string;           // 下一步链接节点id
  actionName: string;   // 触发节点的动作名
  eventName: string;    // 当前触发事件名
}
interface IBaseGraph {
  type: string;  // 控件类型
  next?: Array<NextPointer>;
  [key: string]: any;  // 这里对于node节点和condition节点会添加其对应的事件节点进去
}
type GraphType = { [id: string]: IBaseGraph }