使用Vue-Flow创建一个流程图可视化节点坐标查询器

在开发中遇到这样一个需求，需要后端返回数据前端网页生成流程图，由于流程图使用了Vue-Flow，所以需要坐标来辅助后端生成数据。

首先引入方法并定义添加节点数据

const { updateEdge, addEdges, addNodes} = useVueFlow()

const add_nodes = () => {const id = nodes.length + 1const newNode = {id: `${id}`,label: `Node ${id}`,position: { x: 100, y: 100 },sourcePosition: Position.Right,targetPosition: Position.Left,}addNodes([newNode])nodes.push(newNode)
}

nodes的数据结构请看这篇文章：基于Vue-Flow实现可变流程图

第二步将节点改为可连接节点

function onEdgeUpdateStart(edge) {console.log('start update', edge)
}function onEdgeUpdateEnd(edge) {console.log('end update', edge)
}function onEdgeUpdate({ edge, connection }) {updateEdge(edge, connection)
}function onConnect(params) {addEdges([params])
}

<VueFlow :nodes="nodes" :edges="edges" class="test" ref="vue_flow" @edge-update="onEdgeUpdate"@connect="onConnect"@edge-update-start="onEdgeUpdateStart" @edge-update-end="onEdgeUpdateEnd">
</VueFlow>

接下来定义查询坐标方法

let position_data = reactive([])
let edge_position_data = reactive([])
const get_position = () => {position_data.splice(0, position_data.length)edge_position_data.splice(0, edge_position_data.length)for (let i = 0; i < vue_flow.value.nodes.length; i++) {let obj = {id: vue_flow.value.nodes[i].id,label: vue_flow.value.nodes[i].data.label,type: vue_flow.value.nodes[i].type,position: vue_flow.value.nodes[i].position}let edge_obg={id: vue_flow.value.edges[i].id,source: vue_flow.value.edges[i].source,target: vue_flow.value.edges[i].target,type: vue_flow.value.edges[i].type,}position_data.push(obj)edge_position_data.push(edge_obg)}
}

使用pre标签展示数据

<div id="show_node_msg_box"><pre><span>nodes:</span>{{position_data }}</pre><pre><span>edges:</span>{{edge_position_data }}</pre>
</div>