@cardenelabs/cdl 0.72.0 → 0.74.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.72.0",
+  "version": "0.74.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-blockchain.tsx

@@ -1,8 +1,16 @@
 import type { JSX } from "react";
 import type { LaidNode } from "../types";
-import { fitArt, labelPlan, shapeRegion, textWidth, type ArtExtent } from "./shape-region";
+import {
+  fitArt,
+  labelPlan,
+  shapeRegion,
+  textWidth,
+  打ち消しの倍率,
+  絵の中の字の幅,
+  type ArtExtent,
+  type 打ち消す字,
+} from "./shape-region";
 import { 幅で切る } from "./box-lines";
-import { MONO_ADVANCE_RATIO, displayWidth } from "./row-align";
 import { 字引きを作る, type CdlLang, type CdlTextKey } from "../lang";
 
 /**
@@ -29,6 +37,13 @@ const SMART_CONTRACT_H = 220;
 
 const BLOCK_W = 240;
 const BLOCK_H = 220;
+/** `shape-blockchain-block` の字の指定 (#871 で打ち消しの計算に使うため定数へ出した) */
+const 見出しの字 = 13;
+const 名の字 = 10.5;
+const 値の字 = 11;
+/** 5 行を並べる間隔と、見出しが乗る帯の高さ。 打ち消しの上限をここから出す (#871) */
+const 行の間隔 = 22;
+const 見出しの帯 = 32;
 const BLOCK_SHADOW = 6;
 
 const NFT_W = 220;
@@ -252,8 +267,7 @@ export function ShapeSmartContractNode({ node, active, lang }: ShapeProps): JSX.
  * どちらの書体で描かれても実物以上に出る側へ倒す = 下回ると「収まっていない物を収まっていると
  * 判定」 する向きに外れる (`row-align.ts` の `rowColumnWidth` と同じ考え方)。
  */
-const 字の幅 = (text: string, size: number): number =>
-  Math.max(displayWidth(text) * size * MONO_ADVANCE_RATIO, textWidth(text, size));
+const 字の幅 = (text: string, size: number): number => 絵の中の字の幅(text, size);
 
 /**
  * 絵の中の 5 行の既定値。 書き手が渡さなかった欄はこれで描く (#469)。
@@ -321,27 +335,58 @@ export function ShapeBlockchainBlockNode({ node, active, lang }: ShapeProps): JS
 
   // 見出しは右上の丸 (半径 5.5、 中心が bw - 16) に掛からないところまで
   const 見出しの幅 = bw - 14 - 30;
-  const art = (
+  /*
+   * 絵を **倍率を受け取ってから** 組む (#871)。 縮んだ分を字の指定で打ち消す。
+   *
+   * **幅の予算も打ち消した後の大きさで計算する** = 字だけ大きくして切る位置を元の大きさの
+   * まま置くと、切った字が枠から出る。
+   */
+  /*
+   * 打ち消しの上限を出す帯 (#886)。 **絵の定数から渡す**。
+   *
+   * 見出しは高さ 32 の帯に乗り、5 行は 22 ずつ空けて並ぶ。 幅は行の内側 (`bw - 28`) で、
+   * 値は名前の分を引いた残り = 名前と値が同じ行に並ぶため。
+   *
+   * 値の幅は **打ち消す前の名前の幅** で引く。 打ち消した後の幅で引くと、上限を出すのに
+   * 上限が要る形になる。 名前は打ち消しで広がるので、その分は帯に対する上限 (8 割) が吸う。
+   */
+  const 打ち消す字ら: 打ち消す字[] = [
+    { text: 見出し, size: 見出しの字, 帯: { 幅: 見出しの幅, 高さ: 見出しの帯 } },
+    ...fields.flatMap((f): 打ち消す字[] => [
+      { text: f.label, size: 名の字, 帯: { 幅: bw - 28, 高さ: 行の間隔 } },
+      {
+        text: f.value,
+        size: 値の字,
+        帯: { 幅: bw - 28 - 字の幅(f.label, 名の字) - 8, 高さ: 行の間隔 },
+      },
+    ]),
+  ];
+  const art = (倍率: number): JSX.Element => {
+    const 倍 = 打ち消しの倍率(倍率, 打ち消す字ら);
+    const 題の大きさ = 見出しの字 * 倍;
+    const 名の大きさ = 名の字 * 倍;
+    const 値の大きさ = 値の字 * 倍;
+    return (
     <g>
       {/* 3D shadow */}
       <rect x={x + 6} y={y + 6} width={bw} height={bh} rx={8} fill={frame.stroke} opacity={0.2} stroke="none" />
       <rect data-cdl-role="node-body" x={x} y={y} width={bw} height={bh} rx={8} {...frame} />
       {/* header bar */}
       <path d={`M ${x} ${y + 32} L ${x} ${y + 8} Q ${x} ${y}, ${x + 8} ${y} L ${x + bw - 8} ${y} Q ${x + bw} ${y}, ${x + bw} ${y + 8} L ${x + bw} ${y + 32} Z`} fill="var(--cdl-tone-accent, #2d6a8f)" fillOpacity={0.9} stroke="none" />
-      <text data-cdl-role="blockchain-block-title" x={x + 14} y={y + 22} fontSize={13} fontWeight={700} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fill="#ffffff">
-        {幅で切る(見出し, 13, 見出しの幅, 字の幅)}
+      <text data-cdl-role="blockchain-block-title" data-cdl-counter-scaled="1" x={x + 14} y={y + 22} fontSize={題の大きさ} fontWeight={700} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fill="#ffffff">
+        {幅で切る(見出し, 題の大きさ, 見出しの幅, 字の幅)}
       </text>
       <circle cx={x + bw - 16} cy={y + 16} r={5.5} fill="#7cd88f" stroke="#ffffff" strokeWidth={1.5} />
       {/* fields */}
       {fields.map((f, i) => (
         <g key={i}>
-          <text x={x + 14} y={y + 54 + i * 22} fontSize={10.5} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fill="var(--cdl-text-dim, #5a6270)">
+          <text data-cdl-counter-scaled="1" x={x + 14} y={y + 54 + i * 行の間隔} fontSize={名の大きさ} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fill="var(--cdl-text-dim, #5a6270)">
             {f.label}
           </text>
-          <text data-cdl-role={`blockchain-block-${f.key}`} x={x + bw - 14} y={y + 54 + i * 22} fontSize={11} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fontWeight={600} textAnchor="end" fill="var(--cdl-text, #1a1f2a)">
-            {幅で切る(f.value, 11, bw - 28 - 字の幅(f.label, 10.5) - 8, 字の幅)}
+          <text data-cdl-role={`blockchain-block-${f.key}`} data-cdl-counter-scaled="1" x={x + bw - 14} y={y + 54 + i * 行の間隔} fontSize={値の大きさ} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fontWeight={600} textAnchor="end" fill="var(--cdl-text, #1a1f2a)">
+            {幅で切る(f.value, 値の大きさ, bw - 28 - 字の幅(f.label, 名の大きさ) - 8, 字の幅)}
           </text>
-          <line x1={x + 14} y1={y + 60 + i * 22} x2={x + bw - 14} y2={y + 60 + i * 22} stroke="var(--cdl-divider, #d4d4d8)" strokeWidth={0.5} opacity={0.5} />
+          <line x1={x + 14} y1={y + 60 + i * 行の間隔} x2={x + bw - 14} y2={y + 60 + i * 行の間隔} stroke="var(--cdl-divider, #d4d4d8)" strokeWidth={0.5} opacity={0.5} />
         </g>
       ))}
       {/* chain link icon (bottom center) */}
@@ -351,7 +396,8 @@ export function ShapeBlockchainBlockNode({ node, active, lang }: ShapeProps): JS
         <rect x={42} y={0} width={22} height={18} rx={3} fill="var(--cdl-tone-accent, #2d6a8f)" fillOpacity={0.5} stroke={frame.stroke} strokeWidth={1.5} />
       </g>
     </g>
-  );
+    );
+  };
   return <g>{fitArt(r, blockchainBlockExtent(frame.strokeWidth), art)}</g>;
 }
 

package/src/kinds/shape-region.tsx

@@ -21,6 +21,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";
 
 // 既存の呼出 (検査を含む) がここから取っているため、 そのまま出し直す。
 export { textWidth } from "./text-width";
@@ -450,13 +452,27 @@ export type ArtExtent = { 上: number; 下: number; 左: number; 右: number };
 export function fitArt(
   region: { cx: number; cy: number; availW: number; availH: number },
   extent: ArtExtent,
-  art: JSX.Element,
+  art: JSX.Element | ((倍率: number) => JSX.Element),
 ): JSX.Element {
+  /*
+   * 絵を **倍率を知った上で** 組めるようにする (#871)。
+   *
+   * 縮める時は絵を丸ごと `scale(k)` で包むため、中の文字も一緒に縮む。 指定 10.5 の字が
+   * `k = 0.719` の図で 7.55 になり、読める下限 (画面で 8px) を割っていた。
+   *
+   * **打ち消せるのは絵の側だけ**。 ここで文字の指定を機械的に `1/k` 倍すると、絵が自分で
+   * 計算している「その字が収まる幅」 が指定の大きさのまま残り、字だけが大きくなって
+   * 枠から出る (`shape-blockchain-block` は `幅で切る` に指定 11 を渡して切る位置を決めている)。
+   *
+   * そこで **倍率を絵に渡し、打ち消すかどうかを絵に決めさせる**。 関数を渡さない絵は
+   * 今までどおり縮むだけで、1 つも描き方が変わらない。
+   */
+  const 組む = (k: number): JSX.Element => (typeof art === "function" ? art(k) : art);
   const 縦 = extent.上 + extent.下;
   const 横 = extent.左 + extent.右;
   // 広がりが無限なら倍率が 0 になるので後段の `s` の防御でも止まる。 ここで先に落とすのは
   // 契約 (有限で正の値だけを通す) を入口で 1 つに揃えるため
-  if (!Number.isFinite(縦) || !Number.isFinite(横) || 縦 <= 0 || 横 <= 0) return art;
+  if (!Number.isFinite(縦) || !Number.isFinite(横) || 縦 <= 0 || 横 <= 0) return 組む(1);
 
   // **ここは後段の `s` の防御では代替できない**。 無限の軸は倍率の候補が `Infinity` になって
   // `Math.min` から落ちるだけなので、 残りの候補 (上限 1 と反対の軸) で倍率が決まり、 通常の
@@ -467,11 +483,11 @@ export function fitArt(
     region.availH <= 0 ||
     region.availW <= 0
   ) {
-    return art;
+    return 組む(1);
   }
 
   const s = Math.min(1, region.availH / 縦, region.availW / 横);
-  if (!Number.isFinite(s) || s <= 0) return art;
+  if (!Number.isFinite(s) || s <= 0) return 組む(1);
 
   // 絵の外接矩形の中心を領域の中心に合わせる。 上下 (左右) の広がりが違うので、 中心を
   // そろえないと片側だけはみ出す
@@ -488,14 +504,104 @@ export function fitArt(
   // 食い込む。 「収まるか」 を合計だけで見て位置を見ていなかった。
   //
   // 倍率が 1 で中心も合っている時だけ包まない = 対称な絵に余計な `<g>` を挟まない。
-  if (s >= 1 && dx === 0 && dy === 0) return art;
+  if (s >= 1 && dx === 0 && dy === 0) return 組む(1);
 
   // **包む時は必ず `translate` と `scale` を両方書く**。 倍率 1 の時に `translate` だけを
   // 書くと変換の形が 2 通りになり、 読む側が両方を扱う必要が出る (実測 = 検査の変換 parser が
   // `translate(0 1)` を読めず 8 件落ちた)。 `scale(1)` は無害なので形を 1 つに保つ
   return (
-    <g transform={`translate(${dx} ${dy}) scale(${s})`}>
-      {art}
+    /*
+     * 包みに印を付ける (#886)。 **`scale(` を持つ変換は他にもある** = `event` は目立たせる
+     * ための脈動を `scale(0.78)` から `scale(1)` で描き、絵を箱に収める縮小ではない。
+     * 祖先の変換を正規表現で見る形だと、その脈動まで「絵の縮小」 として数える。
+     */
+    <g data-cdl-art-fit="1" transform={`translate(${dx} ${dy}) scale(${s})`}>
+      {組む(s)}
     </g>
   );
 }
+
+/**
+ * 打ち消しを掛ける字 1 つ (#886)。
+ *
+ * `帯` はその字が座る場所の広さ (絵の座標)。 行なら行の間隔と行の内側の幅、
+ * 見出しなら見出しの帯の高さと、見出しが使える幅。
+ *
+ * **絵が自分の定数から渡す**。 表に書き写すと、絵の寸法を変えた日に片方だけ古くなる
+ * (`ArtExtent` と同じ考え方)。
+ */
+export type 打ち消す字 = {
+  /** 描く字。 幅の上限を出すのに使う */
+  text: string;
+  /** 打ち消す前の指定 */
+  size: number;
+  /** 字間。 渡さない呼び方は 0 */
+  letterSpacing?: number;
+  /** その字が座る場所の広さ */
+  帯: { 幅: number; 高さ: number };
+};
+
+/**
+ * 打ち消した字が帯の高さのどこまでを占めてよいか。 超えると隣の行や帯の縁に触れる。
+ *
+ * **高さにだけ掛ける**。 帯の高さは行の間隔 = 次の行までの距離なので、字がそのまま使うと
+ * 上下が触れる。 帯の幅は絵が余白を引いた内側の幅を渡すので、そのまま使ってよい
+ * (8 割で止めると、字を切る予算より狭い所で打ち消しが止まって 2 割を捨てる)。
+ */
+const 帯の高さに対する上限 = 0.8;
+
+/**
+ * 絵の中の字の幅。 **実物以上に出る側へ倒す**。
+ *
+ * 等幅の字送りで数えた値と、字形から数えた値の大きい方を採る = 下回ると
+ * 「収まっていない物を収まっていると判定」 する向きに外れる (`row-align.ts` の
+ * `rowColumnWidth` と同じ考え方)。
+ */
+export function 絵の中の字の幅(text: string, size: number, letterSpacing = 0): number {
+  return Math.max(
+    displayWidth(text) * size * MONO_ADVANCE_RATIO,
+    textWidth(text, size, letterSpacing),
+  );
+}
+
+/**
+ * 縮んだ分を字の指定で打ち消す倍率 (#871 で連鎖の箱に入れ、#886 で共通化した)。
+ *
+ * 入れ子の絵は決まった大きさで組んでから `fitArt` が箱に収まる倍率で丸ごと縮めるため、
+ * 字も一緒に縮む (実測 = 指定 10.5 が倍率 0.719 の図で 7.55)。 字の指定にこの倍率を掛けると
+ * 画面に出る大きさが指定へ戻る。
+ *
+ * ## 上限は絵の中の帯から出す
+ *
+ * 固定値にすると、絵の寸法を変えた日に効き方だけが変わる。
+ * **幅と高さの両方から出して小さい方を採る** (#886) = 高さだけで止めると、中央揃えの看板の
+ * ように幅が字数に比例して伸びる字が横へ出る。
+ *
+ * ## 帯に収まっていない字では打ち消さない
+ *
+ * 上限が 1 を下回る字がある絵では 1 を返す (実測 = 判子の中の `印` は半径 8 の丸に収まる
+ * 四角の 1 辺 11.3 を指定 10 の 1 字でほぼ使い切っており、幅から出る上限は 1 を下回る)。
+ * 打ち消す側に倒すと、その字が確実に入れ物から出る。
+ *
+ * ## 測れる字が 1 つも無い時も打ち消さない
+ *
+ * 帯の値が有限の正の値でない絵は、収まるかの判定ができない。
+ * `fitArt` が判定できない入力で手を触れないのと同じ向きに倒す。
+ */
+export function 打ち消しの倍率(倍率: number, 字ら: readonly 打ち消す字[]): number {
+  const 戻し = Number.isFinite(倍率) && 倍率 > 0 ? 1 / 倍率 : 1;
+  let 上限 = Number.POSITIVE_INFINITY;
+  for (const 字 of 字ら) {
+    if (!(Number.isFinite(字.size) && 字.size > 0)) continue;
+    const { 幅, 高さ } = 字.帯;
+    if (Number.isFinite(高さ) && 高さ > 0) {
+      上限 = Math.min(上限, (高さ * 帯の高さに対する上限) / 字.size);
+    }
+    const 実幅 = 絵の中の字の幅(字.text, 字.size, 字.letterSpacing ?? 0);
+    if (Number.isFinite(幅) && 幅 > 0 && 実幅 > 0) {
+      上限 = Math.min(上限, 幅 / 実幅);
+    }
+  }
+  if (!Number.isFinite(上限)) return 1;
+  return Math.max(1, Math.min(戻し, 上限));
+}