@cardenelabs/cdl 0.12.1 → 0.13.1

package/dist/{render-C7FKvMqq.d.cts → render-B5JHcUrb.d.cts}

@@ -293,6 +293,14 @@ type GanttTaskPayload = {
 type MindBranchPayload = {
     rootId: string;
     rootTitle: string;
+    /**
+     * 中心の箱の 2 行目に出す補足 (#530)。
+     *
+     * 枝 (`MindBranchNode`) は元から `subtitle` を持つのに中心だけ渡す口が無く、呼出側が
+     * 名前と補足を連結して `rootTitle` に入れていた。 1 行に全部入るため箱幅を超え、
+     * 末尾が切られる (実測 = 箱 120px に対し文字 163px)。
+     */
+    rootSubtitle?: string;
     branches: MindBranchNode[];
 };
 /** 1 branch node = id + title + parent + optional tone + subtitle */

package/dist/{render-C7FKvMqq.d.ts → render-B5JHcUrb.d.ts}

@@ -293,6 +293,14 @@ type GanttTaskPayload = {
 type MindBranchPayload = {
     rootId: string;
     rootTitle: string;
+    /**
+     * 中心の箱の 2 行目に出す補足 (#530)。
+     *
+     * 枝 (`MindBranchNode`) は元から `subtitle` を持つのに中心だけ渡す口が無く、呼出側が
+     * 名前と補足を連結して `rootTitle` に入れていた。 1 行に全部入るため箱幅を超え、
+     * 末尾が切られる (実測 = 箱 120px に対し文字 163px)。
+     */
+    rootSubtitle?: string;
     branches: MindBranchNode[];
 };
 /** 1 branch node = id + title + parent + optional tone + subtitle */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.12.1",
+  "version": "0.13.1",
   "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/box-lines.ts

@@ -1,4 +1,5 @@
 import { textWidth } from "./text-width";
+import { MIN_TEXT_SIZE } from "./compact-title";
 
 /**
  * 箱の中に文字の行を積む (#471)。
@@ -84,6 +85,40 @@ export function 幅で切る(
   return `${出}${省略}`;
 }
 
+/**
+ * 字を小さくする下限。
+ *
+ * `compact-title.ts` の `MIN_TEXT_SIZE` を共有する。 小型の箱の名前が既にこの値まで縮んでおり、
+ * 読める下限として使われている。 同じ値を参照すれば、同じ図の中で名前の下限が場所によって
+ * 変わらない。
+ */
+export const 縮めの下限 = MIN_TEXT_SIZE;
+
+/**
+ * 幅に入るまで字を小さくし、下限まで縮めても入らなければ切る (#534)。
+ *
+ * **切るのは最後の手段にする**。 字の大きさを保ったまま切ると、全角 7 文字の名前
+ * (`新プロジェクト`) が `新プロジェ…` になって何の箱か読めない。 1 段小さくすれば
+ * 入る名前を切っていた。
+ *
+ * 縮めるのは **入るところまで** で、一律に下限へ落とさない。 落とすと 1 段で足りる名前まで
+ * 最小になり、同じ図の中で名前の大きさがばらつく。
+ *
+ * 元から下限以下の字は縮めない (補足の 9px がここに当たる)。 巻き込むと補足が読めなくなる。
+ *
+ * 箱の大きさは変えない。 高さの都合は呼出側 (`箱に積む`) が見る。
+ */
+export function 幅に収める(
+  text: string,
+  fontSize: number,
+  使える幅: number,
+  測る: (s: string, size: number) => number = textWidth,
+): { text: string; fontSize: number } {
+  let size = fontSize;
+  while (size > 縮めの下限 && 測る(text, size) > 使える幅) size -= 1;
+  return { text: 幅で切る(text, size, 使える幅, 測る), fontSize: size };
+}
+
 /**
  * 見た目の 1 字 (書記素クラスタ) に分ける。
  *
@@ -115,16 +150,22 @@ export function 箱に積む(行: 積む行[], 箱の幅: number, 箱の高さ:
   const 使える高さ = 箱の高さ - 上下の余白 * 2;
   const 高さ = (rs: 積む行[]): number => rs.reduce((a, r) => a + r.fontSize * 行送りの比, 0);
 
-  // 入るまで後ろから落とす。 先頭は落とさない
+  // 入るまで後ろから落とす。 先頭は落とさない。
+  // **判定は縮める前の大きさで行う** (#534)。 縮めた後で決めると、名前が長い箱でだけ
+  // 補足が復活する = 同じ高さの箱でも中身の長さで行数が変わり、挙動が読みにくくなる
   const 残す = [...候補];
   while (残す.length > 1 && 高さ(残す) > 使える高さ) 残す.pop();
 
   const 幅 = 使える幅(箱の幅);
-  const 総高 = 高さ(残す);
+  // **幅に収めるのを先に済ませる** (#534)。 縮めると行の高さも変わるため、後から縮めると
+  // `dy` が縮める前の大きさで出て、行の塊が箱の上下の中央からずれる
+  const 収めた = 残す.map((r) => ({ ...r, ...幅に収める(r.text, r.fontSize, 幅) }));
+
+  const 総高 = 高さ(収めた);
   let 積み = -総高 / 2;
-  return 残す.map((r) => {
+  return 収めた.map((r) => {
     const dy = 積み + ((行送りの比 + 字の高さの比) / 2) * r.fontSize;
     積み += r.fontSize * 行送りの比;
-    return { ...r, text: 幅で切る(r.text, r.fontSize, 幅), dy };
+    return { ...r, dy };
   });
 }

package/src/kinds/compact-title.ts

@@ -54,8 +54,8 @@ export const COMPACT_MAX_H = 100;
 /** 小型で名前の左右に空ける幅の合計。 `card` の compact と同じ。 */
 const COMPACT_PADDING_X = 16;
 
-/** 小型で名前を縮める下限。 `card` と同じ。 */
-const MIN_SIZE = 11;
+/** 小型で名前を縮める共通の下限。 `card` と tree / mind-map で同じ値を使う。 */
+export const MIN_TEXT_SIZE = 11;
 
 /**
  * 字が baseline から上下へどれだけ張り出すかの見積り。
@@ -69,10 +69,10 @@ const DESCENT = 0.25;
 /**
  * 名前が収まる最小の帯の高さ。 これより低い帯では **収めきれない**。
  *
- * 読める下限 (`MIN_SIZE`) を割ってまで縮めない。 その場合の張り出しは上下へ均等に出す =
+ * 読める下限 (`MIN_TEXT_SIZE`) を割ってまで縮めない。 その場合の張り出しは上下へ均等に出す =
  * 下だけに落ちる形にはしない。
  */
-export const MIN_BAND_H = MIN_SIZE * (ASCENT + DESCENT);
+export const MIN_BAND_H = MIN_TEXT_SIZE * (ASCENT + DESCENT);
 
 /** 目印 (`eyebrow`) の baseline と大きさ。 4 種で同じ値を使っている。 */
 const EYEBROW_BASELINE = 38;
@@ -144,10 +144,10 @@ export function titlePlacement(
     node.title,
     Math.max(0, node.w - COMPACT_PADDING_X),
     通常.size,
-    MIN_SIZE,
+    MIN_TEXT_SIZE,
   );
   const 帯で = Math.floor(帯 / (ASCENT + DESCENT));
-  const size = Math.max(MIN_SIZE, Math.min(幅で, 帯で));
+  const size = Math.max(MIN_TEXT_SIZE, Math.min(幅で, 帯で));
   const 字高 = size * (ASCENT + DESCENT);
 
   // 収まるなら帯の中央。 収まらない時の逃がし方は目印の有無で変える

package/src/kinds/mind-map.tsx

@@ -1,6 +1,6 @@
 import type { JSX } from "react";
-import { 使える幅, 幅で切る, 箱に積む } from "./box-lines";
-import type { LaidNode, Tone, MindBranchNode } from "../types";
+import { 使える幅, 幅に収める, 箱に積む } from "./box-lines";
+import type { LaidNode, Tone, MindBranchNode, MindBranchPayload } from "../types";
 import { TONE } from "../render/tone";
 import { resolveMindData } from "../render/payload-binding";
 import { 進みを畳む, 伸ばすdash, 段の伸び } from "./draw-progress";
@@ -115,6 +115,10 @@ export function MindMapNode({
         );
         // 判定は行数でなく「補足を渡したか」 で行う (理由は tree.tsx と同じ、 #471 Round 1)
         const 補足あり = (n.subtitle ?? "").trim() !== "";
+        // 補足ありでは `箱に積む` が既に同じ処理を済ませているため、1 行の経路だけ計算する
+        const 収めた名前 = 補足あり
+          ? undefined
+          : 幅に収める(n.title, n.isRoot ? 15 : 13, 使える幅(n.w));
         const 文字の色 = n.isRoot
           ? "var(--cdl-text-on-tone, #ffffff)"
           : "var(--cdl-chip-text, #1a1f2a)";
@@ -130,7 +134,7 @@ export function MindMapNode({
             stroke={n.isRoot ? toneColor(n.tone ?? "accent") : toneColor(n.tone)}
             strokeWidth={n.isRoot ? 2 : 1.75}
           />
-          {補足あり ? (
+          {収めた名前 === undefined ? (
             行.map((r) => (
               <text
                 key={r.役割}
@@ -149,16 +153,17 @@ export function MindMapNode({
           ) : (
             // 補足が無くても **幅に収める** (#526)。 `箱に積む` を通らないこの経路だけが
             // 幅を見ておらず、長い名前がそのまま箱の外へ出て枝の線と重なっていた
-            // (実測 = 中心の箱で文字 163px に対し箱 120px)
+            // (実測 = 中心の箱で文字 163px に対し箱 120px)。
+            // 収める手段は縮めるのが先で、切るのは下限まで縮めても入らない時だけ (#534)
             <text
               x={n.x}
               y={n.y + 5}
-              fontSize={n.isRoot ? 15 : 13}
+              fontSize={収めた名前.fontSize}
               fontWeight={n.isRoot ? 700 : 600}
               textAnchor="middle"
               fill={文字の色}
             >
-              {幅で切る(n.title, n.isRoot ? 15 : 13, 使える幅(n.w))}
+              {収めた名前.text}
             </text>
           )}
         </g>
@@ -195,7 +200,7 @@ type LayoutEdge = {
 };
 
 export function computeMindMapLayout(
-  mindData: { rootId: string; rootTitle: string; branches: MindBranchNode[] },
+  mindData: MindBranchPayload,
   cx: number,
   cy: number,
   canvasW: number,
@@ -209,6 +214,8 @@ export function computeMindMapLayout(
   nodes.push({
     id: mindData.rootId,
     title: mindData.rootTitle,
+    // 中心も枝と同じく 2 行に積める (#530)。 高さ 52 に 15px + 9px の 2 行が入る
+    ...(mindData.rootSubtitle === undefined ? {} : { subtitle: mindData.rootSubtitle }),
     x: cx,
     y: cy,
     w: rootW,

package/src/kinds/tree.tsx

@@ -2,7 +2,7 @@ import type { JSX } from "react";
 import type { LaidNode, TreeNodePayload } from "../types";
 import { TONE } from "../render/tone";
 import { resolveTreeData } from "../render/payload-binding";
-import { 使える幅, 幅で切る, 箱に積む, type 積んだ行 } from "../kinds/box-lines";
+import { 使える幅, 幅に収める, 箱に積む, type 積んだ行 } from "../kinds/box-lines";
 import { 進みを畳む, 伸ばすdash, 段の伸び } from "./draw-progress";
 
 /**
@@ -164,6 +164,11 @@ export function TreeNode({
         // **判定は行数でなく「補足を渡したか」 で行う**。 行数で見ると、 箱が低くて補足が落ちた時に
         // 従来の 1 行の経路へ戻り、 幅で切っていない名前が箱から横にはみ出す (#471 Round 1)
         const 補足あり = (n.subtitle ?? "").trim() !== "";
+        // 補足ありでは `箱に積む` が既に同じ処理を済ませているため、1 行の経路だけ計算する。
+        // 収める手段は縮めるのが先で、切るのは下限まで縮めても入らない時だけ (#534)
+        const 収めた名前 = 補足あり
+          ? undefined
+          : 幅に収める(n.title, isRoot ? 13 : 12, 使える幅(n.w));
         return (
           <g
             key={`n-${n.id}`}
@@ -181,7 +186,7 @@ export function TreeNode({
                   rx={12}
                   fill={`url(#${gradientId})`}
                 />
-                {補足あり ? (
+                {収めた名前 === undefined ? (
                   箱の文字({
                     行,
                     x: n.w / 2,
@@ -195,12 +200,12 @@ export function TreeNode({
                   <text
                     x={n.w / 2}
                     y={n.h / 2 + 5}
-                    fontSize={13}
+                    fontSize={収めた名前.fontSize}
                     fontWeight={700}
                     textAnchor="middle"
                     fill="var(--cdl-text-on-tone, #ffffff)"
                   >
-                    {幅で切る(n.title, 13, 使える幅(n.w))}
+                    {収めた名前.text}
                   </text>
                 )}
               </>
@@ -218,7 +223,7 @@ export function TreeNode({
                   strokeWidth={1.5}
                 />
                 <rect x={0} y={0} width={4} height={n.h} rx={2} fill={accent} />
-                {補足あり ? (
+                {収めた名前 === undefined ? (
                   箱の文字({
                     行,
                     x: n.w / 2 + 2,
@@ -230,12 +235,12 @@ export function TreeNode({
                   <text
                     x={n.w / 2 + 2}
                     y={n.h / 2 + 4}
-                    fontSize={12}
+                    fontSize={収めた名前.fontSize}
                     fontWeight={600}
                     textAnchor="middle"
                     fill="var(--cdl-chip-text, #1a1f2a)"
                   >
-                    {幅で切る(n.title, 12, 使える幅(n.w))}
+                    {収めた名前.text}
                   </text>
                 )}
               </>

package/src/presets.ts

@@ -1292,6 +1292,8 @@ export type MindMapPreset = {
   /** 中心 topic ID + label */
   rootId: string;
   rootTitle: string;
+  /** 中心の箱の 2 行目に出す補足 (#530)。 枝の `subtitle` と同じ扱い */
+  rootSubtitle?: string;
   branchWidth?: number;
   defaultTone?: Tone;
 };
@@ -1338,6 +1340,7 @@ export function mindMap(preset: MindMapPreset): MindMapBuilder {
         mindData: {
           rootId: preset.rootId,
           rootTitle: preset.rootTitle,
+          ...(preset.rootSubtitle === undefined ? {} : { rootSubtitle: preset.rootSubtitle }),
           branches: branches.map((br) => ({
             id: br.id,
             title: br.title,

package/src/render/payload-binding.ts

@@ -252,9 +252,9 @@ export function resolveTreeData(
 }
 
 /**
- * 放射の名前と補足を解決する。 中心の名前と枝の名前 / 補足を見る。
+ * 放射の名前と補足を解決する。 中心と枝の名前 / 補足を見る。
  *
- * 補足を入れた理由は `resolveTreeData` と同じ (#471)。 中心は補足の欄を持たない。
+ * 補足を入れた理由は `resolveTreeData` と同じ (#471 / #530)。
  */
 export function resolveMindData(
   data: MindBranchPayload,
@@ -262,10 +262,13 @@ export function resolveMindData(
 ): ResolvedMindData {
   const 読む =
     data.rootTitle.includes("{") ||
+    (data.rootSubtitle?.includes("{") ?? false) ||
     data.branches.some((b) => b.title.includes("{") || (b.subtitle?.includes("{") ?? false));
   if (!読む) return data as ResolvedMindData;
 
   const root = resolveBoundText(data.rootTitle, values);
+  const rootSubtitle =
+    data.rootSubtitle === undefined ? undefined : resolveBoundText(data.rootSubtitle, values);
   const branches = data.branches.map((b) => {
     const title = resolveBoundText(b.title, values);
     const subtitle = b.subtitle === undefined ? undefined : resolveBoundText(b.subtitle, values);
@@ -276,6 +279,13 @@ export function resolveMindData(
     };
     return title.ok && (subtitle?.ok ?? true) ? 解決後 : { ...解決後, unresolved: true as const };
   });
-  const 解決後: ResolvedMindData = { ...data, rootTitle: root.value, branches };
-  return root.ok ? 解決後 : { ...解決後, unresolved: true as const };
+  const 解決後: ResolvedMindData = {
+    ...data,
+    rootTitle: root.value,
+    ...(rootSubtitle ? { rootSubtitle: rootSubtitle.value } : {}),
+    branches,
+  };
+  return root.ok && (rootSubtitle?.ok ?? true)
+    ? 解決後
+    : { ...解決後, unresolved: true as const };
 }

package/src/render/template-fields.ts

@@ -179,6 +179,7 @@ function payloadTexts(node: CdlNode): string[] {
   }
   if (node.mindData) {
     足す(node.mindData.rootTitle);
+    足す(node.mindData.rootSubtitle);
     for (const b of node.mindData.branches) {
       足す(b.title);
       足す(b.subtitle);

package/src/types.ts

@@ -359,6 +359,14 @@ export type GanttTaskPayload = {
 export type MindBranchPayload = {
   rootId: string;
   rootTitle: string;
+  /**
+   * 中心の箱の 2 行目に出す補足 (#530)。
+   *
+   * 枝 (`MindBranchNode`) は元から `subtitle` を持つのに中心だけ渡す口が無く、呼出側が
+   * 名前と補足を連結して `rootTitle` に入れていた。 1 行に全部入るため箱幅を超え、
+   * 末尾が切られる (実測 = 箱 120px に対し文字 163px)。
+   */
+  rootSubtitle?: string;
   branches: MindBranchNode[];
 };