@cardenelabs/cdl 0.76.0 → 0.77.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.76.0",
+  "version": "0.77.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/chart-pie.tsx

@@ -5,7 +5,22 @@ import { resolveChartData, type ResolvedChartDatum } from "../render/payload-bin
 import { 進みを畳む } from "./draw-progress";
 import { 名札の段をほどく } from "./label-stack";
 import { 扇形の切り抜き } from "./draw-arc";
-import { textWidth } from "./text-width";
+import { textWidth, 縮んだ絵の字の下限 } from "./text-width";
+
+/** 字の上下に残す余白の割合。 帯に字を収める時と同じ値を使う */
+const 穴に対する上限 = 0.8;
+
+/**
+ * 輪の中央に置く字の大きさ。
+ *
+ * 半径に比例させると小さい図で字が読めなくなる (実測 = 120x110 の箱で 3.00 world)。
+ * 下限まで戻し、**穴に入らない時だけ下限を割る** = 入らない大きさで描くと数字が輪へ
+ * 重なる (#891)。
+ */
+function 中央の字(比例した大きさ: number, 穴の半径: number, 文: string): number {
+  const 入る大きさ = (穴の半径 * 2 * 穴に対する上限) / Math.max(textWidth(文, 1), 1e-6);
+  return Math.min(Math.max(比例した大きさ, 縮んだ絵の字の下限), 入る大きさ);
+}
 import { 実値表記, 割合表記 } from "./chart-number";
 
 /**
@@ -182,6 +197,15 @@ export function ChartPieNode({
   const cy = PAD_TOP + chartAreaH / 2;
 
   const 前のslices = 前あり ? 輪を組む(data, cx, cy, 前の外半径, 前の内半径, 前の割合) : [];
+  /*
+   * 中央の 2 行。 字は穴に入る範囲で下限まで戻し、2 行目の位置は **字の大きさから出す**
+   * (#891)。 半径に比例させたままだと、下限まで戻した 1 行目と 2 行目が重なる。
+   */
+  const 穴 = 前あり ? 前の内半径 : 外の内半径;
+  const 合計の文 = 実値表記(Math.round(前あり ? 今の合計 : total));
+  const 合計の字 = 中央の字(Math.round(radius * 0.26), 穴, 合計の文);
+  const 見出しの字 = 中央の字(Math.round(radius * 0.12), 穴, "合計");
+  const 合計の下 = Math.max(Math.round(radius * 0.2), 合計の字 * 0.25 + 見出しの字 * 0.8);
   const slices = 輪を組む(data, cx, cy, radius, 外の内半径, 今の割合);
 
   /** 円がどこまで開いたか (0..1、 cdl#516)。 畳み方は `draw-progress.ts` が持つ */
@@ -301,17 +325,17 @@ export function ChartPieNode({
         x={cx}
         y={cy - 2}
         textAnchor="middle"
-        fontSize={Math.round(radius * 0.26)}
+        fontSize={合計の字}
         fontWeight={600}
         fill="var(--cdl-text, #1a1f2a)"
       >
-        {実値表記(Math.round(前あり ? 今の合計 : total))}
+        {合計の文}
       </text>
       <text
         x={cx}
-        y={cy + Math.round(radius * 0.2)}
+        y={cy + 合計の下}
         textAnchor="middle"
-        fontSize={Math.round(radius * 0.12)}
+        fontSize={見出しの字}
         fill="var(--cdl-text-dim, #5a6270)"
       >
         合計
@@ -593,6 +617,11 @@ function 表の形({ node, active, data, 割合, x0, y0, drawing, progress, inst
   const 内半径 = R * 0.58;
   const cx = PAD + R;
   const cy = node.h / 2;
+  // 中央の 2 行。 輪の layout と同じ決め方 (#891)
+  const 合計の文 = 実値表記(Math.round(data.reduce((acc, d) => acc + d.value, 0)));
+  const 合計の字 = 中央の字(Math.round(R * 0.26), 内半径, 合計の文);
+  const 見出しの字 = 中央の字(Math.round(R * 0.12), 内半径, "合計");
+  const 合計の下 = Math.max(Math.round(R * 0.2), 合計の字 * 0.25 + 見出しの字 * 0.8);
 
   const 表左 = node.w - PAD - 表幅;
   const 右端 = node.w - PAD;
@@ -643,17 +672,17 @@ function 表の形({ node, active, data, 割合, x0, y0, drawing, progress, inst
         x={cx}
         y={cy - 2}
         textAnchor="middle"
-        fontSize={Math.round(R * 0.26)}
+        fontSize={合計の字}
         fontWeight={600}
         fill="var(--cdl-text, #1a1f2a)"
       >
-        {実値表記(Math.round(data.reduce((acc, d) => acc + d.value, 0)))}
+        {合計の文}
       </text>
       <text
         x={cx}
-        y={cy + Math.round(R * 0.2)}
+        y={cy + 合計の下}
         textAnchor="middle"
-        fontSize={Math.round(R * 0.12)}
+        fontSize={見出しの字}
         fill="var(--cdl-text-dim, #5a6270)"
       >
         合計

package/src/kinds/shape-software.tsx

@@ -1,6 +1,7 @@
 import type { JSX } from "react";
 import type { LaidNode } from "../types";
 import { 字引きを作る, type CdlLang } from "../lang";
+import { 打ち消しの倍率, type 打ち消す字 } from "./shape-region";
 
 /**
  * Shape-driven software 6 kinds (CAR-1111 Phase 2-B)。
@@ -217,6 +218,8 @@ export function ShapeTerminalNode({ node, active, lang }: ShapeProps): JSX.Eleme
   const lineFont = "ui-monospace, SFMono-Regular, Menlo, monospace";
   const 余白 = 16;
   const 帯 = 28;
+  // 帯の名札の指定。 中の行と揃える = 1 つだけ小さいと縮んだ箱で真っ先に読めなくなる (#891)
+  const 帯の字 = 12.5;
   const 角 = 10;
   const 先頭 = 26;
   const 行間 = 22;
@@ -226,7 +229,7 @@ export function ShapeTerminalNode({ node, active, lang }: ShapeProps): JSX.Eleme
       { 左: 16, 字: 12.5, 色: "#7cd88f", 文: "$" },
       { 左: 30, 字: 12.5, 色: "#e6edf3", 文: "pnpm build" },
     ],
-    [{ 左: 16, 字: 12, 色: "#8b95a5", 文: 字引("terminal.output") }],
+    [{ 左: 16, 字: 12.5, 色: "#8b95a5", 文: 字引("terminal.output") }],
     [{ 左: 16, 字: 12.5, 色: "#7cd88f", 文: "$" }],
   ];
   // 中身は自分の座標で描くため、 本体に入る倍率を出せるよう最長行から自然幅を求める。
@@ -266,7 +269,7 @@ export function ShapeTerminalNode({ node, active, lang }: ShapeProps): JSX.Eleme
           <text
             x={x + w / 2}
             y={y + barH / 2 + 4 * 倍}
-            fontSize={11 * 倍}
+            fontSize={帯の字 * 倍}
             fontFamily={lineFont}
             textAnchor="middle"
             fill="#7a8290"
@@ -355,6 +358,8 @@ export function ShapeCodeBlockNode({ node, active, lang }: ShapeProps): JSX.Elem
   const 太さ = 9;
   const 隙間 = 6;
   const 持ち上げ = 8;
+  // 行番号の指定。 溝 (幅 24) に 9.46、行の間隔 (20) に 10.7 で収まる (#891 で 10.5 から)
+  const 行番号の字 = 11;
   const lines = [
     [
       { c: "#c678dd", w: 40 },
@@ -377,20 +382,30 @@ export function ShapeCodeBlockNode({ node, active, lang }: ShapeProps): JSX.Elem
       { c: "#e6edf3", w: 40 },
     ],
   ];
-  const 最長 = Math.max(
-    ...lines.map(
-      (tokens) => tokens.reduce((sum, token) => sum + token.w, 0) + 隙間 * (tokens.length - 1),
-    ),
-  );
-  // 中身は自分の座標で描くため、 本体に入る倍率を出せるよう最長行から自然幅を求める。
-  const 自然幅 = 溝 + 字下げ + 最長 + 余白;
   // 最終行の token と行番号まで入る自然高を使い、 縦にも同じ倍率を適用できるようにする。
   const 自然高 =
-    タブ高 + 行頭 + 行間 * (lines.length - 1) + Math.max(太さ - 持ち上げ, 10.5 * DESCENT);
-  // 右 132 のはみ出しは、 中の行を本体へ縦横同率で収めて直す。
-  // fitArt で絵ごと縮めると tab の字と行番号が読めなくなるため使わない。
-  // 幅 300・高さ 200 では倍率が 1 のままなので、 従来値を保つ。
-  const 倍 = Math.min(1, w / 自然幅, bodyH / 自然高);
+    タブ高 + 行頭 + 行間 * (lines.length - 1) + Math.max(太さ - 持ち上げ, 行番号の字 * DESCENT);
+  /*
+   * 倍率は **高さだけから出す** (#891)。
+   *
+   * 行の帯は code の見た目を作る飾りで、 いちばん長い行は 228 ある。 幅も倍率に入れると
+   * 飾りの長さが字の大きさを決めてしまい、 120x110 の箱で行番号が 4.33 world まで落ちた。
+   * 狭い箱では帯を縮めず **本体の右端で切る** = 実際の editor も長い行を切って見せる。
+   *
+   * 幅 300・高さ 200 では倍率が 1 のままなので、 従来値を保つ。
+   */
+  const 倍 = Math.min(1, bodyH / 自然高);
+  /*
+   * 縮んだ分を字の指定で打ち消す (#891、 仕組みは #886 と同じ)。
+   *
+   * 帯は tab の札 (幅 `タブ幅` / 高さ `タブ高`) と、行番号が乗る溝 (幅 `溝 - 持ち上げ` /
+   * 高さ `行間`)。 絵に 1 つの倍率なので、狭い方が全体の上限になる。
+   */
+  const 打ち消す字ら: 打ち消す字[] = [
+    { text: 字引("codeBlock.fileName"), size: 11, 帯: { 幅: タブ幅, 高さ: タブ高 } },
+    { text: "1", size: 行番号の字, 帯: { 幅: 溝 - 持ち上げ, 高さ: 行間 } },
+  ];
+  const 倍返し = 打ち消しの倍率(倍, 打ち消す字ら);
   const tabW = タブ幅 * 倍;
   const tabH = タブ高 * 倍;
   const 丸 = 角 * 倍;
@@ -421,9 +436,10 @@ export function ShapeCodeBlockNode({ node, active, lang }: ShapeProps): JSX.Elem
           />
           <path d={`M ${x} ${y + tabH} L ${x + w} ${y + tabH}`} stroke="#2a3140" strokeWidth={1} />
           <text
+            data-cdl-counter-scaled="1"
             x={x + tabW / 2}
             y={y + tabH / 2 + 4 * 倍}
-            fontSize={11 * 倍}
+            fontSize={11 * 倍 * 倍返し}
             fontFamily={lineFont}
             textAnchor="middle"
             fill="#e6edf3"
@@ -441,9 +457,10 @@ export function ShapeCodeBlockNode({ node, active, lang }: ShapeProps): JSX.Elem
             return (
               <g key={i}>
                 <text
+                  data-cdl-counter-scaled="1"
                   x={x + gutterW - 持ち上げ * 倍}
                   y={codeY0 + i * lineH}
-                  fontSize={10.5 * 倍}
+                  fontSize={行番号の字 * 倍 * 倍返し}
                   fontFamily={lineFont}
                   textAnchor="end"
                   fill="#4a5266"
@@ -451,19 +468,22 @@ export function ShapeCodeBlockNode({ node, active, lang }: ShapeProps): JSX.Elem
                   {i + 1}
                 </text>
                 {toks.map((t, j) => {
-                  const rect = (
-                    <rect
-                      key={j}
-                      x={cursor}
-                      y={codeY0 + i * lineH - 持ち上げ * 倍}
-                      width={t.w * 倍}
-                      height={太さ * 倍}
-                      rx={2 * 倍}
-                      fill={t.c}
-                      fillOpacity={0.85}
-                      stroke="none"
-                    />
-                  );
+                  // 本体の右端で切る。 端から出る帯は幅を詰め、端の外から始まる帯は描かない
+                  const 描く幅 = Math.min(t.w * 倍, x + w - 余白 * 倍 - cursor);
+                  const rect =
+                    描く幅 > 0 ? (
+                      <rect
+                        key={j}
+                        x={cursor}
+                        y={codeY0 + i * lineH - 持ち上げ * 倍}
+                        width={描く幅}
+                        height={太さ * 倍}
+                        rx={2 * 倍}
+                        fill={t.c}
+                        fillOpacity={0.85}
+                        stroke="none"
+                      />
+                    ) : null;
                   cursor += (t.w + 隙間) * 倍;
                   return rect;
                 })}
@@ -512,22 +532,38 @@ export function ShapeKanbanCardNode({ node, active, lang }: ShapeProps): JSX.Ele
   const w = Math.max(0, node.w - 線 * 2 - 影);
   const h = Math.max(0, node.h - 線 * 2 - 影);
   const 帯間余白 = 4;
-  const 左右余白 = 14;
-  const 上段隙間 = 8;
+  /*
+   * 上段 (`ID` と状態の札) の寸法は **字の下限から逆算する** (#891)。
+   *
+   * 札の中身は縦横まとめて `倍` で縮むので、字の大きさは `指定 x 倍` になる。
+   * 120x110 の箱では描ける幅が 112.8 しか無く、指定 11 の字を 8 world に保つには
+   * 上段の自然幅を 155 以下に収める必要がある (112.8 / (8 / 11) = 155.1)。
+   *
+   * 変更前は 166.8 で、字が 7.44 world まで落ちていた。
+   */
+  const 左右余白 = 12;
+  const 上段隙間 = 6;
   const 優先帯高 = 10;
   const ID文 = 字引("kanbanCard.id");
   const ID基準 = 30;
   const ID字 = 11;
   const ID字間 = 1;
   const PILL上 = 20;
-  // 札の幅は状態の字から決める = 指定 11 の `IN PROG` は字間 1 で幅 62.4、丸い端に触れない余白を足す (#888)
-  const PILL幅 = 70;
+  // 札の幅は状態の字から決める = 指定 11 の `IN PROG` は幅 55.4、丸い端に触れない余白を足す (#888)
+  const PILL幅 = 62;
   const PILL高 = 16;
   const PILL字 = 11;
+  /*
+   * 状態の字に字間を置かない (#891)。 字間は幅を字数に比例して伸ばすため、札を 8 広げないと
+   * 収まらない。 その 8 は上段の自然幅に乗り、120x110 の箱で全部の字を 0.4 world 下げる。
+   */
+  const PILL字間 = 0;
   const FOOTER下 = 22;
   const AVATAR中心Y = 4;
   const AVATAR半径 = 9;
   const AVATAR枠 = 1.5;
+  // 頭文字の指定。 半径 9 の丸の内側 (一辺 12.7) に 9.46 x 10.7 で収まる (#891 で 10 から)
+  const AVATAR字 = 11;
   const 名前字 = 17;
   const 説明基準比 = 20 / 17;
   const 説明字比 = 12 / 17;
@@ -609,7 +645,7 @@ export function ShapeKanbanCardNode({ node, active, lang }: ShapeProps): JSX.Ele
             y={pillY + 12 * 倍}
             fontSize={PILL字 * 倍}
             fontWeight={700}
-            letterSpacing={1 * 倍}
+            letterSpacing={PILL字間 * 倍}
             textAnchor="middle"
             fill="#5a4a1a"
             fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace"
@@ -651,7 +687,7 @@ export function ShapeKanbanCardNode({ node, active, lang }: ShapeProps): JSX.Ele
             <text
               x={9 * 倍}
               y={8 * 倍}
-              fontSize={10 * 倍}
+              fontSize={AVATAR字 * 倍}
               fontWeight={700}
               textAnchor="middle"
               fill="#ffffff"
@@ -670,7 +706,7 @@ export function ShapeKanbanCardNode({ node, active, lang }: ShapeProps): JSX.Ele
             <text
               x={23 * 倍}
               y={8 * 倍}
-              fontSize={10 * 倍}
+              fontSize={AVATAR字 * 倍}
               fontWeight={700}
               textAnchor="middle"
               fill="#ffffff"

package/src/kinds/text-width.ts

@@ -71,3 +71,15 @@ export function textWidth(s: string, size: number, 字送り = 0): number {
   }
   return 幅 * size + 字送り * 字数;
 }
+
+/**
+ * 縮んだ絵の中の字の下限 (world 座標、 #891)。
+ *
+ * 箱に合わせて中身を縮める種別は、倍率をそのまま字へ掛けると読めない大きさまで落ちる
+ * (実測 = 120x110 の箱で 3.00 world)。 **入れ物に入る限りはここまでで止める**。
+ *
+ * 絵が縮まない箱の下限 (11) とは別の値で、そちらは検査側
+ * (`test/art-text-declarations.ts` の `絵の中の字の下限`) が持つ。 縮んだ箱では帯が
+ * 上限を決めるため 11 に届かないことがあり、2 つを同じ値にはできない。
+ */
+export const 縮んだ絵の字の下限 = 8;

package/src/lang.ts

@@ -33,7 +33,14 @@ export function resolveLang(value: unknown): CdlLang {
  */
 const en = {
   /** `shape-terminal` の 2 行目 (命令の出力) */
-  "terminal.output": "→ 12 chunks in 1.8s",
+  /*
+   * `shape-terminal` の出力の行。
+   *
+   * **いちばん長い行が絵の倍率を決める** (#891)。 端末の中身は自分の座標で組んでから箱へ
+   * 収めるので、この行が長いほど全部の字が小さくなる。 120x110 の箱では 20 字の版で
+   * 7.71 world まで落ちていた。
+   */
+  "terminal.output": "→ 12 chunks",
   /** `shape-code-block` の札の file 名 */
   "codeBlock.fileName": "utils.ts",
   /** `shape-kanban-card` の課題の番号 */
@@ -272,7 +279,7 @@ export type CdlTextKey = keyof typeof en;
  * 日本語の文でもこの綴りで書くため。
  */
 const ja: Record<CdlTextKey, string> = {
-  "terminal.output": "→ 1.8 秒で完了",
+  "terminal.output": "→ 12 個を結合",
   "codeBlock.fileName": "共通.ts",
   "kanbanCard.id": "#1111",
   "kanbanCard.status": "進行中",