vue3中使用logicFlow

浅结 logicFlow 使用：

应用场景：vue3 中使用 logicFlow 绘制流程图
技术碎片应用：
vue3：ref,reactive, onMounted, watchEffect,nextTick,inject
logicFlow：节点，边，锚点，事件

官网：logicFlow

1. 引入下载 LogicFlow

npm install @logicflow/core
npm install @logicflow/extension

import LogicFlow from "@logicflow/core";
import "@logicflow/core/dist/style/index.css";

2. 使用

const lf=new LogicFlow({container: document.querySelector("#simpleCircles"),
        grid: true,
        plugins: [], //MiniMap, Menu 等的使用})

注册，节点，边

  lf.register(customNode);   // 自定义节点
  lf.register(customEdge);   // 自定义边

设置主题

lf.setTheme({
        bezier: {
            stroke: "#000000",
            strokeWidth: 1,
        },
 });

渲染数据

lf.render(data);

3. 引入使用 map

import {Menu，MiniMap} from "@logicflow/extension";
import "@logicflow/extension/lib/style/index.css";

plugins: [MiniMap],
lf.extension.miniMap.show(860, 0)

4. 引入使用 Menu

import {Menu，MiniMap} from "@logicflow/extension";
import "@logicflow/extension/lib/style/index.css";

  plugins: [Menu],

右键编辑菜单

 lf.extension.menu.setMenuConfig({nodeMenu: [],
            edgeMenu: [],
            graphMenu: [],});

5. 事件编辑监听

 lf.on("history:change", ({ data}) => {});

节点 node   边 edge

"node:dbclick"  // 双击
"edge:add"  // 添加
"edge:click"  // 单击
"edge:mouseleave" // 鼠标移出
history:change

最终可实现绘制出满足需求的多单节点多锚点连线(边)。

类似效果图：

小结至此，还请多多关注。