dsh-drawai 0.3.3 → 0.3.4

package/lib/client.js

@@ -3523,6 +3523,104 @@ window.__ModuleLoader__.load({
      *  3. **进出形状的最后一段垂直于落点所在的边**（从左边进就横着进）。
      *     否则线会贴着边框斜切进去，看起来像画错了。
      */
+    /** 修复手动路径的一跳：保留两端必经点，在节点边界外的正交网格上寻路。
+     * 正常的 L 形不进此分支；方向作为状态，禁止原路折返，代价先比转弯再比长度。 */
+    function avoidOrthogonalLeg(a, b, boxes, before, next, sourceSide, targetSide) {
+      const obstacles = Array.isArray(boxes) ? boxes : []
+      const xs = new Set([a.x, b.x, a.x - EDGE_GRID, a.x + EDGE_GRID, b.x - EDGE_GRID, b.x + EDGE_GRID])
+      const ys = new Set([a.y, b.y, a.y - EDGE_GRID, a.y + EDGE_GRID, b.y - EDGE_GRID, b.y + EDGE_GRID])
+      for (const box of obstacles) {
+        xs.add(Math.floor((box.geo.x - 8) / EDGE_GRID) * EDGE_GRID)
+        xs.add(Math.ceil((box.geo.x + box.geo.w + 8) / EDGE_GRID) * EDGE_GRID)
+        ys.add(Math.floor((box.geo.y - 8) / EDGE_GRID) * EDGE_GRID)
+        ys.add(Math.ceil((box.geo.y + box.geo.h + 8) / EDGE_GRID) * EDGE_GRID)
+      }
+      const xx = [...xs].sort((x, y) => x - y)
+      const yy = [...ys].sort((x, y) => x - y)
+      const width = xx.length
+      const pointAt = (v) => ({ x: xx[v % width], y: yy[Math.floor(v / width)] })
+      // e/s/w/n；相反方向差 2。
+      const direction = (p, q) => p.x === q.x ? (q.y > p.y ? 1 : 3) : (q.x > p.x ? 0 : 2)
+      const sideDirection = { e: 0, s: 1, w: 2, n: 3 }
+      const start = yy.indexOf(a.y) * width + xx.indexOf(a.x)
+      const goal = yy.indexOf(b.y) * width + xx.indexOf(b.x)
+      const incoming = before === null ? 4 : direction(before, a)
+      const outgoing = next !== null && (next.x === b.x || next.y === b.y) && (next.x !== b.x || next.y !== b.y) ? direction(b, next) : 4
+      const costs = new Map()
+      const parents = new Map()
+      const heap = []
+      const better = (x, y) => x.bends < y.bends || (x.bends === y.bends && x.length < y.length)
+      const push = (item) => {
+        heap.push(item)
+        let i = heap.length - 1
+        while (i > 0) {
+          const parent = (i - 1) >> 1
+          if (!better(item, heap[parent])) break
+          heap[i] = heap[parent]
+          i = parent
+        }
+        heap[i] = item
+      }
+      const pop = () => {
+        const first = heap[0]
+        const last = heap.pop()
+        if (heap.length > 0) {
+          let i = 0
+          while (i * 2 + 1 < heap.length) {
+            let child = i * 2 + 1
+            if (child + 1 < heap.length && better(heap[child + 1], heap[child])) child += 1
+            if (!better(heap[child], last)) break
+            heap[i] = heap[child]
+            i = child
+          }
+          heap[i] = last
+        }
+        return first
+      }
+      const initial = { key: start * 5 + incoming, bends: 0, length: 0 }
+      costs.set(initial.key, initial)
+      push(initial)
+      const blocked = new Map()
+      while (heap.length > 0) {
+        const cur = pop()
+        if (costs.get(cur.key) !== cur) continue
+        const v = Math.floor(cur.key / 5)
+        const dir = cur.key % 5
+        if (v === goal) {
+          const path = []
+          let key = cur.key
+          while (key !== undefined) {
+            path.push(pointAt(Math.floor(key / 5)))
+            key = parents.get(key)
+          }
+          return simplifyCollinear(path.reverse())
+        }
+        const x = v % width
+        const y = Math.floor(v / width)
+        const neighbors = [x + 1 < width ? v + 1 : -1, y + 1 < yy.length ? v + width : -1, x > 0 ? v - 1 : -1, y > 0 ? v - width : -1]
+        const p = pointAt(v)
+        for (let d = 0; d < 4; d += 1) {
+          const nv = neighbors[d]
+          if (nv < 0 || (dir < 4 && (dir + 2) % 4 === d)) continue
+          if (v === start && sourceSide && d !== sideDirection[sourceSide]) continue
+          if (nv === goal && targetSide && d !== (sideDirection[targetSide] + 2) % 4) continue
+          if (nv === goal && outgoing < 4 && (d + 2) % 4 === outgoing) continue
+          const q = pointAt(nv)
+          const edgeKey = Math.min(v, nv) + ':' + Math.max(v, nv)
+          if (!blocked.has(edgeKey)) blocked.set(edgeKey, obstacles.some((box) => segmentHitsBox(p, q, box.geo, 0)))
+          if (blocked.get(edgeKey)) continue
+          const candidate = { key: nv * 5 + d, bends: cur.bends + (dir < 4 && dir !== d ? 1 : 0), length: cur.length + Math.abs(q.x - p.x) + Math.abs(q.y - p.y) }
+          const known = costs.get(candidate.key)
+          if (known !== undefined && !better(candidate, known)) continue
+          costs.set(candidate.key, candidate)
+          parents.set(candidate.key, cur.key)
+          push(candidate)
+        }
+      }
+      // 节点互相覆盖、必经点不可达时保留原路径，不能让连线消失。
+      return null
+    }
+
     function routeThroughWaypoints(fromBox, toBox, waypoints, obstacleBoxes, userWaypoints) {
       // 折点可能落在某个节点**内部**（用户拖到节点上、或节点移动后把它吞进去了）。
       // 照直连过去线就穿进节点里，所以先推到外面 —— 只改路由用的副本，不动用户数据。
@@ -3541,14 +3639,30 @@ window.__ModuleLoader__.load({
         // 最后的落点先算出来（它只取决于最后一个折点）：它也是最后一个折点的"下一站"，
         // 传给 connectOrtho 用于判断"到站方向会不会被下一段顶回来"。
         const end = borderPointToward(toBox.geo, safe[safe.length - 1])
+        const append = (target, next, sourceSide, targetSide) => {
+          const offset = pts.length - 1
+          const before = offset > 0 ? pts[offset - 1] : null
+          axis = connectOrtho(pts, prev, target, axis, next)
+          const leg = pts.slice(offset)
+          const test = (before === null ? [] : [before]).concat(leg, next === null ? [] : [next])
+          const hits = leg.some((p, i) => i > 0 && Array.isArray(obstacleBoxes) && obstacleBoxes.some((box) => segmentHitsBox(leg[i - 1], p, box.geo, 0)))
+          const fold = test.some((p, i) => i > 1 && isFoldApex(test[i - 2], test[i - 1], p))
+          const wrongSide = leg.length > 1 && ((sourceSide && !leavesSide(leg[0], leg[1], sourceSide)) || (targetSide && !leavesSide(leg[leg.length - 1], leg[leg.length - 2], targetSide)))
+          if (Array.isArray(obstacleBoxes) && leg.length > 1 && (hits || fold || wrongSide)) {
+            const repaired = avoidOrthogonalLeg(prev, target, obstacleBoxes, before, next, sourceSide, targetSide)
+            if (repaired !== null) pts.splice(offset + 1, pts.length - offset - 1, ...repaired.slice(1))
+          }
+          prev = target
+        }
         for (let i = 0; i < safe.length; i += 1) {
           const next = i + 1 < safe.length ? safe[i + 1] : end
-          axis = connectOrtho(pts, prev, safe[i], axis, next)
-          prev = safe[i]
+          const atEnd = i === safe.length - 1 && Math.abs(safe[i].x - end.x) < 0.5 && Math.abs(safe[i].y - end.y) < 0.5
+          append(safe[i], next, pts.length === 1 ? start.side : null, atEnd ? end.side : null)
         }
         // 落点在左右边 → 最后一段要横着进 → 先竖后横，所以传 'v'；上下边反之。
         const approach = end.side === 'e' || end.side === 'w' ? 'v' : 'h'
-        connectOrtho(pts, prev, end, approach)
+        axis = approach
+        append(end, null, pts.length === 1 ? start.side : null, end.side)
         return pts
       }
 
@@ -3559,6 +3673,14 @@ window.__ModuleLoader__.load({
       return finalizePath(build(start), safe, keep)
     }
 
+    /** 从节点侧面沿外法线离开，禁止贴边走或反向穿进节点。 */
+    function leavesSide(a, b, side) {
+      if (side === 'e') return Math.abs(a.y - b.y) < 0.5 && b.x > a.x
+      if (side === 'w') return Math.abs(a.y - b.y) < 0.5 && b.x < a.x
+      if (side === 's') return Math.abs(a.x - b.x) < 0.5 && b.y > a.y
+      return Math.abs(a.x - b.x) < 0.5 && b.y < a.y
+    }
+
     /** 从 safe（已推出的折点序列，含桩点）里挑出"对应人摆的那些点"。
      *
      * 按**坐标**配对而不是按下标：桩点与折点在 chain 里混在一起，下标要另算一遍首尾桩点个数，
@@ -3613,12 +3735,23 @@ window.__ModuleLoader__.load({
 
     /** 在第 segmentIndex 段上插新折点时，它排在 points[] 的第几位：数该段起点之前有几个折点。 */
     function insertIndexForPath(pts, waypoints, segmentIndex) {
-      let count = 0
+      // 共线化简后，已有折点可能位于线段内部，不能只查路径顶点。
+      const position = (point) => {
+        for (let i = 0; i < pts.length - 1; i += 1) {
+          const a = pts[i]
+          const b = pts[i + 1]
+          const length = Math.abs(b.x - a.x) + Math.abs(b.y - a.y)
+          const before = Math.abs(point.x - a.x) + Math.abs(point.y - a.y)
+          const after = Math.abs(point.x - b.x) + Math.abs(point.y - b.y)
+          if (length > 0 && Math.abs(before + after - length) < 0.5) return i + before / length
+        }
+        return -1
+      }
       for (let i = 0; i < waypoints.length; i += 1) {
-        const at = pathIndexOf(pts, waypoints[i])
-        if (at >= 0 && at <= segmentIndex) count += 1
+        const at = position(waypoints[i])
+        if (at > segmentIndex + 1) return i
       }
-      return count
+      return waypoints.length
     }
 
     /**
@@ -3637,6 +3770,53 @@ window.__ModuleLoader__.load({
       return at
     }
 
+    /** 被化简到段内部的折点也属于整段，必须和两个端点使用同一位移。 */
+    function movePinnedSegment(points, a, b, move) {
+      return points.map((p, i) => ({
+        x: p.x + (i >= a && i <= b ? move.x : 0),
+        y: p.y + (i >= a && i <= b ? move.y : 0),
+      }))
+    }
+
+    /** 段拖动的快照。真实连接端点属于节点，不作为随段移动的用户折点。
+     * 首末段在引出点处截断：平移后只需一条横向/纵向连接，避免先抵达边框再倒回桩点。 */
+    function prepareSegmentDrag(doc, edge, pts, index) {
+      if (pts === null || index < 0 || index >= pts.length - 1) return null
+      const path = pts.map((p) => ({ x: p.x, y: p.y }))
+      let points = Array.isArray(edge.points) ? edge.points.map((p) => ({ x: p.x, y: p.y })) : []
+      const geometry = buildGeometry(doc)
+      const sides = sidesFromStyle(edge.style)
+      const trim = (at, neighbor, end) => {
+        // 悬空端维持原有语义；只有真实节点上的连接端点需要保留固定引出段。
+        const id = end === 'source' ? edge.from : edge.to
+        const box = geometry.byId[id]
+        if (box === undefined) return
+        const border = path[at]
+        const other = path[neighbor]
+        const length = Math.abs(other.x - border.x) + Math.abs(other.y - border.y)
+        if (length < 0.5) return
+        const side = sides[end] || borderPointToward(box.geo, other).side
+        if (!leavesSide(border, other, side)) return
+        const jetty = Number.isFinite(sides.jetty) && sides.jetty > 0 ? sides.jetty : 24
+        const inset = Math.min(jetty, length)
+        const proxy = { x: border.x + (other.x - border.x) * inset / length, y: border.y + (other.y - border.y) * inset / length }
+        // 去掉固定引出段内部的旧折点（包含过去误钉下的边框端点），不让它们再随段移动。
+        points = points.filter((p) => {
+          if (Math.abs(p.x - proxy.x) < 0.5 && Math.abs(p.y - proxy.y) < 0.5) return true
+          const distance = Math.abs(p.x - border.x) + Math.abs(p.y - border.y)
+          const rest = Math.abs(p.x - proxy.x) + Math.abs(p.y - proxy.y)
+          return Math.abs(distance + rest - inset) >= 0.5
+        })
+        path[at] = proxy
+      }
+      if (index === 0) trim(0, 1, 'source')
+      if (index === path.length - 2) trim(path.length - 1, path.length - 2, 'target')
+      const a = ensurePinned(path, points, index)
+      const b = ensurePinned(path, points, index + 1)
+      if (a < 0 || b < 0) return null
+      return { base: points, a: a, b: b, horizontal: Math.abs(pts[index].y - pts[index + 1].y) < 0.5 }
+    }
+
     /**
      * 连线路径的唯一入口。
      *
@@ -3901,7 +4081,17 @@ window.__ModuleLoader__.load({
       const index = applyRouteHysteresis(raw, picked, hint)
       // 自动候选理论上不会折返，这里照样过一遍：折返在画面上只有坏处（重合线 + 尖点鼓包），
       // 而"每条边上都没有折返"是能在自测里断言的硬不变量。
-      return simplifyCollinear(removeRetraces(dedupePoints(raw[index].points)))
+      const path = simplifyCollinear(removeRetraces(dedupePoints(raw[index].points)))
+      // 六个固定候选不一定覆盖可行通道；不能在它们全被挡住时直接选一条穿模的线。
+      if (path.some((p, i) => i > 0 && boxes.some((box) => segmentHitsBox(path[i - 1], p, box.geo, 0)))) {
+        const start = path[0]
+        const end = path[path.length - 1]
+        const sourceSide = from.w > 0 && from.h > 0 ? borderPointToward(from, start).side : null
+        const targetSide = to.w > 0 && to.h > 0 ? borderPointToward(to, end).side : null
+        const repaired = avoidOrthogonalLeg(start, end, boxes, null, null, sourceSide, targetSide)
+        if (repaired !== null) return repaired
+      }
+      return path
     }
 
 
@@ -10446,16 +10636,7 @@ window.__ModuleLoader__.load({
               for (let i = 0; i < next.edges.length; i += 1) {
                 const e = next.edges[i]
                 if (e.id !== edgeDrag.edgeId) continue
-                const points = edgeDrag.base.map((p) => ({ x: p.x, y: p.y }))
-                if (edgeDrag.a < points.length) {
-                  points[edgeDrag.a].x += moveX
-                  points[edgeDrag.a].y += moveY
-                }
-                if (edgeDrag.b < points.length) {
-                  points[edgeDrag.b].x += moveX
-                  points[edgeDrag.b].y += moveY
-                }
-                e.points = points
+                e.points = movePinnedSegment(edgeDrag.base, edgeDrag.a, edgeDrag.b, { x: moveX, y: moveY })
                 break
               }
             }, 'segment:' + edgeDrag.edgeId + ':' + edgeDrag.a + ':' + edgeDrag.b)
@@ -11304,39 +11485,22 @@ window.__ModuleLoader__.load({
           return
         }
 
-        const points = Array.isArray(edge.points) ? edge.points.slice() : []
         if (kind === 'segment') {
           // 拖动某一段 = **整段平移**（draw.io 的段把手语义），而不是插入一个自由折点。
           //
-          // 做法：先把这一段的两个端点就地钉成折点（在原位补折点不改变路径，所以这一刻画面不动），
-          // 之后同时平移这两个折点，这一段就整体挪走了。
-          //
-          // 端点落在起点/终点一侧时同样成立：那个顶点被钉住之后，形状的落点会朝它重新计算，
-          // 于是自动多出一小段连接 —— 也就是"相当于新建一条线段"。
+          // 连接端点保持固定，只钉住可移动区间；按下仅保存快照，实际移动后才改文档。
           const pts = edgeRoutePoints(current, edge, routeMemoryRef.current)
-          if (pts === null || index < 0 || index >= pts.length - 1) return
-          const a = pts[index]
-          const b = pts[index + 1]
-          const pinA = ensurePinned(pts, points, index)
-          const pinB = ensurePinned(pts, points, index + 1)
-          if (pinA < 0 || pinB < 0 || pinA === pinB) return
-          const saved = points.map((p) => ({ x: p.x, y: p.y }))
-          applyLocal((next) => {
-            for (let i = 0; i < next.edges.length; i += 1) {
-              if (next.edges[i].id !== edgeId) continue
-              next.edges[i].points = saved.map((p) => ({ x: p.x, y: p.y }))
-              break
-            }
-          })
+          const seed = prepareSegmentDrag(current, edge, pts, index)
+          if (seed === null) return
           const origin = toUserSpace(event)
           if (origin === null) return
           edgeDragRef.current = {
             edgeId: edgeId,
             kind: 'segment',
-            a: pinA,
-            b: pinB,
-            horizontal: Math.abs(a.y - b.y) < 0.5,
-            base: saved,
+            a: seed.a,
+            b: seed.b,
+            horizontal: seed.horizontal,
+            base: seed.base,
             originX: origin.x,
             originY: origin.y,
           }
@@ -15420,6 +15584,8 @@ window.__ModuleLoader__.load({
       drawaiPaneOf: drawaiPaneOf,
       clearStaleTextSelection: clearStaleTextSelection,
       ensurePinned: ensurePinned,
+      movePinnedSegment: movePinnedSegment,
+      prepareSegmentDrag: prepareSegmentDrag,
       SIDES: SIDES,
       HOT_PAD: HOT_PAD,
       GRID: GRID,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-drawai",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "type": "module",
   "description": "DSH 右侧栏的可编辑画布 + AI 语义绘图工具（diagram_apply / diagram_read），直接读写原生 .drawio 文件",
   "license": "MIT",