@cardenelabs/cdl 0.21.0 → 0.21.2

package/package.json

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

@@ -1869,8 +1869,22 @@ export function resolveEdgeLabelOverlapsWithChainAndPropagate(
         for (const { p } of ordered) {
           const axis = p.axis as "x" | "y";
           if (!pathShiftIsSafe(e.id, axis, p.sign, amount)) continue;
+          /*
+           * **動かした先で離れるかを見る**。 「壊さない」 だけを見て動かすと、離れない向きへ
+           * 動かして終わることがある (実測 = 説明が別の線の縦区間の真下に居る形で、繰り返しを
+           * 12 回まで回しても隙間は 0 のまま)。 その時 `線を動かせた` が立つので、下の逃がしにも
+           * 回らない。
+           *
+           * **押し出しは今までどおり出す**。 出さない形にすると、離れないなりに効いていた
+           * 押し出しが消えて別の図が壊れる (実測で 3 図が `overlap=-1`)。 離れなかった時に
+           * 「線で逃がせた」 と数えないことだけを変える = 下の逃がしにも回るようになる。
+           */
+          const 動かした後 = measurePathLabelGapSegs(
+            simulateShiftedSegments(e, axis === "x" ? p.sign * amount : 0, axis === "y" ? p.sign * amount : 0),
+            label,
+          );
           out.push({ target: { kind: "edge-path", id: e.id }, axis, sign: p.sign, amount });
-          線を動かせた = true;
+          線を動かせた = 動かした後 > gap;
           break;
         }
         /*
@@ -1903,16 +1917,64 @@ export function resolveEdgeLabelOverlapsWithChainAndPropagate(
           if (近い点) {
             const dx = 芯.x - 近い点.x;
             const dy = 芯.y - 近い点.y;
-            const axis: "x" | "y" = Math.abs(dx) >= Math.abs(dy) ? "x" : "y";
-            const 向き = axis === "x" ? dx : dy;
-            const sign: 1 | -1 = 向き >= 0 ? 1 : -1;
-            out.push({
-              target: { kind: "label", id: label.id },
-              axis,
-              sign,
-              amount: pathLabelClearance - gap + NEAR_MISS_MARGIN,
-              chain: false,
+            const 量 = pathLabelClearance - gap + NEAR_MISS_MARGIN;
+            /*
+             * **行き先を確かめてから動かす**。 近い点から離れる向きへ出すだけだと、その先に
+             * 別の線が居ることがある (実測で 3 図が `overlap=-1` になった)。
+             *
+             * 縦横それぞれの向きを、離れている方から順に試す。 動かした先で **どの線とも
+             * いまより近づかない** 向きだけを採る。
+             */
+            const 候補: Array<{ axis: "x" | "y"; sign: 1 | -1 }> =
+              Math.abs(dx) >= Math.abs(dy)
+                ? [
+                    { axis: "x", sign: dx >= 0 ? 1 : -1 },
+                    { axis: "y", sign: dy >= 0 ? 1 : -1 },
+                  ]
+                : [
+                    { axis: "y", sign: dy >= 0 ? 1 : -1 },
+                    { axis: "x", sign: dx >= 0 ? 1 : -1 },
+                  ];
+            const 動かした箱 = (axis: "x" | "y", sign: 1 | -1): BBox => ({
+              ...label,
+              x: label.x + (axis === "x" ? sign * 量 : 0),
+              y: label.y + (axis === "y" ? sign * 量 : 0),
             });
+            /*
+             * **線ごとに見る**。 全体の最小距離だけを比べると、いま 0 の線が離れるぶん、
+             * 別の線が 0 になっても「悪くなっていない」 と読める (実測でその形になった)。
+             */
+            const 線ごとの距離 = (箱: BBox): Map<string, number> => {
+              const 出 = new Map<string, number>();
+              for (const 他 of edges) {
+                if (他.id === label.id) continue;
+                const segs2 = segmentsExcludingOwnPath(shiftedSegments(他.id, 他.d), ownSegsOf(label.id));
+                if (segs2.length === 0) continue;
+                出.set(他.id, measurePathLabelGapSegs(segs2, 箱));
+              }
+              return 出;
+            };
+            const いまの距離 = 線ごとの距離(label);
+            const 悪くする = (箱: BBox): boolean => {
+              const 後 = 線ごとの距離(箱);
+              for (const [id, 前の値] of いまの距離) {
+                const 後の値 = 後.get(id) ?? Infinity;
+                // 前より縮めない。 前が要求を満たしていたなら、その要求も割らない
+                if (後の値 < Math.min(前の値, pathLabelClearance)) return true;
+              }
+              return false;
+            };
+            for (const 候 of 候補) {
+              if (悪くする(動かした箱(候.axis, 候.sign))) continue;
+              out.push({
+                target: { kind: "label", id: label.id },
+                axis: 候.axis,
+                sign: 候.sign,
+                amount: 量,
+                chain: false,
+              });
+              break;
+            }
           }
         }
       }

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;
+})();