@cardenelabs/cdl 0.5.0

package/src/kinds/quadrant.tsx

@@ -0,0 +1,164 @@
+import type { JSX } from "react";
+import type { LaidNode } from "../types";
+import { TONE, toneFill } from "../render/tone";
+import { measureTextWidth } from "../layout/text-width";
+
+/**
+ * quadrant-matrix kind ... 1 node に quadrantData (xAxis / yAxis / quadrantLabels / items)
+ * を保持し、 十字軸 + 4 象限 + item pin を SVG 描画する。
+ * layout = 中央十字線で 4 象限に分割、 各象限にほんのり色分け背景 + 象限 label、
+ * item は象限内に大きめの card で配置、 軸両端に矢印 + label を配置。
+ */
+export function QuadrantNode({ node, active }: { node: LaidNode; active: boolean }): JSX.Element {
+  const x0 = node.cx - node.w / 2;
+  const y0 = node.cy - node.h / 2;
+  const data = node.quadrantData;
+  if (!data) return <g transform={`translate(${x0} ${y0})`} />;
+
+  const PAD_TOP = 40;
+  const PAD_BOTTOM = 56;
+  // 左右の余白は軸の名前が収まる幅にする。 固定値 (60) だと長い名前が枠の外に出て、 図の
+  // 外枠に重なって読めなくなる (実測 = `← Low effort` が枠線を跨いでいた)。
+  //
+  // 名前の前後に矢印と間隔 (12) が付くので、 その分も見込む。
+  const AXIS_LABEL_FONT = 12;
+  const PAD_MIN = 60;
+  const axisLabelPad = (text: string): number =>
+    Math.max(PAD_MIN, measureTextWidth(`← ${text}`, { fontSize: AXIS_LABEL_FONT, fontWeight: 700 }) + 12);
+  // 名前が長くても図そのものは残す。 上限を置かないと、 名前が箱の幅を超えた時に
+  // 描く場所が無くなる (実測 = 幅 640 に 50 文字の名前を左右へ置くと canvasW が -143 になった)。
+  // 名前は溢れるが、 読めない図を出すよりは良い。
+  const padBudget = Math.max(0, node.w * 0.5 - PAD_MIN * 2);
+  const wantLeft = axisLabelPad(data.xAxis.left) - PAD_MIN;
+  const wantRight = axisLabelPad(data.xAxis.right) - PAD_MIN;
+  const wantTotal = wantLeft + wantRight;
+  // 収まらない時は要求の比で分ける。 片方だけ長い形で、 短い側まで削らない。
+  const padScale = wantTotal > padBudget && wantTotal > 0 ? padBudget / wantTotal : 1;
+  const PAD_LEFT = PAD_MIN + wantLeft * padScale;
+  const PAD_RIGHT = PAD_MIN + wantRight * padScale;
+  const canvasW = node.w - PAD_LEFT - PAD_RIGHT;
+  const canvasH = node.h - PAD_TOP - PAD_BOTTOM;
+
+  const cx = PAD_LEFT + canvasW / 2;
+  const cy = PAD_TOP + canvasH / 2;
+  const halfW = canvasW / 2;
+  const halfH = canvasH / 2;
+
+  const itemsBy = {
+    topLeft: data.items.filter((i) => i.quadrant === "topLeft"),
+    topRight: data.items.filter((i) => i.quadrant === "topRight"),
+    bottomLeft: data.items.filter((i) => i.quadrant === "bottomLeft"),
+    bottomRight: data.items.filter((i) => i.quadrant === "bottomRight"),
+  };
+
+  // 4 象限の淡い背景。 色は共有の表から作る
+  const quadrantColor = {
+    topLeft: toneFill("success", 0.06),
+    topRight: toneFill("accent", 0.09),
+    bottomLeft: toneFill("warning", 0.06),
+    bottomRight: toneFill("error", 0.06),
+  };
+  const quadrantAccent = {
+    topLeft: TONE.success,
+    topRight: TONE.accent,
+    bottomLeft: TONE.warning,
+    bottomRight: TONE.error,
+  };
+
+  return (
+    <g transform={`translate(${x0} ${y0})`}>
+      <rect
+        data-cdl-role="node-body"
+        x={0}
+        y={0}
+        width={node.w}
+        height={node.h}
+        rx={16}
+        fill="var(--cdl-node-fill, #ffffff)"
+        stroke={active ? "var(--cdl-tone-accent, #2d6a8f)" : "var(--cdl-divider, #d4d4d8)"}
+        strokeWidth={active ? 3 : 1.25}
+      />
+
+      <rect data-cdl-role="quadrant-bg" x={PAD_LEFT} y={PAD_TOP} width={halfW} height={halfH} {...quadrantColor.topLeft} />
+      <rect data-cdl-role="quadrant-bg" x={cx} y={PAD_TOP} width={halfW} height={halfH} {...quadrantColor.topRight} />
+      <rect data-cdl-role="quadrant-bg" x={PAD_LEFT} y={cy} width={halfW} height={halfH} {...quadrantColor.bottomLeft} />
+      <rect data-cdl-role="quadrant-bg" x={cx} y={cy} width={halfW} height={halfH} {...quadrantColor.bottomRight} />
+
+      <rect
+        data-cdl-role="quadrant-canvas"
+        x={PAD_LEFT}
+        y={PAD_TOP}
+        width={canvasW}
+        height={canvasH}
+        fill="none"
+        stroke="var(--cdl-divider, #d4d4d8)"
+        strokeWidth={1}
+        rx={8}
+      />
+
+      <line x1={cx} y1={PAD_TOP} x2={cx} y2={PAD_TOP + canvasH} stroke="var(--cdl-text-mute, #8a8678)" strokeWidth={1.5} />
+      <line x1={PAD_LEFT} y1={cy} x2={PAD_LEFT + canvasW} y2={cy} stroke="var(--cdl-text-mute, #8a8678)" strokeWidth={1.5} />
+
+      <text x={PAD_LEFT + halfW / 2} y={PAD_TOP + 22} fontSize={13} fontWeight={700} textAnchor="middle" fill={quadrantAccent.topLeft}>
+        {data.quadrantLabels.topLeft}
+      </text>
+      <text x={cx + halfW / 2} y={PAD_TOP + 22} fontSize={13} fontWeight={700} textAnchor="middle" fill={quadrantAccent.topRight}>
+        {data.quadrantLabels.topRight}
+      </text>
+      <text x={PAD_LEFT + halfW / 2} y={PAD_TOP + canvasH - 12} fontSize={13} fontWeight={700} textAnchor="middle" fill={quadrantAccent.bottomLeft}>
+        {data.quadrantLabels.bottomLeft}
+      </text>
+      <text x={cx + halfW / 2} y={PAD_TOP + canvasH - 12} fontSize={13} fontWeight={700} textAnchor="middle" fill={quadrantAccent.bottomRight}>
+        {data.quadrantLabels.bottomRight}
+      </text>
+
+      <text x={cx} y={PAD_TOP - 12} fontSize={12} fontWeight={700} textAnchor="middle" fill="var(--cdl-text-dim, #5a6270)">
+        ↑ {data.yAxis.top}
+      </text>
+      <text x={cx} y={PAD_TOP + canvasH + 24} fontSize={12} fontWeight={700} textAnchor="middle" fill="var(--cdl-text-dim, #5a6270)">
+        ↓ {data.yAxis.bottom}
+      </text>
+      <text x={PAD_LEFT - 12} y={cy + 4} fontSize={AXIS_LABEL_FONT} fontWeight={700} textAnchor="end" fill="var(--cdl-text-dim, #5a6270)">
+        ← {data.xAxis.left}
+      </text>
+      <text x={PAD_LEFT + canvasW + 12} y={cy + 4} fontSize={AXIS_LABEL_FONT} fontWeight={700} textAnchor="start" fill="var(--cdl-text-dim, #5a6270)">
+        {data.xAxis.right} →
+      </text>
+
+      {(Object.keys(itemsBy) as Array<keyof typeof itemsBy>).map((q) => {
+        const items = itemsBy[q];
+        if (items.length === 0) return null;
+        const isLeft = q === "topLeft" || q === "bottomLeft";
+        const isTop = q === "topLeft" || q === "topRight";
+        const qxStart = (isLeft ? PAD_LEFT : cx) + 18;
+        const qyStart = (isTop ? PAD_TOP : cy) + 44;
+        const qHalfW = halfW - 36;
+        const qHalfH = halfH - 60;
+        const gap = 10;
+        const rowH = 34;
+        const maxRows = Math.max(1, Math.floor(qHalfH / (rowH + gap)));
+        return items.slice(0, maxRows).map((it, idx) => {
+          const py = qyStart + idx * (rowH + gap);
+          return (
+            <g key={`item-${it.id}`}>
+              <rect
+                data-cdl-role="quadrant-item"
+                x={qxStart}
+                y={py}
+                width={qHalfW}
+                height={rowH}
+                rx={6}
+                fill="var(--cdl-node-fill, #ffffff)"
+                stroke={quadrantAccent[q]}
+                strokeWidth={1.5}
+              />
+              <text x={qxStart + 12} y={py + rowH / 2 + 5} fontSize={13} fontWeight={600} fill="var(--cdl-text, #1a1f2a)">
+                {it.title}
+              </text>
+            </g>
+          );
+        });
+      })}
+    </g>
+  );
+}

package/src/kinds/row-align.ts

@@ -0,0 +1,179 @@
+import { textWidth } from "./text-width";
+
+/**
+ * Storage / class / generic kind の rows[] を DB table / UML class box 風に揃えるための共通 helper。
+ *
+ * 各 row を「左列 (label / field 名)」 と「右列 (value / type)」 に分割する。
+ * delimiter は ` -> ` / ` → ` / ` = ` / `: ` / `:` の優先順 (最長一致 + 視認性順)。
+ * 分割不能な row は left のみ (right="") を返す。
+ *
+ * char width 14px は font-size 26 + monospace 想定の経験値 (旧 fontSize 20 → 11px から
+ * cdl PR #71 で fontSize 26 → 14 に追従)。 visual ピクセル換算は近似で十分。
+ * 厳密な glyph 幅は SVG `getComputedTextLength()` 必要だが、 SSR (Node) では使えないため
+ * 文字数 × 固定 14px で代替する。 日本語など全角文字は 2 倍幅でカウント (字種判定)。
+ */
+
+/**
+ * `generic` の行の左列を測る時に使っていた 1 文字あたりの幅。
+ *
+ * **もう使わない**。 左列は等幅ではなく比例の書体で描くため、 字数に一定を掛ける形では実物に
+ * 合わない (`#425`)。 いまは `rowColumnWidth` が字ごとの幅で見積もる。
+ *
+ * 値そのものは公開したまま残す = 呼出側 (`cardene777/dragon`) の検査が期待値の説明にこの数を
+ * 書いており、 消すと読めなくなる。
+ *
+ * @deprecated `rowColumnWidth` を使う
+ */
+export const ROW_CHAR_WIDTH_PX = 14;
+
+/** `generic` の行の字の大きさ。 左は比例、 右は等幅で描かれる。 */
+export const GENERIC_ROW_LEFT_SIZE_PX = 18;
+export const GENERIC_ROW_RIGHT_SIZE_PX = 21;
+
+/**
+ * 等幅書体 (JetBrains Mono) の 1 文字の送り幅を font size 比で表した値。
+ *
+ * 実測 = font size 26 で 1 文字 15.6 (5 文字の `email` が 78)。 `ROW_CHAR_WIDTH_PX` の 14 は
+ * これより小さく、 列の X を決める近似としては字形の実寸に届かない。 近似のまま線を引くと
+ * 左列の字形に触れる (`#419`)。
+ *
+ * 列の X (`rightColX`) と箱の幅の見積りは近似のままにしてある。 直すと全ての図で列位置と
+ * 箱の幅が動くため、 別 Issue で扱う。
+ */
+export const MONO_ADVANCE_RATIO = 0.6;
+
+/**
+ * `storage` の 1 文字の送り幅。 font size 26 の等幅で実測 15.6。
+ *
+ * `ROW_CHAR_WIDTH_PX` の 14 は実測に届かず、 列の X も箱の幅も足りない側にずれる。 列の間に
+ * 縦線を引く以上、 このずれが余白を食って線と文字が触れる (`#419`)。 `storage` だけ実測に
+ * 合わせた値を使う。
+ *
+ * `generic` は font size が違う (左 18 / 右 21) ため本値は使えない。 そちらの見直しは
+ * `cardene777/cdl#425`。
+ */
+export const STORAGE_CHAR_ADVANCE_PX = 26 * MONO_ADVANCE_RATIO;
+
+/** row 左端 padding (storage node 左 inside) */
+export const ROW_PAD_X_PX = 26;
+
+/** 左列 / 右列の間の gap (区切り感を出す最小幅) */
+export const ROW_COL_GAP_PX = 16;
+
+/**
+ * `storage` の左列 / 右列の間の gap。
+ *
+ * 間に縦の区切り線を引くため (`#419`)、 線の左右に文字が触れない余白が要る。 16 だと線を
+ * 中央に置いて片側 4 しか残らず、 文字が線に触れて見えた (実測)。 片側 16 を確保する。
+ */
+export const STORAGE_COL_GAP_PX = 32;
+
+/** row 右端 padding (右列が node 右端に被らない margin) */
+export const ROW_RIGHT_PAD_PX = 26;
+
+/**
+ * delimiter 候補。 priority 順 (最長一致 + 視認性順)。
+ * 多文字 delimiter (` -> ` / ` → ` / ` = `) を先に検査し、 単文字 `:` は最後の fallback。
+ */
+const DELIMITERS = [" -> ", " → ", " = ", ": ", ":"] as const;
+
+/**
+ * row を左列 / 右列に分割。 delimiter 不在なら left のみ。
+ *
+ * 例:
+ * - `"client: 100"` → `{ left: "client", right: "100" }`
+ * - `"count = 42"` → `{ left: "count", right: "42" }`
+ * - `"a -> b"` → `{ left: "a", right: "b" }`
+ * - `"+login(): void"` → `{ left: "+login()", right: "void" }`
+ * - `"unparsed"` → `{ left: "unparsed", right: "" }`
+ *
+ * `split` は delimiter が在ったかを表す。 右列の中身が空でも「列に分かれている」 ことは
+ * 変わらない (`"status: "` や、 値が signal で空になる行)。 中身の有無で列構造を判定すると、
+ * 値が空になった瞬間だけ列が消える。
+ */
+export function splitRow(row: string): { left: string; right: string; split: boolean } {
+  for (const d of DELIMITERS) {
+    const idx = row.indexOf(d);
+    if (idx > 0) {
+      return {
+        left: row.slice(0, idx).trim(),
+        right: row.slice(idx + d.length).trim(),
+        split: true,
+      };
+    }
+  }
+  return { left: row.trim(), right: "", split: false };
+}
+
+/**
+ * 行の 1 列の横幅の見積り。
+ *
+ * 等幅なら字数に送り幅を掛ける。 比例なら字ごとの幅で足す (`textWidth`)。 どちらも **実物
+ * 以上** に出る = 下回ると「収まっていない物を収まっていると判定」 する向きに外れる。
+ *
+ * 等幅と比例を 1 つの関数で分けるのは、 同じ `generic` の行でも左が比例 (18) / 右が等幅 (21)
+ * だから。 呼ぶ側が列ごとに選ぶ。
+ */
+export function rowColumnWidth(text: string, size: number, mono: boolean): number {
+  return mono ? displayWidth(text) * size * MONO_ADVANCE_RATIO : textWidth(text, size);
+}
+
+/**
+ * 文字列の表示幅を「文字数 × 1 文字幅」 近似で計算。
+ * ASCII (半角) = 1、 それ以外 (全角想定 = 日本語 / 絵文字等) = 2 倍幅でカウント。
+ * SSR / SVG 双方で同値が出る決定的近似。
+ */
+export function displayWidth(text: string): number {
+  let w = 0;
+  for (const ch of text) {
+    // 16-bit code unit が ASCII (printable 32-126) 範囲なら半角扱い、 それ以外は全角扱い。
+    const code = ch.codePointAt(0) ?? 0;
+    w += code >= 0x20 && code <= 0x7e ? 1 : 2;
+  }
+  return w;
+}
+
+/**
+ * rows[] から最低限必要な node width を算出。
+ * 左 padding + 左列 max 幅 + col gap + 右列 max 幅 + 右 padding。
+ *
+ * rows 空 / undefined なら 0 を返す (caller が default w と max() で安全 fallback)。
+ *
+ * `kind` で書体と字の大きさが変わる。 行を等幅の 26 で描くのは `storage` だけで、 列の間に
+ * 縦線を引くため間隔も広い (32)。 それ以外は `generic` の書式 (左が比例の 18 / 右が等幅の 21)。
+ *
+ * **`kind` を渡さない呼出には広い方を返す**。 どちらの書式で描かれるか決められないので、
+ * 狭い方を返すと行が箱からはみ出す。 広い方なら余白が増えるだけで済む。 呼び出し側が種別を
+ * 知っているなら渡した方が箱は締まる (`cardene777/dragon#1147`)。
+ *
+ * 上に丸めるのは、 送り幅が小数のため幅が小数になり、 図の座標が読みにくくなるから。 下に
+ * 丸めると 1 未満だけ足りない箱ができる。
+ */
+export function requiredRowsWidth(rows: string[] | undefined, kind?: string): number {
+  if (!rows || rows.length === 0) return 0;
+  const splits = rows.map(splitRow);
+  const 一番広い = (取る: (s: { left: string; right: string }) => number) =>
+    splits.reduce((m, s) => Math.max(m, 取る(s)), 0);
+
+  /** `storage` = 左右とも等幅の 26。 列の間に縦線を引くため間隔が広い。 */
+  const storage =
+    ROW_PAD_X_PX +
+    一番広い((s) => rowColumnWidth(s.left, 26, true)) +
+    STORAGE_COL_GAP_PX +
+    一番広い((s) => rowColumnWidth(s.right, 26, true)) +
+    ROW_RIGHT_PAD_PX;
+
+  /** `generic` = 左が比例の 18、 右が等幅の 21。 */
+  const generic =
+    ROW_PAD_X_PX +
+    一番広い((s) => rowColumnWidth(s.left, GENERIC_ROW_LEFT_SIZE_PX, false)) +
+    ROW_COL_GAP_PX +
+    一番広い((s) => rowColumnWidth(s.right, GENERIC_ROW_RIGHT_SIZE_PX, true)) +
+    ROW_RIGHT_PAD_PX;
+
+  // **種別が分からない時は広い方を返す**。 どちらで描かれるか決められないので、 狭い方を返すと
+  // 行が箱からはみ出す。 広い方なら余白が増えるだけで済む。
+  if (kind === undefined) return Math.ceil(Math.max(storage, generic));
+  // 行を等幅の 26 で描くのは `storage` だけ。 それ以外は `generic` の書式で描かれる。
+  return Math.ceil(kind === "storage" ? storage : generic);
+}