feat(canvas): enhance image editing interactions and fix flickering in high-resolution previews

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
++ [优化] 图片遮罩、切图与裁剪编辑支持常用快捷操作并修复高分辨率图片预览闪烁。
+
 ## v0.10.0 - 2026-07-25
 
 + [新增] 提示词来源新增BananaPromptQuicker，并支持添加自定义标准 JSON 来源。

docs/content/docs/progress/pending-test.mdx

@@ -5,6 +5,7 @@ description: 当前版本已实现但仍需人工验证的变更项
 
 # 待测试
 
+- 图片编辑弹窗：遮罩、切图和裁剪连续滚轮缩放时，图片与遮罩应保持同步且不再闪烁、短暂消失或跳动；遮罩画笔圆心应始终固定在鼠标位置，仅直径随缩放变化，缩放后仍可准确涂抹、拖动切分线和调整裁剪框。
 - 提示词中心布局：页面标题及提示词总数应居中；连续输入搜索文字时应在停止输入约 300ms 后再查询；桌面端分类与标签应在左侧独立滚动，右侧搜索框下直接展示提示词卡片；标签数量较多时不能继续向下挤压提示词，窄屏下应恢复上下排列且内容不溢出；不再显示「我的提示词」Tab，收藏提示词应直接加入我的资产。
 - 提示词来源：6 个内置来源应从 Image Prompts 统一仓库读取，更新后数量依次为 323、494、53、76、126、129；提示词仍按 6 个来源分组并可独立启用，来源内可继续按 `tags` 筛选。添加标准 JSON URL 后应能查看内容，填写非数组 JSON 或不可访问地址时应显示失败，并继续保留该来源上一次成功缓存的内容。
 - 提示词来源界面：来源应以卡片列表展示，启用开关位于左侧，数量、同步状态和上次成功时间作为次级信息显示，查看、拉取及自定义来源编辑/删除操作使用带文字按钮；底部定时拉取区域应保持独立边框布局。

web/src/components/canvas/canvas-node-crop-dialog.tsx

@@ -86,7 +86,9 @@ export function CanvasNodeCropDialog({ dataUrl, open, onClose, onConfirm }: { da
                 >
                     <div className="relative" style={viewport.contentStyle}>
                         <div ref={boxRef} className="absolute isolate overflow-hidden rounded-lg bg-black select-none [backface-visibility:hidden] [contain:layout_paint] [transform:translateZ(0)]" style={viewport.stageStyle}>
-                            <img src={dataUrl} alt="" className="absolute inset-0 block h-full w-full object-contain opacity-90" draggable={false} />
+                            <div className="absolute left-0 top-0 [backface-visibility:hidden]" style={viewport.mediaStyle}>
+                                <img src={dataUrl} alt="" className="block h-full w-full object-contain opacity-90" draggable={false} />
+                            </div>
                             <CropMask crop={crop} />
                             <div className="absolute cursor-move border-2 border-white shadow-[0_0_0_1px_rgba(0,0,0,.3),0_0_28px_rgba(0,0,0,.28)]" style={cropStyle(crop)} onPointerDown={(event) => startDrag("move", event)}>
                                 <div className="pointer-events-none absolute inset-x-0 top-1/3 border-t border-white/50" />

web/src/components/canvas/canvas-node-mask-edit-dialog.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useRef, useState, type PointerEvent as ReactPointerEvent } from "react";
+import { createPortal } from "react-dom";
 import { Button, Input, Modal, Slider, Tooltip } from "antd";
 import { Brush, Eraser, Redo2, RotateCcw, Undo2, WandSparkles, X, ZoomIn, ZoomOut } from "lucide-react";
 
@@ -75,11 +76,10 @@ export function CanvasNodeMaskEditDialog({ dataUrl, open, onClose, onConfirm }:
     };
 
     const updateBrushPreview = (event: ReactPointerEvent<HTMLCanvasElement>, size = brushSize, adjusting = false) => {
-        const rect = event.currentTarget.getBoundingClientRect();
         setBrushPreview({
-            x: event.clientX - rect.left,
+            x: event.clientX,
-            y: event.clientY - rect.top,
+            y: event.clientY,
-            size: Math.max(4, (size / event.currentTarget.width) * rect.width),
+            size,
             adjusting,
         });
     };
@@ -89,14 +89,13 @@ export function CanvasNodeMaskEditDialog({ dataUrl, open, onClose, onConfirm }:
             event.preventDefault();
             event.stopPropagation();
             event.currentTarget.setPointerCapture(event.pointerId);
-            const rect = event.currentTarget.getBoundingClientRect();
             brushAdjustRef.current = {
                 active: true,
                 pointerId: event.pointerId,
                 startX: event.clientX,
                 startSize: brushSize,
-                previewX: event.clientX - rect.left,
+                previewX: event.clientX,
-                previewY: event.clientY - rect.top,
+                previewY: event.clientY,
             };
             updateBrushPreview(event, brushSize, true);
             return;
@@ -120,7 +119,7 @@ export function CanvasNodeMaskEditDialog({ dataUrl, open, onClose, onConfirm }:
             setBrushPreview({
                 x: brushAdjust.previewX,
                 y: brushAdjust.previewY,
-                size: Math.max(4, (nextSize / event.currentTarget.width) * event.currentTarget.getBoundingClientRect().width),
+                size: nextSize,
                 adjusting: true,
             });
             return;
@@ -218,38 +217,43 @@ export function CanvasNodeMaskEditDialog({ dataUrl, open, onClose, onConfirm }:
                 >
                     <div className="relative" style={viewport.contentStyle}>
                         <div ref={viewport.stageRef} className="absolute isolate overflow-hidden rounded-lg bg-transparent select-none [backface-visibility:hidden] [contain:layout_paint] [transform:translateZ(0)]" style={viewport.stageStyle}>
-                            <img src={dataUrl} alt="" className="absolute inset-0 block h-full w-full bg-transparent object-contain [backface-visibility:hidden]" draggable={false} />
                             {image ? (
                                 <>
                                     <canvas ref={maskCanvasRef} width={image.width} height={image.height} className="hidden" />
-                                    <canvas
+                                    <div className="absolute left-0 top-0 [backface-visibility:hidden]" style={viewport.mediaStyle}>
-                                        ref={previewCanvasRef}
+                                        <img src={dataUrl} alt="" className="absolute inset-0 block h-full w-full bg-transparent object-contain" draggable={false} />
-                                        width={image.width}
+                                        <canvas
-                                        height={image.height}
+                                            ref={previewCanvasRef}
-                                        className="absolute inset-0 h-full w-full cursor-none touch-none [backface-visibility:hidden]"
+                                            width={image.width}
-                                        onPointerDown={startDraw}
+                                            height={image.height}
-                                        onPointerMove={moveDraw}
+                                            className="absolute inset-0 h-full w-full cursor-none touch-none"
-                                        onPointerUp={stopDraw}
+                                            onPointerDown={startDraw}
-                                        onPointerCancel={stopDraw}
+                                            onPointerMove={moveDraw}
-                                        onPointerEnter={(event) => updateBrushPreview(event)}
+                                            onPointerUp={stopDraw}
-                                        onPointerLeave={() => {
+                                            onPointerCancel={stopDraw}
-                                            if (!drawingRef.current.active && !brushAdjustRef.current?.active) setBrushPreview(null);
+                                            onPointerEnter={(event) => updateBrushPreview(event)}
-                                        }}
+                                            onPointerLeave={() => {
-                                        onContextMenu={(event) => event.preventDefault()}
+                                                if (!drawingRef.current.active && !brushAdjustRef.current?.active) setBrushPreview(null);
-                                    />
+                                            }}
-                                    {brushPreview ? (
+                                            onContextMenu={(event) => event.preventDefault()}
-                                        <div
+                                        />
-                                            className={`pointer-events-none absolute z-10 rounded-full border-2 ${brushPreview.adjusting ? "border-[#fbbf24] bg-black/10" : "border-white/90 bg-black/5"} shadow-[0_0_0_1px_rgba(0,0,0,.8)]`}
+                                    </div>
-                                            style={{ left: brushPreview.x, top: brushPreview.y, width: brushPreview.size, height: brushPreview.size, transform: "translate(-50%, -50%)" }}
-                                        >
-                                            {brushPreview.adjusting ? <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded bg-black/75 px-1.5 py-0.5 text-xs font-semibold text-white">{brushSize}px</span> : null}
-                                        </div>
-                                    ) : null}
                                 </>
                             ) : null}
                         </div>
                     </div>
                 </div>
+                {brushPreview
+                    ? createPortal(
+                          <div
+                              className={`pointer-events-none fixed z-[1100] rounded-full border-2 ${brushPreview.adjusting ? "border-[#fbbf24] bg-black/10" : "border-white/90 bg-black/5"} shadow-[0_0_0_1px_rgba(0,0,0,.8)]`}
+                              style={{ left: brushPreview.x, top: brushPreview.y, width: Math.max(4, brushPreview.size * viewport.imageScale), aspectRatio: 1, transform: "translate(-50%, -50%)" }}
+                          >
+                              {brushPreview.adjusting ? <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded bg-black/75 px-1.5 py-0.5 text-xs font-semibold text-white">{brushSize}px</span> : null}
+                          </div>,
+                          document.body,
+                      )
+                    : null}
 
                 <div className="flex min-h-[360px] flex-col gap-5">
                     <div>

web/src/components/canvas/canvas-node-split-dialog.tsx

@@ -162,7 +162,9 @@ export function CanvasNodeSplitDialog({ dataUrl, open, onClose, onConfirm }: { d
                         >
                             <div className="relative" style={viewport.contentStyle}>
                                 <div ref={previewRef} className="absolute isolate overflow-hidden rounded-lg bg-black [backface-visibility:hidden] [contain:layout_paint] [transform:translateZ(0)]" style={viewport.stageStyle}>
-                                    <img src={dataUrl} alt="" className="absolute inset-0 block h-full w-full object-contain [backface-visibility:hidden]" draggable={false} />
+                                    <div className="absolute left-0 top-0 [backface-visibility:hidden]" style={viewport.mediaStyle}>
+                                        <img src={dataUrl} alt="" className="block h-full w-full object-contain" draggable={false} />
+                                    </div>
                                     <SplitGrid horizontalLines={horizontalLines} verticalLines={verticalLines} active={active} onPointerDown={startDrag} />
                                 </div>
                             </div>

web/src/components/canvas/use-image-editor-viewport.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState, type CSSProperties, type MouseEvent as ReactMouseEvent, type PointerEvent as ReactPointerEvent } from "react";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState, type CSSProperties, type MouseEvent as ReactMouseEvent, type PointerEvent as ReactPointerEvent } from "react";
 
 type ImageSize = { width: number; height: number };
 
@@ -11,6 +11,7 @@ export function useImageEditorViewport(image: ImageSize | null, open: boolean) {
     const viewportNodeRef = useRef<HTMLDivElement>(null);
     const stageRef = useRef<HTMLDivElement>(null);
     const panRef = useRef<{ pointerId: number; x: number; y: number; scrollLeft: number; scrollTop: number } | null>(null);
+    const zoomAnchorRef = useRef<{ zoom: number; ratioX: number; ratioY: number; viewportX: number; viewportY: number } | null>(null);
     const [viewportElement, setViewportElement] = useState<HTMLDivElement | null>(null);
     const [viewportSize, setViewportSize] = useState<ImageSize>({ width: 0, height: 0 });
     const [zoom, setZoom] = useState(minZoom);
@@ -23,7 +24,9 @@ export function useImageEditorViewport(image: ImageSize | null, open: boolean) {
     }, []);
 
     useEffect(() => {
-        if (open) setZoom(minZoom);
+        if (!open) return;
+        zoomAnchorRef.current = null;
+        setZoom(minZoom);
     }, [open, image?.width, image?.height]);
 
     useEffect(() => {
@@ -85,6 +88,19 @@ export function useImageEditorViewport(image: ImageSize | null, open: boolean) {
         top: Math.max(0, Math.round((contentSize.height - stageSize.height) / 2)),
     };
 
+    useLayoutEffect(() => {
+        const viewport = viewportNodeRef.current;
+        const anchor = zoomAnchorRef.current;
+        if (!viewport || !anchor || Math.abs(anchor.zoom - zoom) > 0.001) return;
+        const nextWidth = baseSize.width * zoom;
+        const nextHeight = baseSize.height * zoom;
+        const nextLeft = Math.max(0, (Math.max(viewport.clientWidth, nextWidth) - nextWidth) / 2);
+        const nextTop = Math.max(0, (Math.max(viewport.clientHeight, nextHeight) - nextHeight) / 2);
+        viewport.scrollLeft = nextLeft + anchor.ratioX * nextWidth - anchor.viewportX;
+        viewport.scrollTop = nextTop + anchor.ratioY * nextHeight - anchor.viewportY;
+        zoomAnchorRef.current = null;
+    }, [baseSize.height, baseSize.width, zoom]);
+
     const setZoomAround = useCallback(
         (nextZoom: number, clientX?: number, clientY?: number) => {
             const viewport = viewportNodeRef.current;
@@ -103,17 +119,8 @@ export function useImageEditorViewport(image: ImageSize | null, open: boolean) {
             const viewportX = pointerX - viewportRect.left;
             const viewportY = pointerY - viewportRect.top;
 
+            zoomAnchorRef.current = { zoom: boundedZoom, ratioX, ratioY, viewportX, viewportY };
             setZoom(boundedZoom);
-            requestAnimationFrame(() => {
-                const nextWidth = baseSize.width * boundedZoom;
-                const nextHeight = baseSize.height * boundedZoom;
-                const nextContentWidth = Math.max(viewport.clientWidth, nextWidth);
-                const nextContentHeight = Math.max(viewport.clientHeight, nextHeight);
-                const nextLeft = Math.max(0, (nextContentWidth - nextWidth) / 2);
-                const nextTop = Math.max(0, (nextContentHeight - nextHeight) / 2);
-                viewport.scrollLeft = nextLeft + ratioX * nextWidth - viewportX;
-                viewport.scrollTop = nextTop + ratioY * nextHeight - viewportY;
-            });
         },
         [baseSize.height, baseSize.width, zoom],
     );
@@ -177,6 +184,7 @@ export function useImageEditorViewport(image: ImageSize | null, open: boolean) {
         },
         canZoomIn: zoom < maxZoom,
         canZoomOut: zoom > minZoom,
+        imageScale: image ? stageSize.width / image.width : 0,
         zoomIn: () => setZoomAround(zoom * zoomStep),
         zoomOut: () => setZoomAround(zoom / zoomStep),
         resetZoom: () => setZoomAround(minZoom),
@@ -187,6 +195,12 @@ export function useImageEditorViewport(image: ImageSize | null, open: boolean) {
             width: stageSize.width,
             height: stageSize.height,
         } satisfies CSSProperties,
+        mediaStyle: {
+            width: baseSize.width,
+            height: baseSize.height,
+            transform: `translateZ(0) scale(${zoom})`,
+            transformOrigin: "top left",
+        } satisfies CSSProperties,
     };
 }