@cardenelabs/cdl 0.20.0 → 0.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.20.0",
+  "version": "0.21.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/collisions.ts

@@ -9,6 +9,15 @@ import { measureTextWidth } from "./text-width";
  */
 const LANE_LABEL_CLEARANCE_MARGIN = 2;
 
+/**
+ * 近接を解消する時に、要求ちょうどではなくこの分だけ余分に押し出す (world unit)。
+ *
+ * 判定は `gap < required` の strict 比較だが、要求ちょうどに置くと px へ投影する丸めで
+ * 割れる (実測 = 押し出した先が `gap=32.0px (need 32px)` で error)。
+ * `LANE_LABEL_CLEARANCE_MARGIN` と同じ理由で、同じ幅を取る。
+ */
+const NEAR_MISS_MARGIN = LANE_LABEL_CLEARANCE_MARGIN;
+
 /**
  * 全要素の AABB を集約。 engine が「キャンバスに何があるか」 を全部把握する SSOT。
  */
@@ -1570,8 +1579,8 @@ export function resolveEdgeLabelOverlapsWithChainAndPropagate(
         const shift = computeOverlapShift(label, inflated);
         if (!shift) continue;
         // computeOverlapShift は minClearance を上乗せするが、 膨張分で確保済なので差し引く。
-        const amount = shift.amount - minClearance;
-        if (amount <= 0) continue;
+        const amount = shift.amount - minClearance + NEAR_MISS_MARGIN;
+        if (amount <= NEAR_MISS_MARGIN) continue;
         out.push({
           target: { kind: "label", id: label.id },
           axis: shift.axis,
@@ -1634,6 +1643,51 @@ export function resolveEdgeLabelOverlapsWithChainAndPropagate(
       }
     }
 
+    /*
+     * (2b) label ↔ label の **近接** (重なってはいないが要求 clearance 未満)。
+     *
+     * (2) は重なった時しか動かさない (`computeOverlapShift` が重なり量 0 で null を返す)。
+     * 一方 `clearance` 軸は 36 を要求するので、33 しか空いていない組が残っていた
+     * (実測で見本 7 図が同じ形)。 node と lane-label には (1a) / (1b) で近接の面倒を見る
+     * rule があり、label どうしだけが抜けていた。
+     *
+     * 静止側を要求ぶん膨らませて (1a) と同じ形で押し出す。 押す側は (2) と同じ順序規則
+     * (後に declare した方) にする = 同じ組で (2) と (2b) が逆向きに押し合うのを避ける。
+     *
+     * chain: false = 微調整なので node / path の連鎖は起こさない。
+     */
+    for (let i = 0; i < labels.length; i++) {
+      for (let j = i + 1; j < labels.length; j++) {
+        const a = labels[i]!;
+        const b = labels[j]!;
+        if (computeOverlapShift(a, b)) continue;
+        const orderA = edgeOrder.get(a.id)!;
+        const orderB = edgeOrder.get(b.id)!;
+        const moveBox = orderA > orderB ? a : b;
+        const staticBox = orderA > orderB ? b : a;
+        const required = requiredNearClearance(moveBox.kind, staticBox.kind);
+        const inflated: BBox = {
+          ...staticBox,
+          x: staticBox.x - required,
+          y: staticBox.y - required,
+          w: staticBox.w + required * 2,
+          h: staticBox.h + required * 2,
+        };
+        const shift = computeOverlapShift(moveBox, inflated);
+        if (!shift) continue;
+        // 膨張分で確保済なので、`computeOverlapShift` が上乗せした分を差し引く
+        const amount = shift.amount - minClearance + NEAR_MISS_MARGIN;
+        if (amount <= NEAR_MISS_MARGIN) continue;
+        out.push({
+          target: { kind: "label", id: moveBox.id },
+          axis: shift.axis,
+          sign: shift.sign,
+          amount,
+          chain: false,
+        });
+      }
+    }
+
     // (3) CAR-482 chain 伝搬 = label が shift 方向にある obstacle と衝突するなら、
     // obstacle も同方向同量 shift 連鎖。 label ↔ obstacle が既に (1) で処理されているため、
     // ここでは「shift 済 label の shift 累積方向にある obstacle」 を検出、 obstacle 側 shift 発火。
@@ -1811,12 +1865,56 @@ export function resolveEdgeLabelOverlapsWithChainAndPropagate(
         const ordered = edgeProbes
           .map((p, idx) => ({ p, idx }))
           .sort((a, b) => probeDist[a.idx]! - probeDist[b.idx]!);
+        let 線を動かせた = false;
         for (const { p } of ordered) {
           const axis = p.axis as "x" | "y";
           if (!pathShiftIsSafe(e.id, axis, p.sign, amount)) continue;
           out.push({ target: { kind: "edge-path", id: e.id }, axis, sign: p.sign, amount });
+          線を動かせた = true;
           break;
         }
+        /*
+         * 線をどの向きにも動かせない時は **説明の側を離す**。
+         *
+         * 線を動かさないのは「説明の近接より経路の破損の方が重い」 ためだが、動かせないまま
+         * 何もしないと近接がそのまま残る (実測で `gap=9.0px (need 14px)`)。 説明は動かしても
+         * 経路を壊さないので、こちらを逃がす。
+         *
+         * 向きは、線から見て説明が居る側 (最も近い segment の中点から説明の中心へ向かう向き) の
+         * 縦横どちらか、離れている方の軸を選ぶ。
+         */
+        if (!線を動かせた) {
+          const 芯 = { x: label.x + label.w / 2, y: label.y + label.h / 2 };
+          let 近い点: { x: number; y: number } | null = null;
+          let 最短 = Infinity;
+          for (const seg of segs) {
+            for (const 点 of [
+              { x: seg.x1, y: seg.y1 },
+              { x: seg.x2, y: seg.y2 },
+              { x: (seg.x1 + seg.x2) / 2, y: (seg.y1 + seg.y2) / 2 },
+            ]) {
+              const d = Math.hypot(点.x - 芯.x, 点.y - 芯.y);
+              if (d < 最短) {
+                最短 = d;
+                近い点 = 点;
+              }
+            }
+          }
+          if (近い点) {
+            const dx = 芯.x - 近い点.x;
+            const dy = 芯.y - 近い点.y;
+            const axis: "x" | "y" = Math.abs(dx) >= Math.abs(dy) ? "x" : "y";
+            const 向き = axis === "x" ? dx : dy;
+            const sign: 1 | -1 = 向き >= 0 ? 1 : -1;
+            out.push({
+              target: { kind: "label", id: label.id },
+              axis,
+              sign,
+              amount: pathLabelClearance - gap + NEAR_MISS_MARGIN,
+              chain: false,
+            });
+          }
+        }
       }
     }
 

package/src/layout/nodes.ts

@@ -8,7 +8,6 @@ import {
   SUBTITLE_ROW_SHIFT,
   中身から出す高さ,
   目印なしの繰り上げ,
-  段を積む箱か,
 } from "./spec";
 import { DEFAULT_NODE_GAP, HEADER_RESERVE, LANE_TOP_PAD, NODE_SIZE, STACK_GAP } from "./tokens";
 
@@ -245,10 +244,14 @@ export function layoutNodes(diag: CdlDiagram, lanes: LaidLane[]): LaidNode[] {
      * 並びの重心が 1 本に通る。 見た目検査の `row-alignment` もこの前提で書かれている。
      */
     //
-    // 段を積む箱 (#589) も同じ扱いにする。 書いた段の数から高さを出しているので、段の高さへ
-    // 伸ばすとその値が捨てられる = 名前だけの箱が 3 段の箱と同じ高さに戻る。
-    const 自前の高さ =
-      n.rowMarks !== undefined || 段を積む箱か(n.kind, (n.rows?.length ?? 0) > 0);
+    // **段を積む箱 (#589) はここに入れない**。 書いた段の数から高さを出すが、その値は段の
+    // 高さ (行内の最大) を通してから使う。
+    //
+    // 自前の高さで並べると、同じ縦列の中で箱ごとに高さが変わり、隣り合う箱の端どうしの
+    // 間隔が揃わなくなる (実測 = `pattern-rollback` で最小 100 に対し最大 187、
+    // `column-gap-uniform` が error)。 縦列が 1 本の図 (流れ図) では行に箱が 1 つしか無いので
+    // 段の高さ = その箱の高さになり、縮む効果はそのまま残る。
+    const 自前の高さ = n.rowMarks !== undefined;
     const h = n.h ?? (自前の高さ ? 箱の高さ(n, size.h) : 段の高さ);
     const cy = 段の芯;
     // n.w 明示時は尊重、 未指定で rows[] を持つ node は内容長に合わせて auto 拡張。