@cardenelabs/cdl 0.78.0 → 0.80.0

package/CHANGELOG.md

@@ -5,6 +5,57 @@ CDL (Chainome Diagram Language) の主要変更履歴。
 
 ## [Unreleased]
 
+## [0.80.0] - 2026-09-27
+
+### Fixed
+
+- **押せる箱を指すと押せる形のカーソルが出るようになった** (#869 / #896)
+
+  `relations: hover` を書いた図の箱は押せる形になるが、指しても `pointer` の cursor が
+  出なかった。 読み上げには `role="button"` で「押せる」 と伝わる一方、見た目には出ない =
+  読み手は触れて光るだけの箱だと読む。
+
+  原因は同じ要素に `style` を 2 回渡していたこと。 React は後の値で前を丸ごと置き換える
+  ため、押せる箱に渡した `cursor: pointer` が後ろの `transition` に消されていた。
+
+  | 項目 | 直す前 | 直した後 |
+  |---|---|---|
+  | 押せる箱の `style` | `transition` だけ | `transition` と `cursor: pointer` |
+  | 押せない箱の `style` | `transition` だけ | 変えない |
+
+  `style` を 1 箇所でまとめて作り、要素へ 1 回だけ渡す形にした。 条件つきで広げる側には
+  置かない = そこに残すと、後ろに `style` を 1 つ足しただけでまた黙って消える。
+
+  押せない箱の cursor は親から継承したままにする (編集画面では掴む形になる)。
+
+## [0.79.0] - 2026-09-27
+
+### Fixed
+
+- **円弧を含む線の外接矩形が図の左上まで伸びるのを直した** (#872 / #895)
+
+  道筋を読む所が **命令ごとの引数の数を見ていなかった**。 文字を全部消して数を 2 つずつ
+  組にしていたため、円弧 (`A`) の引数 7 個 = 奇数で組にする位置が 1 つずれ、その後ろの点が
+  全部ずれる。 道筋のどこにも無い `(11,11)` と `(0,0)` が点として入っていた。
+
+  | 何を | 値 |
+  |---|---|
+  | 道筋の実際の範囲 | x 105..507 / y 278..628 |
+  | 直す前の読み方が出す範囲 | x 0..691 / y 0..472 |
+
+  画面で 358px 離れている名札と線が「重なっている」 と知らされる。 逆向きにも効いており、
+  矩形が実際より大きいぶん近接の押し出しが誤った方向に働いていた。
+
+  **壊れていたのは 3 箇所**。 同じ読み方が散っており、道筋を組み直す所は円弧の `A` を命令と
+  して認識できず、前の命令の引数に混ざって `NaN` を書き出していた (円弧を持つ経路を
+  近接の解消で動かすと道筋そのものが壊れる)。
+
+  命令ごとの引数の数を 1 箇所に持ち、3 つの関数がそれを使う形にした。
+
+  外接矩形は円弧の膨らみを足す。 円弧は終点しか座標を持たないが実際の線は弦から膨らむので
+  (経路が経路を跨ぐ飛び越しは半径 11 の半円)、終点だけで矩形を作ると本当の重なりを
+  見落とす側に倒れる。
+
 ## [0.78.0] - 2026-09-26
 
 ### Fixed
@@ -3228,7 +3279,9 @@ Initial OSS release.
 使わない = annotated tag を push しても GitHub Release は作られず、 Release を作っていない版で
 行き止まりになる。
 
-[Unreleased]: https://github.com/cardene777/cdl/compare/v0.78.0...HEAD
+[Unreleased]: https://github.com/cardene777/cdl/compare/v0.80.0...HEAD
+[0.80.0]: https://github.com/cardene777/cdl/compare/v0.79.0...v0.80.0
+[0.79.0]: https://github.com/cardene777/cdl/compare/v0.78.0...v0.79.0
 [0.78.0]: https://github.com/cardene777/cdl/compare/v0.77.0...v0.78.0
 [0.77.0]: https://github.com/cardene777/cdl/compare/v0.76.0...v0.77.0
 [0.76.0]: https://github.com/cardene777/cdl/compare/v0.75.0...v0.76.0

package/dist/index.cjs

@@ -12798,72 +12798,169 @@ function collectBBoxes(lanes, nodes, edges) {
     });
   }
   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;
 }
+var PATH_ARITY = {
+  M: 2,
+  L: 2,
+  H: 1,
+  V: 1,
+  C: 6,
+  S: 4,
+  Q: 4,
+  T: 2,
+  A: 7,
+  Z: 0
+};
+function isRelative(cmd) {
+  return cmd >= "a" && cmd <= "z";
+}
+function coordSlots(cmd) {
+  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 [];
+  }
+}
+function parsePathCommands(d) {
+  const out = [];
+  const commandRegex = /([MmLlHhVvCcSsQqTtAaZz])([^MmLlHhVvCcSsQqTtAaZz]*)/g;
+  let m;
+  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 \u7E70\u308A\u8FD4\u3057 = i > 0;
+      const c = \u7E70\u308A\u8FD4\u3057 && cmd === "M" ? "L" : \u7E70\u308A\u8FD4\u3057 && cmd === "m" ? "l" : cmd;
+      out.push({ cmd: c, args });
+    }
+  }
+  return out;
+}
 function extractPathPoints(d) {
   const out = [];
-  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)) {
+    const \u76F8\u5BFE = started && isRelative(cmd);
+    const \u57FA\u70B9 = cur;
+    for (const [xi, yi] of coordSlots(cmd)) {
+      const x = xi >= 0 ? \u76F8\u5BFE ? \u57FA\u70B9.x + args[xi] : args[xi] : \u57FA\u70B9.x;
+      const y = yi >= 0 ? \u76F8\u5BFE ? \u57FA\u70B9.y + args[yi] : args[yi] : \u57FA\u70B9.y;
       out.push({ x, y });
+      cur = { x, y };
     }
+    started = true;
   }
   return out;
 }
+function pathBBox(d) {
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  let \u70B9\u3042\u308A = false;
+  const \u53D6\u308B = (x, y) => {
+    minX = Math.min(minX, x);
+    minY = Math.min(minY, y);
+    maxX = Math.max(maxX, x);
+    maxY = Math.max(maxY, y);
+    \u70B9\u3042\u308A = true;
+  };
+  let cur = { x: 0, y: 0 };
+  let started = false;
+  for (const { cmd, args } of parsePathCommands(d)) {
+    const \u76F8\u5BFE = started && isRelative(cmd);
+    const \u57FA\u70B9 = cur;
+    for (const [xi, yi] of coordSlots(cmd)) {
+      const x = xi >= 0 ? \u76F8\u5BFE ? \u57FA\u70B9.x + args[xi] : args[xi] : \u57FA\u70B9.x;
+      const y = yi >= 0 ? \u76F8\u5BFE ? \u57FA\u70B9.y + args[yi] : args[yi] : \u57FA\u70B9.y;
+      \u53D6\u308B(x, y);
+      cur = { x, y };
+    }
+    if (cmd.toUpperCase() === "A") {
+      const r = Math.max(Math.abs(args[0]), Math.abs(args[1]));
+      const \u5F26 = Math.hypot(cur.x - \u57FA\u70B9.x, cur.y - \u57FA\u70B9.y);
+      const \u534A\u5F26 = Math.min(\u5F26 / 2, r);
+      const \u4F59 = Math.sqrt(Math.max(0, r * r - \u534A\u5F26 * \u534A\u5F26));
+      const \u81A8\u3089\u307F = args[3] !== 0 ? r + \u4F59 : r - \u4F59;
+      \u53D6\u308B(Math.min(\u57FA\u70B9.x, cur.x) - \u81A8\u3089\u307F, Math.min(\u57FA\u70B9.y, cur.y) - \u81A8\u3089\u307F);
+      \u53D6\u308B(Math.max(\u57FA\u70B9.x, cur.x) + \u81A8\u3089\u307F, Math.max(\u57FA\u70B9.y, cur.y) + \u81A8\u3089\u307F);
+    }
+    started = true;
+  }
+  return \u70B9\u3042\u308A ? { minX, minY, maxX, maxY } : null;
+}
 function rebuildPathD(d, map) {
-  const commandRegex = /([MLCQZmlcqz])([^MLCQZmlcqz]*)/g;
   let out = "";
   let idx = 0;
-  let m;
-  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 = [];
-    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 \u76F8\u5BFE = started && isRelative(cmd);
+    const \u57FA\u70B9 = cur;
+    const \u6B21\u306E\u5F15\u6570 = args.slice();
+    for (const [xi, yi] of slots) {
+      const x = xi >= 0 ? \u76F8\u5BFE ? \u57FA\u70B9.x + args[xi] : args[xi] : \u57FA\u70B9.x;
+      const y = yi >= 0 ? \u76F8\u5BFE ? \u57FA\u70B9.y + args[yi] : args[yi] : \u57FA\u70B9.y;
+      const [nx, ny] = map(x, y, idx);
+      if (!\u76F8\u5BFE) {
+        if (xi >= 0) \u6B21\u306E\u5F15\u6570[xi] = nx;
+        if (yi >= 0) \u6B21\u306E\u5F15\u6570[yi] = ny;
+      }
       idx += 1;
+      cur = { x, y };
     }
-    out += cmd + " " + translated.join(" ") + " ";
+    out += cmd + " " + \u6B21\u306E\u5F15\u6570.join(" ") + " ";
+    started = true;
   }
   return out.trim();
 }
 function cornerBoundaryIndices(d) {
-  const commandRegex = /([MLCQZmlcqz])([^MLCQZmlcqz]*)/g;
   let idx = 0;
   let firstCornerEnd = -1;
   let lastCornerStart = -1;
-  let m;
-  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;
     }
@@ -32011,6 +32108,10 @@ function CdlNodeView({
   const offsetX = node.renderOffsetX !== void 0 ? resolveNumericAttr(node.renderOffsetX, stateValues, 0) : 0;
   const offsetY = node.renderOffsetY !== void 0 ? resolveNumericAttr(node.renderOffsetY, stateValues, 0) : 0;
   const hasOffset = offsetX !== 0 || offsetY !== 0;
+  const \u7BB1\u306Estyle = {
+    transition: "opacity 120ms ease-out, transform 200ms ease-out",
+    ...\u95A2\u4FC2\u306E\u53D7\u3051\u53E3 === void 0 ? {} : { cursor: "pointer" }
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "g",
     {
@@ -32032,7 +32133,6 @@ function CdlNodeView({
         role: "button",
         tabIndex: 0,
         "aria-pressed": \u95A2\u4FC2\u306E\u53D7\u3051\u53E3.\u7126\u70B9 === node.id,
-        style: { cursor: "pointer" },
         onPointerEnter: () => \u95A2\u4FC2\u306E\u53D7\u3051\u53E3.\u89E6\u308C\u305F(node.id),
         onPointerLeave: () => \u95A2\u4FC2\u306E\u53D7\u3051\u53E3.\u96E2\u308C\u305F(),
         onFocus: () => \u95A2\u4FC2\u306E\u53D7\u3051\u53E3.\u89E6\u308C\u305F(node.id),
@@ -32047,7 +32147,7 @@ function CdlNodeView({
       transform: hasOffset ? `translate(${offsetX}, ${offsetY})` : void 0,
       opacity: boundOpacity,
       "data-cdl-tone": node.tone,
-      style: { transition: "opacity 120ms ease-out, transform 200ms ease-out" },
+      style: \u7BB1\u306Estyle,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "rect",