@cardenelabs/cdl 0.21.2 → 0.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.21.2",
+  "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

@@ -9,8 +9,10 @@ import {
   rowBaselineY,
   CLOUD_ART_CENTER_RISE,
   CLOUD_CIRCLES,
+  余りを分ける,
   目印なしの繰り上げ,
 } from "../layout/spec";
+import { NODE_SIZE } from "../layout/tokens";
 import {
   GENERIC_ROW_LEFT_SIZE_PX,
   rowColumnWidth,
@@ -302,6 +304,16 @@ export function GenericNode({
   // 小見出しを書かない時は、そのために空けた帯のぶん字を上へ繰り上げる (#589)。
   // 中央へ寄せる形と行を持つ形では繰り上げない (前者は塊の置き方が違い、後者は 1 行目と重なる)
   const 繰り上げ = node.eyebrow || centered ? 0 : 目印なしの繰り上げ(node.kind, hasRows);
+  // 箱が中身より高い時は余りを上下で分ける (#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)。
    *
@@ -310,9 +322,9 @@ export function GenericNode({
    * ひし形 (`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 - 繰り上げ;
+  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;
   // 目印も字と同じ芯に合わせる (#588)。 字だけ動かすと目印との間隔が変わる

package/src/layout/spec.ts

@@ -1155,3 +1155,29 @@ export const CLOUD_ART_CENTER_RISE = (() => {
   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;
+}