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 }