vue3中使用logicFlow的方法代码示例

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

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

<div id="simpleCircles" ref="container"></div>

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);

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

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

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

  plugins: [Menu],

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

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

节点node   边 edge

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