From 6cdf3d013ea064a760ddbae78e46d5e2d1cfe3f2 Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Sat, 11 Apr 2026 11:28:22 +0800
Subject: [PATCH] fix: scale canvas image controls with zoom

---
 app/canvas/[id]/page.tsx              |  2 +-
 components/canvas/CanvasWorkspace.tsx | 43 ++++++++++++++-------------
 components/canvas/nodes/ImageNode.tsx | 20 +++++++++++--
 lib/canvas/node-content-scale.ts      |  9 ++++--
 4 files changed, 48 insertions(+), 26 deletions(-)

diff --git a/app/canvas/[id]/page.tsx b/app/canvas/[id]/page.tsx
index b1800064c..5ba73fe0f 100644
--- a/app/canvas/[id]/page.tsx
+++ b/app/canvas/[id]/page.tsx
@@ -7792,7 +7792,7 @@ export default function CanvasEditorPage({ params }: PageProps) {
   const brandEntry = (
     <div className="absolute top-4 left-4 z-20">
       <Button
-        className="h-10 gap-2 rounded-none border-0 bg-transparent px-0 shadow-none hover:bg-transparent"
+        className="h-10 gap-2 rounded-full border-0 bg-background px-3 shadow-none hover:bg-background hover:text-foreground"
         onClick={goHome}
         variant="ghost"
       >
diff --git a/components/canvas/CanvasWorkspace.tsx b/components/canvas/CanvasWorkspace.tsx
index a91198f82..e9d3f81b6 100644
--- a/components/canvas/CanvasWorkspace.tsx
+++ b/components/canvas/CanvasWorkspace.tsx
@@ -1048,42 +1048,45 @@ export function CanvasWorkspace({
           }
         : isSelected && tool === "select";
 
+    const imageHandleSize = IMAGE_HANDLE_SIZE * viewport.zoom;
+    const imageHandleOffset = imageHandleSize / 2;
+    const imageSelectionStrokeWidth = SELECTION_STROKE_WIDTH * viewport.zoom;
     const imageResizeHandleStyles = isImageNode
       ? {
           topRight: {
-            width: IMAGE_HANDLE_SIZE,
-            height: IMAGE_HANDLE_SIZE,
-            right: -IMAGE_HANDLE_OFFSET,
-            top: -IMAGE_HANDLE_OFFSET,
+            width: imageHandleSize,
+            height: imageHandleSize,
+            right: -imageHandleOffset,
+            top: -imageHandleOffset,
             borderRadius: 0,
-            border: `${SELECTION_STROKE_WIDTH}px solid ${SELECTION_COLOR}`,
+            border: `${imageSelectionStrokeWidth}px solid ${SELECTION_COLOR}`,
             backgroundColor: "#ffffff",
           },
           bottomRight: {
-            width: IMAGE_HANDLE_SIZE,
-            height: IMAGE_HANDLE_SIZE,
-            right: -IMAGE_HANDLE_OFFSET,
-            bottom: -IMAGE_HANDLE_OFFSET,
+            width: imageHandleSize,
+            height: imageHandleSize,
+            right: -imageHandleOffset,
+            bottom: -imageHandleOffset,
             borderRadius: 0,
-            border: `${SELECTION_STROKE_WIDTH}px solid ${SELECTION_COLOR}`,
+            border: `${imageSelectionStrokeWidth}px solid ${SELECTION_COLOR}`,
             backgroundColor: "#ffffff",
           },
           bottomLeft: {
-            width: IMAGE_HANDLE_SIZE,
-            height: IMAGE_HANDLE_SIZE,
-            left: -IMAGE_HANDLE_OFFSET,
-            bottom: -IMAGE_HANDLE_OFFSET,
+            width: imageHandleSize,
+            height: imageHandleSize,
+            left: -imageHandleOffset,
+            bottom: -imageHandleOffset,
             borderRadius: 0,
-            border: `${SELECTION_STROKE_WIDTH}px solid ${SELECTION_COLOR}`,
+            border: `${imageSelectionStrokeWidth}px solid ${SELECTION_COLOR}`,
             backgroundColor: "#ffffff",
           },
           topLeft: {
-            width: IMAGE_HANDLE_SIZE,
-            height: IMAGE_HANDLE_SIZE,
-            left: -IMAGE_HANDLE_OFFSET,
-            top: -IMAGE_HANDLE_OFFSET,
+            width: imageHandleSize,
+            height: imageHandleSize,
+            left: -imageHandleOffset,
+            top: -imageHandleOffset,
             borderRadius: 0,
-            border: `${SELECTION_STROKE_WIDTH}px solid ${SELECTION_COLOR}`,
+            border: `${imageSelectionStrokeWidth}px solid ${SELECTION_COLOR}`,
             backgroundColor: "#ffffff",
           },
         }
diff --git a/components/canvas/nodes/ImageNode.tsx b/components/canvas/nodes/ImageNode.tsx
index c2311843c..f79927028 100644
--- a/components/canvas/nodes/ImageNode.tsx
+++ b/components/canvas/nodes/ImageNode.tsx
@@ -362,9 +362,20 @@ export function ImageNode({ node, isSelected }: ImageNodeProps) {
       }),
     [node.size.height, node.size.width]
   );
+  const viewportZoom = useCanvasStore((state) => state.viewport.zoom);
+  const nodeContentScale = contentScale * viewportZoom;
   const scaledContentStyle = useMemo(
-    () => getScaledNodeContentStyle(contentScale),
-    [contentScale]
+    () => getScaledNodeContentStyle(nodeContentScale, { allowUpscale: true }),
+    [nodeContentScale]
+  );
+  const selectedTitleStyle = useMemo<React.CSSProperties>(
+    () => ({
+      top: `${-28 * nodeContentScale}px`,
+      transform: `scale(${nodeContentScale})`,
+      transformOrigin: "bottom left",
+      width: `${100 / nodeContentScale}%`,
+    }),
+    [nodeContentScale]
   );
   const detailProgressLabel =
     typeof data.metadata?.detailProgressLabel === "string"
@@ -2825,7 +2836,10 @@ export function ImageNode({ node, isSelected }: ImageNodeProps) {
     <>
       {/* 选中时在图片上方显示标题 */}
       {isSelected && !isMultiSelected && data.src && !sceneFusionDialogOpen && (
-        <div className="-top-7 absolute right-0 left-0 z-10 flex items-center justify-between px-1 text-[#2f7df6] text-xs">
+        <div
+          className="-top-7 absolute right-0 left-0 z-10 flex items-center justify-between px-1 text-[#2f7df6] text-xs"
+          style={selectedTitleStyle}
+        >
           <div className="flex min-w-0 items-center gap-1">
             <ImagePlus className="h-3 w-3" />
             {isEditingTitle ? (
diff --git a/lib/canvas/node-content-scale.ts b/lib/canvas/node-content-scale.ts
index f05f17e3d..7d05706b9 100644
--- a/lib/canvas/node-content-scale.ts
+++ b/lib/canvas/node-content-scale.ts
@@ -18,9 +18,14 @@ export function getNodeContentScale(
 }
 
 export function getScaledNodeContentStyle(
-  scale: number
+  scale: number,
+  options: { allowUpscale?: boolean } = {}
 ): CSSProperties | undefined {
-  if (scale >= 0.999) {
+  const shouldKeepDefault = options.allowUpscale
+    ? Math.abs(scale - 1) < 0.001
+    : scale >= 0.999;
+
+  if (shouldKeepDefault) {
     return undefined;
   }