LogicFlow 中 Vue 组件自定义节点高度更新的问题与解决方案

问题背景

在使用 LogicFlow 进行流程图开发时，开发者经常会遇到需要自定义节点样式的需求。通过 @logicflow/vue-node-registry 的 register 方法注册 Vue 组件来实现自定义节点是一种常见做法。然而，在实际开发中，当节点需要动态调整高度时，可能会遇到两个关键问题：

1. 画布重新渲染后，节点高度无法更新
2. 节点高度变化后，已连接的边会出现异常

问题分析

节点高度更新失效问题

当使用 Vue 组件注册自定义节点并尝试动态调整高度时，开发者通常会在组件内部监听 properties 变化，然后根据 DOM 高度设置节点高度。然而，在画布重新渲染后（例如执行一键美化布局后），再次尝试设置节点高度时会失效。

根本原因在于：当调用 lf.render() 方法时，LogicFlow 会清理画布上的旧元素引用，并创建新的元素引用（包括 view 和 model）。如果在事件监听中直接使用旧的 nodeModel 引用，就无法正确更新新创建的节点模型。

连接边异常问题

当节点高度发生变化时，由于节点的锚点位置发生了变化，但连接的边没有相应更新起点和终点位置，导致边显示异常。这表现为边与节点连接处出现偏移或不匹配的情况。

解决方案

节点高度更新问题的解决

要解决画布重新渲染后节点高度无法更新的问题，关键在于获取正确的节点模型引用。不应直接使用旧的 nodeModel，而应该通过以下方式获取当前节点模型：

const curNode = getGraph().getNodeModelById(eventData.id);

完整的事件监听处理应改为：

graph.eventCenter.on(EventType.NODE_PROPERTIES_CHANGE, (eventData) => {
    const curNode = getGraph().getNodeModelById(eventData.id);
    const keys = eventData.keys;
    const content = vueNodesMap[node.type];
    
    if (content && eventData.id === node.id) {
        let whiteProperties = "nodeName";
        let exclude = "height";
        if (keys.includes(whiteProperties) && !keys.includes(exclude)) {
            nodeName.value = eventData.properties.nodeName;
            nextTick(() => {
                if (nodeDom.value) {
                    nodeHeight.value += 20;
                    let height = nodeHeight.value;
                    curNode.setProperties({
                        height,
                    });
                    // 更新边的连接点
                    updateEdgePoints(curNode);
                }
            });
        }
    }
});

连接边异常问题的解决

对于节点高度变化后边的显示异常问题，需要手动更新边的起点和终点位置。可以通过以下方式实现：

function updateEdgePoints(nodeModel) {
    const newAnchors = nodeModel.anchors;
    
    // 更新入边
    nodeModel.incoming.edges.forEach((edge) => {
        const { targetAnchorId } = edge;
        const targetAnchor = newAnchors.find((anchor) => anchor.id === targetAnchorId);
        edge.updateEndPoint(targetAnchor);
    });
    
    // 更新出边
    nodeModel.outgoing.edges.forEach((edge) => {
        const { sourceAnchorId } = edge;
        const sourceAnchor = newAnchors.find((anchor) => anchor.id === sourceAnchorId);
        edge.updateStartPoint(sourceAnchor);
    });
}

最佳实践建议

1. 节点模型引用管理：在事件处理中，始终通过 getNodeModelById 获取最新的节点模型引用，避免使用可能已过时的引用。

2. 边更新时机：在节点尺寸或位置发生变化后，应立即更新与之相连的边，确保视觉一致性。

3. 性能优化：对于频繁更新的场景，可以考虑批量处理节点和边的更新，减少不必要的重绘。

4. 锚点自定义：对于复杂形状的节点，可以自定义锚点位置计算逻辑，确保高度变化时锚点位置计算准确。

通过以上解决方案，开发者可以有效地解决 LogicFlow 中 Vue 组件自定义节点高度更新和边显示异常的问题，实现更加灵活和可靠的流程图交互体验。