From 672139e35aae0f7a57262188421bf9c770e6a876 Mon Sep 17 00:00:00 2001
From: 134 <a134@134deMacBook-Pro.local>
Date: Wed, 1 Jul 2026 01:04:34 +0800
Subject: [PATCH] fix: align ai wash compare frame

---
 components/canvas/nodes/ImageNode.tsx | 61 +++++++++++++++++----------
 1 file changed, 39 insertions(+), 22 deletions(-)

diff --git a/components/canvas/nodes/ImageNode.tsx b/components/canvas/nodes/ImageNode.tsx
index b79853317..109e435b1 100644
--- a/components/canvas/nodes/ImageNode.tsx
+++ b/components/canvas/nodes/ImageNode.tsx
@@ -2420,27 +2420,6 @@ export function ImageNode({
 
   const compareSource = compareSourceInfo.url;
   const hasCompareSource = Boolean(data.src) && Boolean(compareSource);
-  const compareImageFrameStyle = useMemo<React.CSSProperties>(() => {
-    const boxWidth = Math.max(1, Number(node.size.width || 0));
-    const boxHeight = Math.max(1, Number(node.size.height || 0));
-    const naturalWidth = Math.max(1, Number(compareSourceInfo.width || boxWidth));
-    const naturalHeight = Math.max(1, Number(compareSourceInfo.height || boxHeight));
-    const scale = Math.min(boxWidth / naturalWidth, boxHeight / naturalHeight);
-    const renderedWidth = Math.max(1, naturalWidth * scale);
-    const renderedHeight = Math.max(1, naturalHeight * scale);
-
-    return {
-      height: renderedHeight,
-      left: (boxWidth - renderedWidth) / 2,
-      top: (boxHeight - renderedHeight) / 2,
-      width: renderedWidth,
-    };
-  }, [
-    compareSourceInfo.height,
-    compareSourceInfo.width,
-    node.size.height,
-    node.size.width,
-  ]);
   const compareButtonVisualSize = useMemo(() => {
     const minSide = Math.max(
       1,
@@ -2548,6 +2527,23 @@ export function ImageNode({
     }
     return null;
   }, [data.metadata]);
+  const compareImageFrameStyle = useMemo<React.CSSProperties>(() => {
+    const boxWidth = Math.max(1, Number(node.size.width || 0));
+    const boxHeight = Math.max(1, Number(node.size.height || 0));
+    const activeResolution = metadataResolution || loadedResolution;
+    const naturalWidth = Math.max(1, Number(activeResolution?.width || boxWidth));
+    const naturalHeight = Math.max(1, Number(activeResolution?.height || boxHeight));
+    const scale = Math.min(boxWidth / naturalWidth, boxHeight / naturalHeight);
+    const renderedWidth = Math.max(1, naturalWidth * scale);
+    const renderedHeight = Math.max(1, naturalHeight * scale);
+
+    return {
+      height: renderedHeight,
+      left: (boxWidth - renderedWidth) / 2,
+      top: (boxHeight - renderedHeight) / 2,
+      width: renderedWidth,
+    };
+  }, [loadedResolution, metadataResolution, node.size.height, node.size.width]);
   const resolutionLabel = useMemo(() => {
     const source = metadataResolution || loadedResolution;
     if (!source) return "";
@@ -3116,6 +3112,25 @@ export function ImageNode({
     });
   }, [loadedResolution, metadataResolution]);
 
+  const handleDisplayImageLoad = useCallback(
+    (event: React.SyntheticEvent<HTMLImageElement>) => {
+      const width = Math.round(event.currentTarget.naturalWidth || 0);
+      const height = Math.round(event.currentTarget.naturalHeight || 0);
+
+      if (width > 0 && height > 0) {
+        setLoadedResolution((current) => {
+          if (current?.width === width && current?.height === height) {
+            return current;
+          }
+          return { width, height };
+        });
+      }
+
+      refreshBoxCutoutMetrics();
+    },
+    [refreshBoxCutoutMetrics]
+  );
+
   const getBoxCutoutPointerPoint = useCallback(
     (clientX: number, clientY: number) => {
       const imageElement = displayImageRef.current;
@@ -8473,6 +8488,8 @@ export function ImageNode({
                           event.currentTarget.src = data.src;
                         }
                       }}
+                      onLoad={handleDisplayImageLoad}
+                      ref={displayImageRef}
                       src={displayImageSrc}
                       style={activeImageAdjustmentsStyle}
                     />
@@ -8568,7 +8585,7 @@ export function ImageNode({
                       event.currentTarget.src = data.src;
                     }
                   }}
-                  onLoad={refreshBoxCutoutMetrics}
+                  onLoad={handleDisplayImageLoad}
                   ref={displayImageRef}
                   src={displayImageSrc}
                   style={activeImageAdjustmentsStyle}