LogicFlow中实现可动态添加节点的折线设计

概述

在流程图编辑工具LogicFlow中，折线(polyline)是一种常见的连接线类型。实际业务场景中，经常需要在折线上动态添加节点，类似钉钉流程图中的"加号"按钮功能。本文将详细介绍如何在LogicFlow中实现这一功能。

核心实现思路

实现折线上动态添加节点的功能主要包含以下几个关键点：

1. 自定义折线样式：继承基础Polyline类，重写相关方法
2. 添加控制点：在折线的每个线段中点位置添加可点击的控制点
3. 交互事件处理：为控制点绑定点击事件，触发节点添加逻辑
4. 位置计算：精确计算新节点应该插入的位置坐标

具体实现步骤

1. 创建自定义折线类

首先需要创建一个继承自Polyline的自定义折线类，这是实现功能扩展的基础：

import { Polyline } from 'LogicFlow';

class CustomPolyline extends Polyline {
  // 重写相关方法
}

2. 添加控制点

在折线的每个线段中间位置添加控制点元素：

class CustomPolyline extends Polyline {
  // 重写绘制方法
  draw() {
    super.draw();
    this.addControlPoints();
  }
  
  addControlPoints() {
    const points = this.points;
    for (let i = 0; i < points.length - 1; i++) {
      const start = points[i];
      const end = points[i + 1];
      const midPoint = {
        x: (start.x + end.x) / 2,
        y: (start.y + end.y) / 2
      };
      this.drawControlPoint(midPoint);
    }
  }
  
  drawControlPoint(position) {
    // 创建控制点DOM元素
    const controlPoint = document.createElement('div');
    controlPoint.className = 'lf-polyline-control-point';
    controlPoint.style.left = `${position.x}px`;
    controlPoint.style.top = `${position.y}px`;
    // 添加点击事件
    controlPoint.addEventListener('click', this.handleControlPointClick);
    this.container.appendChild(controlPoint);
  }
}

3. 处理控制点点击事件

当用户点击控制点时，触发添加新节点的逻辑：

class CustomPolyline extends Polyline {
  // ...其他代码
  
  handleControlPointClick = (event) => {
    const position = this.getControlPointPosition(event.target);
    this.addNodeAtPosition(position);
  }
  
  addNodeAtPosition(position) {
    // 创建新节点
    const newNode = {
      type: 'rect',
      x: position.x,
      y: position.y,
      text: '新节点'
    };
    
    // 添加到图中
    this.graphModel.addNode(newNode);
    
    // 重新连接边
    this.reconnectEdges(newNode);
  }
  
  reconnectEdges(newNode) {
    // 获取当前边的源节点和目标节点
    const { sourceNodeId, targetNodeId } = this;
    
    // 删除原边
    this.graphModel.deleteEdge(this.id);
    
    // 创建两条新边
    this.graphModel.addEdge({
      sourceNodeId,
      targetNodeId: newNode.id
    });
    
    this.graphModel.addEdge({
      sourceNodeId: newNode.id,
      targetNodeId
    });
  }
}

4. 样式优化

为控制点添加CSS样式，使其看起来像一个加号按钮：

.lf-polyline-control-point {
  position: absolute;
  width: 16px;
  height: 16px;
  background: #fff;
  border: 1px solid #1890ff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 10;
}

.lf-polyline-control-point::before,
.lf-polyline-control-point::after {
  content: '';
  position: absolute;
  background: #1890ff;
}

.lf-polyline-control-point::before {
  width: 8px;
  height: 2px;
  left: 4px;
  top: 7px;
}

.lf-polyline-control-point::after {
  width: 2px;
  height: 8px;
  left: 7px;
  top: 4px;
}

实际应用中的注意事项

1. 性能优化：当流程图较大时，控制点数量可能很多，需要考虑按需渲染或虚拟滚动
2. 交互体验：可以添加hover效果，提高用户体验
3. 边界处理：处理节点靠近边界时的特殊情况
4. 撤销/重做：确保添加节点的操作支持撤销和重做功能

总结

通过继承LogicFlow的Polyline类并扩展其功能，我们可以实现类似钉钉流程图中在折线上动态添加节点的效果。这种设计模式不仅适用于折线，也可以应用于其他类型的连接线。关键在于理解LogicFlow的扩展机制，合理计算位置坐标，并处理好节点和边的重新连接逻辑。

实际项目中，可以根据业务需求进一步扩展功能，如自定义控制点样式、支持拖拽添加节点等，使流程图编辑体验更加流畅自然。