@logicflow/core 2.1.9 → 2.1.11

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/overlay/CanvasOverlay.js

@@ -106,6 +106,9 @@ var CanvasOverlay = /** @class */ (function (_super) {
                 if (selectElements.size > 0) {
                     graphModel.clearSelectElements();
                 }
+                // 如果是拖拽状态，不触发点击事件
+                if (_this.state.isDragging)
+                    return;
                 graphModel.eventCenter.emit(constant_1.EventType.BLANK_CLICK, { e: ev });
             }
         };

package/package.json

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

package/src/model/edge/PolylineEdgeModel.ts

@@ -34,13 +34,154 @@ export class PolylineEdgeModel extends BaseEdgeModel {
   @observable dbClickPosition?: Point
 
   initEdgeData(data: LogicFlow.EdgeConfig): void {
-    this.offset = get(data, 'properties.offset', 30)
+    const providedOffset = get(data, 'properties.offset')
+    // 当用户未传入 offset 时，按“箭头与折线重叠长度 + 5”作为默认值
+    // 其中“重叠长度”采用箭头样式中的 offset（沿边方向的长度）
+    this.offset =
+      typeof providedOffset === 'number'
+        ? 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)
   }
 
+  setAttributes() {
+    const { offset: newOffset } = this.properties
+    if (newOffset && newOffset !== this.offset) {
+      this.offset = newOffset
+      this.updatePoints()
+    }
+  }
+
+  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（沿边方向的长度）
+   */
+  private getDefaultOffset(): number {
+    const arrowStyle = this.getArrowStyle()
+    const arrowOverlap =
+      typeof arrowStyle.offset === 'number' ? arrowStyle.offset : 0
+    return arrowOverlap + 5
+  }
+
   getEdgeStyle() {
     const { polyline } = this.graphModel.theme
     const style = super.getEdgeStyle()
@@ -319,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)
   }
 
@@ -362,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
@@ -651,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/tool/MultipleSelectTool.tsx

@@ -27,6 +27,13 @@ export default class MultipleSelect extends Component<IToolProps> {
   }
 
   handleMouseDown = (ev: MouseEvent) => {
+    // 多选区域的拖拽步长随缩放变化
+    const {
+      graphModel: { gridSize },
+      lf,
+    } = this.props
+    const { SCALE_X } = lf.getTransform()
+    this.stepDrag.setStep(gridSize * SCALE_X)
     this.stepDrag.handleMouseDown(ev)
   }
   // 使多选区域的滚轮事件可以触发画布的滚轮事件

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,
@@ -377,7 +386,11 @@ export const isSegmentCrossingBBox = (
   )
 }
 
-/* 获取下一个相邻的点 */
+/**
+ * 基于轴对齐规则获取某点的相邻可连通点（不穿越节点）
+ * - 仅考虑 x 或 y 相同的候选点，保证严格水平/垂直
+ * - 使用 isSegmentCrossingBBox 校验线段不穿越源/目标节点
+ */
 export const getNextNeighborPoints = (
   points: Point[],
   point: Point,
@@ -400,9 +413,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[],
@@ -474,8 +490,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
         }
@@ -494,7 +511,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) {
@@ -513,7 +533,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,
@@ -699,6 +728,10 @@ export const points2PointsList = (points: string): Point[] => {
   return pointsList
 }
 
+/**
+ * 当扩展 bbox 重合时的简化拐点计算
+ * - 根据起止段的方向（水平/垂直）插入 1~2 个中间点，避免折线重合与穿越
+ */
 export const getSimplePoints = (
   start: Point,
   end: Point,

package/src/view/overlay/CanvasOverlay.tsx

@@ -105,6 +105,8 @@ export class CanvasOverlay extends Component<IProps, IState> {
       if (selectElements.size > 0) {
         graphModel.clearSelectElements()
       }
+      // 如果是拖拽状态，不触发点击事件
+      if (this.state.isDragging) return
       graphModel.eventCenter.emit(EventType.BLANK_CLICK, { e: ev })
     }
   }