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对应的名称 |