@cardenelabs/cdl 0.55.0 → 0.57.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.55.0",
+  "version": "0.57.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/card.tsx

@@ -1,7 +1,8 @@
 import type { JSX } from "react";
 import type { LaidNode } from "../types";
 import { nodeAccent } from "./node-tone";
-import { fitTextSize, isCompactBox } from "./compact-title";
+import { ASCENT, DESCENT, fitTextSize, isCompactBox } from "./compact-title";
+import { SUBTITLE_SIZE, 行送りの倍率, 説明文を割り付ける } from "./subtitle-lines";
 import { 余りを分ける, 目印なしの繰り上げ } from "../layout/spec";
 import { NODE_SIZE } from "../layout/tokens";
 
@@ -37,7 +38,19 @@ export function CardNode({ node, active }: { node: LaidNode; active: boolean }):
   const initialTitleSize = compact ? 20 : 24;
   const titleSize = fitTextSize(node.title, availableW, initialTitleSize, 11);
   const textAnchor = compact ? ("middle" as const) : ("start" as const);
-  const subtitleSize = node.subtitle ? fitTextSize(node.subtitle, availableW, 21, 11) : 21;
+  const subtitleY = 124 - ずらし;
+  // 2 行を置けるのは、題名の下端に触れず箱の下端も越えない時だけ (#843)。
+  // 判定は最大の大きさ (21) で行う = 実際はこれ以下に収まるので、入ると判定した箱には必ず入る
+  const 最大の行送り = SUBTITLE_SIZE * 行送りの倍率;
+  const 二行が入る =
+    !compact &&
+    subtitleY - 最大の行送り / 2 - SUBTITLE_SIZE * ASCENT > titleY + titleSize * DESCENT &&
+    subtitleY + 最大の行送り / 2 + SUBTITLE_SIZE * DESCENT <= node.h - 4;
+  const 説明 = node.subtitle
+    ? 説明文を割り付ける(node.subtitle, availableW, { 二行まで: 二行が入る })
+    : undefined;
+  const subtitleSize = 説明?.size ?? 21;
+  const 行送り = subtitleSize * 行送りの倍率;
   return (
     <g transform={`translate(${x} ${y})`}>
       <rect
@@ -67,11 +80,18 @@ export function CardNode({ node, active }: { node: LaidNode; active: boolean }):
       >
         {node.title}
       </text>
-      {!compact && node.subtitle && (
-        <text x={26} y={124 - ずらし} fontSize={subtitleSize} fill="var(--cdl-text-dim, #5a6270)">
-          {node.subtitle}
-        </text>
-      )}
+      {!compact &&
+        説明?.lines.map((行, i) => (
+          <text
+            key={`sub-${i}`}
+            x={26}
+            y={subtitleY + (i - (説明.lines.length - 1) / 2) * 行送り}
+            fontSize={subtitleSize}
+            fill="var(--cdl-text-dim, #5a6270)"
+          >
+            {行}
+          </text>
+        ))}
       {小型に呼び名 && (
         <text
           data-cdl-role="node-subtitle"

package/src/kinds/compact-title.ts

@@ -63,8 +63,8 @@ export const MIN_TEXT_SIZE = 11;
  * 収まるかを決めるのは baseline ではなく **字の上端と下端** なので、 中央に置く時も収まるかを
  * 見る時もこの 2 つで測る。
  */
-const ASCENT = 0.72;
-const DESCENT = 0.25;
+export const ASCENT = 0.72;
+export const DESCENT = 0.25;
 
 /**
  * 名前が収まる最小の帯の高さ。 これより低い帯では **収めきれない**。

package/src/kinds/subtitle-lines.ts

@@ -0,0 +1,99 @@
+/**
+ * 箱の説明文を、読める大きさのまま何行に割るか (#843)。
+ *
+ * 説明文は幅に入らないと字を小さくして 1 行に収めていた。 下限 (11) まで縮むと、同じ図の中で
+ * 同じ役割の字が 2 倍近く違って見える (実測 = 待機 の説明文が 19、読み込み が 11)。
+ *
+ * 幅を広げる案は採らない。 状態を横に並べる図では図全体が横長になり、器に収めた時に
+ * **題名の方** が小さくなる (#357 で幅を絞った経緯)。 高さも増やさない = 説明文の下には既に
+ * 余白があり、題名との間と合わせて 2 行が入る。
+ *
+ * 折る位置は「読み手が区切りとして読む所」 を優先する。 `入る時: A / 出る時: B` のように
+ * 2 つの事柄を並べた説明文は ` / ` が区切りで、そこで折ると 1 行が 1 つの事柄になる。
+ */
+import { estimateTextWidth, fitTextSize, MIN_TEXT_SIZE } from "./compact-title";
+
+/** 説明文の既定の大きさ。 `card` が使ってきた値 */
+export const SUBTITLE_SIZE = 21;
+
+/**
+ * 読みやすさの下限。 これを下回る大きさで描くくらいなら行を増やす。
+ *
+ * 走査の `text-readability` が題名に使う下限と同じ値。
+ */
+export const SUBTITLE_MIN_SIZE = 12;
+
+/** 行を重ねる間隔 (字の大きさに対する倍率) */
+export const 行送りの倍率 = 1.2;
+
+export type 説明の割り付け = { size: number; lines: string[] };
+
+/**
+ * 説明文を 1 行か 2 行に割り付ける。
+ *
+ * 2 行にするのは、1 行では読みやすさの下限を割る時だけ。 `二行まで` が false の時 (2 行を置く
+ * 余白が無い箱) は今までどおり下限 11 まで縮めて 1 行で描く。
+ */
+export function 説明文を割り付ける(
+  text: string,
+  maxWidth: number,
+  opts: { 二行まで: boolean; targetSize?: number },
+): 説明の割り付け {
+  const 目標 = opts.targetSize ?? SUBTITLE_SIZE;
+  const 読める大きさ = fitTextSize(text, maxWidth, 目標, SUBTITLE_MIN_SIZE);
+  if (estimateTextWidth(text, 読める大きさ) <= maxWidth) return { size: 読める大きさ, lines: [text] };
+
+  if (opts.二行まで) {
+    for (let size = 目標; size >= SUBTITLE_MIN_SIZE; size -= 1) {
+      const 行 = 二行に割る(text, maxWidth, size);
+      if (行) return { size, lines: 行 };
+    }
+  }
+  // 2 行でも入らない / 2 行を置けない箱は、今までどおり縮めて 1 行で描く
+  return { size: fitTextSize(text, maxWidth, 目標, MIN_TEXT_SIZE), lines: [text] };
+}
+
+/** 両方の行が幅に入る割り方。 無ければ undefined */
+function 二行に割る(text: string, maxWidth: number, size: number): [string, string] | undefined {
+  let 一番良い: [string, string] | undefined;
+  let 一番狭い = Infinity;
+  for (const [左, 右] of 割る候補(text)) {
+    const 幅 = Math.max(estimateTextWidth(左, size), estimateTextWidth(右, size));
+    if (幅 > maxWidth || 幅 >= 一番狭い) continue;
+    一番狭い = 幅;
+    一番良い = [左, 右];
+  }
+  return 一番良い;
+}
+
+/**
+ * 割る位置の候補。 区切りの語 → 空白 → 字の境目 の順に探す。
+ *
+ * 区切りと空白で割る時はその字が改行を担うので落とす。 字の境目で割る時は 1 字も落とさない
+ * (日本語は空白を持たないため、この形で割ることになる)。
+ */
+function 割る候補(text: string): Array<[string, string]> {
+  const 区切り: Array<[string, string]> = [];
+  for (const m of text.matchAll(/\s*\/\s*/g)) {
+    区切り.push([text.slice(0, m.index).trim(), text.slice(m.index! + m[0].length).trim()]);
+  }
+  if (区切り.length > 0) return 区切り.filter(入っている);
+
+  const 空白: Array<[string, string]> = [];
+  for (const m of text.matchAll(/\s+/g)) {
+    空白.push([text.slice(0, m.index).trim(), text.slice(m.index! + m[0].length).trim()]);
+  }
+  if (空白.length > 0) return 空白.filter(入っている);
+
+  const 字: Array<[string, string]> = [];
+  const 並び = [...text];
+  for (let i = 1; i < 並び.length; i += 1) {
+    字.push([並び.slice(0, i).join(""), 並び.slice(i).join("")]);
+  }
+  return 字.filter(入っている);
+}
+
+/** どちらの行も字を持つ割り方だけを使う */
+function 入っている([左, 右]: [string, string]): boolean {
+  return 左 !== "" && 右 !== "";
+}

package/src/kinds/user-journey.tsx

@@ -66,6 +66,14 @@ export function UserJourneyNode({
     frustrated: "😕",
     angry: "😠",
   };
+  // 行に描く気持ちの名前 (#841)。 型の値は書き手が書く値なので変えず、描く字だけを引き替える
+  const emotionLabel: Record<JourneyEmotion, string> = {
+    delighted: "大満足",
+    happy: "満足",
+    neutral: "ふつう",
+    frustrated: "不満",
+    angry: "怒り",
+  };
 
   const rowH = canvasH / 5;
   // step を列の中央に置く。 端に寄せると、 step の下に置く touchpoint chip が枠からはみ出す。
@@ -142,7 +150,7 @@ export function UserJourneyNode({
             textAnchor="end"
             fill={emotionColor[e]}
           >
-            {e}
+            {emotionLabel[e]}
           </text>
         </g>
       ))}