三步实现！LogicFlow动态折线节点插入的低代码方案

【免费下载链接】LogicFlow A flow chart editing framework focusing on business customization. 专注于业务自定义的流程图编辑框架，支持实现脑图、ER图、UML、工作流等各种图编辑场景。 项目地址: https://gitcode.com/GitHub_Trending/lo/LogicFlow

你是否在开发流程图应用时遇到过这样的痛点：需要在已绘制的折线上快速添加中间节点，却不得不删除原有连线重新绘制？LogicFlow的InsertNodeInPolyline插件提供了完美解决方案，让节点插入像拖拽文件一样简单直观。本文将通过实际代码示例，带你掌握这一高效功能的实现原理与应用方法。

功能原理：折线节点插入的技术解析

LogicFlow的动态节点插入功能核心在于InsertNodeInPolyline插件，其实现位于packages/extension/src/insert-node-in-polyline/index.ts。该插件通过监听节点拖拽事件，精确计算节点与折线的交叉位置，自动分割原线段并创建新连接关系。

关键实现包含三个技术要点：

• 线段交叉检测：通过isNodeInSegment函数判断节点是否落在折线段上（误差范围可通过deviation参数调整）
• 连线自动分割：当检测到有效插入位置时，删除原线段并创建两段新连线
• 连接规则校验：调用checkRuleBeforeInsetNode方法确保插入操作符合业务规则

// 核心插入逻辑（简化版）
insetNode(nodeData) {
  const { edges } = this._lf.graphModel;
  for (let i = 0; i < edges.length; i++) {
    const { crossIndex, crossPoints } = isNodeInSegment(
      nodeModel, edges[i], this.deviation
    );
    if (crossIndex >= 0) {
      this._lf.deleteEdge(edges[i].id);
      // 创建源节点到插入节点的连线
      this._lf.addEdge({/* 第一段连线数据 */});
      // 创建插入节点到目标节点的连线
      this._lf.addEdge({/* 第二段连线数据 */});
      break;
    }
  }
}

快速上手：从零开始的实现步骤

步骤1：基础环境准备

首先需要引入LogicFlow核心库和扩展插件，建议使用国内CDN加速资源加载。创建基础HTML结构，包含流程图容器和必要的样式引用：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@logicflow/core@2.0.0-beta.1/dist/index.css">
</head>
<body>
  <div id="container" style="width: 800px; height: 600px;"></div>
  
  <script src="https://cdn.jsdelivr.net/npm/@logicflow/core@2.0.0-beta.1/dist/index.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@logicflow/extension@2.0.0-beta.1/dist/index.min.js"></script>
</body>
</html>

步骤2：初始化配置与插件注册

创建LogicFlow实例并注册InsertNodeInPolyline插件，基础配置如下：

// 创建实例时启用网格和默认节点
const lf = new LogicFlow({
  container: document.getElementById('container'),
  width: 800,
  height: 600,
  grid: true,
  plugins: [Extension.InsertNodeInPolyline],
  // 可配置偏差值（默认20px）
  insertNodeInPolyline: {
    deviation: 15
  }
});

// 渲染初始流程图
lf.render({
  nodes: [
    { id: 'start', type: 'circle', x: 100, y: 200, text: '开始' },
    { id: 'end', type: 'circle', x: 500, y: 200, text: '结束' }
  ],
  edges: [
    { 
      type: 'polyline', 
      sourceNodeId: 'start', 
      targetNodeId: 'end',
      pointsList: [{x:150,y:200}, {x:450,y:200}] // 定义折线中间点
    }
  ]
});

步骤3：实现动态插入功能

插件注册后默认开启两种插入模式：

• 拖拽添加：从节点库拖拽新节点到折线上自动插入
• 移动插入：拖动已有游离节点（无连接关系的节点）到折线上

// 示例：添加可拖拽的节点库
const nodePalette = document.createElement('div');
nodePalette.style.position = 'absolute';
nodePalette.style.left = '20px';
nodePalette.style.top = '20px';
document.body.appendChild(nodePalette);

// 创建可拖拽节点
const createDraggableNode = (type, text) => {
  const node = document.createElement('div');
  node.textContent = text;
  node.style.padding = '8px 12px';
  node.style.margin = '5px';
  node.style.backgroundColor = '#f0f0f0';
  node.draggable = true;
  node.addEventListener('dragend', (e) => {
    // 获取鼠标释放位置并转换为流程图坐标
    const { clientX, clientY } = e;
    const { left, top } = lf.getContainer().getBoundingClientRect();
    const x = clientX - left;
    const y = clientY - top;
    
    // 创建新节点
    const nodeId = 'node_' + Date.now();
    lf.addNode({
      id: nodeId,
      type,
      x,
      y,
      text
    });
  });
  nodePalette.appendChild(node);
};

// 添加几个示例节点
createDraggableNode('rect', '审批');
createDraggableNode('rect', '条件判断');
createDraggableNode('rect', '数据处理');

实际效果与应用场景

动态折线节点插入功能在以下场景中特别有用：

业务流程设计器

在工作流设计中，用户可随时在现有流程路径上插入审批节点或条件分支，如：

脑图与关系图

通过插入节点快速扩展思维链或补充实体关系，保持原有结构连贯性：

流程图重构

无需重新绘制即可调整复杂流程图结构，提高编辑效率。插入操作会自动维护连线样式和属性，保持视觉一致性。

高级配置与扩展

自定义插入规则

通过重写校验方法实现业务特定的插入限制：

lf.hooks.register('beforeInsertNode', (params) => {
  const { sourceNodeId, targetNodeId, nodeData } = params;
  // 示例：禁止在开始节点后插入条件节点
  if (sourceNodeId === 'start' && nodeData.type === 'condition') {
    alert('开始节点后不能直接添加条件判断');
    return false; // 返回false阻止插入
  }
  return true;
});

事件监听与反馈

监听插入事件实现自定义UI反馈：

lf.on('node:inserted', (data) => {
  console.log('节点已插入', data);
  // 显示操作成功提示
  showToast(`已在 ${data.sourceNodeId} 和 ${data.targetNodeId} 之间插入节点`);
});

常见问题与解决方案

插入位置不准确

调整deviation参数（建议10-30px），值越小精度越高但需要更精确对齐。可通过以下代码动态修改：

lf.setProperties({
  insertNodeInPolyline: {
    deviation: 25
  }
});

复杂折线插入失效

确保折线的pointsList属性正确定义，对于自动生成的折线，可通过lf.getEdgeModelById(edgeId).pointsList获取实际路径点。

性能优化

当流程图包含大量节点（>100个）时，可禁用自动检测提高性能：

lf.setProperties({
  insertNodeInPolyline: {
    dropAdd: false, // 禁用移动插入
    dndAdd: true    // 保留拖拽插入
  }
});

总结与扩展学习

通过本文介绍的方法，你已掌握LogicFlow中动态折线节点插入的核心技术。这一功能极大提升了流程图编辑的灵活性，特别适合快速原型设计和频繁调整的业务场景。

深入学习建议：

• 研究源码：InsertNodeInPolyline完整实现
• 示例项目：查看feature-examples中的高级应用
• API文档：探索官方文档中的事件与钩子系统

动态节点插入只是LogicFlow众多强大功能之一，结合自定义节点、布局算法和数据适配器，你可以构建出满足各种业务需求的可视化流程图应用。

【免费下载链接】LogicFlow A flow chart editing framework focusing on business customization. 专注于业务自定义的流程图编辑框架，支持实现脑图、ER图、UML、工作流等各种图编辑场景。 项目地址: https://gitcode.com/GitHub_Trending/lo/LogicFlow