@cardenelabs/cdl 0.107.0 → 0.108.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.107.0",
+  "version": "0.108.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/shape-basement.tsx

@@ -11,8 +11,10 @@ import {
   labelPlan,
   shapeRegion,
   textWidth,
+  切って収まる下限,
   type ArtExtent,
 } from "./shape-region";
+import { 幅で切る } from "./box-lines";
 
 /**
  * Shape-driven basement 8 kinds (CAR-1099、 CAR-1130 people ベース統一版)。
@@ -88,7 +90,9 @@ function labelBlock(
     node.eyebrow ? textWidth(node.eyebrow, EYEBROW_SIZE, EYEBROW_TRACKING) : 0,
     node.subtitle ? textWidth(node.subtitle, SUB_SIZE) : 0,
   );
-  const { k, x, y: baseline } = fitLabel(band, { 上, 下, 幅 }, pos);
+  // 横で縮める倍率を読める下限で止める (#953)。 切って収まらない幅では下限を当てない
+  const 下限 = 切って収まる下限(node.title ?? "", size, 0, band.w, textWidth);
+  const { k, x, y: baseline } = fitLabel(band, { 上, 下, 幅 }, pos, 下限);
   return { k, x, baseline, 上端: baseline - 上 * k, 下端: baseline + 下 * k };
 }
 
@@ -96,6 +100,9 @@ function commonLabel(node: LaidNode, pos: { x: number; y: number }, size: number
   const 塊 = labelBlock(node, pos, size, band);
   const k = 塊.k;
   const x = 塊.x;
+  // 下限で止めた行は帯に入らないので、入るところまで切って `…` を付ける (#953)
+  const 切る = (t: string, 大きさ: number, 字間 = 0) =>
+    幅で切る(t, 大きさ * k, band.w, (u, f) => textWidth(u, f, 字間 * k));
   return (
     <>
       {node.eyebrow && (
@@ -108,7 +115,7 @@ function commonLabel(node: LaidNode, pos: { x: number; y: number }, size: number
           textAnchor="middle"
           fill="var(--cdl-tone-accent, #2d6a8f)"
         >
-          {node.eyebrow}
+          {切る(node.eyebrow, EYEBROW_SIZE, EYEBROW_TRACKING)}
         </text>
       )}
       <text
@@ -120,7 +127,7 @@ function commonLabel(node: LaidNode, pos: { x: number; y: number }, size: number
         textAnchor="middle"
         fill="var(--cdl-text, #1a1f2a)"
       >
-        {node.title}
+        {切る(node.title ?? "", size)}
       </text>
       {node.subtitle && (
         <text
@@ -130,7 +137,7 @@ function commonLabel(node: LaidNode, pos: { x: number; y: number }, size: number
           textAnchor="middle"
           fill="var(--cdl-text-dim, #5a6270)"
         >
-          {node.subtitle}
+          {切る(node.subtitle, SUB_SIZE)}
         </text>
       )}
     </>
@@ -557,7 +564,12 @@ function planLabel(node: LaidNode, cx: number, 幅上限: number, plan: ReturnTy
     node.eyebrow && plan.肩書 ? textWidth(node.eyebrow, plan.肩書.size, EYEBROW_TRACKING) : 0,
     node.subtitle && plan.説明 ? textWidth(node.subtitle, plan.説明.size) : 0,
   );
-  const k = 幅 > 0 && 幅上限 > 0 ? Math.min(1, 幅上限 / 幅) : 1;
+  // 縮めは読める下限で止める (#953)。 下限が無いと長い名前が点にしか見えない大きさになる
+  const 下限 = 切って収まる下限(node.title ?? "", plan.名前.size, 0, 幅上限, textWidth);
+  const k = 幅 > 0 && 幅上限 > 0 ? Math.min(1, Math.max(幅上限 / 幅, 下限)) : 1;
+  // 下限で止めた行は箱に入らないので、入るところまで切って `…` を付ける (#953)
+  const 切る = (t: string, 大きさ: number, 字間 = 0) =>
+    幅で切る(t, 大きさ * k, 幅上限, (u, f) => textWidth(u, f, 字間 * k));
   return (
     <>
       {node.eyebrow && plan.肩書 && (
@@ -570,7 +582,7 @@ function planLabel(node: LaidNode, cx: number, 幅上限: number, plan: ReturnTy
           textAnchor="middle"
           fill="var(--cdl-tone-accent, #2d6a8f)"
         >
-          {node.eyebrow}
+          {切る(node.eyebrow, plan.肩書.size, EYEBROW_TRACKING)}
         </text>
       )}
       <text
@@ -582,7 +594,7 @@ function planLabel(node: LaidNode, cx: number, 幅上限: number, plan: ReturnTy
         textAnchor="middle"
         fill="var(--cdl-text, #1a1f2a)"
       >
-        {node.title}
+        {切る(node.title ?? "", plan.名前.size)}
       </text>
       {node.subtitle && plan.説明 && (
         <text
@@ -592,7 +604,7 @@ function planLabel(node: LaidNode, cx: number, 幅上限: number, plan: ReturnTy
           textAnchor="middle"
           fill="var(--cdl-text-dim, #5a6270)"
         >
-          {node.subtitle}
+          {切る(node.subtitle, plan.説明.size)}
         </text>
       )}
     </>

package/src/kinds/shape-blockchain.tsx

@@ -5,6 +5,7 @@ import {
   labelPlan,
   shapeRegion,
   幅の倍率,
+  切って収まる下限,
   打ち消しの倍率,
   絵の中の字の幅,
   type ArtExtent,
@@ -135,26 +136,32 @@ function blockchainNodeExtent(strokeWidth: number): ArtExtent {
  * 名前の塊を描く。 位置と大きさは `labelPlan` が決める (箱の下端から積み上げる、 #433)。
  */
 function bottomLabel(node: LaidNode, cx: number, plan: ReturnType<typeof labelPlan>) {
-  const 肩書倍率 = node.eyebrow && plan.肩書
-    ? 幅の倍率(node.eyebrow, plan.肩書.size, 2, node.w)
-    : 1;
-  const 名前倍率 = 幅の倍率(node.title, plan.名前.size, 0, node.w);
-  const 説明倍率 = node.subtitle && plan.説明
-    ? 幅の倍率(node.subtitle, plan.説明.size, 0, node.w)
-    : 1;
+  // 縮めは読める下限で止める (#953)。 止めた行は箱に入らないので、入るところまで切る
+  const 収める = (t: string, 大きさ: number, 字間: number) => {
+    const 測る = (u: string, f: number, ls: number) => 字の幅(u, f) + ls * [...u].length;
+    const 倍率 = Math.max(幅の倍率(t, 大きさ, 字間, node.w), 切って収まる下限(t, 大きさ, 字間, node.w, 測る));
+    const size = 大きさ * 倍率;
+    return { 倍率, text: 幅で切る(t, size, node.w, (u, f) => 字の幅(u, f) + 字間 * 倍率 * [...u].length) };
+  };
+  const 肩 = node.eyebrow && plan.肩書 ? 収める(node.eyebrow, plan.肩書.size, 2) : { 倍率: 1, text: node.eyebrow ?? "" };
+  const 名 = 収める(node.title ?? "", plan.名前.size, 0);
+  const 説 = node.subtitle && plan.説明 ? 収める(node.subtitle, plan.説明.size, 0) : { 倍率: 1, text: node.subtitle ?? "" };
+  const 肩書倍率 = 肩.倍率;
+  const 名前倍率 = 名.倍率;
+  const 説明倍率 = 説.倍率;
   return (
     <>
       {node.eyebrow && plan.肩書 && (
         <text x={cx} y={plan.肩書.y} fontSize={plan.肩書.size * 肩書倍率} fontWeight={700} letterSpacing={2 * 肩書倍率} textAnchor="middle" fill="var(--cdl-tone-accent, #2d6a8f)">
-          {node.eyebrow}
+          {肩.text}
         </text>
       )}
       <text data-cdl-role="node-label" x={cx} y={plan.名前.y} fontSize={plan.名前.size * 名前倍率} fontWeight={700} textAnchor="middle" fill="var(--cdl-text, #1a1f2a)">
-        {node.title}
+        {名.text}
       </text>
       {node.subtitle && plan.説明 && (
         <text x={cx} y={plan.説明.y} fontSize={plan.説明.size * 説明倍率} textAnchor="middle" fill="var(--cdl-text-dim, #5a6270)">
-          {node.subtitle}
+          {説.text}
         </text>
       )}
     </>

package/src/kinds/shape-commerce.tsx

@@ -6,7 +6,9 @@ import {
   textWidth,
   打ち消しの倍率,
   type 打ち消す字,
+  切って収まる下限,
 } from "./shape-region";
+import { 幅で切る } from "./box-lines";
 import { MONO_ADVANCE_RATIO, displayWidth } from "./row-align";
 import type { LaidNode } from "../types";
 import { 字引きを作る, type CdlLang } from "../lang";
@@ -101,8 +103,15 @@ function 字幅(文字列: string, 大きさ: number, 字間: number): number {
  */
 function 幅に収める(文字列: string, 大きさ: number, 字間: number, 箱幅: number) {
   const 幅 = 字幅(文字列, 大きさ, 字間);
-  const 倍率 = 幅 > 0 && 箱幅 > 0 ? Math.min(1, 箱幅 / 幅) : 1;
-  return { size: 大きさ * 倍率, spacing: 字間 * 倍率 };
+  // 縮めは読める下限で止める (#953)。 下限が無いと長い名前が点にしか見えない大きさになる。
+  // 止めた行は箱に入らないので、入るところまで切って `…` を付ける (#433 の決まりを保つ)
+  const 倍率 =
+    幅 > 0 && 箱幅 > 0
+      ? Math.min(1, Math.max(箱幅 / 幅, 切って収まる下限(文字列, 大きさ, 字間, 箱幅, 字幅)))
+      : 1;
+  const size = 大きさ * 倍率;
+  const spacing = 字間 * 倍率;
+  return { size, spacing, text: 幅で切る(文字列, size, 箱幅, (u, f) => 字幅(u, f, spacing)) };
 }
 
 /**
@@ -117,16 +126,16 @@ function bottomLabel(node: LaidNode, cx: number, plan: ReturnType<typeof labelPl
     <>
       {node.eyebrow && plan.肩書 && (
         <text x={cx} y={plan.肩書.y} fontSize={肩.size} fontWeight={700} letterSpacing={肩.spacing} textAnchor="middle" fill="var(--cdl-tone-accent, #2d6a8f)">
-          {node.eyebrow}
+          {肩.text}
         </text>
       )}
       <text data-cdl-role="node-label" x={cx} y={plan.名前.y} fontSize={名.size} fontWeight={700} textAnchor="middle" fill="var(--cdl-text, #1a1f2a)">
-        {node.title}
+        {名.text}
       </text>
       {node.subtitle && plan.説明 && (
         <text x={cx} y={plan.説明.y} fontSize={説.size} textAnchor="middle" fill="var(--cdl-text-dim, #5a6270)">
-          {node.subtitle}
-        </text>
+          {説.text}
+  </text>
       )}
     </>
   );

package/src/kinds/shape-finance.tsx

@@ -5,7 +5,9 @@ import {
   fitArt,
   打ち消しの倍率,
   type 打ち消す字,
+  切って収まる下限,
 } from "./shape-region";
+import { 幅で切る } from "./box-lines";
 import type { LaidNode } from "../types";
 import { 字引きを作る, type CdlLang } from "../lang";
 
@@ -100,8 +102,15 @@ function 字幅(文字列: string, 大きさ: number, 字間: number): number {
  */
 function 幅に収める(文字列: string, 大きさ: number, 字間: number, 箱幅: number) {
   const 幅 = 字幅(文字列, 大きさ, 字間);
-  const 倍率 = 幅 > 0 && 箱幅 > 0 ? Math.min(1, 箱幅 / 幅) : 1;
-  return { size: 大きさ * 倍率, spacing: 字間 * 倍率 };
+  // 縮めは読める下限で止める (#953)。 下限が無いと長い名前が点にしか見えない大きさになる。
+  // 止めた行は箱に入らないので、入るところまで切って `…` を付ける (#433 の決まりを保つ)
+  const 倍率 =
+    幅 > 0 && 箱幅 > 0
+      ? Math.min(1, Math.max(箱幅 / 幅, 切って収まる下限(文字列, 大きさ, 字間, 箱幅, 字幅)))
+      : 1;
+  const size = 大きさ * 倍率;
+  const spacing = 字間 * 倍率;
+  return { size, spacing, text: 幅で切る(文字列, size, 箱幅, (u, f) => 字幅(u, f, spacing)) };
 }
 
 /**
@@ -116,16 +125,16 @@ function bottomLabel(node: LaidNode, cx: number, plan: ReturnType<typeof labelPl
     <>
       {node.eyebrow && plan.肩書 && (
         <text x={cx} y={plan.肩書.y} fontSize={肩.size} fontWeight={700} letterSpacing={肩.spacing} textAnchor="middle" fill="var(--cdl-tone-accent, #2d6a8f)">
-          {node.eyebrow}
+          {肩.text}
         </text>
       )}
       <text data-cdl-role="node-label" x={cx} y={plan.名前.y} fontSize={名.size} fontWeight={700} textAnchor="middle" fill="var(--cdl-text, #1a1f2a)">
-        {node.title}
+        {名.text}
       </text>
       {node.subtitle && plan.説明 && (
         <text x={cx} y={plan.説明.y} fontSize={説.size} textAnchor="middle" fill="var(--cdl-text-dim, #5a6270)">
-          {node.subtitle}
-        </text>
+          {説.text}
+  </text>
       )}
     </>
   );

package/src/kinds/shape-hardware.tsx

@@ -1,5 +1,6 @@
 import type { JSX } from "react";
-import { shapeRegion, labelPlan, fitArt, textWidth, type ArtExtent } from "./shape-region";
+import { shapeRegion, labelPlan, fitArt, textWidth, 切って収まる下限, type ArtExtent } from "./shape-region";
+import { 幅で切る } from "./box-lines";
 import type { LaidNode } from "../types";
 
 /**
@@ -106,8 +107,15 @@ const LABEL_EYEBROW_SPACING = 2;
  */
 function 幅に収める(文字列: string, 大きさ: number, 字間: number, 箱幅: number) {
   const 幅 = textWidth(文字列, 大きさ, 字間);
-  const 倍率 = 幅 > 0 && 箱幅 > 0 ? Math.min(1, 箱幅 / 幅) : 1;
-  return { size: 大きさ * 倍率, spacing: 字間 * 倍率 };
+  // 縮めは読める下限で止める (#953)。 下限が無いと長い名前が点にしか見えない大きさになる。
+  // 止めた行は箱に入らないので、入るところまで切って `…` を付ける (#433 の決まりを保つ)
+  const 倍率 =
+    幅 > 0 && 箱幅 > 0
+      ? Math.min(1, Math.max(箱幅 / 幅, 切って収まる下限(文字列, 大きさ, 字間, 箱幅, textWidth)))
+      : 1;
+  const size = 大きさ * 倍率;
+  const spacing = 字間 * 倍率;
+  return { size, spacing, text: 幅で切る(文字列, size, 箱幅, (u, f) => textWidth(u, f, spacing)) };
 }
 
 /**
@@ -124,16 +132,16 @@ function bottomLabel(node: LaidNode, cx: number, plan: ReturnType<typeof labelPl
     <>
       {node.eyebrow && plan.肩書 && (
         <text x={cx} y={plan.肩書.y} fontSize={肩.size} fontWeight={700} letterSpacing={肩.spacing} textAnchor="middle" fill="var(--cdl-tone-accent, #2d6a8f)">
-          {node.eyebrow}
+          {肩.text}
         </text>
       )}
       <text data-cdl-role="node-label" x={cx} y={plan.名前.y} fontSize={名.size} fontWeight={700} textAnchor="middle" fill="var(--cdl-text, #1a1f2a)">
-        {node.title}
+        {名.text}
       </text>
       {node.subtitle && plan.説明 && (
         <text x={cx} y={plan.説明.y} fontSize={説.size} textAnchor="middle" fill="var(--cdl-text-dim, #5a6270)">
-          {node.subtitle}
-        </text>
+          {説.text}
+  </text>
       )}
     </>
   );

package/src/kinds/shape-region.tsx

@@ -23,6 +23,8 @@ import type { JSX } from "react";
 import type { LaidNode, NodeKind } from "../types";
 import { MONO_ADVANCE_RATIO, displayWidth } from "./row-align";
 import { textWidth } from "./text-width";
+import { 幅で切る } from "./box-lines";
+import { MIN_TITLE_FONT_SIZE } from "../layout/spec";
 
 // 既存の呼出 (検査を含む) がここから取っているため、 そのまま出し直す。
 export { textWidth } from "./text-width";
@@ -61,6 +63,45 @@ export function 幅の倍率(
   return 実幅 > 幅 ? 幅 / 実幅 : 1;
 }
 
+/**
+ * 横で縮める時に、これ以上は縮めないという倍率 (#953)。
+ *
+ * 縮めに下限が無いと、長い名前が点にしか見えない大きさで描かれる
+ * (実測 = 幅 300 の箱に 120 字で 2.4px)。 読めない字は、書いた名前が画面から消えたのと変わらない。
+ * 箱の種別 (`actor` 等 5 種) は `kinds/compact-title.ts` の `fitTextSize` が同じ値で止める。
+ *
+ * **素の大きさが下限以下なら 0 を返す** = 下限を当てると縮めが 1 度も効かず、横へ大きく出る。
+ * その箱は高さの側で既に読めない大きさになっており、`labelPlan` が `読める: false` で報告する。
+ */
+export function 読める下限の倍率(大きさ: number): number {
+  return 大きさ > MIN_TITLE_FONT_SIZE ? MIN_TITLE_FONT_SIZE / 大きさ : 0;
+}
+
+/**
+ * 幅で縮める時に許す下限の倍率 (#953)。 下限を当てられない幅では 0 を返す。
+ *
+ * 下限で止めた行は帯より広くなるので、入るところまで切って `…` を付ける
+ * (箱の中に収める決まりは #433 が持ち、検査が全種別で見ている)。
+ *
+ * **`…` すら入らない幅では止めない**。 そこで切ると名前が 1 字も残らない =
+ * 読めない大きさより悪い。 その幅では今までどおり、小さくても全部描く。
+ *
+ * 測り方は呼ぶ側から渡す。 種別ごとに字幅の見積りが違い、ここで 1 つに決めると
+ * 縮める時と切る時で別の幅を使うことになる。
+ */
+export function 切って収まる下限(
+  題: string,
+  大きさ: number,
+  字間: number,
+  幅上限: number,
+  測る: (t: string, size: number, ls: number) => number,
+): number {
+  const 下限 = 読める下限の倍率(大きさ);
+  if (!(下限 > 0) || !(幅上限 > 0)) return 0;
+  return 幅で切る(題, 大きさ * 下限, 幅上限, (u, f) => 測る(u, f, 字間 * 下限)) === "" ? 0 : 下限;
+}
+
+
 /** 名前の字の大きさの上限。 大きい箱ではここに当たり、 今までの見え方を保つ。 */
 const TITLE_MAX = 18;
 
@@ -433,24 +474,44 @@ export function bodyBand(node: LaidNode, opt: { 影ry: number; 外?: number }):
  *
  * `上` / `下` は倍率 1 の時に baseline から上下へ張り出す量、 `幅` は一番広い行の横幅。
  * 呼ぶ側が自分の書式から出す。
+ *
+ * ## 横は読める下限で止める (#953)
+ *
+ * 横だけで倍率を決めると **下限が無い**。 幅 300 の箱に 120 字の題を渡すと 2.4 で描き、
+ * 点にしか見えない = 書いた名前が画面から消えたのと変わらない。
+ * 箱の種別 (`actor` 等 5 種) は `kinds/compact-title.ts` の `fitTextSize` が 11 で止める。
+ *
+ * `横の下限` を渡すと、横が決める倍率をそこで止める (`切って収まる下限` が算出する)。
+ * 止めた塊は帯から左右へ出るので、呼ぶ側が同じ下限で行を切って収める。
+ *
+ * **縦には入れない**。 縦にはみ出すと絵と重なり、字も絵もどちらも読めなくなる。
+ * 縦が決めた倍率のほうが小さければそちらが勝つので、下限を渡しても縦の張り出しは起きない。
  */
 export function fitLabel(
   band: { x: number; y: number; w: number; h: number },
   block: { 上: number; 下: number; 幅: number },
   pos: { x: number; y: number },
+  横の下限 = 0,
 ): { k: number; x: number; y: number } {
   const 縦 = block.上 + block.下;
   const 横 = Math.max(0, block.幅);
   if (!(縦 > 0)) return { k: 1, x: pos.x, y: pos.y };
   // 帯が潰れた箱では寄せ先が無い。 倍率 0 で描けば箱の外は汚さない
   if (!(band.h > 0) || !(band.w > 0)) return { k: 0, x: band.x + band.w / 2, y: band.y };
-  const k = Math.min(1, band.h / 縦, 横 > 0 ? band.w / 横 : 1);
+  // 横が決める倍率は読める下限で止める (#953)。 縦はそのまま = 縦にはみ出すと絵と重なる
+  const 横で = 横 > 0 ? Math.max(band.w / 横, 横の下限) : 1;
+  const k = Math.min(1, band.h / 縦, 横で);
   // 下端と右端を帯に入れてから、 上端と左端が出る分だけ押し戻す。 倍率が帯に入るまで
   // 落ちているので、 2 つの寄せは両立する
   const 半 = (横 * k) / 2;
   return {
     k,
-    x: Math.max(band.x + 半, Math.min(pos.x, band.x + band.w - 半)),
+    // 下限で止めた塊は帯より広い。 その時は帯の中央に置いて左右へ均等に出す =
+    // 寄せの式をそのまま当てると片側だけに出る (`compact-title.ts` と同じ判断)
+    x:
+      半 * 2 > band.w
+        ? band.x + band.w / 2
+        : Math.max(band.x + 半, Math.min(pos.x, band.x + band.w - 半)),
     y: Math.max(band.y + block.上 * k, Math.min(pos.y, band.y + band.h - block.下 * k)),
   };
 }