@cardenelabs/cdl 0.114.0 → 0.115.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.114.0",
+  "version": "0.115.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/kinds/tree.tsx

@@ -409,6 +409,53 @@ export function computeTreeLayout(
     return Math.min(Math.max(要る, nodeW), slotW * 0.92);
   };
 
+  /*
+    置く前に、葉の並びと段を先に出す (#968)。
+
+    端の葉の箱がどれだけ幅を取るかが判らないと、箱の辺を描画域の端へ合わせられない。
+    箱の幅は名前と段から決まる (`箱の幅`) ので、位置より先に出せる。
+
+    走査の順は `place` と同じ (同じ `childrenOf` を同じ順に辿り、既訪で打ち切る)。
+  */
+  const 葉の並び: string[] = [];
+  const 段の表 = new Map<string, number>();
+  const 幅の表 = new Map<string, number>();
+  {
+    const 見た = new Set<string>();
+    const 下見 = (n: TreeNodePayload, depth: number): void => {
+      見た.add(n.id);
+      段の表.set(n.id, depth);
+      幅の表.set(n.id, 箱の幅(n, depth));
+      const kids = (childrenOf.get(n.id) ?? []).filter((k) => !見た.has(k.id));
+      if (kids.length === 0) {
+        葉の並び.push(n.id);
+        return;
+      }
+      for (const k of kids) 下見(k, depth + 1);
+    };
+    for (const r of roots) if (!見た.has(r.id)) 下見(r, 0);
+  }
+
+  /*
+    葉と葉の隙間を、**段と段の隙間に揃える** (#968)。
+
+    それまでは葉を `canvasW / 葉の数` で等分した区画の中央に置いていた。
+    葉が少ない図では区画が箱よりずっと広くなり、兄弟どうしが遠くへ離れる
+    (実測 = 葉 2 枚の図で箱の縁の間が 196 空き、段の隙間 95 の 2 倍になった)。
+
+    木は根から下へ辿る図なので、横の隙間だけが縦の 2 倍あると、離れた 2 本の列に見える。
+    横の隙間を縦の隙間と同じにすれば、図の中の間隔が 1 つの調子で揃う。
+
+    **今より広げない** (`Math.min(slotW, ...)`)。 葉が多い図では区画の方が狭いので、
+    そちらが効いて位置は 1 ポイントも動かない。
+  */
+  const 葉の数 = Math.max(葉の並び.length, 1);
+  const 段の隙間 = depthGap - nodeH;
+  const 葉の間隔 = Math.min(slotW, nodeW + 段の隙間);
+  /** 葉の列全体を描画域の真ん中に置く。 葉が 1 枚なら間隔が要らない */
+  const 葉のx = (i: number): number =>
+    canvasW / 2 - ((葉の数 - 1) * 葉の間隔) / 2 + i * 葉の間隔;
+
   const posOf = new Map<string, { x: number; y: number }>();
   const nodes: LayoutNode[] = [];
   const placed = new Set<string>();
@@ -420,7 +467,7 @@ export function computeTreeLayout(
     const kids = (childrenOf.get(n.id) ?? []).filter((k) => !placed.has(k.id));
     let x: number;
     if (kids.length === 0) {
-      x = leafCursor * slotW + slotW / 2;
+      x = 葉のx(leafCursor);
       leafCursor += 1;
     } else {
       const xs = kids.map((k) => place(k, depth + 1));
@@ -434,7 +481,7 @@ export function computeTreeLayout(
       ...(n.subtitle !== undefined ? { subtitle: n.subtitle } : {}),
       x,
       y,
-      w: 箱の幅(n, depth),
+      w: 幅の表.get(n.id) ?? 箱の幅(n, depth),
       h: nodeH,
       depth,
       ...((n as { unresolved?: true }).unresolved ? { unresolved: true as const } : {}),