Bind rendered editing callbacks to captured element lifetimes

src/components/canvas/material-node.tsx

@@ -2,15 +2,16 @@
 import { CanvasImage } from "./canvas-image";
 import { managedImageSource } from "@/lib/canvas-v2";
 
-import { useContext, useRef } from "react";
+import { useRef } from "react";
 import { Handle, Position, useViewport, type NodeProps } from "@xyflow/react";
 import { FileText, Image as ImageIcon, Type } from "lucide-react";
 import { elementCapabilities } from "@/lib/canvas-elements";
 import { nodeDirections, type CanvasNode } from "@/lib/canvas";
 import { NodeTitle } from "./node-title";
 import { CanvasTextEditor } from "./canvas-text-editor";
+import {useScopedNodeEditing} from "./node-editing";
 import styles from "./canvas.module.css";
-import { TransformableNode, NodeEditing } from "./transformable-node";
+import { TransformableNode } from "./transformable-node";
 export { NodeEditing } from "./transformable-node";
 
 const positions = { top: Position.Top, right: Position.Right, bottom: Position.Bottom, left: Position.Left };
@@ -18,14 +19,14 @@ const labels = { top: "上方", right: "右侧", bottom: "下方", left: "左侧
 
 export function MaterialNode(props: NodeProps<CanvasNode>) {
   const { id, data, selected } = props;
-  const editing = useContext(NodeEditing);
+  const editing = useScopedNodeEditing(id,data.__headlessTarget);
   const { zoom } = useViewport();
   const preview = (props.width || 260) * zoom * (typeof window === "undefined" ? 1 : window.devicePixelRatio || 1) <= 1024;
   const pointerStart = useRef({ x: 0, y: 0 });
   const Icon = data.kind === "image" ? ImageIcon : data.kind === "script" ? FileText : Type;
   return (
     <TransformableNode {...props} className={`${styles.node} ${selected ? styles.selectedNode : ""}`}>
-      <header className={styles.nodeHeading}><Icon size={13} /><NodeTitle id={id} title={data.title} selected={selected} /></header>
+      <header className={styles.nodeHeading}><Icon size={13} /><NodeTitle id={id} renderedTarget={data.__headlessTarget} title={data.title} selected={selected} /></header>
       <Handle type="target" position={Position.Left} className={styles.legacyHandle} isConnectable={false} />
       {data.kind === "image" ? <CanvasImage id={id} className={styles.image} src={managedImageSource(data.src, preview)} title={data.title} /> : (
         <CanvasTextEditor id={id} data={data} selected={selected} />