@cardenelabs/cdl 0.30.1 → 0.30.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.30.1",
+  "version": "0.30.2",
   "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/index.ts

@@ -187,6 +187,7 @@ export { requiredRowsWidth } from "./kinds/row-align";
 export {
   resolveOverlapsWithChain,
   resolveEdgeLabelOverlapsWithChain,
+  resolveLabelClearanceAfterPathPasses,
   resolveEdgeLabelOverlapsWithChainAndPropagate,
 } from "./layout/collisions";
 // predict-bbox = engine 予測 bbox の world 単位計算 SSOT (副次係数 COEFF 撤廃用)

package/src/layout/collisions.ts

@@ -1,5 +1,6 @@
 import type { BBox, LaidEdge, LaidLane, LaidNode } from "../types";
 import { CHAIN_SHIFT_MAX_ACCUMULATED, computeLabelBBoxWorld, EDGE_STUB_OUT, hasRenderedLabel, LABEL_TO_PATH_CLEARANCE, requiredNearClearance } from "./spec";
+import { DIST_LABEL_PATH_MAX } from "./clearance-constants";
 import { footerShapeDrops } from "./footer-shape";
 import { measureTextWidth } from "./text-width";
 
@@ -2211,6 +2212,350 @@ export function resolveEdgeLabelOverlapsWithChainAndPropagate(
   };
 }
 
+/**
+ * 経路を動かす pass の **後** に、 札だけを箱 ・ 札 ・ 線から離す (#659)。
+ *
+ * ## なぜ最終 pass が要るか
+ *
+ * `resolveEdgeLabelOverlapsWithChainAndPropagate` は経路を動かす 4 つの pass
+ * (`bowSharedStraightPaths` / `pullOutgoingFirstCorner` / `fanIncomingEndpoints` /
+ * `separateSharedStraightRuns`) の **前** に走る。 札の初期位置は経路から決まるため、
+ * 後の pass が経路を動かすと札も一緒に動く。 動いた後を見る者が誰も居なかった。
+ *
+ * 0.30.0 で `pullOutgoingFirstCorner` (#651) と `fanIncomingEndpoints` (#649) が経路を
+ * 大きく動かすようになり、 消費側の見本帳で札が 11 件動いた (実測 = 最大 217 world)。
+ * 動いた先が箱の近くだと `clearance` 軸の要求 (箱と札で 32) を割ったまま残る。
+ * 実測 = 0.29.0 で 0 件だった違反が 0.30.1 で 9 件。
+ *
+ * ## 何を動かすか
+ *
+ * **札だけを動かす**。 箱と経路は動かさない = ここで経路を動かすと、 直前の 4 pass が
+ * 確定させた形 (根元の重なり分け / 起点の直進) を崩すことになる。
+ *
+ * 判定は門 (`detectNearCollisions`) と同じ `requiredNearClearance` ・ `computeGap` ・
+ * `measurePathLabelGapSegs` を引く。 別の式で近似すると、 門は落ちるのに押し出しは動かない
+ * 状態に戻る。
+ *
+ * ## 行き先を確かめてから動かす
+ *
+ * 一番安く済む軸へ出すだけだと、 上下や左右の箱に挟まれた札が往復して収束しない
+ * (実測 = 箱 2 つの間で 16 下げて 4 上げるのを繰り返す)。
+ * 軸ごとに行き先を作り、 **他のどの箱 ・ 札 ・ 線とも今より近づかない** 向きだけを採る。
+ * どの向きも安全でなければ動かさない = 直せなかったことは門が引き続き報告する。
+ *
+ * ## 動かしすぎない
+ *
+ * 累積は `CHAIN_SHIFT_MAX_ACCUMULATED` で頭を打つ。 札は自分の線の近くに居ることが
+ * 読みの前提で、 離しすぎるとどの線の札か判らなくなる。
+ */
+export function resolveLabelClearanceAfterPathPasses(
+  edges: LaidEdge[],
+  obstacles: BBox[],
+  maxIter = 8,
+): LaidEdge[] {
+  if (edges.length === 0) return edges;
+
+  const labeledIds = new Set(
+    edges.filter((e) => e.label?.trim() || e.sub?.trim()).map((e) => e.id),
+  );
+  if (labeledIds.size === 0) return edges;
+
+  const 箱たち = obstacles.filter((o) => o.kind === "node" || o.kind === "lane-label");
+  const edgeById = new Map<string, LaidEdge>();
+  for (const e of edges) edgeById.set(e.id, e);
+  /*
+   * 線の区間は **曲線を開いた形** で持つ (`detectCollisions` の札 branch と同じ)。
+   *
+   * 弦のままだと、 膨らんだ弧が札を貫いても弦が札の外なら見えない。 門はこの形で
+   * `edge-label-overlap` を出すため、 押し出し側が弦で測ると「門は落ちるのに動かない」 に戻る。
+   */
+  const 区間cache = new Map<string, Seg[]>();
+  const 区間 = (id: string, d: string): Seg[] => {
+    const hit = 区間cache.get(id);
+    if (hit) return hit;
+    const segs = flattenPathSegments(extractPathSegments(d));
+    区間cache.set(id, segs);
+    return segs;
+  };
+  /*
+   * 線の外接矩形。 **測る前に遠い相手を落とすために持つ**。
+   *
+   * 札 1 つにつき全ての線と区間距離を測ると、 線が増えるほど二乗で効く
+   * (実測 = 曲線 380 本の図で配置が 100ms の予算を超えた)。 外接矩形が要求ぶん離れていれば
+   * 区間距離も必ず要求以上なので、 測らずに落としてよい。
+   */
+  const 外接cache = new Map<string, { x: number; y: number; w: number; h: number } | null>();
+  const 外接 = (id: string, d: string) => {
+    const hit = 外接cache.get(id);
+    if (hit !== undefined) return hit;
+    const segs = 区間(id, d);
+    if (segs.length === 0) {
+      外接cache.set(id, null);
+      return null;
+    }
+    let x1 = Infinity, y1 = Infinity, x2 = -Infinity, y2 = -Infinity;
+    for (const g of segs) {
+      x1 = Math.min(x1, g.x1, g.x2);
+      y1 = Math.min(y1, g.y1, g.y2);
+      x2 = Math.max(x2, g.x1, g.x2);
+      y2 = Math.max(y2, g.y1, g.y2);
+    }
+    const box = { x: x1, y: y1, w: x2 - x1, h: y2 - y1 };
+    外接cache.set(id, box);
+    return box;
+  };
+  /** 札の矩形と線の外接矩形が、 要求より離れているか */
+  const 遠い = (box: BBox, edgeId: string, d: string, 余裕: number): boolean => {
+    const b = 外接(edgeId, d);
+    if (!b) return true;
+    const dx = Math.max(0, Math.max(box.x - (b.x + b.w), b.x - (box.x + box.w)));
+    const dy = Math.max(0, Math.max(box.y - (b.y + b.h), b.y - (box.y + box.h)));
+    return Math.hypot(dx, dy) >= 余裕;
+  };
+
+  /*
+   * 動かす量の頭。 読みの上限は「自分の線から離れすぎない」 ことで、 それは `安全か` が
+   * 距離そのもので見る。 ここは念のための頭で、 chain 伝搬の頭 (`CHAIN_SHIFT_MAX_ACCUMULATED`)
+   * より緩くしてよい = この pass は札しか動かさず、 箱や経路を引きずらない。
+   */
+  const 最大移動 = CHAIN_SHIFT_MAX_ACCUMULATED * 2;
+
+  const shiftMap = new Map<string, { dx: number; dy: number }>();
+  const getShift = (id: string): { dx: number; dy: number } =>
+    shiftMap.get(id) ?? { dx: 0, dy: 0 };
+
+  const labelBBoxes = (): BBox[] => {
+    const out: BBox[] = [];
+    for (const e of edges) {
+      if (!labeledIds.has(e.id)) continue;
+      const base = computeLabelBBoxWorld(e);
+      const s = getShift(e.id);
+      out.push({ kind: "edge-label", id: e.id, x: base.x + s.dx, y: base.y + s.dy, w: base.w, h: base.h });
+    }
+    return out;
+  };
+
+  /** 軸ごとの離れ量。 重なっている時は負になる */
+  const 離れ量 = (a: BBox, b: BBox): { x: number; y: number } => ({
+    x: Math.max(a.x - (b.x + b.w), b.x - (a.x + a.w)),
+    y: Math.max(a.y - (b.y + b.h), b.y - (a.y + a.h)),
+  });
+
+  const 動かした箱 = (box: BBox, axis: "x" | "y", sign: 1 | -1, amount: number): BBox => ({
+    ...box,
+    x: box.x + (axis === "x" ? sign * amount : 0),
+    y: box.y + (axis === "y" ? sign * amount : 0),
+  });
+
+  for (let iter = 0; iter < maxIter; iter += 1) {
+    const labels = labelBBoxes();
+    const 札の要求 = requiredNearClearance("edge-label", "edge-label");
+    let 動いた = false;
+    /*
+     * **1 回の走査で同じ札を 2 度動かさない**。 `labels` は走査の頭で 1 度だけ作るため、
+     * 2 度目の判定は動かす前の位置を基準にしてしまう。 その状態で行き先を確かめても、
+     * 実際に着く場所とは違う所を見ることになる (実測 = 札が箱の中へ 228px² 入った)。
+     * 動かした札は次の走査で作り直した位置から見る。
+     */
+    const 今回動かした = new Set<string>();
+
+    /** 札 1 つを動かした先が、 いまより近づく相手を作らないか */
+    const 安全か = (label: BBox, 行き先: BBox): boolean => {
+      for (const obs of 箱たち) {
+        const 前 = computeGap(label, obs);
+        const 後 = computeGap(行き先, obs);
+        if (後 < Math.min(前, requiredNearClearance("edge-label", obs.kind))) return false;
+      }
+      for (const 他 of labels) {
+        if (他.id === label.id) continue;
+        const 前 = computeGap(label, 他);
+        const 後 = computeGap(行き先, 他);
+        if (後 < Math.min(前, 札の要求)) return false;
+      }
+      // 線との距離は重いので最後に見る。 ここまでで落ちる候補が大半。
+      const 自分 = edgeById.get(label.id);
+      const 自分の区間 = 自分 ? 区間(自分.id, 自分.d) : [];
+      /*
+       * **自分の線から離れすぎない**。 札は自分の線の近くに在ることが読みの前提で、
+       * 離すと どの線の説明なのかが判らなくなる。 いま既に離れている札はそれ以上離さない。
+       */
+      if (自分の区間.length > 0) {
+        const 前 = measurePathLabelGapSegs(自分の区間, label);
+        const 後 = measurePathLabelGapSegs(自分の区間, 行き先);
+        if (後 > Math.max(前, DIST_LABEL_PATH_MAX)) return false;
+      }
+      for (const 相手 of edges) {
+        if (相手.id === label.id) continue;
+        // 動かす前も後も要求ぶん離れている線は、 測らずに落とす。
+        if (遠い(label, 相手.id, 相手.d, LABEL_TO_PATH_CLEARANCE) && 遠い(行き先, 相手.id, 相手.d, LABEL_TO_PATH_CLEARANCE)) continue;
+        const segs = segmentsExcludingOwnPath(区間(相手.id, 相手.d), 自分の区間);
+        if (segs.length === 0) continue;
+        const 前 = measurePathLabelGapSegs(segs, label);
+        const 後 = measurePathLabelGapSegs(segs, 行き先);
+        if (後 < Math.min(前, LABEL_TO_PATH_CLEARANCE)) return false;
+      }
+      return true;
+    };
+
+    /** 候補を安い順に試し、 行き先が安全な最初の 1 つを積む */
+    const 逃がす = (
+      label: BBox,
+      候補: Array<{ axis: "x" | "y"; sign: 1 | -1; amount: number }>,
+    ): boolean => {
+      for (const c of 候補.slice().sort((a, b) => a.amount - b.amount)) {
+        if (c.amount <= 0) continue;
+        const 行き先 = 動かした箱(label, c.axis, c.sign, c.amount);
+        if (!安全か(label, 行き先)) continue;
+        const cur = getShift(label.id);
+        const dx = c.axis === "x" ? cur.dx + c.sign * c.amount : cur.dx;
+        const dy = c.axis === "y" ? cur.dy + c.sign * c.amount : cur.dy;
+        if (Math.hypot(dx, dy) > 最大移動) continue;
+        shiftMap.set(label.id, { dx, dy });
+        今回動かした.add(label.id);
+        return true;
+      }
+      return false;
+    };
+
+    /** 矩形どうしが要求を満たしていない時の、 軸ごとの逃がし候補 */
+    const 矩形の候補 = (
+      label: BBox,
+      static箱: BBox,
+      required: number,
+    ): Array<{ axis: "x" | "y"; sign: 1 | -1; amount: number }> => {
+      const sep = 離れ量(label, static箱);
+      const 向き = (axis: "x" | "y"): 1 | -1 => {
+        const a = axis === "x" ? label.x + label.w / 2 : label.y + label.h / 2;
+        const b = axis === "x" ? static箱.x + static箱.w / 2 : static箱.y + static箱.h / 2;
+        return a >= b ? 1 : -1;
+      };
+      return [
+        { axis: "x" as const, sign: 向き("x"), amount: required - sep.x + NEAR_MISS_MARGIN },
+        { axis: "y" as const, sign: 向き("y"), amount: required - sep.y + NEAR_MISS_MARGIN },
+      ];
+    };
+
+    // 札 ↔ 箱 / 縦列の題。 障害物は動かさないので札だけを逃がす。
+    for (const label of labels) {
+      if (今回動かした.has(label.id)) continue;
+      for (const obs of 箱たち) {
+        const required = requiredNearClearance(label.kind, obs.kind);
+        if (required <= 0) continue;
+        if (computeGap(label, obs) >= required) continue;
+        if (逃がす(label, 矩形の候補(label, obs, required))) {
+          動いた = true;
+          break;
+        }
+      }
+    }
+
+    // 札 ↔ 札。 後に書いた方を動かす = 先に書いた方を基準にすると向きが安定する。
+    const 札順 = new Map<string, number>();
+    edges.forEach((e, i) => 札順.set(e.id, i));
+    for (let i = 0; i < labels.length; i += 1) {
+      for (let j = i + 1; j < labels.length; j += 1) {
+        const a = labels[i]!;
+        const b = labels[j]!;
+        if (computeGap(a, b) >= 札の要求) continue;
+        const aIsLater = 札順.get(a.id)! > 札順.get(b.id)!;
+        const moveBox = aIsLater ? a : b;
+        const staticBox = aIsLater ? b : a;
+        if (今回動かした.has(moveBox.id)) continue;
+        if (逃がす(moveBox, 矩形の候補(moveBox, staticBox, 札の要求))) 動いた = true;
+      }
+    }
+
+    // 札 ↔ 別の線。 線は動かさないので札だけを逃がす。
+    // 向きは、 線の最も近い点から札の芯へ向かう向きの縦横 2 つ。
+    for (const label of labels) {
+      if (今回動かした.has(label.id)) continue;
+      const 自分 = edgeById.get(label.id);
+      if (!自分) continue;
+      const 自分の区間 = 区間(自分.id, 自分.d);
+      for (const 他 of edges) {
+        if (他.id === label.id) continue;
+        // 同じ 2 点を結ぶ線は経路が重なるのが設計 (CAR-429)。 逃がす相手にしない。
+        if (自分.from === 他.from && 自分.to === 他.to) continue;
+        if (遠い(label, 他.id, 他.d, LABEL_TO_PATH_CLEARANCE)) continue;
+        const segs = segmentsExcludingOwnPath(区間(他.id, 他.d), 自分の区間);
+        if (segs.length === 0) continue;
+        const gap = measurePathLabelGapSegs(segs, label);
+        if (gap >= LABEL_TO_PATH_CLEARANCE) continue;
+        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 (!近い点) continue;
+        /*
+         * **要る量を測って決める**。 `要求 - いまの距離` で出すと、 線が札を横切っている形で
+         * 足りない = 距離は 0 で止まるが、 実際には札の端が線を越えるまで動かす必要がある。
+         * 実測 = 札の幅 132 の真ん中を縦の線が貫く形で、 18 動かしても 7 しか離れなかった。
+         *
+         * 動かす量を 2 倍ずつ伸ばして満たす所を見つけ、 二分で詰める。 測り方は門と同じ
+         * `measurePathLabelGapSegs` を使う。 上限まで伸ばしても満たせない向きは候補にしない。
+         */
+        const 必要量 = (axis: "x" | "y", sign: 1 | -1): number | null => {
+          const 満たす = (量: number): boolean =>
+            measurePathLabelGapSegs(segs, 動かした箱(label, axis, sign, 量)) >= LABEL_TO_PATH_CLEARANCE;
+          let lo = 0;
+          let hi = Math.max(4, LABEL_TO_PATH_CLEARANCE - gap);
+          // **上限そのものを試してから諦める**。 2 倍で伸ばした値が上限を跨いだ所で打ち切ると、
+          // 上限内に満たす量があっても見つけられない (実測 = 83 で足りるのに 128 で諦めていた)。
+          while (!満たす(hi)) {
+            if (hi >= 最大移動) return null;
+            lo = hi;
+            hi = Math.min(hi * 2, 最大移動);
+          }
+          for (let k = 0; k < 12; k += 1) {
+            const mid = (lo + hi) / 2;
+            if (満たす(mid)) hi = mid;
+            else lo = mid;
+          }
+          return hi + NEAR_MISS_MARGIN;
+        };
+        const dx = 芯.x - 近い点.x;
+        const dy = 芯.y - 近い点.y;
+        const 候補: Array<{ axis: "x" | "y"; sign: 1 | -1; amount: number }> = [];
+        for (const c of [
+          { axis: "x" as const, sign: (dx >= 0 ? 1 : -1) as 1 | -1 },
+          { axis: "y" as const, sign: (dy >= 0 ? 1 : -1) as 1 | -1 },
+          // 近い点から離れる向きが塞がれていることがある。 反対向きも候補に入れる。
+          { axis: "x" as const, sign: (dx >= 0 ? -1 : 1) as 1 | -1 },
+          { axis: "y" as const, sign: (dy >= 0 ? -1 : 1) as 1 | -1 },
+        ]) {
+          const 量 = 必要量(c.axis, c.sign);
+          if (量 !== null) 候補.push({ ...c, amount: 量 });
+        }
+        if (逃がす(label, 候補)) {
+          動いた = true;
+          break;
+        }
+      }
+    }
+
+    if (!動いた) break;
+  }
+
+  if (shiftMap.size === 0) return edges;
+  return edges.map((e) => {
+    const s = shiftMap.get(e.id);
+    if (!s || (s.dx === 0 && s.dy === 0)) return e;
+    return { ...e, labelX: e.labelX + s.dx, labelY: e.labelY + s.dy };
+  });
+}
+
 /**
  * CAR-485 = label shift + edge-path shift を同時 apply する helper。
  * label shift は labelX / labelY 加算、 edge-path shift は path.d の shift。

package/src/layout.ts

@@ -9,6 +9,7 @@ import {
   detectNearCollisions,
   resolveEdgeLabelOverlapsWithChainAndPropagate,
   resolveOverlaps,
+  resolveLabelClearanceAfterPathPasses,
 } from "./layout/collisions";
 import {
   bowSharedStraightPaths,
@@ -367,6 +368,19 @@ export function layout(diag: CdlDiagram): LaidDiagram {
   // 置き直しは全て縦方向で、 線に沿って動かす経路が無かった。 いま被っている札だけを
   // 対象にするので、 落ち着いている図の座標は動かない。
   slideLabelsAlongOwnPath(edges, nodesFinal);
+  // 経路を動かす pass が全て終わってから、 札を箱と札から離し直す (#659)。
+  //
+  // 上の chain 伝搬はここより前に走るため、 その後で `pullOutgoingFirstCorner` /
+  // `fanIncomingEndpoints` が経路を動かすと札も一緒に動く。 動いた後を見る者が居なかった。
+  // ここで動かすのは札だけで、 箱も経路も触らない = 触ると直前の pass が確定させた形を崩す。
+  if (!isChainEdgeLabelDisabled()) {
+    edges = resolveLabelClearanceAfterPathPasses(
+      edges,
+      collectBBoxes(containedLanesFinal, nodesFinal, []).filter(
+        (b) => b.kind === "node" || b.kind === "lane-label",
+      ),
+    );
+  }
 
   const bboxes = collectBBoxes(containedLanesFinal, nodesFinal, edges);
   const collisions = detectCollisions(bboxes, edges);