vue LogicFlow 流程图基础配置

LogicFlow 配置项：

LogicFlow 流程图上所有的节点实例操作以及事件new LogicFlow()初始化的详情 点击这里跳转官方说明

图片显示demo在文章底部

用到的依赖包
"@logicflow/core": "^2.1.7",
"@logicflow/extension": "^2.1.9",
"@logicflow/layout": "^2.0.7",

LogicFlow api

new LogicFlow 初始化基础DEMO CODE

this.lf = new LogicFlow({
   container: this.$refs.container,
   grid: true,
   // 等同于默认属性如下
   // grid: {
   //   size: 20, // 设置网格大小
   //   visible: true, // 设置是否可见，若设置为false则不显示网格线但是仍然保留size栅格的效果
   //   type: "dot", // 设置网格类型，目前支持 dot 点状和 mesh 线状两种
   //   config: {
   //     color: "#ababab",  // 设置网格的颜色
   //     thickness: 1, // 设置网格线的宽度
   //   },
   // },
   keyboard: {
     enabled: true,
   },
   // edgeTextDraggable: true,
   // adjustEdgeStartAndEnd: true,
   edgeType: 'bezier',
   // idGenerator(type) {
   //   return type + '_' + Math.random();
   // },
});

render渲染图数据的时候可以增加初始化数据
renderData是在data中配置的默认初始化数据，可以不填

this.lf.render(this.renderData);

LogicFlow 事件文档接口 外部拖入节点添加时触发demo

this.lf.on("node:dnd-add", (data) => {
  // 拖拽进入面板内执行
  console.log("node:dnd-add", data)
});

基于node:click事件输出的API各个模块默认初始化方法
LogicFlow 构造函数
graphModel 画布数据属性
nodeModel 节点数据属性
graphModel 事件
transformModel 控制画布的放大、缩小、平移
editConfigModel 控制页面编辑状态

this.lf.on("node:click", (data) => {
   console.log("node:click", data)
   const {lf} = this;
   let {id} = data.data;
   // 获取节点的model
   console.log("getNodeModelById", lf.getNodeModelById(id))
   // 获取节点的model数据
   console.log("getNodeDataById", lf.getNodeDataById(id))
   // 获取流程绘图数据
   console.log("getGraphData", lf.getGraphData())
   // 获取流程绘图原始数据
   console.log("getGraphRawData", lf.getGraphRawData())
   // 获取指定区域内的所有元素，此区域必须是 DOM 层。
   console.log("getAreaElement", lf.getAreaElement([100, 100], [200, 200]))
   console.log('========LogicFlow==================')
   console.log("lf", lf)

   console.log('========画布数据属性=================')
   const graphModel = lf.graphModel;
   console.log("graphModel", graphModel)
   console.log("graphModel", graphModel.height)

   console.log('========节点数据属性=================')
   const nodeModel = lf.getNodeModelById(id);
   console.log("nodeModel", nodeModel)
   nodeModel.updateText("hello world");

   console.log('========事件====================')
   const {eventCenter} = lf.graphModel;
   console.log("eventCenter", eventCenter)

   console.log('========transformModel====================')
   const {transformModel} = lf.graphModel;
   console.log("transformModel", transformModel)

   console.log('========editConfigModel====================')
   const {editConfigModel} = lf.graphModel;
   console.log("editConfigModel", editConfigModel)
 });

edgeModel 边数据属性，边只能点击线才可以捕获所以需要监听edge:click事件

// 点击边线体
this.lf.on("edge:click", (data) => {
  console.log("edge:click", data)
  console.log('========边数据属性====================')
  const {lf} = this;
  let {id} = data.data;
  const edgeModel = lf.getEdgeModelById(id);
  const edgeData = edgeModel.getData();
  console.log("edgeModel", edgeModel)
  console.log("edgeData", edgeData)
});

demo文件链接点击下载