@cardenelabs/cdl 0.73.0 → 0.74.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.73.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";
 
 /**
@@ -36,28 +44,6 @@ const 値の字 = 11;
 /** 5 行を並べる間隔と、見出しが乗る帯の高さ。 打ち消しの上限をここから出す (#871) */
 const 行の間隔 = 22;
 const 見出しの帯 = 32;
-/** 打ち消した字が帯のどこまでを占めてよいか。 超えると上下の行や帯の縁に触れる */
-const 帯に対する上限 = 0.8;
-
-/**
- * 縮んだ分を字の指定で打ち消す倍率 (#871)。
- *
- * この絵は 240 x 220 で組んでから、箱に収まる倍率で丸ごと縮む。 字も一緒に縮むので、
- * 指定 10.5 が `k = 0.719` の図で 7.55 になり、画面で読める下限 (8px) を割っていた。
- *
- * **上限は絵の中の帯から出す** = 固定値にすると、絵の寸法を変えた日に効き方だけが変わる。
- * 5 行は 22 ずつ空けて並べ、見出しは高さ 32 の帯に乗る。
- *
- * 1 を下回らない = 縮んでいない図 (`k = 1`) で字を小さくしない。
- */
-function 打ち消しの倍率(k: number): number {
-  const 戻し = Number.isFinite(k) && k > 0 ? 1 / k : 1;
-  const 上限 = Math.min(
-    (行の間隔 * 帯に対する上限) / 値の字,
-    (見出しの帯 * 帯に対する上限) / 見出しの字,
-  );
-  return Math.max(1, Math.min(戻し, 上限));
-}
 const BLOCK_SHADOW = 6;
 
 const NFT_W = 220;
@@ -281,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)。
@@ -356,8 +341,28 @@ export function ShapeBlockchainBlockNode({ node, active, lang }: ShapeProps): JS
    * **幅の予算も打ち消した後の大きさで計算する** = 字だけ大きくして切る位置を元の大きさの
    * まま置くと、切った字が枠から出る。
    */
+  /*
+   * 打ち消しの上限を出す帯 (#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 名の大きさ = 名の字 * 倍;
     const 値の大きさ = 値の字 * 倍;
@@ -368,17 +373,17 @@ export function ShapeBlockchainBlockNode({ node, active, lang }: ShapeProps): JS
       <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={題の大きさ} fontWeight={700} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fill="#ffffff">
+      <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 * 行の間隔} fontSize={名の大きさ} 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 * 行の間隔} fontSize={値の大きさ} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fontWeight={600} textAnchor="end" fill="var(--cdl-text, #1a1f2a)">
+          <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 * 行の間隔} x2={x + bw - 14} y2={y + 60 + i * 行の間隔} stroke="var(--cdl-divider, #d4d4d8)" strokeWidth={0.5} opacity={0.5} />

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";
@@ -508,8 +510,98 @@ export function fitArt(
   // 書くと変換の形が 2 通りになり、 読む側が両方を扱う必要が出る (実測 = 検査の変換 parser が
   // `translate(0 1)` を読めず 8 件落ちた)。 `scale(1)` は無害なので形を 1 つに保つ
   return (
-    <g transform={`translate(${dx} ${dy}) scale(${s})`}>
+    /*
+     * 包みに印を付ける (#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(戻し, 上限));
+}