流程图 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.idconsole.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>