1.0.1 • Published 1 year ago
@visom-npm/blueprint v1.0.1
install
npm install @visom-npm/blueprint;use
import blueprint from '@visom-npm/blueprint';
import '@visom-npm/blueprint/blueprint.css';
<canvas
id='mycanvas'
width="600"
height="720"
></canvas>
// 初始化
this.blueprint = new blueprint( ({ startNode:'开始节点', targetNode:'目标节点' }) => {
// 连接两个节点时调用此处验证函数，返回 true 时可以连接
return true; // true or false
} );
// 创建节点
this.blueprint.registerNodeType(
route, // string 路径，需要以 '/' 结尾，如 a/ ; a/b/ ; a/b/c/
nodeObj, // Object 节点参数，格式如下:
// { title:'节点名称', inputs:[{name:'',inputType:''}], outputs:[{name:'',outputType:''}] }
nodeInfo, // Object 节点信息，可自定义参数（最终存储在每个节点的 properties 参数中）
// 注意⚠️：nodeInfo 中必须包含唯一值 nodeId 作为参数，以此对路径解析
)methods
| 方法 | 描述 | 参数 | 返回格式参考 |
|---|---|---|---|
| load | 加载蓝图数据 | object | - |
| getNodes | 获取蓝图数据 | - | {nodes, process}返回两个值，第一个为蓝图原始数据，可用来初始化加载蓝图，第二个为处理后的蓝图数据（注意：如果只想获取 process 的值，可调用下一行👇的方法） |
| getBlueprintNodes | 传入蓝图格式，获取处理后的数据 | object | {resRoute, propsModel,outputModel}返回三个参数，第一个为蓝图所对应的所有路径，第二个为蓝图每个节点id对应的内容，第三个为蓝图内每个节点的输出id对应的名称 |