@logicflow/core 2.2.0-alpha.5 → 2.2.0-alpha.6

package/lib/util/edge.js

@@ -122,6 +122,15 @@ var pointDirection = function (point, bbox) {
 };
 exports.pointDirection = pointDirection;
 /* 获取扩展图形上的点，即起始终点相邻的点，上一个或者下一个节点 */
+/**
+ * 计算扩展包围盒上的相邻点（起点或终点的下一个/上一个拐点）
+ * - 使用原始节点 bbox 来判定点相对中心的方向，避免 offset 扩展后宽高改变导致方向误判
+ * - 若 start 相对中心为水平方向，则返回扩展盒在 x 上的边界，y 保持不变
+ * - 若为垂直方向，则返回扩展盒在 y 上的边界，x 保持不变
+ * @param expendBBox 扩展后的包围盒（包含 offset）
+ * @param bbox 原始节点包围盒（用于正确的方向判定）
+ * @param point 起点或终点坐标
+ */
 var getExpandedBBoxPoint = function (expendBBox, bbox, point) {
     // https://github.com/didi/LogicFlow/issues/817
     // 没有修复前传入的参数bbox实际是expendBBox
@@ -337,7 +346,11 @@ var isSegmentCrossingBBox = function (p1, p2, bbox) {
         (0, exports.isSegmentsIntersected)(p1, p2, pc, pd));
 };
 exports.isSegmentCrossingBBox = isSegmentCrossingBBox;
-/* 获取下一个相邻的点 */
+/**
+ * 基于轴对齐规则获取某点的相邻可连通点（不穿越节点）
+ * - 仅考虑 x 或 y 相同的候选点，保证严格水平/垂直
+ * - 使用 isSegmentCrossingBBox 校验线段不穿越源/目标节点
+ */
 var getNextNeighborPoints = function (points, point, bbox1, bbox2) {
     var neighbors = [];
     points.forEach(function (p) {
@@ -353,9 +366,12 @@ var getNextNeighborPoints = function (points, point, bbox1, bbox2) {
     return (0, exports.filterRepeatPoints)(neighbors);
 };
 exports.getNextNeighborPoints = getNextNeighborPoints;
-/* 路径查找,AStar查找+曼哈顿距离
- * 算法wiki:https://zh.wikipedia.org/wiki/A*%E6%90%9C%E5%B0%8B%E6%BC%94%E7%AE%97%E6%B3%95
- * 方法无法复用，且调用了很多polyline相关的方法，暂不抽离到src/algorithm中
+/**
+ * 使用 A* + 曼哈顿启发式在候选点图上查找正交路径
+ * - 开放集/关闭集管理遍历
+ * - gScore 为累计实际代价，fScore = gScore + 启发式
+ * - 邻居仅为与当前点 x 或 y 相同且不穿越节点的点
+ * 参考：https://zh.wikipedia.org/wiki/A*%E6%90%9C%E5%B0%8B%E6%BC%94%E7%AE%97%E6%B3%95
  */
 var pathFinder = function (points, start, goal, sBBox, tBBox, os, ot) {
     // 定义已经遍历过的点
@@ -396,6 +412,7 @@ var pathFinder = function (points, start, goal, sBBox, tBBox, os, ot) {
         (0, exports.removeClosePointFromOpenList)(openSet, current);
         closedSet.push(current);
         (0, exports.getNextNeighborPoints)(points, current, sBBox, tBBox).forEach(function (neighbor) {
+            var _a;
             if (closedSet.indexOf(neighbor) !== -1) {
                 return;
             }
@@ -403,7 +420,8 @@ var pathFinder = function (points, start, goal, sBBox, tBBox, os, ot) {
                 openSet.push(neighbor);
             }
             if ((current === null || current === void 0 ? void 0 : current.id) && (neighbor === null || neighbor === void 0 ? void 0 : neighbor.id)) {
-                var tentativeGScore = fScore[current.id] + (0, exports.estimateDistance)(current, neighbor);
+                // 修复：累计代价应基于 gScore[current] 而非 fScore[current]
+                var tentativeGScore = ((_a = gScore[current.id]) !== null && _a !== void 0 ? _a : 0) + (0, exports.estimateDistance)(current, neighbor);
                 if (gScore[neighbor.id] && tentativeGScore >= gScore[neighbor.id]) {
                     return;
                 }
@@ -427,7 +445,10 @@ var getBoxByOriginNode = function (node) {
     return (0, _1.getNodeBBox)(node);
 };
 exports.getBoxByOriginNode = getBoxByOriginNode;
-/* 保证一条直线上只有2个节点： 删除x/y相同的中间节点 */
+/**
+ * 去除共线冗余中间点，保持每条直线段仅保留两端点
+ * - 若三点在同一水平线或同一垂直线，移除中间点
+ */
 var pointFilter = function (points) {
     var i = 1;
     while (i < points.length - 1) {
@@ -445,7 +466,16 @@ var pointFilter = function (points) {
     return points;
 };
 exports.pointFilter = pointFilter;
-/* 计算折线点 */
+/**
+ * 计算折线点（正交候选点 + A* 路径）
+ * 步骤：
+ * 1) 取源/目标节点的扩展包围盒与相邻点 sPoint/tPoint
+ * 2) 若两个扩展盒重合，使用简单路径 getSimplePoints
+ * 3) 构造 lineBBox/sMixBBox/tMixBBox，并收集其角点与中心交点
+ * 4) 过滤掉落在两个扩展盒内部的点，形成 connectPoints
+ * 5) 以 sPoint/tPoint 为起止，用 A* 查找路径
+ * 6) 拼入原始 start/end，并用 pointFilter 去除冗余共线点
+ */
 var getPolylinePoints = function (start, end, sNode, tNode, offset) {
     var sBBox = (0, exports.getBoxByOriginNode)(sNode);
     var tBBox = (0, exports.getBoxByOriginNode)(tNode);
@@ -589,6 +619,10 @@ var points2PointsList = function (points) {
     return pointsList;
 };
 exports.points2PointsList = points2PointsList;
+/**
+ * 当扩展 bbox 重合时的简化拐点计算
+ * - 根据起止段的方向（水平/垂直）插入 1~2 个中间点，避免折线重合与穿越
+ */
 var getSimplePoints = function (start, end, sPoint, tPoint) {
     var points = [];
     // start,sPoint的方向，水平或者垂直，即路径第一条线段的方向

package/lib/view/edge/BaseEdge.js

@@ -68,6 +68,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BaseEdge = void 0;
 var jsx_runtime_1 = require("preact/jsx-runtime");
 var compat_1 = require("preact/compat");
+var lodash_es_1 = require("lodash-es");
 var shape_1 = require("../shape");
 var text_1 = require("../text");
 var constant_1 = require("../../constant");
@@ -233,6 +234,14 @@ var BaseEdge = /** @class */ (function (_super) {
                     e: e,
                     position: position,
                 });
+                // 复制粘贴后会出现点击边时，边会失去焦点的问题，这里手动让边获焦以解决这个问题
+                var el_1 = e.currentTarget;
+                var rAF = !(0, lodash_es_1.isNil)(window) && (0, lodash_es_1.isFunction)(window.requestAnimationFrame)
+                    ? window.requestAnimationFrame.bind(window)
+                    : function (fn) { return setTimeout(fn, 0); };
+                rAF(function () {
+                    el_1.focus();
+                });
             }
             var editConfigModel = graphModel.editConfigModel;
             graphModel.selectEdgeById(model.id, (0, util_1.isMultipleSelect)(e, editConfigModel));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@logicflow/core",
-  "version": "2.2.0-alpha.5",
+  "version": "2.2.0-alpha.6",
   "description": "LogicFlow, help you quickly create flowcharts",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/model/edge/PolylineEdgeModel.ts

@@ -42,7 +42,9 @@ export class PolylineEdgeModel extends BaseEdgeModel {
         ? providedOffset
         : this.getDefaultOffset()
     if (data.pointsList) {
-      this.pointsList = data.pointsList
+      const corrected = this.orthogonalizePath(data.pointsList)
+      ;(data as any).pointsList = corrected
+      this.pointsList = corrected
     }
     super.initEdgeData(data)
   }
@@ -55,6 +57,120 @@ export class PolylineEdgeModel extends BaseEdgeModel {
     }
   }
 
+  orthogonalizePath(points: Point[]): Point[] {
+    // 输入非法或不足两点时直接返回副本
+    if (!Array.isArray(points) || points.length < 2) {
+      return points
+    }
+    // pushUnique: 向数组中添加唯一点，避免重复
+    const pushUnique = (arr: Point[], p: Point) => {
+      const last = arr[arr.length - 1]
+      if (!last || last.x !== p.x || last.y !== p.y) {
+        arr.push({ x: p.x, y: p.y })
+      }
+    }
+    // isAxisAligned: 检查两点是否在同一条轴上
+    const isAxisAligned = (a: Point, b: Point) => a.x === b.x || a.y === b.y
+    // manhattanDistance: 计算两点在曼哈顿距离上的距离
+    const manhattanDistance = (a: Point, b: Point) =>
+      Math.abs(a.x - b.x) + Math.abs(a.y - b.y)
+
+    // 1) 生成严格正交路径，尽量延续前一段方向以减少折点
+    const orthogonal: Point[] = []
+    pushUnique(orthogonal, points[0])
+    // previousDirection: 记录前一段的方向，用于判断当前段的PreferredCorner
+    let previousDirection: SegmentDirection | undefined
+    // 遍历所有点对，生成正交路径
+    for (let i = 0; i < points.length - 1; i++) {
+      const current = orthogonal[orthogonal.length - 1]
+      const next = points[i + 1]
+      if (!current || !next) continue
+
+      if (isAxisAligned(current, next)) {
+        pushUnique(orthogonal, next)
+        previousDirection =
+          current.x === next.x
+            ? SegmentDirection.VERTICAL
+            : SegmentDirection.HORIZONTAL
+        continue
+      }
+
+      const cornerHV: Point = { x: next.x, y: current.y }
+      const cornerVH: Point = { x: current.x, y: next.y }
+
+      // 根据前一段的方向，优先选择能延续该方向的拐角点，以减少折点数量；
+      // 若前一段为垂直方向，则优先选择垂直-水平拐角(cornerVH)；
+      // 若前一段为水平方向，则优先选择水平-垂直拐角(cornerHV)；
+      // 若前一段无方向（初始情况），则比较两个拐角的曼哈顿距离，选更近者。
+      const preferredCorner =
+        previousDirection === SegmentDirection.VERTICAL
+          ? cornerVH
+          : previousDirection === SegmentDirection.HORIZONTAL
+            ? cornerHV
+            : manhattanDistance(current, cornerHV) <=
+                manhattanDistance(current, cornerVH)
+              ? cornerHV
+              : cornerVH
+
+      if (preferredCorner.x !== current.x || preferredCorner.y !== current.y) {
+        pushUnique(orthogonal, preferredCorner)
+      }
+      pushUnique(orthogonal, next)
+
+      const a = orthogonal[orthogonal.length - 2]
+      const b = orthogonal[orthogonal.length - 1]
+      previousDirection =
+        a && b
+          ? a.x === b.x
+            ? SegmentDirection.VERTICAL
+            : SegmentDirection.HORIZONTAL
+          : previousDirection
+    }
+
+    // 2) 去除冗余共线中间点
+    const simplified: Point[] = []
+    for (let i = 0; i < orthogonal.length; i++) {
+      const prev = orthogonal[i - 1]
+      const curr = orthogonal[i]
+      const next = orthogonal[i + 1]
+      // 如果当前点与前一个点和后一个点在同一条水平线或垂直线上，则跳过该点，去除冗余的共线中间点
+      if (
+        prev &&
+        curr &&
+        next &&
+        ((prev.x === curr.x && curr.x === next.x) || // 水平共线
+          (prev.y === curr.y && curr.y === next.y)) // 垂直共线
+      ) {
+        continue
+      }
+      pushUnique(simplified, curr)
+    }
+
+    // 3) 保留原始起点与终点位置
+    if (simplified.length >= 2) {
+      simplified[0] = { x: points[0].x, y: points[0].y }
+      simplified[simplified.length - 1] = {
+        x: points[points.length - 1].x,
+        y: points[points.length - 1].y,
+      }
+    }
+
+    // 4) 结果校验：任意相邻段都必须为水平/垂直；失败则退化为起止两点
+    const isOrthogonal =
+      simplified.length < 2 ||
+      simplified.every((_, idx, arr) => {
+        if (idx === 0) return true
+        return isAxisAligned(arr[idx - 1], arr[idx])
+      })
+
+    return isOrthogonal
+      ? simplified
+      : [
+          { x: points[0].x, y: points[0].y },
+          { x: points[points.length - 1].x, y: points[points.length - 1].y },
+        ]
+  }
+
   /**
    * 计算默认 offset：箭头与折线重叠长度 + 5
    * 重叠长度采用箭头样式中的 offset（沿边方向的长度）
@@ -344,7 +460,7 @@ export class PolylineEdgeModel extends BaseEdgeModel {
   }
 
   updatePath(pointList: Point[]) {
-    this.pointsList = pointList
+    this.pointsList = this.orthogonalizePath(pointList)
     this.points = this.getPath(this.pointsList)
   }
 
@@ -387,8 +503,10 @@ export class PolylineEdgeModel extends BaseEdgeModel {
       this.targetNode,
       this.offset || 0,
     )
-    this.pointsList = pointsList
-    this.points = pointsList.map((point) => `${point.x},${point.y}`).join(' ')
+    this.pointsList = this.orthogonalizePath(pointsList)
+    this.points = this.pointsList
+      .map((point) => `${point.x},${point.y}`)
+      .join(' ')
   }
 
   @action
@@ -676,18 +794,20 @@ export class PolylineEdgeModel extends BaseEdgeModel {
     sourceNode: BaseNodeModel
     targetNode: BaseNodeModel
   }) {
-    this.pointsList = getPolylinePoints(
-      {
-        x: startPoint.x,
-        y: startPoint.y,
-      },
-      {
-        x: endPoint.x,
-        y: endPoint.y,
-      },
-      sourceNode,
-      targetNode,
-      this.offset || 0,
+    this.pointsList = this.orthogonalizePath(
+      getPolylinePoints(
+        {
+          x: startPoint.x,
+          y: startPoint.y,
+        },
+        {
+          x: endPoint.x,
+          y: endPoint.y,
+        },
+        sourceNode,
+        targetNode,
+        this.offset || 0,
+      ),
     )
 
     this.initPoints()

package/src/util/edge.ts

@@ -107,6 +107,15 @@ export const pointDirection = (point: Point, bbox: BoxBounds): Direction => {
 }
 
 /* 获取扩展图形上的点，即起始终点相邻的点，上一个或者下一个节点 */
+/**
+ * 计算扩展包围盒上的相邻点（起点或终点的下一个/上一个拐点）
+ * - 使用原始节点 bbox 来判定点相对中心的方向，避免 offset 扩展后宽高改变导致方向误判
+ * - 若 start 相对中心为水平方向，则返回扩展盒在 x 上的边界，y 保持不变
+ * - 若为垂直方向，则返回扩展盒在 y 上的边界，x 保持不变
+ * @param expendBBox 扩展后的包围盒（包含 offset）
+ * @param bbox 原始节点包围盒（用于正确的方向判定）
+ * @param point 起点或终点坐标
+ */
 export const getExpandedBBoxPoint = (
   expendBBox: BoxBounds,
   bbox: BoxBounds,
@@ -378,7 +387,11 @@ export const isSegmentCrossingBBox = (
   )
 }
 
-/* 获取下一个相邻的点 */
+/**
+ * 基于轴对齐规则获取某点的相邻可连通点（不穿越节点）
+ * - 仅考虑 x 或 y 相同的候选点，保证严格水平/垂直
+ * - 使用 isSegmentCrossingBBox 校验线段不穿越源/目标节点
+ */
 export const getNextNeighborPoints = (
   points: Point[],
   point: Point,
@@ -401,9 +414,12 @@ export const getNextNeighborPoints = (
   return filterRepeatPoints(neighbors)
 }
 
-/* 路径查找,AStar查找+曼哈顿距离
- * 算法wiki:https://zh.wikipedia.org/wiki/A*%E6%90%9C%E5%B0%8B%E6%BC%94%E7%AE%97%E6%B3%95
- * 方法无法复用，且调用了很多polyline相关的方法，暂不抽离到src/algorithm中
+/**
+ * 使用 A* + 曼哈顿启发式在候选点图上查找正交路径
+ * - 开放集/关闭集管理遍历
+ * - gScore 为累计实际代价，fScore = gScore + 启发式
+ * - 邻居仅为与当前点 x 或 y 相同且不穿越节点的点
+ * 参考：https://zh.wikipedia.org/wiki/A*%E6%90%9C%E5%B0%8B%E6%BC%94%E7%AE%97%E6%B3%95
  */
 export const pathFinder = (
   points: Point[],
@@ -475,8 +491,9 @@ export const pathFinder = (
       }
 
       if (current?.id && neighbor?.id) {
+        // 修复：累计代价应基于 gScore[current] 而非 fScore[current]
         const tentativeGScore =
-          fScore[current.id] + estimateDistance(current, neighbor)
+          (gScore[current.id] ?? 0) + estimateDistance(current, neighbor)
         if (gScore[neighbor.id] && tentativeGScore >= gScore[neighbor.id]) {
           return
         }
@@ -495,7 +512,10 @@ export const pathFinder = (
 export const getBoxByOriginNode = (node: BaseNodeModel): BoxBounds => {
   return getNodeBBox(node)
 }
-/* 保证一条直线上只有2个节点： 删除x/y相同的中间节点 */
+/**
+ * 去除共线冗余中间点，保持每条直线段仅保留两端点
+ * - 若三点在同一水平线或同一垂直线，移除中间点
+ */
 export const pointFilter = (points: Point[]): Point[] => {
   let i = 1
   while (i < points.length - 1) {
@@ -514,7 +534,16 @@ export const pointFilter = (points: Point[]): Point[] => {
   return points
 }
 
-/* 计算折线点 */
+/**
+ * 计算折线点（正交候选点 + A* 路径）
+ * 步骤：
+ * 1) 取源/目标节点的扩展包围盒与相邻点 sPoint/tPoint
+ * 2) 若两个扩展盒重合，使用简单路径 getSimplePoints
+ * 3) 构造 lineBBox/sMixBBox/tMixBBox，并收集其角点与中心交点
+ * 4) 过滤掉落在两个扩展盒内部的点，形成 connectPoints
+ * 5) 以 sPoint/tPoint 为起止，用 A* 查找路径
+ * 6) 拼入原始 start/end，并用 pointFilter 去除冗余共线点
+ */
 export const getPolylinePoints = (
   start: Point,
   end: Point,
@@ -700,6 +729,10 @@ export const points2PointsList = (points: string): Point[] => {
   return pointsList
 }
 
+/**
+ * 当扩展 bbox 重合时的简化拐点计算
+ * - 根据起止段的方向（水平/垂直）插入 1~2 个中间点，避免折线重合与穿越
+ */
 export const getSimplePoints = (
   start: Point,
   end: Point,

package/src/view/edge/BaseEdge.tsx

@@ -1,4 +1,5 @@
 import { createElement as h, Component, createRef } from 'preact/compat'
+import { isFunction, isNil } from 'lodash-es'
 import { Circle } from '../shape'
 import { LineText } from '../text'
 import LogicFlow from '../../LogicFlow'
@@ -565,6 +566,15 @@ export abstract class BaseEdge<P extends IProps> extends Component<
         e,
         position,
       })
+      // 复制粘贴后会出现点击边时，边会失去焦点的问题，这里手动让边获焦以解决这个问题
+      const el = e.currentTarget as HTMLElement
+      const rAF =
+        !isNil(window) && isFunction(window.requestAnimationFrame)
+          ? window.requestAnimationFrame.bind(window)
+          : (fn: () => void) => setTimeout(fn, 0)
+      rAF(() => {
+        el.focus()
+      })
     }
     const { editConfigModel } = graphModel
     graphModel.selectEdgeById(model.id, isMultipleSelect(e, editConfigModel))