@cardenelabs/cdl 0.79.0 → 0.80.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.79.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/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` の縮小や