流程图 LogicFlow

流程图 LogicFlow

官方文档：https://site.logic-flow.cn/tutorial/get-started

<script setup>
import { onMounted, ref } from 'vue'
import { forEach, map, has } from 'lodash-es'
import LogicFlow, { ElementState, LogicFlowUtil } from '@logicflow/core'
import { register, getTeleport } from '@logicflow/vue-node-registry'
import '@logicflow/core/es/index.css'

// 声明一个 ref 来存放该元素的引用
// 必须和模板里的 ref 同名
const activeNodeId = ref('1')
const container = ref(null)
let lf
const chartData = ref({
  // 所有的节点
  nodes: [
    {
      id: '1',
      type: 'rect',
      x: 500, // 节点中心 x 轴坐标
      y: 40,
      text: '开始',
      properties: {
        width: 150,
        height: 60,
        radius: 38, // 矩形节点特有，节点的圆角
        style: {
          stroke: '#FF8000',
          fill: activeNodeId.value === '1' ? '#FFA500' : '#ff0000',
        },
      }
    },
    {
      id: '2',
      type: 'rect', // 矩形
      x: 500,
      y: 150,
      text: '执行1',
      properties: {
        width: 150,
        height: 60,
      }
    },
    {
      id: '3',
      type: 'diamond', // 菱形
      x: 500,
      y: 270,
      text: '判断1',
      properties: {
        rx: 60,
        ry: 40,
      }
    },
    {
      id: '3-1',
      type: 'text',
      x: 480,
      y: 330,
      text: '是',
    },
    {
      id: '3-2',
      type: 'text',
      x: 630,
      y: 250,
      text: '否',
    },
    {
      id: '4',
      type: 'rect', // 矩形
      x: 500,
      y: 390,
      text: '执行2',
      properties: {
        width: 150,
        height: 60,
      }
    },
    {
      id: '5',
      type: 'rect', // 矩形
      x: 760,
      y: 390,
      text: '执行3',
      properties: {
        width: 150,
        height: 60,
      }
    },
    {
      id: '6',
      type: 'rect',
      x: 500, // 节点中心 x 轴坐标
      y: 500,
      text: '结束',
      properties: {
        width: 150,
        height: 60,
        radius: 38, // 矩形节点特有，节点的圆角
      }
    },
  ],
  // 所有的边，通过起始 sourceNodeId 和 targetNodeId 将两个节点相连。
  edges: [
    {
      type: 'polyline',
      sourceNodeId: '1',
      targetNodeId: '2',
    },
    {
      type: 'polyline',
      sourceNodeId: '2',
      targetNodeId: '3',
    },
    {
      type: 'polyline',
      sourceNodeId: '3',
      targetNodeId: '4',
    },
    {
      type: 'polyline',
      sourceNodeId: '3',
      targetNodeId: '5',
      endPoint: {
        x: 760,
        y: 360,
      },
    },
    {
      type: 'polyline',
      sourceNodeId: '4',
      targetNodeId: '6',
    },
    {
      type: 'polyline',
      sourceNodeId: '5',
      targetNodeId: '6',
      startPoint: {
        x: 760,
        y: 420,
      },
    },
  ],
})
onMounted(() => {
  lf = new LogicFlow({
    domId: 'flow',
    container: container.value,
    grid: false,
    plugins: [],
    stopZoomGraph: true, // 禁止缩放
    stopScrollGraph: true, // 禁止鼠标滚动移动画布
    stopMoveGraph: true,  // 禁止鼠标拖拽画布
    nodeTextEdit: false,
    edgeTextEdit: false,
    nodeSelectedOutline: false,
    isSilentMode: true, // 开启静默模式：画布的静默模式可以简单理解为“只读”模式，这种模式下，画布中的节点和边不可移动，不可进行文案修改，没有锚点。
    style: {
      rect: {
        stroke: '#6c8ebf',
        fill: '#dae8fc',
        strokeWidth: 2,
      },
      diamond: {
        stroke: '#6c8ebf',
        fill: '#dae8fc',
        strokeWidth: 2,
      },
      // text节点
      text: {
        color: "#000000",
        fontSize: 12,
        background: {
          fill: "transparent",
        },
      },
      // 节点文本
      nodeText: {
        color: "#000000",
        overflowMode: "default",
        lineHeight: 1.2,
        fontSize: 12,
      },
    }
  })
  lf.render(chartData.value)

  lf.on('node:click', (data) => {
    console.log(data, 'node clicked')
    activeNodeId.value = data.data.id
    console.log(activeNodeId.value)
    console.log(chartData.value)
  })
})
</script>

<template>
  <main>
    <div id="container" ref="container"></div>
  </main>
</template>

<style lang="scss" scoped>
main,
#container {
  width: 100%;
  height: 100%;
}
</style>