@cardenelabs/cdl 0.109.0 → 0.110.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.109.0",
+  "version": "0.110.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

@@ -12,9 +12,9 @@ import {
   shapeRegion,
   textWidth,
   切って収まる下限,
+  帯で切る,
   type ArtExtent,
 } from "./shape-region";
-import { 幅で切る } from "./box-lines";
 
 /**
  * Shape-driven basement 8 kinds (CAR-1099、 CAR-1130 people ベース統一版)。
@@ -90,8 +90,14 @@ function labelBlock(
     node.eyebrow ? textWidth(node.eyebrow, EYEBROW_SIZE, EYEBROW_TRACKING) : 0,
     node.subtitle ? textWidth(node.subtitle, SUB_SIZE) : 0,
   );
-  // 横で縮める倍率を読める下限で止める (#953)。 切って収まらない幅では下限を当てない
-  const 下限 = 切って収まる下限(node.title ?? "", size, 0, band.w, textWidth);
+  // 横で縮める倍率を読める下限で止める (#953)。 切って収まらない幅では下限を当てない。
+  //
+  // **題が一番広い行のときだけ当てる** (#957)。 塊の倍率は一番広い行で決まるので、
+  // 補いの行が幅を決めている箱で下限を当てると、題を 0.6px 上げるために補いの行から
+  // 字を落とすことになる = 払うのと得るのが別の行になる
+  const 題幅 = textWidth(node.title ?? "", size);
+  const 下限 =
+    題幅 >= 幅 ? 切って収まる下限(node.title ?? "", size, 0, band.w, textWidth) : 0;
   const { k, x, y: baseline } = fitLabel(band, { 上, 下, 幅 }, pos, 下限);
   return { k, x, baseline, 上端: baseline - 上 * k, 下端: baseline + 下 * k };
 }
@@ -102,7 +108,7 @@ function commonLabel(node: LaidNode, pos: { x: number; y: number }, size: number
   const x = 塊.x;
   // 下限で止めた行は帯に入らないので、入るところまで切って `…` を付ける (#953)
   const 切る = (t: string, 大きさ: number, 字間 = 0) =>
-    幅で切る(t, 大きさ * k, band.w, (u, f) => textWidth(u, f, 字間 * k));
+    帯で切る(t, 大きさ * k, band.w, (u, f) => textWidth(u, f, 字間 * k));
   return (
     <>
       {node.eyebrow && (
@@ -564,12 +570,15 @@ 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,
   );
-  // 縮めは読める下限で止める (#953)。 下限が無いと長い名前が点にしか見えない大きさになる
-  const 下限 = 切って収まる下限(node.title ?? "", plan.名前.size, 0, 幅上限, textWidth);
+  // 縮めは読める下限で止める (#953)。 下限が無いと長い名前が点にしか見えない大きさになる。
+  // 題が一番広い行のときだけ当てる (#957、 上の `labelBlock` と同じ理由)
+  const 題幅 = textWidth(node.title ?? "", plan.名前.size);
+  const 下限 =
+    題幅 >= 幅 ? 切って収まる下限(node.title ?? "", plan.名前.size, 0, 幅上限, textWidth) : 0;
   const k = 幅 > 0 && 幅上限 > 0 ? Math.min(1, Math.max(幅上限 / 幅, 下限)) : 1;
   // 下限で止めた行は箱に入らないので、入るところまで切って `…` を付ける (#953)
   const 切る = (t: string, 大きさ: number, 字間 = 0) =>
-    幅で切る(t, 大きさ * k, 幅上限, (u, f) => textWidth(u, f, 字間 * k));
+    帯で切る(t, 大きさ * k, 幅上限, (u, f) => textWidth(u, f, 字間 * k));
   return (
     <>
       {node.eyebrow && plan.肩書 && (

package/src/kinds/shape-blockchain.tsx

@@ -6,6 +6,7 @@ import {
   shapeRegion,
   幅の倍率,
   切って収まる下限,
+  帯で切る,
   打ち消しの倍率,
   絵の中の字の幅,
   type ArtExtent,
@@ -136,15 +137,18 @@ function blockchainNodeExtent(strokeWidth: number): ArtExtent {
  * 名前の塊を描く。 位置と大きさは `labelPlan` が決める (箱の下端から積み上げる、 #433)。
  */
 function bottomLabel(node: LaidNode, cx: number, plan: ReturnType<typeof labelPlan>) {
-  // 縮めは読める下限で止める (#953)。 止めた行は箱に入らないので、入るところまで切る
-  const 収める = (t: string, 大きさ: number, 字間: number) => {
+  // 縮めは読める下限で止める (#953)。 止めた行は箱に入らないので、入るところまで切る。
+  // 下限を当てるのは題の行だけ (#957) = 補いの行に当てると、収まっている行を大きくしてから
+  // 切ることになる
+  const 収める = (t: string, 大きさ: number, 字間: number, 題か = false) => {
     const 測る = (u: string, f: number, ls: number) => 字の幅(u, f) + ls * [...u].length;
-    const 倍率 = Math.max(幅の倍率(t, 大きさ, 字間, node.w), 切って収まる下限(t, 大きさ, 字間, node.w, 測る));
+    const 下限 = 題か ? 切って収まる下限(t, 大きさ, 字間, node.w, 測る) : 0;
+    const 倍率 = Math.max(幅の倍率(t, 大きさ, 字間, node.w), 下限);
     const size = 大きさ * 倍率;
-    return { 倍率, text: 幅で切る(t, size, node.w, (u, f) => 字の幅(u, f) + 字間 * 倍率 * [...u].length) };
+    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.title ?? "", plan.名前.size, 0, true);
   const 説 = node.subtitle && plan.説明 ? 収める(node.subtitle, plan.説明.size, 0) : { 倍率: 1, text: node.subtitle ?? "" };
   const 肩書倍率 = 肩.倍率;
   const 名前倍率 = 名.倍率;

package/src/kinds/shape-commerce.tsx

@@ -7,8 +7,8 @@ import {
   打ち消しの倍率,
   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,17 +101,18 @@ function 字幅(文字列: string, 大きさ: number, 字間: number): number {
  *
  * 字間も同じ割合で詰める = 大きさだけ縮めても字間が残ると幅が比例して縮まない。
  */
-function 幅に収める(文字列: string, 大きさ: number, 字間: number, 箱幅: number) {
+function 幅に収める(文字列: string, 大きさ: number, 字間: number, 箱幅: number, 題か = false) {
   const 幅 = 字幅(文字列, 大きさ, 字間);
   // 縮めは読める下限で止める (#953)。 下限が無いと長い名前が点にしか見えない大きさになる。
-  // 止めた行は箱に入らないので、入るところまで切って `…` を付ける (#433 の決まりを保つ)
-  const 倍率 =
-    幅 > 0 && 箱幅 > 0
-      ? Math.min(1, Math.max(箱幅 / 幅, 切って収まる下限(文字列, 大きさ, 字間, 箱幅, 字幅)))
-      : 1;
+  // 止めた行は箱に入らないので、入るところまで切って `…` を付ける (#433 の決まりを保つ)。
+  //
+  // **下限を当てるのは題の行だけ** (#957)。 補いの行に当てると、収まっている行を
+  // 大きくしてから切ることになる = 書いた字を落として得るのが 1px に満たない
+  const 下限 = 題か ? 切って収まる下限(文字列, 大きさ, 字間, 箱幅, 字幅) : 0;
+  const 倍率 = 幅 > 0 && 箱幅 > 0 ? Math.min(1, Math.max(箱幅 / 幅, 下限)) : 1;
   const size = 大きさ * 倍率;
   const spacing = 字間 * 倍率;
-  return { size, spacing, text: 幅で切る(文字列, size, 箱幅, (u, f) => 字幅(u, f, spacing)) };
+  return { size, spacing, text: 帯で切る(文字列, size, 箱幅, (u, f) => 字幅(u, f, spacing)) };
 }
 
 /**
@@ -120,7 +121,7 @@ function 幅に収める(文字列: string, 大きさ: number, 字間: number,
  */
 function bottomLabel(node: LaidNode, cx: number, plan: ReturnType<typeof labelPlan>) {
   const 肩 = 幅に収める(node.eyebrow ?? "", plan.肩書?.size ?? 0, LABEL_EYEBROW_SPACING, node.w);
-  const 名 = 幅に収める(node.title ?? "", plan.名前.size, 0, node.w);
+  const 名 = 幅に収める(node.title ?? "", plan.名前.size, 0, node.w, true);
   const 説 = 幅に収める(node.subtitle ?? "", plan.説明?.size ?? 0, 0, node.w);
   return (
     <>

package/src/kinds/shape-finance.tsx

@@ -6,8 +6,8 @@ import {
   打ち消しの倍率,
   type 打ち消す字,
   切って収まる下限,
+  帯で切る,
 } from "./shape-region";
-import { 幅で切る } from "./box-lines";
 import type { LaidNode } from "../types";
 import { 字引きを作る, type CdlLang } from "../lang";
 
@@ -100,17 +100,18 @@ function 字幅(文字列: string, 大きさ: number, 字間: number): number {
  *
  * 字間も同じ割合で詰める = 大きさだけ縮めても字間が残ると幅が比例して縮まない。
  */
-function 幅に収める(文字列: string, 大きさ: number, 字間: number, 箱幅: number) {
+function 幅に収める(文字列: string, 大きさ: number, 字間: number, 箱幅: number, 題か = false) {
   const 幅 = 字幅(文字列, 大きさ, 字間);
   // 縮めは読める下限で止める (#953)。 下限が無いと長い名前が点にしか見えない大きさになる。
-  // 止めた行は箱に入らないので、入るところまで切って `…` を付ける (#433 の決まりを保つ)
-  const 倍率 =
-    幅 > 0 && 箱幅 > 0
-      ? Math.min(1, Math.max(箱幅 / 幅, 切って収まる下限(文字列, 大きさ, 字間, 箱幅, 字幅)))
-      : 1;
+  // 止めた行は箱に入らないので、入るところまで切って `…` を付ける (#433 の決まりを保つ)。
+  //
+  // **下限を当てるのは題の行だけ** (#957)。 補いの行に当てると、収まっている行を
+  // 大きくしてから切ることになる = 書いた字を落として得るのが 1px に満たない
+  const 下限 = 題か ? 切って収まる下限(文字列, 大きさ, 字間, 箱幅, 字幅) : 0;
+  const 倍率 = 幅 > 0 && 箱幅 > 0 ? Math.min(1, Math.max(箱幅 / 幅, 下限)) : 1;
   const size = 大きさ * 倍率;
   const spacing = 字間 * 倍率;
-  return { size, spacing, text: 幅で切る(文字列, size, 箱幅, (u, f) => 字幅(u, f, spacing)) };
+  return { size, spacing, text: 帯で切る(文字列, size, 箱幅, (u, f) => 字幅(u, f, spacing)) };
 }
 
 /**
@@ -119,7 +120,7 @@ function 幅に収める(文字列: string, 大きさ: number, 字間: number,
  */
 function bottomLabel(node: LaidNode, cx: number, plan: ReturnType<typeof labelPlan>) {
   const 肩 = 幅に収める(node.eyebrow ?? "", plan.肩書?.size ?? 0, LABEL_EYEBROW_SPACING, node.w);
-  const 名 = 幅に収める(node.title ?? "", plan.名前.size, 0, node.w);
+  const 名 = 幅に収める(node.title ?? "", plan.名前.size, 0, node.w, true);
   const 説 = 幅に収める(node.subtitle ?? "", plan.説明?.size ?? 0, 0, node.w);
   return (
     <>

package/src/kinds/shape-hardware.tsx

@@ -1,6 +1,5 @@
 import type { JSX } from "react";
-import { shapeRegion, labelPlan, fitArt, textWidth, 切って収まる下限, type ArtExtent } from "./shape-region";
-import { 幅で切る } from "./box-lines";
+import { shapeRegion, labelPlan, fitArt, textWidth, 切って収まる下限, 帯で切る, type ArtExtent } from "./shape-region";
 import type { LaidNode } from "../types";
 
 /**
@@ -105,17 +104,18 @@ const LABEL_EYEBROW_SPACING = 2;
  * 字幅の見積りは共有の `textWidth` (実測を階級で丸め上げた表) が持つ。 字間も同じ割合で
  * 詰める = 大きさだけ縮めても字間が残ると幅が比例して縮まない。
  */
-function 幅に収める(文字列: string, 大きさ: number, 字間: number, 箱幅: number) {
+function 幅に収める(文字列: string, 大きさ: number, 字間: number, 箱幅: number, 題か = false) {
   const 幅 = textWidth(文字列, 大きさ, 字間);
   // 縮めは読める下限で止める (#953)。 下限が無いと長い名前が点にしか見えない大きさになる。
-  // 止めた行は箱に入らないので、入るところまで切って `…` を付ける (#433 の決まりを保つ)
-  const 倍率 =
-    幅 > 0 && 箱幅 > 0
-      ? Math.min(1, Math.max(箱幅 / 幅, 切って収まる下限(文字列, 大きさ, 字間, 箱幅, textWidth)))
-      : 1;
+  // 止めた行は箱に入らないので、入るところまで切って `…` を付ける (#433 の決まりを保つ)。
+  //
+  // **下限を当てるのは題の行だけ** (#957)。 補いの行に当てると、収まっている行を
+  // 大きくしてから切ることになる = 書いた字を落として得るのが 1px に満たない
+  const 下限 = 題か ? 切って収まる下限(文字列, 大きさ, 字間, 箱幅, textWidth) : 0;
+  const 倍率 = 幅 > 0 && 箱幅 > 0 ? Math.min(1, Math.max(箱幅 / 幅, 下限)) : 1;
   const size = 大きさ * 倍率;
   const spacing = 字間 * 倍率;
-  return { size, spacing, text: 幅で切る(文字列, size, 箱幅, (u, f) => textWidth(u, f, spacing)) };
+  return { size, spacing, text: 帯で切る(文字列, size, 箱幅, (u, f) => textWidth(u, f, spacing)) };
 }
 
 /**
@@ -126,7 +126,7 @@ function 幅に収める(文字列: string, 大きさ: number, 字間: number,
  */
 function bottomLabel(node: LaidNode, cx: number, plan: ReturnType<typeof labelPlan>) {
   const 肩 = 幅に収める(node.eyebrow ?? "", plan.肩書?.size ?? 0, LABEL_EYEBROW_SPACING, node.w);
-  const 名 = 幅に収める(node.title ?? "", plan.名前.size, 0, node.w);
+  const 名 = 幅に収める(node.title ?? "", plan.名前.size, 0, node.w, true);
   const 説 = 幅に収める(node.subtitle ?? "", plan.説明?.size ?? 0, 0, node.w);
   return (
     <>

package/src/kinds/shape-region.tsx

@@ -89,6 +89,31 @@ export function 読める下限の倍率(大きさ: number): number {
  * 測り方は呼ぶ側から渡す。 種別ごとに字幅の見積りが違い、ここで 1 つに決めると
  * 縮める時と切る時で別の幅を使うことになる。
  */
+/**
+ * 帯にちょうど収まる行を、丸め誤差で切らないための相対の余裕 (#957)。
+ *
+ * 塊の倍率は一番広い行が帯にちょうど収まる値なので、切る側の測り直しが浮動小数で
+ * 髪の毛 1 本ぶん上回ると、収まっている行を切る (実測 = `間隔を倍に広げる · 最大 3 回` が
+ * `... 最大 3 …` になった)。
+ *
+ * 相対で持つのは、帯の幅が 20 から 600 まで動くため。 絶対値で持つと狭い帯で効きすぎる。
+ */
+const 切る余裕 = 1e-9;
+
+/**
+ * 行を帯に収まるところまでで切り、切った時は `…` を付ける (#953)。
+ *
+ * ちょうど収まる行は切らない (§ 切る余裕)。
+ */
+export function 帯で切る(
+  text: string,
+  大きさ: number,
+  幅上限: number,
+  測る: (t: string, size: number) => number,
+): string {
+  return 幅で切る(text, 大きさ, 幅上限 * (1 + 切る余裕), 測る);
+}
+
 export function 切って収まる下限(
   題: string,
   大きさ: number,
@@ -98,7 +123,7 @@ export function 切って収まる下限(
 ): number {
   const 下限 = 読める下限の倍率(大きさ);
   if (!(下限 > 0) || !(幅上限 > 0)) return 0;
-  return 幅で切る(題, 大きさ * 下限, 幅上限, (u, f) => 測る(u, f, 字間 * 下限)) === "" ? 0 : 下限;
+  return 帯で切る(題, 大きさ * 下限, 幅上限, (u, f) => 測る(u, f, 字間 * 下限)) === "" ? 0 : 下限;
 }