@cardenelabs/cdl 0.21.1 → 0.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.21.1",
+  "version": "0.22.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/actor.tsx

@@ -2,7 +2,8 @@ import type { JSX } from "react";
 import type { LaidNode } from "../types";
 import { nodeAccent } from "./node-tone";
 import { titlePlacement } from "./compact-title";
-import { 目印なしの繰り上げ } from "../layout/spec";
+import { 余りを分ける, 目印なしの繰り上げ } from "../layout/spec";
+import { NODE_SIZE } from "../layout/tokens";
 
 export function ActorNode({ node, active, value }: { node: LaidNode; active: boolean; value: string | undefined }): JSX.Element {
   const accent = nodeAccent(node, "var(--cdl-tone-accent, #2d6a8f)");
@@ -11,8 +12,16 @@ export function ActorNode({ node, active, value }: { node: LaidNode; active: boo
   // 小見出しを書かない時は、そのために空けた帯のぶん字を上へ繰り上げる (#589)。
   // 繰り上げ量は `layout/spec.ts` が持つ = 高さを出す側と同じ値を引く
   const 繰り上げ = node.eyebrow ? 0 : 目印なしの繰り上げ("actor");
+  // 箱が中身より高い時は余りを上下で分ける (#597)
+  const 余り = 余りを分ける("actor", NODE_SIZE.actor.h, node.h, {
+    hasEyebrow: Boolean(node.eyebrow),
+    hasSubtitle: Boolean(node.subtitle),
+    hasValue: Boolean(value),
+    hasRows: false,
+  });
+  const ずらし = 繰り上げ - 余り;
   // 小型の箱では名前を中央に置く。 固定の位置のままだと下端をまたぐ (#416)
-  const 名前 = titlePlacement(node, { x: 26, y: 86 - 繰り上げ, size: 32 }, { hasEyebrow: Boolean(node.eyebrow) });
+  const 名前 = titlePlacement(node, { x: 26, y: 86 - ずらし, size: 32 }, { hasEyebrow: Boolean(node.eyebrow) });
   return (
     <g transform={`translate(${x} ${y})`}>
       <rect
@@ -27,7 +36,7 @@ export function ActorNode({ node, active, value }: { node: LaidNode; active: boo
         strokeWidth={active ? 3 : 1.25}
       />
       {node.eyebrow && (
-        <text x={26} y={38} fontSize={18} fontWeight={700} letterSpacing={2} fill={accent}>
+        <text x={26} y={38 - 余り} fontSize={18} fontWeight={700} letterSpacing={2} fill={accent}>
           {node.eyebrow}
         </text>
       )}
@@ -54,14 +63,14 @@ export function ActorNode({ node, active, value }: { node: LaidNode; active: boo
         <line
           data-cdl-role="node-row-divider"
           x1={26}
-          y1={110 - 繰り上げ}
+          y1={110 - ずらし}
           x2={node.w - 26}
-          y2={110 - 繰り上げ}
+          y2={110 - ずらし}
           stroke="var(--cdl-row-divider, #7e848e)"
         />
       )}
       {node.subtitle && (
-        <text x={26} y={140 - 繰り上げ} fontSize={20} fill="var(--cdl-text-dim, #5a6270)">
+        <text x={26} y={140 - ずらし} fontSize={20} fill="var(--cdl-text-dim, #5a6270)">
           {node.subtitle}
         </text>
       )}

package/src/kinds/card.tsx

@@ -2,7 +2,8 @@ import type { JSX } from "react";
 import type { LaidNode } from "../types";
 import { nodeAccent } from "./node-tone";
 import { fitTextSize, isCompactBox } from "./compact-title";
-import { 目印なしの繰り上げ } from "../layout/spec";
+import { 余りを分ける, 目印なしの繰り上げ } from "../layout/spec";
+import { NODE_SIZE } from "../layout/tokens";
 
 export function CardNode({ node, active }: { node: LaidNode; active: boolean }): JSX.Element {
   const accent = nodeAccent(node, "var(--cdl-tone-accent, #2d6a8f)");
@@ -19,7 +20,17 @@ export function CardNode({ node, active }: { node: LaidNode; active: boolean }):
   const 小型に呼び名 = compact && Boolean(node.subtitle);
   // 小見出しを書かない時の繰り上げ (#589)。 値は `layout/spec.ts` SSOT
   const 繰り上げ = node.eyebrow ? 0 : 目印なしの繰り上げ("card");
-  const titleY = compact ? (小型に呼び名 ? node.h / 2 - 2 : node.h / 2 + 8) : 86 - 繰り上げ;
+  // 箱が中身より高い時は余りを上下で分ける (#597)。 小型の形は元から中央に置くので対象外
+  const 余り = compact
+    ? 0
+    : 余りを分ける("card", NODE_SIZE.card.h, node.h, {
+        hasEyebrow: Boolean(node.eyebrow),
+        hasSubtitle: Boolean(node.subtitle),
+        hasValue: false,
+        hasRows: false,
+      });
+  const ずらし = 繰り上げ - 余り;
+  const titleY = compact ? (小型に呼び名 ? node.h / 2 - 2 : node.h / 2 + 8) : 86 - ずらし;
   const titleX = compact ? node.w / 2 : 26;
   const paddingX = compact ? 16 : 52;
   const availableW = node.w - paddingX;
@@ -41,7 +52,7 @@ export function CardNode({ node, active }: { node: LaidNode; active: boolean }):
         strokeWidth={active ? 3 : 1.25}
       />
       {!compact && node.eyebrow && (
-        <text x={26} y={38} fontSize={18} fontWeight={700} letterSpacing={2} fill={accent}>
+        <text x={26} y={38 - 余り} fontSize={18} fontWeight={700} letterSpacing={2} fill={accent}>
           {node.eyebrow}
         </text>
       )}
@@ -57,7 +68,7 @@ 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)">
+        <text x={26} y={124 - ずらし} fontSize={subtitleSize} fill="var(--cdl-text-dim, #5a6270)">
           {node.subtitle}
         </text>
       )}

package/src/kinds/event.tsx

@@ -2,7 +2,8 @@ import type { JSX } from "react";
 import type { LaidNode } from "../types";
 import { nodeAccent } from "./node-tone";
 import { titlePlacement } from "./compact-title";
-import { 目印なしの繰り上げ } from "../layout/spec";
+import { 余りを分ける, 目印なしの繰り上げ } from "../layout/spec";
+import { NODE_SIZE } from "../layout/tokens";
 
 export function EventNode({
   node,
@@ -18,8 +19,16 @@ export function EventNode({
   const y = node.cy - node.h / 2;
   // 小見出しを書かない時の繰り上げ (#589)。 値は `layout/spec.ts` SSOT
   const 繰り上げ = node.eyebrow ? 0 : 目印なしの繰り上げ("event");
+  // 箱が中身より高い時は余りを上下で分ける (#597)
+  const 余り = 余りを分ける("event", NODE_SIZE.event.h, node.h, {
+    hasEyebrow: Boolean(node.eyebrow),
+    hasSubtitle: Boolean(node.subtitle),
+    hasValue: false,
+    hasRows: false,
+  });
+  const ずらし = 繰り上げ - 余り;
   // 小型の箱では名前を中央に置く。 固定の位置のままだと下端をまたぐ (#416)
-  const 名前 = titlePlacement(node, { x: 26, y: 88 - 繰り上げ, size: 26 }, { hasEyebrow: Boolean(node.eyebrow) });
+  const 名前 = titlePlacement(node, { x: 26, y: 88 - ずらし, size: 26 }, { hasEyebrow: Boolean(node.eyebrow) });
   const scale = active ? 0.78 + 0.22 * progress : 0.92;
   const opacity = active ? 0.5 + 0.5 * progress : 0.65;
   return (
@@ -40,7 +49,7 @@ export function EventNode({
           strokeWidth={active ? 3 : 1.25}
         />
         {node.eyebrow && (
-          <text x={26} y={38} fontSize={18} fontWeight={700} letterSpacing={2} fill={accent}>
+          <text x={26} y={38 - 余り} fontSize={18} fontWeight={700} letterSpacing={2} fill={accent}>
             {node.eyebrow}
           </text>
         )}
@@ -59,7 +68,7 @@ export function EventNode({
         {node.subtitle && (
           <text
             x={26}
-            y={128 - 繰り上げ}
+            y={128 - ずらし}
             fontSize={21}
             fill="var(--cdl-text-dim, #5a6270)"
             style={{ fontFamily: "'JetBrains Mono', monospace" }}

package/src/kinds/function.tsx

@@ -2,7 +2,8 @@ import type { JSX } from "react";
 import type { LaidNode } from "../types";
 import { nodeAccent } from "./node-tone";
 import { titlePlacement } from "./compact-title";
-import { 目印なしの繰り上げ } from "../layout/spec";
+import { 余りを分ける, 目印なしの繰り上げ } from "../layout/spec";
+import { NODE_SIZE } from "../layout/tokens";
 
 export function FunctionNode({ node, active }: { node: LaidNode; active: boolean }): JSX.Element {
   const accent = nodeAccent(node, "var(--cdl-tone-teal, #2f8770)");
@@ -13,8 +14,16 @@ export function FunctionNode({ node, active }: { node: LaidNode; active: boolean
   const y = node.cy - node.h / 2;
   // 小見出しを書かない時の繰り上げ (#589)。 値は `layout/spec.ts` SSOT
   const 繰り上げ = node.eyebrow ? 0 : 目印なしの繰り上げ("function");
+  // 箱が中身より高い時は余りを上下で分ける (#597)
+  const 余り = 余りを分ける("function", NODE_SIZE.function.h, node.h, {
+    hasEyebrow: Boolean(node.eyebrow),
+    hasSubtitle: Boolean(node.subtitle),
+    hasValue: false,
+    hasRows: false,
+  });
+  const ずらし = 繰り上げ - 余り;
   // 小型の箱では名前を中央に置く。 固定の位置のままだと下端をまたぐ (#416)
-  const 名前 = titlePlacement(node, { x: 26, y: 86 - 繰り上げ, size: 24 }, { hasEyebrow: Boolean(node.eyebrow) });
+  const 名前 = titlePlacement(node, { x: 26, y: 86 - ずらし, size: 24 }, { hasEyebrow: Boolean(node.eyebrow) });
   return (
     <g transform={`translate(${x} ${y})`}>
       <rect
@@ -30,7 +39,7 @@ export function FunctionNode({ node, active }: { node: LaidNode; active: boolean
         strokeOpacity={active ? 1 : 0.5}
       />
       {node.eyebrow && (
-        <text x={26} y={38} fontSize={18} fontWeight={700} letterSpacing={2} fill={accent}>
+        <text x={26} y={38 - 余り} fontSize={18} fontWeight={700} letterSpacing={2} fill={accent}>
           {node.eyebrow}
         </text>
       )}
@@ -47,7 +56,7 @@ export function FunctionNode({ node, active }: { node: LaidNode; active: boolean
         {node.title}
       </text>
       {node.subtitle && (
-        <text x={26} y={126 - 繰り上げ} fontSize={20} fill="var(--cdl-text-dim, #5a6270)">
+        <text x={26} y={126 - ずらし} fontSize={20} fill="var(--cdl-text-dim, #5a6270)">
           {node.subtitle}
         </text>
       )}

package/src/kinds/generic.tsx

@@ -7,8 +7,12 @@ import {
   genericTextShift,
   genericTitleBaselineY,
   rowBaselineY,
+  CLOUD_ART_CENTER_RISE,
+  CLOUD_CIRCLES,
+  余りを分ける,
   目印なしの繰り上げ,
 } from "../layout/spec";
+import { NODE_SIZE } from "../layout/tokens";
 import {
   GENERIC_ROW_LEFT_SIZE_PX,
   rowColumnWidth,
@@ -222,19 +226,15 @@ export function GenericNode({
       // 各 circle の中心 y は box 中央線上 (もしくは中央より少し上)、 半径は box 高さの 0.35 ~ 0.45。
       const cx = w / 2;
       const cy = h / 2;
-      // 雲全体の中心 y を box の中央 (cy) より少し上に
-      const cloudCenterY = cy - h * 0.05;
-      // 5 つの円の半径と中心 x オフセット (中央が大きく、 端が小さい)
-      // 円が w 方向 80% を占めるよう配置
-      const usableW = w * 0.85;
-      const halfW = usableW / 2;
-      const circles = [
-        { cx: cx - halfW * 0.8, cy: cloudCenterY + h * 0.08, r: h * 0.32 }, // 左端
-        { cx: cx - halfW * 0.4, cy: cloudCenterY - h * 0.05, r: h * 0.4 }, // 左
-        { cx: cx, cy: cloudCenterY - h * 0.1, r: h * 0.46 }, // 中央 (最大)
-        { cx: cx + halfW * 0.4, cy: cloudCenterY - h * 0.05, r: h * 0.4 }, // 右
-        { cx: cx + halfW * 0.8, cy: cloudCenterY + h * 0.08, r: h * 0.32 }, // 右端
-      ];
+      // 5 つの円の中心と半径は `layout/spec.ts` の `CLOUD_CIRCLES` が持つ (#588)。
+      // 字を置く側が同じ表から絵の芯を出すので、円を動かせば字も追随する。
+      // 円が w 方向 85% を占めるよう配置
+      const halfW = (w * 0.85) / 2;
+      const circles = CLOUD_CIRCLES.map((c) => ({
+        cx: cx + halfW * c.cx,
+        cy: cy + h * c.cy,
+        r: h * c.r,
+      }));
       // 各 circle を fill=雲色、 stroke=outline 色で順に描画。
       // 全部同じ fill / stroke で描けば視覚的に union された 1 つの雲に見える。
       // ただし stroke が内側 (重なり部分) でも描画されるとセル割線が見える → 重ね順を工夫。
@@ -304,12 +304,31 @@ export function GenericNode({
   // 小見出しを書かない時は、そのために空けた帯のぶん字を上へ繰り上げる (#589)。
   // 中央へ寄せる形と行を持つ形では繰り上げない (前者は塊の置き方が違い、後者は 1 行目と重なる)
   const 繰り上げ = node.eyebrow || centered ? 0 : 目印なしの繰り上げ(node.kind, hasRows);
-  const eyebrowY = centered ? h / 2 - 26 : 32 + cylinderShift;
-  const titleY = genericTitleBaselineY(node.kind, h, hasRows) - 繰り上げ;
-  const subtitleY = centered ? h / 2 + 28 : 96 + cylinderShift - 繰り上げ;
+  // 箱が中身より高い時は余りを上下で分ける (#597)。 中央へ寄せる形は元から中央に置く
+  const 余り = centered
+    ? 0
+    : 余りを分ける(node.kind, NODE_SIZE[node.kind]?.h ?? h, h, {
+        hasEyebrow: Boolean(node.eyebrow),
+        hasSubtitle: Boolean(node.subtitle),
+        hasValue: Boolean(resolvedValue),
+        hasRows,
+      });
+  const ずらし = 繰り上げ - 余り;
+  /*
+   * 中央へ寄せる形では、字を **絵の芯** に合わせる (#588)。
+   *
+   * 雲は箱の上へはみ出し下は手前で終わるので、絵の芯が箱の芯より上にある。 箱の芯に
+   * 合わせると絵に対して下へ寄って見えた (実測で上 71.5 / 下 27.9)。
+   * ひし形 (`decision`) は箱と絵の芯が同じなので 0 になる。
+   */
+  const 絵の芯 = centered && STYLES[node.kind]?.shape === "cloud" ? h * CLOUD_ART_CENTER_RISE : 0;
+  const eyebrowY = centered ? h / 2 - 26 - 絵の芯 : 32 + cylinderShift + 余り;
+  const titleY = genericTitleBaselineY(node.kind, h, hasRows) - ずらし - 絵の芯;
+  const subtitleY = centered ? h / 2 + 28 - 絵の芯 : 96 + cylinderShift - ずらし;
   // icon 位置 (diamond / cloud は title の真右の少し上、 中心配置に合わせる)
   const iconX = centered ? w / 2 + 40 : w - 48;
-  const iconY = centered ? h / 2 - 44 : 18 + cylinderShift;
+  // 目印も字と同じ芯に合わせる (#588)。 字だけ動かすと目印との間隔が変わる
+  const iconY = centered ? h / 2 - 44 - 絵の芯 : 18 + cylinderShift;
   const dominantBaseline = centered ? ("middle" as const) : undefined;
 
   return (

package/src/layout/spec.ts

@@ -1124,3 +1124,60 @@ export function 中身から出す高さ(
  * 実測の見込みは 54 なので、下限が効くのは 3 段の高さを著者が縮めた形に限る。
  */
 export const MIN_BOX_H = 44;
+
+/**
+ * 雲の形を作る 5 つの円 (#588)。 中心と半径を **箱の高さに対する割合** で持つ。
+ *
+ * 描き手 (`kinds/generic.tsx`) がこの表から円を描き、字を置く側が同じ表から
+ * 「絵の芯」 を出す。 別々に持つと、円を動かした時に字だけ取り残される。
+ *
+ * `cx` は箱の中央からの左右のずれ (`w * 0.85 / 2` を 1 とした割合)、
+ * `cy` は箱の中央からの上下のずれ (箱の高さに対する割合)、`r` は半径 (同じく高さに対する割合)。
+ */
+export const CLOUD_CIRCLES = [
+  { cx: -0.8, cy: -0.05 + 0.08, r: 0.32 },
+  { cx: -0.4, cy: -0.05 - 0.05, r: 0.4 },
+  { cx: 0, cy: -0.05 - 0.1, r: 0.46 },
+  { cx: 0.4, cy: -0.05 - 0.05, r: 0.4 },
+  { cx: 0.8, cy: -0.05 + 0.08, r: 0.32 },
+] as const;
+
+/**
+ * 雲の絵の芯が、箱の芯からどれだけ上にあるか (箱の高さに対する割合、#588)。
+ *
+ * 雲は箱の上へ 0.11 はみ出し、下は 0.15 手前で終わる = 絵の芯は箱の芯より上にある。
+ * 字を箱の芯に合わせると、絵に対して下へ寄って見える (実測で上 71.5 / 下 27.9)。
+ *
+ * 円の表から出すので、円を動かせばこの値も動く。
+ */
+export const CLOUD_ART_CENTER_RISE = (() => {
+  const 上 = Math.min(...CLOUD_CIRCLES.map((c) => c.cy - c.r));
+  const 下 = Math.max(...CLOUD_CIRCLES.map((c) => c.cy + c.r));
+  return -(上 + 下) / 2;
+})();
+
+/**
+ * 箱が中身より高い時に、字を下へずらす量 (#597)。
+ *
+ * 段の高さは行内の最大値で決まるので、行に高い箱が 1 つあると同じ行の箱もそこまで伸びる。
+ * 字は上から置かれるため、伸びたぶんがそのまま下に空く (実測 = 240 の箱に 67 ぶんの字が
+ * 上端に貼り付いていた)。
+ *
+ * 余りを上下で分ける = 中身を箱の中央に置く。 行を持つ形と値を持つ形は対象外
+ * (行は上端から数え、値は下端から置くので、動かすと重なる)。
+ *
+ * @param 満載h 3 段すべてを書いた時の高さ (`NODE_SIZE[kind].h`)
+ * @param 実際のh layout が決めた高さ
+ */
+export function 余りを分ける(
+  kind: string | undefined,
+  満載h: number,
+  実際のh: number,
+  中身: { hasEyebrow: boolean; hasSubtitle: boolean; hasValue: boolean; hasRows: boolean },
+): number {
+  if (!段を積む箱か(kind, 中身.hasRows)) return 0;
+  if (中身.hasValue) return 0;
+  const 要る高さ = 中身から出す高さ(kind, 満載h, 中身);
+  const 余り = 実際のh - 要る高さ;
+  return 余り > 0 ? Math.round(余り / 2) : 0;
+}