Merge pull request #2368 from didi/bugfix/round1-in-2026-Jan

CWsuper · web-flow · commit 95bba0886b17 · 2026-01-23T12:01:46.000+08:00
fix: 修复来自内部反馈的边问题
diff --git a/packages/core/src/model/edge/PolylineEdgeModel.ts b/packages/core/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()
diff --git a/packages/core/src/util/edge.ts b/packages/core/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,
diff --git a/packages/extension/src/materials/curved-edge/index.ts b/packages/extension/src/materials/curved-edge/index.ts
@@ -97,50 +97,67 @@ function getMidPoints(
   }
 }
 
+/**
+ * 生成局部路径片段（包含圆角）
+ * - 输入为上一个顶点、当前拐点、下一个顶点，计算方向组合并选择圆弧象限
+ * - 将圆角半径限制在相邻两段长度的一半以内，避免过度弯曲
+ * @param prevPoint 上一个顶点
+ * @param cornerPoint 当前拐点（圆角所在拐点）
+ * @param nextPoint 下一个顶点
+ * @param cornerRadius 圆角半径上限
+ * @returns 局部 path 字符串（包含 L/Q 操作）
+ */
 function getPartialPath(
-  prev: PointTuple,
-  cur: PointTuple,
-  next: PointTuple,
-  radius: number,
+  prevPoint: PointTuple,
+  cornerPoint: PointTuple,
+  nextPoint: PointTuple,
+  cornerRadius: number,
 ): string {
-  // 定义误差容错变量
-  const tolerance = 1
-
-  let dir1: DirectionType = ''
-  let dir2: DirectionType = ''
-
-  if (Math.abs(prev[0] - cur[0]) <= tolerance) {
-    // 垂直方向
-    dir1 = prev[1] > cur[1] ? 't' : 'b'
-  } else if (Math.abs(prev[1] - cur[1]) <= tolerance) {
-    // 水平方向
-    dir1 = prev[0] > cur[0] ? 'l' : 'r'
+  // 轴对齐容差（像素），用于消除微小误差
+  const epsilon = 1
+
+  const resolveDir = (a: PointTuple, b: PointTuple): DirectionType => {
+    const dx = b[0] - a[0]
+    const dy = b[1] - a[1]
+    const adx = Math.abs(dx)
+    const ady = Math.abs(dy)
+    if (ady <= epsilon && adx > epsilon) {
+      return dx < 0 ? 'l' : 'r'
+    }
+    if (adx <= epsilon && ady > epsilon) {
+      return dy < 0 ? 't' : 'b'
+    }
+    if (adx <= epsilon && ady <= epsilon) {
+      return ''
+    }
+    // 非严格对齐时，选择更接近的轴
+    return adx < ady ? (dx < 0 ? 'l' : 'r') : dy < 0 ? 't' : 'b'
   }
 
-  if (Math.abs(cur[0] - next[0]) <= tolerance) {
-    dir2 = cur[1] > next[1] ? 't' : 'b'
-  } else if (Math.abs(cur[1] - next[1]) <= tolerance) {
-    dir2 = cur[0] > next[0] ? 'l' : 'r'
-  }
+  const dir1: DirectionType = resolveDir(prevPoint, cornerPoint)
+  const dir2: DirectionType = resolveDir(cornerPoint, nextPoint)
 
   const r =
     Math.min(
-      Math.hypot(cur[0] - prev[0], cur[1] - prev[1]) / 2,
-      Math.hypot(next[0] - cur[0], next[1] - cur[1]) / 2,
-      radius,
-    ) || (1 / 5) * radius
+      Math.hypot(cornerPoint[0] - prevPoint[0], cornerPoint[1] - prevPoint[1]) /
+        2,
+      Math.hypot(nextPoint[0] - cornerPoint[0], nextPoint[1] - cornerPoint[1]) /
+        2,
+      cornerRadius,
+    ) || (1 / 5) * cornerRadius
 
   const key = `${dir1}${dir2}`
   const orientation: ArcQuadrantType = directionMap[key] || '-'
-  let path = `L ${prev[0]} ${prev[1]}`
+  let path = ''
 
   if (orientation === '-') {
-    path += `L ${cur[0]} ${cur[1]} L ${next[0]} ${next[1]}`
+    // 仅移动到当前拐点，由下一次迭代决定如何从拐点继续（直线或圆角）
+    path += `L ${cornerPoint[0]} ${cornerPoint[1]}`
   } else {
-    const [mid1, mid2] = getMidPoints(cur, key, orientation, r)
+    const [mid1, mid2] = getMidPoints(cornerPoint, key, orientation, r)
     if (mid1 && mid2) {
-      path += `L ${mid1[0]} ${mid1[1]} Q ${cur[0]} ${cur[1]} ${mid2[0]} ${mid2[1]}`
-      ;[cur[0], cur[1]] = mid2
+      path += `L ${mid1[0]} ${mid1[1]} Q ${cornerPoint[0]} ${cornerPoint[1]} ${mid2[0]} ${mid2[1]}`
+      ;[cornerPoint[0], cornerPoint[1]] = mid2
     }
   }
   return path
