@cardenelabs/cdl 0.114.0 → 0.116.0

package/dist/{render-oEmwYN-q.d.cts → render-A5AKjNuy.d.cts}

@@ -3035,4 +3035,4 @@ type CdlDiagramViewProps = {
 };
 declare function CdlDiagramView({ diagram, laid: laidProp, hideHeader, hideMiniPhaseIndicator, focusPhaseId, debug, emitGeometryWarn, headingLevel, interactiveHandlers }: CdlDiagramViewProps): JSX.Element;
 
-export { computeFormulaKey as $, EDGE_HEAD_DEFAULT as A, type BBox as B, type CdlDiagram as C, EDGE_HEAD_FILLS as D, type EdgeStyle as E, EDGE_HEAD_FILL_DEFAULT as F, EDGE_REVEALS as G, EDGE_REVEAL_DEFAULT as H, EDGE_STYLES as I, type JourneyEmotion as J, type EdgeReveal as K, type LaidDiagram as L, type InteractiveHandlerMap as M, type NodeKind as N, type InteractiveSignalsAccessor as O, type LaidLane as P, type QuadrantKey as Q, type RowMark as R, type Signal as S, type Tone as T, NODE_KINDS as U, RELATION_FOCUSES as V, RELATION_FOCUS_DEFAULT as W, type RelationFocus as X, type ScrollProgressHandle as Y, TONES as Z, computeEventBindingKey as _, type CdlInput as a, computeInputSignalKey as a0, computeScrollTriggerKey as a1, computed as a2, createInteractiveSignalsAccessor as a3, createScrollProgressHandle as a4, createScrollProgressSignals as a5, hasInteractivePrimitives as a6, resolveLang as a7, sequenceBoardMetrics as a8, sequenceStepId as a9, signal as aa, type CdlLane as b, type CdlNode as c, type Side as d, type EdgeRole as e, type EdgeHead as f, type EdgeHeadFill as g, type CdlState as h, type CdlInputOption as i, type CdlEventTarget as j, type CdlLang as k, type Computed as l, type CdlDerivedValue as m, type CdlScrollTrigger as n, type CdlDiagramViewProps as o, type LaidEdge as p, type LaidNode as q, type CdlEdge as r, CdlDiagramView as s, type CdlEventBinding as t, type CdlEventKind as u, type CdlFormula as v, type CdlPhase as w, type ChartPieForm as x, type ChartSlopeForm as y, EDGE_HEADS as z };
+export { computeEventBindingKey as $, EDGE_HEADS as A, type BBox as B, type CdlDiagram as C, EDGE_HEAD_DEFAULT as D, type EdgeStyle as E, EDGE_HEAD_FILLS as F, EDGE_HEAD_FILL_DEFAULT as G, EDGE_REVEALS as H, EDGE_REVEAL_DEFAULT as I, type JourneyEmotion as J, EDGE_STYLES as K, type LaidDiagram as L, type EdgeReveal as M, type NodeKind as N, type InteractiveHandlerMap as O, type InteractiveSignalsAccessor as P, type QuadrantKey as Q, type RowMark as R, type Signal as S, type Tone as T, type LaidLane as U, NODE_KINDS as V, RELATION_FOCUSES as W, RELATION_FOCUS_DEFAULT as X, type RelationFocus as Y, type ScrollProgressHandle as Z, TONES as _, type CdlInput as a, computeFormulaKey as a0, computeInputSignalKey as a1, computeScrollTriggerKey as a2, computed as a3, createInteractiveSignalsAccessor as a4, createScrollProgressHandle as a5, createScrollProgressSignals as a6, hasInteractivePrimitives as a7, resolveLang as a8, sequenceBoardMetrics as a9, sequenceStepId as aa, signal as ab, type CdlLane as b, type CdlNode as c, type Side as d, type EdgeRole as e, type EdgeHead as f, type EdgeHeadFill as g, type CdlState as h, type CdlInputOption as i, type CdlEventTarget as j, type CdlLang as k, type Computed as l, type CdlDerivedValue as m, type CdlScrollTrigger as n, type CdlDiagramViewProps as o, type LaidEdge as p, type LaidNode as q, type CdlEdge as r, type TreeNodePayload as s, CdlDiagramView as t, type CdlEventBinding as u, type CdlEventKind as v, type CdlFormula as w, type CdlPhase as x, type ChartPieForm as y, type ChartSlopeForm as z };

package/dist/{render-oEmwYN-q.d.ts → render-A5AKjNuy.d.ts}

@@ -3035,4 +3035,4 @@ type CdlDiagramViewProps = {
 };
 declare function CdlDiagramView({ diagram, laid: laidProp, hideHeader, hideMiniPhaseIndicator, focusPhaseId, debug, emitGeometryWarn, headingLevel, interactiveHandlers }: CdlDiagramViewProps): JSX.Element;
 
-export { computeFormulaKey as $, EDGE_HEAD_DEFAULT as A, type BBox as B, type CdlDiagram as C, EDGE_HEAD_FILLS as D, type EdgeStyle as E, EDGE_HEAD_FILL_DEFAULT as F, EDGE_REVEALS as G, EDGE_REVEAL_DEFAULT as H, EDGE_STYLES as I, type JourneyEmotion as J, type EdgeReveal as K, type LaidDiagram as L, type InteractiveHandlerMap as M, type NodeKind as N, type InteractiveSignalsAccessor as O, type LaidLane as P, type QuadrantKey as Q, type RowMark as R, type Signal as S, type Tone as T, NODE_KINDS as U, RELATION_FOCUSES as V, RELATION_FOCUS_DEFAULT as W, type RelationFocus as X, type ScrollProgressHandle as Y, TONES as Z, computeEventBindingKey as _, type CdlInput as a, computeInputSignalKey as a0, computeScrollTriggerKey as a1, computed as a2, createInteractiveSignalsAccessor as a3, createScrollProgressHandle as a4, createScrollProgressSignals as a5, hasInteractivePrimitives as a6, resolveLang as a7, sequenceBoardMetrics as a8, sequenceStepId as a9, signal as aa, type CdlLane as b, type CdlNode as c, type Side as d, type EdgeRole as e, type EdgeHead as f, type EdgeHeadFill as g, type CdlState as h, type CdlInputOption as i, type CdlEventTarget as j, type CdlLang as k, type Computed as l, type CdlDerivedValue as m, type CdlScrollTrigger as n, type CdlDiagramViewProps as o, type LaidEdge as p, type LaidNode as q, type CdlEdge as r, CdlDiagramView as s, type CdlEventBinding as t, type CdlEventKind as u, type CdlFormula as v, type CdlPhase as w, type ChartPieForm as x, type ChartSlopeForm as y, EDGE_HEADS as z };
+export { computeEventBindingKey as $, EDGE_HEADS as A, type BBox as B, type CdlDiagram as C, EDGE_HEAD_DEFAULT as D, type EdgeStyle as E, EDGE_HEAD_FILLS as F, EDGE_HEAD_FILL_DEFAULT as G, EDGE_REVEALS as H, EDGE_REVEAL_DEFAULT as I, type JourneyEmotion as J, EDGE_STYLES as K, type LaidDiagram as L, type EdgeReveal as M, type NodeKind as N, type InteractiveHandlerMap as O, type InteractiveSignalsAccessor as P, type QuadrantKey as Q, type RowMark as R, type Signal as S, type Tone as T, type LaidLane as U, NODE_KINDS as V, RELATION_FOCUSES as W, RELATION_FOCUS_DEFAULT as X, type RelationFocus as Y, type ScrollProgressHandle as Z, TONES as _, type CdlInput as a, computeFormulaKey as a0, computeInputSignalKey as a1, computeScrollTriggerKey as a2, computed as a3, createInteractiveSignalsAccessor as a4, createScrollProgressHandle as a5, createScrollProgressSignals as a6, hasInteractivePrimitives as a7, resolveLang as a8, sequenceBoardMetrics as a9, sequenceStepId as aa, signal as ab, type CdlLane as b, type CdlNode as c, type Side as d, type EdgeRole as e, type EdgeHead as f, type EdgeHeadFill as g, type CdlState as h, type CdlInputOption as i, type CdlEventTarget as j, type CdlLang as k, type Computed as l, type CdlDerivedValue as m, type CdlScrollTrigger as n, type CdlDiagramViewProps as o, type LaidEdge as p, type LaidNode as q, type CdlEdge as r, type TreeNodePayload as s, CdlDiagramView as t, type CdlEventBinding as u, type CdlEventKind as v, type CdlFormula as w, type CdlPhase as x, type ChartPieForm as y, type ChartSlopeForm as z };

package/package.json

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

@@ -220,6 +220,9 @@ export { CLASS_RELATION_LOOK, ER_CARDINALITY_HEAD, FSM_ACTION_MARK, SEQUENCE_MES
 // 時系列のやり取りの図が引く名前と寸法 (#578)。 **組み立て器ではない** ので presets からは出さない
 // (`mermaid-parity` が presets の公開関数を組み立て器として数える)
 export { sequenceStepId, sequenceBoardMetrics } from "./kinds/sequence-board-metrics";
+// 木の札の幅 (#970)。 葉の数で必要な幅が変わるので、組み立てる側が札を作る前に引く。
+// **組み立て器ではない** ので presets からは出さない (`mermaid-parity` の数え方に合わせる)
+export { 木の札の幅 } from "./kinds/tree";
 // Text DSL は @cardenelabs/dragon に切出済 (cdl は engine only)
 export type {
   SwimlanePreset,

package/src/kinds/tree.tsx

@@ -62,6 +62,82 @@ const PAD_RIGHT = 24;
 const PAD_BOTTOM = 40;
 const PAD_LEFT = 24;
 
+/**
+ * 箱の上限 (#970)。 割付の中で `Math.min` の相手として使う値を module に出した。
+ *
+ * 札の大きさを中身から出すには、置く前に「箱がどれだけ取るか」 を知る必要がある。
+ * 割付の中に閉じていると、呼ぶ側は同じ数を書き写すしかない。
+ */
+const 箱の最大幅 = 140;
+const 箱の最大高さ = 38;
+
+/** 札の既定の大きさ。 中身から出した値がこれを超える時の頭打ちになる (#970) */
+const 札の既定幅 = 720;
+const 札の既定高さ = 480;
+
+/**
+ * 木を描くのに要る札の幅を、葉の数から出す (#970)。
+ *
+ * 木の札は種別ごとに 1 つの値 (720) で固定されていた。 必要な幅は葉の数で変わるので、
+ * 葉が少ない図は札の中で浮く (実測 = 葉 2 枚の図が 720 の札に 476 で、左右に 122 ずつ余る)。
+ *
+ * **縦が既に持っている規則を、横にも当てる**。
+ * 段は `canvasH / 段数` で等分した区画の中央に置かれるので、縦の余白は隙間の半分ずつになる。
+ * 同じ形を横に当てると `葉の数 × (箱の幅 + 隙間)` で、中身の左右にも隙間の半分ずつが残る。
+ * 実際 3 段の木では この式が今の高さ (480) をそのまま返す = 縦は既にこの値で描かれている。
+ *
+ * **広げる向きには使わない** (`Math.min(札の既定幅, ...)`)。 葉が多い図では式の値が
+ * 既定を超えるが、札を広げると見本帳の並びが崩れる。 超える図は今までどおり区画が狭まり、
+ * 箱が小さくなる側で吸収する。
+ *
+ * **葉が 1 枚の図は 2 枚として扱う**。 1 枚の木は縦 1 本の鎖で、式のまま出すと
+ * 箱 1 つぶんの幅 (188) になる。 縦に長く横に細い札は、木ではなく縦書きの字列に見える。
+ */
+export function 木の札の幅(treeNodes: TreeNodePayload[]): number {
+  const { 葉の数, 段数 } = 木の形(treeNodes);
+  // 隙間は段の隙間と同じ値を使う。 段の高さは札の高さを段数で割った値から出る
+  const 段の高さ = (札の既定高さ - PAD_TOP - PAD_BOTTOM) / Math.max(段数, 1);
+  const 箱の高さ = Math.min(箱の最大高さ, 段の高さ * 0.7);
+  const 隙間 = 段の高さ - 箱の高さ;
+  const 要る幅 = Math.max(葉の数, 2) * (箱の最大幅 + 隙間);
+  // 切り上げる。 切り下げると区画が要る間隔よりわずかに狭くなり、頭打ちが効いて
+  // 葉の隙間が段の隙間より詰まる (割付は `canvasW / 葉の数` を上限に持つ)
+  return Math.ceil(Math.min(札の既定幅, 要る幅 + PAD_LEFT + PAD_RIGHT));
+}
+
+/**
+ * 木の形 (葉の数と段数) を出す (#970)。
+ *
+ * 走査の順と打ち切りは `computeTreeLayout` と同じにする。 親が実在しない項目を根として拾い、
+ * 既に見た項目で打ち切るので、循環参照のある入力でも止まる。
+ */
+function 木の形(treeNodes: TreeNodePayload[]): { 葉の数: number; 段数: number } {
+  const ids = new Set(treeNodes.map((n) => n.id));
+  const childrenOf = new Map<string, TreeNodePayload[]>();
+  for (const n of treeNodes) {
+    const p = n.parent && ids.has(n.parent) ? n.parent : "__root__";
+    if (!childrenOf.has(p)) childrenOf.set(p, []);
+    childrenOf.get(p)!.push(n);
+  }
+  const 見た = new Set<string>();
+  let 葉の数 = 0;
+  let 段数 = 0;
+  const 下見 = (n: TreeNodePayload, depth: number): void => {
+    見た.add(n.id);
+    段数 = Math.max(段数, depth + 1);
+    const kids = (childrenOf.get(n.id) ?? []).filter((k) => !見た.has(k.id));
+    if (kids.length === 0) {
+      葉の数 += 1;
+      return;
+    }
+    for (const k of kids) 下見(k, depth + 1);
+  };
+  for (const r of childrenOf.get("__root__") ?? []) if (!見た.has(r.id)) 下見(r, 0);
+  // 循環参照で根から辿れない項目は、宣言順で最初に現れたものを根として拾う
+  for (const n of treeNodes) if (!見た.has(n.id)) 下見(n, 0);
+  return { 葉の数, 段数 };
+}
+
 /**
  * 枝の太さ。 根に近いほど太く、葉へ行くほど細い (#909)。
  *
@@ -383,8 +459,8 @@ export function computeTreeLayout(
   // box は必ず slot の一定割合に収める。 加算的な floor (min 12 / min 8 等) を置くと、 深い / 多い
   // 入力で floor が slot を超えて隣と重なる。 slot の割合にすれば規模によらず必ず gap が残る。
   // 深い / 多い入力では box が小さくなるが、 位置のはみ出しは末尾の最終スケールが捌く。
-  const nodeH = Math.min(38, depthGap * 0.7);
-  const nodeW = Math.min(140, slotW * 0.85);
+  const nodeH = Math.min(箱の最大高さ, depthGap * 0.7);
+  const nodeW = Math.min(箱の最大幅, slotW * 0.85);
 
   /**
    * 箱の幅を名前から出す (#909)。
@@ -409,6 +485,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 +543,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 +557,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 } : {}),

package/src/presets.ts

@@ -2,6 +2,7 @@ import { diagram } from "./builder";
 import type { DiagramBuilder } from "./builder";
 import { LANE_PAD_MIN, NODE_SIZE } from "./layout/tokens";
 import { requiredRowsWidth } from "./kinds/row-align";
+import { 木の札の幅 } from "./kinds/tree";
 import {
   sequenceBoardMetrics,
   sequenceStepId,
@@ -1647,7 +1648,6 @@ export type TreeBuilder = {
  *   .build();
  */
 export function tree(preset: TreePreset): TreeBuilder {
-  const canvasW = preset.nodeWidth ? preset.nodeWidth * 2 : 720;
   const canvasH = 480;
   const b = diagram(preset.id, { topic: preset.topic, type: "tree" });
   const treeNodes: TreeNode[] = [];
@@ -1658,6 +1658,10 @@ export function tree(preset: TreePreset): TreeBuilder {
       return api;
     },
     build() {
+      // 札の幅は葉の数で変わる (#970)。 項目が出揃う `build` まで待たないと出せない
+      const canvasW = preset.nodeWidth
+        ? preset.nodeWidth * 2
+        : 木の札の幅(treeNodes.map((n) => ({ id: n.id, title: n.title, parent: n.parent })));
       b.lane("tree", { width: canvasW });
       const nodeId = `${preset.id}-tree`;
       b.node(nodeId, {