vue流程图LogicFlow插件的使用

1.安装

npm install @logicflow/core

npm install @logicflow/extension

2.使用

// CmRectNode.js
import { RectNode, RectNodeModel } from '@logicflow/core'

class CmRectModel extends RectNodeModel {
  initNodeData(data) {
    super.initNodeData(data)
    this.width = 200
    this.height = 80
    this.radius = 50
  }
}

class CmRectView extends RectNode {}

export default {
  type: 'CmRect',
  view: CmRectView,
  model: CmRectModel
}

<template>
  <div :id="id"></div>
</template>

<script lang="ts" setup>
import LogicFlow from '@logicflow/core'
import '@logicflow/core/dist/style/index.css'
import rectLarge from './nodeModels/CmRectLg' // 自定义封装的node节点样式

const props = defineProps({
  id: {
    type: String
  },
  flow: {
    type: Object
  }
})
const pageInit = id => {
  const lf = new LogicFlow({
    container: document.getElementById(id),
    grid: true,
    isSilentMode: true,
    stopZoomGraph: true, // 禁止缩放
    stopScrollGraph: true, // 禁止鼠标滚动移动画布
    stopMoveGraph: true // 禁止拖动画布
  })
  lf.batchRegister([rectLarge])
  lf.render(props.flow)
}
const flow = ref({
  nodes: [
    {
      id: '1',
      type: 'rect',
      x: 100,
      y: 150,
      text: '启动示例程序'
    },
    {
      id: '2',
      type: 'rect', // rectLarge
      x: 300,
      y: 150,
      text: '扫描零件的二\r维码，获取零\r件材质信息'
    }
  ],
  edges: [
    {
      sourceNodeId: '1',
      targetNodeId: '2',
      type: 'polyline',
      startPoint: {
        x: 1000,
        y: 150
      },
      endPoint: {
        x: 1020,
        y: 350
      }
    }
  ]
})
onMounted(() => {
  pageInit(props.id)
})
</script>

<style></style>