vue3 结合@logicflow/core 实现流程图

实现效果：
安装：

 npm install @logicflow/core --save

封装：
logicFlow.vue

<template>
  <div class="role">
    <div id="LogicFlow"></div>
  </div>
</template>
<script setup>
import LogicFlow from "@logicflow/core";
import "@logicflow/core/dist/style/index.css";
import ButtonNode from "./ButtonNode.js";
const init = () => {
  const lf = new LogicFlow({
    container: document.querySelector("#LogicFlow"),
    width: 1200,
    height: 700,
    grid: false,
    adjustNodePosition: false,
    textEdit: false,
    stopZoomGraph: true,
    stopScrollGraph: true,
    stopMoveGraph: true,
    keyboard: {
      enabled: true,
    },
    edgeType: "better-line",
  });
  lf.register(ButtonNode);
  lf.setTheme({
    nodeText: {
      color: "#fff000",
      overflowMode: "ellipsis",
      lineHeight: 1,
      fontSize: 12,
    },
    polyline: {
      stroke: "#000",
      strokeWidth: 0.5,
    },
    arrow: {
      offset: 0, // 箭头垂线长度
      verticalLength: 0, // 箭头底线长度
    },
    circle: {
      // 圆形样式
      fill: "#238899",
      r: 10,
      strokeDasharray: "none",
    },
    rect: {
      fill: "#9a9b9c",
      strokeDasharray: "none",
      className: "custom-cls",
      radius: 30,
    },
  });
  lf.on("custom-event:clone-team", (e) => {
    const data = e.getData();
    lf.dnd.startDrag({
      type: "team-node",
      text: data.text.value,
      properties: data.properties,
    });
  });
  // lf.render(
  //   groupData
  // )
  lf.graphModel.transformModel.zoom(0.9);
  lf.render({
    nodes: [
      {
        id: "1",
        type: "button-node",
        x: 100,
        y: 250,
        width: "200px",
        properties: {
          title: "协会会长",
          name: "张三",
        },
      },
      {
        id: "2",
        type: "button-node",
        x: 300,
        y: 250,
        properties: {
          title: "集团有限公司",
          name: "董事长",
        },
      },
      {
        id: "3",
        type: "button-node",
        x: 500,
        y: 250,
        properties: {
          title: "hello",
          name: "world",
        },
      },
      {
        id: "4",
        type: "button-node",
        x: 700,
        y: 100,
        properties: {
          title: "hello",
          name: "world",
        },
      },
      {
        id: "5",
        type: "button-node",
        x: 700,
        y: 250,
        properties: {
          title: "hello",
          name: "world",
        },
      },
      {
        id: "6",
        type: "button-node",
        x: 700,
        y: 350,
        properties: {
          title: "hello",
          name: "world",
        },
      },
    ],
    edges: [
      {
        sourceNodeId: "1",
        targetNodeId: "2",
        type: "polyline",
      },
      {
        sourceNodeId: "2",
        targetNodeId: "3",
        type: "polyline",
      },
      {
        sourceNodeId: "3",
        targetNodeId: "4",
        type: "polyline",
      },
      {
        sourceNodeId: "3",
        targetNodeId: "5",
        type: "polyline",
      },
      {
        sourceNodeId: "3",
        targetNodeId: "6",
        type: "polyline",
      },
    ],
  });
};
onMounted(() => {
  init();
});
</script>
<style lang="scss" scoped>
#LogicFlow {
  width: 100%;
  height: 400px;
}
</style>

ButtonNode.js

import { HtmlNode, HtmlNodeModel } from "@logicflow/core";

class ButtonNode extends HtmlNode {
  setHtml(rootEl) {
    const { properties } = this.props.model;

    const el = document.createElement("div");
    el.className = "uml-wrapper";
    const html = `
      <div style='background:#5498c1;color: #FFFFFF;border-radius: 5px;text-align:center;white-space:nowrap;padding: 5px'>
        <div style='font-size: 16px;font-weight: bold;'>${properties.name}</div>
        <div style='font-size: 14px;'>${properties.title}</div>
      </div>
    `;
    el.innerHTML = html;
    rootEl.innerHTML = "";
    rootEl.appendChild(el);
    window.stop = (ev) => {
      ev.stopPropagation();
    };
  }
}

class ButtonNodeModel extends HtmlNodeModel {
  // constructor(props) {
  //   super(props)
  //   this.width = props.width
  // }
  setAttributes() {
    if (this.properties.name && this.properties.title) {
      this.width = this.properties.title.length * 17
    } else {
      this.width = this.properties.name.length * 15
    }

    this.height = 50;
    this.text.editable = false;
  }
}
export default {
  type: "button-node",
  view: ButtonNode,
  model: ButtonNodeModel
};