From 9ddae7423e09722cc426d8932cbdc3dcf4533b21 Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Sat, 23 May 2026 14:35:41 +0800
Subject: [PATCH] fix: render local edit prompts outside scaled image layer

---
 components/canvas/nodes/ImageNode.tsx | 49 +++++++++++++++++++++------
 1 file changed, 38 insertions(+), 11 deletions(-)

diff --git a/components/canvas/nodes/ImageNode.tsx b/components/canvas/nodes/ImageNode.tsx
index ac453e2bc..82abc3303 100644
--- a/components/canvas/nodes/ImageNode.tsx
+++ b/components/canvas/nodes/ImageNode.tsx
@@ -2057,6 +2057,8 @@ export function ImageNode({
   // 文件输入的 ref
   const fileInputRef = useRef<HTMLInputElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
+  const [localEditPromptLayerElement, setLocalEditPromptLayerElement] =
+    useState<HTMLDivElement | null>(null);
   const displayImageRef = useRef<HTMLImageElement>(null);
   const compareFrameRef = useRef<HTMLDivElement>(null);
   const cropOverlayRef = useRef<HTMLDivElement>(null);
@@ -2477,6 +2479,20 @@ export function ImageNode({
     localEditMode,
     localEditRegionOverlays,
   ]);
+  const localEditPromptViewportOverlays = useMemo(
+    () =>
+      localEditPromptInlineOverlays.map(({ region, isEditing, style }) => ({
+        region,
+        isEditing,
+        style: {
+          ...style,
+          left: Number(style.left || 0) * nodeContentScale,
+          top: Number(style.top || 0) * nodeContentScale,
+          width: Number(style.width || 0) * nodeContentScale,
+        } satisfies React.CSSProperties,
+      })),
+    [localEditPromptInlineOverlays, nodeContentScale]
+  );
   const currentPickerClickStyle = useMemo(() => {
     if (!boxCutoutMetrics || !currentClick) return null;
 
@@ -8131,7 +8147,10 @@ export function ImageNode({
                     </div>
                   );
                 })}
-                {localEditPromptInlineOverlays.map(({ region, isEditing, style }) => (
+                {localEditPromptLayerElement
+                  ? createPortal(
+                      localEditPromptViewportOverlays.map(
+                        ({ region, isEditing, style }) => (
                   <div
                     className="nodrag nopan nowheel pointer-events-auto absolute z-[170] flex flex-col items-stretch gap-1.5"
                     data-canvas-no-drag="true"
@@ -8416,7 +8435,11 @@ export function ImageNode({
                       </div>
                     ) : null}
                   </div>
-                ))}
+                        )
+                      ),
+                      localEditPromptLayerElement
+                    )
+                  : null}
                 {localEditDraftRectStyle ? (
                   <div
                     className="pointer-events-none absolute z-[162] rounded-[10px] border-[3px] border-emerald-400 bg-emerald-300/10 shadow-[0_0_0_1px_rgba(255,255,255,0.9),0_0_22px_rgba(16,185,129,0.35)]"
@@ -8791,10 +8814,10 @@ export function ImageNode({
 	            />
 	            {imageNoteItem.label}
 	          </div>
-        )}
-        {shortAgentExecutionSnapshotId ? (
-          <button
-            className={cn(
+	        )}
+	        {shortAgentExecutionSnapshotId ? (
+	          <button
+	            className={cn(
               "absolute left-2 inline-flex items-center gap-1 rounded-full border border-[#dbe2ee] bg-white px-2.5 py-1 text-[11px] text-[#556072] shadow-[0_0_0_1px_rgba(219,226,238,0.3)] transition-colors hover:bg-[#f7f9ff] hover:text-[#16181d]",
               data.note && !isSelected ? "top-10" : "top-2"
             )}
@@ -8803,11 +8826,15 @@ export function ImageNode({
             type="button"
           >
             快照 {shortAgentExecutionSnapshotId}
-          </button>
-        ) : null}
-        </div>
-      </div>
-      <AgentExecutionSnapshotDialog
+	          </button>
+	        ) : null}
+	        </div>
+        <div
+          className="pointer-events-none absolute inset-0 z-[260] overflow-visible"
+          ref={setLocalEditPromptLayerElement}
+        />
+	      </div>
+	      <AgentExecutionSnapshotDialog
         onOpenChange={setSnapshotDialogOpen}
         open={snapshotDialogOpen}
         snapshotId={agentExecutionSnapshotId || null}