在LogicFlow中为锚点添加数字标识的方法

背景介绍

LogicFlow是一个优秀的流程图编辑框架，在实际开发中，我们经常需要对节点上的锚点进行自定义。锚点是节点上用于连接其他节点的关键点，默认情况下它们以简单的圆形显示。但在某些业务场景下，我们可能需要为这些锚点添加数字标识，以便更直观地区分不同的连接点。

实现原理

LogicFlow提供了灵活的节点和锚点自定义机制，通过继承基础节点类并重写相关方法，我们可以轻松实现锚点的自定义渲染。核心思路是重写getAnchorShape方法，在该方法中返回一个包含文本和圆形锚点的组合图形。

具体实现步骤

1. 创建自定义节点模型：继承RectNodeModel类，定义锚点的默认位置和ID
2. 创建自定义节点视图：继承RectNode类，重写getAnchorShape方法
3. 组合渲染：在锚点上方添加文本元素，下方保留原始圆形锚点

代码示例

// 自定义节点模型
class NumberedAnchorModel extends RectNodeModel {
    getDefaultAnchor() {
        return [
            {
                x: this.x - 10,
                y: this.y + this.height / 2,
                id: "1",  // 锚点ID作为显示的数字
            },
            {
                x: this.x + 10,
                y: this.y + this.height / 2,
                id: "2",
            },
        ];
    }
}

// 自定义节点视图
class NumberedAnchorNode extends RectNode {
    getAnchorShape(anchorData) {
        const { x, y, id } = anchorData;
        const style = this.props.model.getAnchorStyle(anchorData);
        const hoverStyle = {
            ...style,
            ...style?.hover,
        };
        
        // 返回包含文本和圆形的组合图形
        return h("g", {}, [
            // 数字文本
            h("text", {
                x: x,
                y: y - 10,  // 文本位于圆形上方
                textAnchor: "middle",  // 文本居中
                fontSize: 12,  // 可根据需要调整大小
                fill: "#333",  // 文本颜色
            }, id),
            
            // 悬停状态的圆形
            h("circle", {
                className: "lf-basic-shape lf-node-anchor-hover",
                cx: x,
                cy: y,
                ...hoverStyle,
            }),
            
            // 普通状态的圆形
            h("circle", {
                className: "lf-basic-shape lf-node-anchor",
                cx: x,
                cy: y,
                ...style,
            }),
        ]);
    }
}

实际效果

实现后，每个锚点上方会显示对应的数字标识，而下方保留原有的圆形锚点。当鼠标悬停时，锚点会按照预设的悬停样式变化，数字标识则保持静态显示。

扩展应用

这种技术不仅限于显示数字，还可以扩展为：

1. 显示字母或其他符号
2. 根据业务状态显示不同颜色的标识
3. 添加交互效果，如点击数字时触发特定事件
4. 实现动态变化的锚点标识

注意事项

1. 文本位置需要根据实际需求调整，确保不与节点内容重叠
2. 考虑不同缩放级别下的显示效果
3. 对于大量锚点的情况，需要确保标识清晰可辨
4. 在移动端使用时，要考虑触摸操作的便利性

通过这种自定义方式，可以大大增强LogicFlow在复杂业务场景下的表现力和可用性。