@cardenelabs/cdl 0.78.0 → 0.80.0

package/package.json

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

@@ -74,41 +74,180 @@ export function collectBBoxes(lanes: LaidLane[], nodes: LaidNode[], edges: LaidE
   }
 
   for (const e of edges) {
-    const points = extractPathPoints(e.d);
-    if (points.length === 0) continue;
-    const xs = points.map((p) => p.x);
-    const ys = points.map((p) => p.y);
-    const minX = Math.min(...xs);
-    const maxX = Math.max(...xs);
-    const minY = Math.min(...ys);
-    const maxY = Math.max(...ys);
+    const box = pathBBox(e.d);
+    if (!box) continue;
     out.push({
       kind: "edge-path",
       id: e.id,
-      x: minX - 2,
-      y: minY - 2,
-      w: maxX - minX + 4,
-      h: maxY - minY + 4,
+      x: box.minX - 2,
+      y: box.minY - 2,
+      w: box.maxX - box.minX + 4,
+      h: box.maxY - box.minY + 4,
     });
   }
 
   return out;
 }
 
-/** SVG path d 文字列から M/L/C/Q コマンドの座標点を抽出する軽量 parser */
+/** SVG path の命令が取る引数の数。 命令を区切る唯一の根拠 */
+const PATH_ARITY: Record<string, number> = {
+  M: 2, L: 2, H: 1, V: 1, C: 6, S: 4, Q: 4, T: 2, A: 7, Z: 0,
+};
+
+/** 1 つの命令と、その命令だけが取る引数 */
+type PathCommand = { cmd: string; args: number[] };
+
+/** 小文字の命令は 1 つ前の点からの差分で書かれている */
+function isRelative(cmd: string): boolean {
+  return cmd >= "a" && cmd <= "z";
+}
+
+/**
+ * 命令が持つ座標の位置を `[x の位置, y の位置]` の組で、出る順に返す。
+ *
+ * `A` は `rx ry 回転 大きい弧か 向き x y` の 7 個で、座標は末尾の 2 個だけ。
+ * 前の 5 個は半径と向きの指定なので、平行移動しても値が変わらない。
+ * `H` / `V` は片方しか持たないため -1 を置き、読む側が今の点で補う。
+ */
+function coordSlots(cmd: string): Array<[number, number]> {
+  switch (cmd.toUpperCase()) {
+    case "M":
+    case "L":
+    case "T":
+      return [[0, 1]];
+    case "H":
+      return [[0, -1]];
+    case "V":
+      return [[-1, 0]];
+    case "Q":
+    case "S":
+      return [[0, 1], [2, 3]];
+    case "C":
+      return [[0, 1], [2, 3], [4, 5]];
+    case "A":
+      return [[5, 6]];
+    default:
+      return [];
+  }
+}
+
+/**
+ * `d` を命令 1 つずつに切り出す。
+ *
+ * **引数の数を命令ごとに数えることが本関数の役目**。 文字を全部消して数を 2 つずつ組にする
+ * 読み方は、円弧 (`A`) の引数が 7 個 = 奇数のため組にする位置が 1 つずれ、その後ろの点が
+ * 全部ずれる (#872 実測 = 道筋のどこにも無い `(11,11)` と `(0,0)` が点として出て、
+ * 外接矩形が図の左上まで伸びた)。
+ *
+ * 同じ命令を続けて書く省略形 (`L 1 2 3 4` = `L 1 2 L 3 4`) も 1 つずつに開く。
+ * `M` の 2 組目以降は `L` になる (SVG の決まり)。
+ *
+ * 引数が足りない命令は読み飛ばす。 埋めると座標に undefined が入り、以降が全て NaN になって
+ * 判定が黙って対象外になる (#370 と同じ判断)。
+ */
+function parsePathCommands(d: string): PathCommand[] {
+  const out: PathCommand[] = [];
+  const commandRegex = /([MmLlHhVvCcSsQqTtAaZz])([^MmLlHhVvCcSsQqTtAaZz]*)/g;
+  let m: RegExpExecArray | null;
+  while ((m = commandRegex.exec(d)) !== null) {
+    const cmd = m[1]!;
+    const arity = PATH_ARITY[cmd.toUpperCase()] ?? 0;
+    if (arity === 0) {
+      out.push({ cmd, args: [] });
+      continue;
+    }
+    const nums = (m[2] ?? "").trim().split(/[\s,]+/).filter(Boolean).map(parseFloat);
+    for (let i = 0; i + arity <= nums.length; i += arity) {
+      const args = nums.slice(i, i + arity);
+      if (!args.every(Number.isFinite)) break;
+      const 繰り返し = i > 0;
+      const c = 繰り返し && cmd === "M" ? "L" : 繰り返し && cmd === "m" ? "l" : cmd;
+      out.push({ cmd: c, args });
+    }
+  }
+  return out;
+}
+
+/**
+ * `d` を命令ごとに読み、座標点を出る順に返す。
+ *
+ * 返すのは **道筋の上に在る点** で、曲線の制御点も含む (外接矩形を安全側に出すため)。
+ * 円弧は終点だけを返す = 途中の膨らみは点として書かれていない。 膨らみを含めた外接矩形が
+ * 要るなら `pathBBox` を使う。
+ *
+ * 小文字の命令 (1 つ前の点からの差分) は絶対座標に直して返す。
+ */
 export function extractPathPoints(d: string): Array<{ x: number; y: number }> {
   const out: Array<{ x: number; y: number }> = [];
-  const tokens = d.replace(/[A-Za-z]/g, " ").trim().split(/[\s,]+/).filter(Boolean);
-  for (let i = 0; i + 1 < tokens.length; i += 2) {
-    const x = parseFloat(tokens[i]!);
-    const y = parseFloat(tokens[i + 1]!);
-    if (Number.isFinite(x) && Number.isFinite(y)) {
+  let cur = { x: 0, y: 0 };
+  let started = false;
+  for (const { cmd, args } of parsePathCommands(d)) {
+    // 先頭の命令は小文字でも絶対座標として読む (SVG の決まり)
+    const 相対 = started && isRelative(cmd);
+    const 基点 = cur;
+    for (const [xi, yi] of coordSlots(cmd)) {
+      const x = xi >= 0 ? (相対 ? 基点.x + args[xi]! : args[xi]!) : 基点.x;
+      const y = yi >= 0 ? (相対 ? 基点.y + args[yi]! : args[yi]!) : 基点.y;
       out.push({ x, y });
+      cur = { x, y };
     }
+    started = true;
   }
   return out;
 }
 
+/**
+ * `d` の外接矩形を返す。 点が 1 つも無ければ `null`。
+ *
+ * `extractPathPoints` との違いは **円弧の膨らみを足すこと**。 円弧は終点しか点を持たないが、
+ * 実際に描かれる線は弦から膨らむ (経路の飛び越しは半径 11 の半円)。 終点だけで矩形を出すと
+ * 膨らんだ側が矩形の外に出て、本当の重なりを見落とす側に倒れる。
+ *
+ * 膨らみの上限は半径と弦の長さで決まる。 半径 `r` の円弧が長さ `L` の弦から離れる距離は、
+ * 短い側を通るなら `r - sqrt(r² - (L/2)²)`、長い側 (大きい弧) を通るなら
+ * `r + sqrt(r² - (L/2)²)`。 楕円は長い方の半径を使って安全側に倒す。
+ */
+export function pathBBox(
+  d: string,
+): { minX: number; minY: number; maxX: number; maxY: number } | null {
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  let 点あり = false;
+  const 取る = (x: number, y: number): void => {
+    minX = Math.min(minX, x);
+    minY = Math.min(minY, y);
+    maxX = Math.max(maxX, x);
+    maxY = Math.max(maxY, y);
+    点あり = true;
+  };
+
+  let cur = { x: 0, y: 0 };
+  let started = false;
+  for (const { cmd, args } of parsePathCommands(d)) {
+    const 相対 = started && isRelative(cmd);
+    const 基点 = cur;
+    for (const [xi, yi] of coordSlots(cmd)) {
+      const x = xi >= 0 ? (相対 ? 基点.x + args[xi]! : args[xi]!) : 基点.x;
+      const y = yi >= 0 ? (相対 ? 基点.y + args[yi]! : args[yi]!) : 基点.y;
+      取る(x, y);
+      cur = { x, y };
+    }
+    if (cmd.toUpperCase() === "A") {
+      const r = Math.max(Math.abs(args[0]!), Math.abs(args[1]!));
+      const 弦 = Math.hypot(cur.x - 基点.x, cur.y - 基点.y);
+      const 半弦 = Math.min(弦 / 2, r);
+      const 余 = Math.sqrt(Math.max(0, r * r - 半弦 * 半弦));
+      const 膨らみ = args[3] !== 0 ? r + 余 : r - 余;
+      取る(Math.min(基点.x, cur.x) - 膨らみ, Math.min(基点.y, cur.y) - 膨らみ);
+      取る(Math.max(基点.x, cur.x) + 膨らみ, Math.max(基点.y, cur.y) + 膨らみ);
+    }
+    started = true;
+  }
+  return 点あり ? { minX, minY, maxX, maxY } : null;
+}
+
 /**
  * SVG path d 文字列を (dx, dy) 平行移動する (CAR-485 導入)。
  *
@@ -117,9 +256,9 @@ export function extractPathPoints(d: string): Array<{ x: number; y: number }> {
  * (dx, dy) を加算する必要がある。 edges.ts の routePath() は M / L / Q コマンドで
  * 全 coord を absolute 表記するため、 command tokenizer で数値 pair を舐めて加算する。
  *
- * 対応 command = M / L / Q (Q は controlX/Y + endX/Y の 2 pair)。 C は 3 pair (control1 +
- * control2 + end)。 Z (closepath) は座標なしで pass through。 大文字 / 小文字は routePath()
- * の出力に合わせて大文字のみ想定。
+ * 命令ごとの引数の数は `parsePathCommands` が持つ。 円弧 (`A`) は末尾 2 個だけが座標で、
+ * 半径と向きの指定は動かさない。 小文字の命令は 1 つ前の点からの差分なので、平行移動しても
+ * 値が変わらない = そのまま通す (先頭の絶対座標が動けば道筋全体が動く)。
  *
  * dx = 0 かつ dy = 0 は no-op (元 d を返す)。
  */
@@ -134,25 +273,35 @@ export function translatePathD(d: string, dx: number, dy: number): string {
  * `idx` は path 先頭からの座標 pair の通し番号 (Q の control 点も 1 pair として数える)。
  */
 function rebuildPathD(d: string, map: (x: number, y: number, idx: number) => [number, number]): string {
-  const commandRegex = /([MLCQZmlcqz])([^MLCQZmlcqz]*)/g;
   let out = "";
   let idx = 0;
-  let m: RegExpExecArray | null;
-  while ((m = commandRegex.exec(d)) !== null) {
-    const cmd = m[1]!;
-    const argsStr = (m[2] ?? "").trim();
-    if (argsStr === "" || cmd === "Z" || cmd === "z") {
+  let cur = { x: 0, y: 0 };
+  let started = false;
+  for (const { cmd, args } of parsePathCommands(d)) {
+    const slots = coordSlots(cmd);
+    if (slots.length === 0) {
       out += cmd + " ";
+      started = true;
       continue;
     }
-    const args = argsStr.split(/[\s,]+/).filter(Boolean).map(parseFloat);
-    const translated: number[] = [];
-    for (let i = 0; i + 1 < args.length; i += 2) {
-      const [nx, ny] = map(args[i]!, args[i + 1]!, idx);
-      translated.push(nx, ny);
+    const 相対 = started && isRelative(cmd);
+    const 基点 = cur;
+    const 次の引数 = args.slice();
+    for (const [xi, yi] of slots) {
+      const x = xi >= 0 ? (相対 ? 基点.x + args[xi]! : args[xi]!) : 基点.x;
+      const y = yi >= 0 ? (相対 ? 基点.y + args[yi]! : args[yi]!) : 基点.y;
+      const [nx, ny] = map(x, y, idx);
+      if (!相対) {
+        if (xi >= 0) 次の引数[xi] = nx;
+        if (yi >= 0) 次の引数[yi] = ny;
+      }
+      // 位置の通し番号は `extractPathPoints` が返す点と 1 対 1 で揃える。
+      // 揃っていないと `translatePathDPreservingEndpoints` が別の点を固定する。
       idx += 1;
+      cur = { x, y };
     }
-    out += cmd + " " + translated.join(" ") + " ";
+    out += cmd + " " + 次の引数.join(" ") + " ";
+    started = true;
   }
   return out.trim();
 }
@@ -163,17 +312,12 @@ function rebuildPathD(d: string, map: (x: number, y: number, idx: number) => [nu
  * Q は `control` と `end` の 2 pair を持つ。 corner が無ければ両方 -1。
  */
 function cornerBoundaryIndices(d: string): { firstCornerEnd: number; lastCornerStart: number } {
-  const commandRegex = /([MLCQZmlcqz])([^MLCQZmlcqz]*)/g;
   let idx = 0;
   let firstCornerEnd = -1;
   let lastCornerStart = -1;
-  let m: RegExpExecArray | null;
-  while ((m = commandRegex.exec(d)) !== null) {
-    const cmd = m[1]!;
-    const argsStr = (m[2] ?? "").trim();
-    if (argsStr === "" || cmd === "Z" || cmd === "z") continue;
-    const pairs = argsStr.split(/[\s,]+/).filter(Boolean).length >> 1;
-    if ((cmd === "Q" || cmd === "q") && pairs >= 2) {
+  for (const { cmd } of parsePathCommands(d)) {
+    const pairs = coordSlots(cmd).length;
+    if (cmd.toUpperCase() === "Q" && pairs >= 2) {
       if (firstCornerEnd < 0) firstCornerEnd = idx + 1;
       lastCornerStart = idx;
     }

package/src/render/nodes.tsx

@@ -1,4 +1,4 @@
-import type { JSX, KeyboardEvent as ReactKeyboardEvent } from "react";
+import type { CSSProperties, JSX, KeyboardEvent as ReactKeyboardEvent } from "react";
 import { ActorNode } from "../kinds/actor";
 import { CardNode } from "../kinds/card";
 import { SequenceBoardNode } from "../kinds/sequence-board";
@@ -461,6 +461,20 @@ export function CdlNodeView({
   const offsetX = node.renderOffsetX !== undefined ? resolveNumericAttr(node.renderOffsetX, stateValues, 0) : 0;
   const offsetY = node.renderOffsetY !== undefined ? resolveNumericAttr(node.renderOffsetY, stateValues, 0) : 0;
   const hasOffset = offsetX !== 0 || offsetY !== 0;
+  /**
+   * 箱の `style` は **1 箇所でまとめて作る**。
+   *
+   * React は同じ要素に `style` を 2 回渡すと後の値が前を丸ごと置き換える。 押せる箱の
+   * `cursor: pointer` を条件つきで広げる側に置いていたため、後ろの `transition` に
+   * 置き換えられて消えていた (#869 実測 = 押せる箱 4 件の `style` が `transition` だけで、
+   * 計算済みの cursor は親から継承した値だった)。
+   *
+   * 押せない箱に `cursor` を入れない。 親から継承するのが正しい (編集画面では `grab`)。
+   */
+  const 箱のstyle: CSSProperties = {
+    transition: "opacity 120ms ease-out, transform 200ms ease-out",
+    ...(関係の受け口 === undefined ? {} : { cursor: "pointer" as const }),
+  };
   return (
     <g
       data-cdl-node={node.id}
@@ -483,7 +497,6 @@ export function CdlNodeView({
             role: "button" as const,
             tabIndex: 0,
             "aria-pressed": 関係の受け口.焦点 === node.id,
-            style: { cursor: "pointer" as const },
             onPointerEnter: () => 関係の受け口.触れた(node.id),
             onPointerLeave: () => 関係の受け口.離れた(),
             onFocus: () => 関係の受け口.触れた(node.id),
@@ -498,7 +511,7 @@ export function CdlNodeView({
       transform={hasOffset ? `translate(${offsetX}, ${offsetY})` : undefined}
       opacity={boundOpacity}
       data-cdl-tone={node.tone}
-      style={{ transition: "opacity 120ms ease-out, transform 200ms ease-out" }}
+      style={箱のstyle}
     >
       <rect
         // 実寸の枠 (#390)。 `data-cdl-w/h` は layout の静的値で、 `wBind` / `hBind` の縮小や