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

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

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

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

const add_nodes = () => {
    const id = nodes.length + 1
    const 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>