@cardenelabs/cdl 0.29.0 → 0.30.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.29.0",
+  "version": "0.30.0",
   "description": "CDL (Chainome Diagram Language). Mermaid-like declarative DSL that compiles to animated SVG diagrams. Built for blockchain / Solidity flows, generic enough for sequence / flow / state / ER / topology diagrams.",
   "license": "MIT",
   "author": "cardene777",

package/src/layout/edges.ts

@@ -2999,12 +2999,110 @@ export function separateSharedStraightRuns(edges: LaidEdge[], nodes: readonly La
   }
 }
 
+/**
+ * 同じ節の同じ辺から出る線のうち、 最長の 1 本を除いて最初の折れを手前へ引く (#651)。
+ *
+ * 起点は `fan-origin-single-point` のため動かさず、 最初の折れ直後の区間を平行移動する。
+ * 1 本しか出ない辺は `detourStub` が決めた箱との中間位置をそのまま保つ。
+ */
+export function pullOutgoingFirstCorner(edges: LaidEdge[], nodes: readonly LaidNode[]): void {
+  if (edges.length < 2) return;
+
+  const 束 = new Map<string, LaidEdge[]>();
+  const 同じ組の数 = new Map<string, number>();
+  for (const e of edges) {
+    const key = `${e.from}::${e.fromSide}`;
+    const list = 束.get(key) ?? [];
+    list.push(e);
+    束.set(key, list);
+    const pair = `${e.from}->${e.to}`;
+    同じ組の数.set(pair, (同じ組の数.get(pair) ?? 0) + 1);
+  }
+
+  let 札を旧経路へ追従済み = false;
+  for (const list of 束.values()) {
+    if (list.length < 2) continue;
+    const 並び = list
+      .flatMap((e) => {
+        const pts = pathVertices(e.d);
+        if (!pts || pts.length < 2) return [];
+        return [{ e, pts, 最初の長さ: Math.hypot(pts[1]!.x - pts[0]!.x, pts[1]!.y - pts[0]!.y) }];
+      })
+      .sort((a, b) => b.最初の長さ - a.最初の長さ);
+
+    // 最長の線を引いても共有区間は縮まらないので、 2 本目以降だけを動かす。
+    for (const { e, pts, 最初の長さ } of 並び.slice(1)) {
+      // 同じ 2 節を結ぶ線の分離は `bowSharedStraightPaths` の範囲。 迂回経路は重ねて残す。
+      if ((同じ組の数.get(`${e.from}->${e.to}`) ?? 0) > 1) continue;
+      if (pts.length < 3 || 最初の長さ <= EDGE_STUB_OUT + VERTICAL_DETOUR_CORNER) continue;
+      const 横 = e.fromSide === "left" || e.fromSide === "right";
+      if (!runIsAligned(pts, 0, 横 ? 1 : 0)) continue;
+
+      // 角丸の半径分を折れの位置に足し、起点からの直線部を EDGE_STUB_OUT だけ残す。
+      const 移動量 = 最初の長さ - (EDGE_STUB_OUT + VERTICAL_DETOUR_CORNER);
+      const ux = (pts[1]!.x - pts[0]!.x) / 最初の長さ;
+      const uy = (pts[1]!.y - pts[0]!.y) / 最初の長さ;
+      const 試し = pts.map((p, i) =>
+        i === 1 || i === 2 ? { x: p.x - ux * 移動量, y: p.y - uy * 移動量 } : p,
+      );
+      const 試しD = verticesToPath(試し);
+      const 試し区間 = flattenPathSegments(extractPathSegments(試しD));
+      if (
+        nodes.some(
+          (n) => n.id !== e.from && n.id !== e.to && segmentsCrossRect(試し区間, nodeRect(n)),
+        )
+      ) {
+        continue;
+      }
+
+      const 前 = e.d;
+      const 前の交差 = countEdgeCrossings(edges).count;
+      e.d = 試しD;
+      if (countEdgeCrossings(edges).count > 前の交差) {
+        e.d = 前;
+        continue;
+      }
+      e.d = 前;
+
+      // 旧経路に重なっていた札を先に確定する。 経路を動かした後では重なりが消え、 札だけが
+      // 元の位置に取り残される。
+      if (!札を旧経路へ追従済み) {
+        slideLabelsAlongOwnPath(edges, nodes);
+        札を旧経路へ追従済み = true;
+      }
+      const labelBox = computeLabelBBoxWorld(e);
+      const label = { x: labelBox.x + labelBox.w / 2, y: labelBox.y + labelBox.h / 2 };
+      const 線分までの距離2 = (a: Vertex, b: Vertex): number => {
+        const dx = b.x - a.x;
+        const dy = b.y - a.y;
+        const len2 = dx * dx + dy * dy;
+        const t =
+          len2 === 0
+            ? 0
+            : Math.max(0, Math.min(1, ((label.x - a.x) * dx + (label.y - a.y) * dy) / len2));
+        return (label.x - (a.x + dx * t)) ** 2 + (label.y - (a.y + dy * t)) ** 2;
+      };
+      const 動く区間への距離 = 線分までの距離2(pts[1]!, pts[2]!);
+      const labelも動かす = pts
+        .slice(0, -1)
+        .every((p, i) => 線分までの距離2(p, pts[i + 1]!) >= 動く区間への距離 - 1e-6);
+      e.d = 試しD;
+      if (labelも動かす) {
+        e.labelX -= ux * 移動量;
+        e.labelY -= uy * 移動量;
+      }
+    }
+  }
+}
+
 /** 同じ辺に入る線を離す間隔 (world unit)。 箱の行 1 つ分。 */
 const ENDPOINT_FAN_STEP = 56;
 /** これより詰まるなら離さない (world unit)。 離しても線どうしを見分けられない。 */
 const ENDPOINT_FAN_MIN = 20;
-/** 終点の手前で辺に沿って動くために取る助走の長さ (world unit)。 */
+/** ずらすために最後の区間へ要る長さ (world unit)。 これより短い区間は動かさない。 */
 const ENDPOINT_FAN_RUNUP = 40;
+/** これより短い重なりは動かさない (world unit)。 動かすとまっすぐな線に折れが増える。 */
+const MIXED_ROOT_OVERLAP_MIN = 24;
 
 /**
  * 同じ節の同じ辺に **入る** 線の終点を、 辺に沿って離す (#611)。
@@ -3039,6 +3137,26 @@ const ENDPOINT_FAN_RUNUP = 40;
 export function fanIncomingEndpoints(edges: LaidEdge[], nodes: readonly LaidNode[]): void {
   if (edges.length < 2) return;
   const nmap = new Map(nodes.map((n) => [n.id, n]));
+  const 平坦な区間 = new Map(edges.map((e) => [e.id, flattenPathSegments(extractPathSegments(e.d))] as const));
+
+  const 軸に平行な重なり長さ = (一方: LaidEdge, 他方: LaidEdge): number => {
+    let 合計 = 0;
+    for (const a of 平坦な区間.get(一方.id) ?? []) {
+      const aは水平 = Math.abs(a.y2 - a.y1) <= 1;
+      const aは垂直 = Math.abs(a.x2 - a.x1) <= 1;
+      for (const b of 平坦な区間.get(他方.id) ?? []) {
+        const bは水平 = Math.abs(b.y2 - b.y1) <= 1;
+        const bは垂直 = Math.abs(b.x2 - b.x1) <= 1;
+        if (aは水平 && bは水平 && Math.abs(a.y1 - b.y1) <= 1) {
+          合計 += Math.max(0, Math.min(Math.max(a.x1, a.x2), Math.max(b.x1, b.x2)) - Math.max(Math.min(a.x1, a.x2), Math.min(b.x1, b.x2)));
+        }
+        if (aは垂直 && bは垂直 && Math.abs(a.x1 - b.x1) <= 1) {
+          合計 += Math.max(0, Math.min(Math.max(a.y1, a.y2), Math.max(b.y1, b.y2)) - Math.max(Math.min(a.y1, a.y2), Math.min(b.y1, b.y2)));
+        }
+      }
+    }
+    return 合計;
+  };
 
   /** 同じ 2 点を結ぶ線の本数。 その組は弓が扱うので、 ここでは触らない。 */
   const 同じ組の数 = new Map<string, number>();
@@ -3046,7 +3164,14 @@ export function fanIncomingEndpoints(edges: LaidEdge[], nodes: readonly LaidNode
 
   /** 同じ節の同じ辺に入る線。 */
   const 束 = new Map<string, LaidEdge[]>();
+  const 出る線 = new Map<string, LaidEdge[]>();
   for (const e of edges) {
+    if (nmap.has(e.from)) {
+      const key = `${e.from}::${e.fromSide}`;
+      const list = 出る線.get(key) ?? [];
+      list.push(e);
+      出る線.set(key, list);
+    }
     if (!nmap.has(e.to)) continue;
     // 同じ 2 点を結ぶ線は `bowSharedStraightPaths` が弓で分ける範囲。 `#941` は
     // 「どの幅でも箱に当たるなら分離せず重なりを残す」 と決めており、 末尾で分けると
@@ -3058,36 +3183,62 @@ export function fanIncomingEndpoints(edges: LaidEdge[], nodes: readonly LaidNode
     束.set(key, list);
   }
 
-  for (const [, list] of 束) {
-    if (list.length < 2) continue;
+  for (const [key, list] of 束) {
+    const 中央が塞がっている = (出る線.get(key) ?? []).some((出線) =>
+      list.some((入線) =>
+        !(入線.from === 出線.to && 入線.to === 出線.from)
+        && 軸に平行な重なり長さ(入線, 出線) >= MIXED_ROOT_OVERLAP_MIN
+      )
+    );
+    if (list.length < 2 && !中央が塞がっている) continue;
     const n = nmap.get(list[0]!.to)!;
     const 横 = list[0]!.toSide === "left" || list[0]!.toSide === "right";
     const 辺の長さ = 横 ? n.h : n.w;
     // 4 隅に刺さらない範囲。 `arrow-endpoint-center` が見ているのと同じ余白を空ける。
     const 使える幅 = 辺の長さ - 2 * ARROW_ENDPOINT_CENTER_TOL;
     if (使える幅 <= 0) continue;
-    const 間隔 = Math.min(ENDPOINT_FAN_STEP, 使える幅 / (list.length - 1));
+    const 席の間 = 中央が塞がっている ? list.length : list.length - 1;
+    const 間隔 = Math.min(ENDPOINT_FAN_STEP, 使える幅 / 席の間);
     if (間隔 < ENDPOINT_FAN_MIN) continue;
 
     // 来た高さの順に割り当てる。 上を走ってきた線を上の端点へ入れれば、 束の中で交差しない。
     // 図の並び順で割り当てると、 上を走る線が下の端点へ回って必ず交差する。
+    const 辺の中心 = 横 ? n.cy : n.cx;
     const 並び = list
-      .map((e) => ({ e, 深さ: 辺から離れた側の位置(e, 横) ?? 0 }))
+      .map((e) => {
+        const 区間 = extractPathSegments(e.d);
+        const last = 区間[区間.length - 1];
+        const 長い助走 = last === undefined ? 0 : Math.hypot(last.x2 - last.x1, last.y2 - last.y1);
+        const 中心を補う = 中央が塞がっている || list.length === 2;
+        const 深さ = 辺から離れた側の位置(e, 横) ?? (中心を補う ? 辺の中心 : 0);
+        return { e, 長い助走, 深さ };
+      })
       .sort((a, b) => a.深さ - b.深さ || (a.e.id < b.e.id ? -1 : 1));
 
     const 中心 = ((並び.length - 1) * 間隔) / 2;
+    let 負側の席 = 0;
+    let 正側の席 = 0;
     for (let k = 0; k < 並び.length; k++) {
-      const d = k * 間隔 - 中心;
+      const d = 中央が塞がっている
+        ? 並び[k]!.深さ < 辺の中心
+          ? -(++負側の席 * 間隔)
+          : ++正側の席 * 間隔
+        : k * 間隔 - 中心;
       if (Math.abs(d) < 0.001) continue;
       const e = 並び[k]!.e;
-      const 差替 = 末尾を辺に沿ってずらす(e, 横, d, nodes);
-      if (差替 === null) continue;
       // 交差が増えるなら戻す。 判定は軸と同じ数え方を使う = 独自の数え方は軸と食い違い、
       // 軸が 3 件を数えている状況で 0 件と判定して通してしまった (実測)。
       const 前 = e.d;
       const 前の交差 = countEdgeCrossings(edges).count;
-      e.d = 差替;
-      if (countEdgeCrossings(edges).count > 前の交差) e.d = 前;
+      const 長い助走 = 並び[k]!.長い助走;
+      for (const 助走 of [長い助走, ENDPOINT_FAN_RUNUP]) {
+        e.d = 前;
+        const 差替 = 末尾を辺に沿ってずらす(e, 横, d, 助走, nodes);
+        if (差替 === null) continue;
+        e.d = 差替;
+        if (countEdgeCrossings(edges).count <= 前の交差) break;
+        e.d = 前;
+      }
     }
   }
 }
@@ -3121,6 +3272,7 @@ function 末尾を辺に沿ってずらす(
   e: LaidEdge,
   横: boolean,
   d: number,
+  助走: number,
   nodes: readonly LaidNode[],
 ): string | null {
   if ((e.d.match(/M/g) ?? []).length !== 1) return null;
@@ -3139,10 +3291,11 @@ function 末尾を辺に沿ってずらす(
   const 長さ = Math.hypot(last.x2 - last.x1, last.y2 - last.y1);
   if (長さ < ENDPOINT_FAN_RUNUP + 1) return null;
 
-  // 助走を始める点。 終点から辺の外へ `ENDPOINT_FAN_RUNUP` 戻る。
+  // 助走が最後の区間を越えると、 書き戻した直前の折れから短く戻る区間ができる。
   const ux = (last.x1 - last.x2) / 長さ;
   const uy = (last.y1 - last.y2) / 長さ;
-  const 折れ1 = { x: last.x2 + ux * ENDPOINT_FAN_RUNUP, y: last.y2 + uy * ENDPOINT_FAN_RUNUP };
+  const 丸めた助走 = Math.min(助走, 長さ);
+  const 折れ1 = { x: last.x2 + ux * 丸めた助走, y: last.y2 + uy * 丸めた助走 };
   const 折れ2 = 横 ? { x: 折れ1.x, y: 折れ1.y + d } : { x: 折れ1.x + d, y: 折れ1.y };
   const 終点 = 横 ? { x: last.x2, y: last.y2 + d } : { x: last.x2 + d, y: last.y2 };
 
@@ -3169,7 +3322,8 @@ function 末尾を辺に沿ってずらす(
     parts.push(`L ${s.x2} ${s.y2}`);
   }
   // 助走の折れは丸めない。 短い 2 折れなので、 丸めると切り口が区間からはみ出す。
-  parts.push(`L ${round1(折れ1.x)} ${round1(折れ1.y)}`);
+  const 折れ1は直前の折れ = Math.abs(折れ1.x - last.x1) <= 0.5 && Math.abs(折れ1.y - last.y1) <= 0.5;
+  if (!折れ1は直前の折れ) parts.push(`L ${round1(折れ1.x)} ${round1(折れ1.y)}`);
   parts.push(`L ${round1(折れ2.x)} ${round1(折れ2.y)}`);
   parts.push(`L ${round1(終点.x)} ${round1(終点.y)}`);
   return parts.join(" ");

package/src/layout.ts

@@ -15,6 +15,7 @@ import {
   fanIncomingEndpoints,
   hopEdgeCrossings,
   layoutEdges,
+  pullOutgoingFirstCorner,
   repositionParallelLabels,
   separateSharedStraightRuns,
   slideLabelsAlongOwnPath,
@@ -346,6 +347,9 @@ export function layout(diag: CdlDiagram): LaidDiagram {
   // 弧が確定してから、 同じ節の組を結ぶ辺の label を「兄弟の線を跨がない位置」 へ置き直す (#376)。
   // 順序が逆だと、 直線を前提に置いた label を弧が貫く。 label を先に線から離すと、 今度は弧を
   // 膨らませる判定が label を障害物と見なして弧が消える。
+  // 同じ辺から出る線は、 最長の 1 本を除いて最初の直線部を 40 world まで引く (#651)。
+  // 経路の引き方を変えず、 確定後の最初の折れだけを動かす。
+  pullOutgoingFirstCorner(edges, nodesFinal);
   // 同じ辺に入る線の終点を辺に沿って離す (#611)。 経路を引き終えてから当てる = 終点を先に
   // 動かすと引き方の分岐が変わり、 迂回していた線が箱を貫通する (実測で 0 件が 7 件になった)。
   fanIncomingEndpoints(edges, nodesFinal);