@cardenelabs/cdl 0.21.1 → 0.21.2

package/package.json

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

@@ -7,6 +7,8 @@ import {
   genericTextShift,
   genericTitleBaselineY,
   rowBaselineY,
+  CLOUD_ART_CENTER_RISE,
+  CLOUD_CIRCLES,
   目印なしの繰り上げ,
 } from "../layout/spec";
 import {
@@ -222,19 +224,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 +302,21 @@ 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 - 繰り上げ;
+  /*
+   * 中央へ寄せる形では、字を **絵の芯** に合わせる (#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,34 @@ 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;
+})();