diff --git a/CHANGELOG.md b/CHANGELOG.md index f1f110c..57f2231 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased ++ [优化] 图片遮罩、切图与裁剪编辑支持常用快捷操作并修复高分辨率图片预览闪烁。 + ## v0.10.0 - 2026-07-25 + [新增] 提示词来源新增BananaPromptQuicker，并支持添加自定义标准 JSON 来源。 diff --git a/docs/content/docs/progress/pending-test.mdx b/docs/content/docs/progress/pending-test.mdx index 68ad22a..2dd9968 100644 --- a/docs/content/docs/progress/pending-test.mdx +++ b/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 或不可访问地址时应显示失败，并继续保留该来源上一次成功缓存的内容。 - 提示词来源界面：来源应以卡片列表展示，启用开关位于左侧，数量、同步状态和上次成功时间作为次级信息显示，查看、拉取及自定义来源编辑/删除操作使用带文字按钮；底部定时拉取区域应保持独立边框布局。 diff --git a/web/src/components/canvas/canvas-node-crop-dialog.tsx b/web/src/components/canvas/canvas-node-crop-dialog.tsx index 5249ca9..b91d5a8 100644 --- a/web/src/components/canvas/canvas-node-crop-dialog.tsx +++ b/web/src/components/canvas/canvas-node-crop-dialog.tsx @@ -86,7 +86,9 @@ export function CanvasNodeCropDialog({ dataUrl, open, onClose, onConfirm }: { da >
- +
+ +
startDrag("move", event)}>
diff --git a/web/src/components/canvas/canvas-node-mask-edit-dialog.tsx b/web/src/components/canvas/canvas-node-mask-edit-dialog.tsx index eefbbd2..fd9aec7 100644 --- a/web/src/components/canvas/canvas-node-mask-edit-dialog.tsx +++ b/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, size = brushSize, adjusting = false) => { - const rect = event.currentTarget.getBoundingClientRect(); setBrushPreview({ - x: event.clientX - rect.left, - y: event.clientY - rect.top, - size: Math.max(4, (size / event.currentTarget.width) * rect.width), + x: event.clientX, + y: event.clientY, + 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, - previewY: event.clientY - rect.top, + previewX: event.clientX, + 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 }: >
- {image ? ( <> - updateBrushPreview(event)} - onPointerLeave={() => { - if (!drawingRef.current.active && !brushAdjustRef.current?.active) setBrushPreview(null); - }} - onContextMenu={(event) => event.preventDefault()} - /> - {brushPreview ? ( -
- {brushPreview.adjusting ? {brushSize}px : null} -
- ) : null} +
+ + updateBrushPreview(event)} + onPointerLeave={() => { + if (!drawingRef.current.active && !brushAdjustRef.current?.active) setBrushPreview(null); + }} + onContextMenu={(event) => event.preventDefault()} + /> +
) : null}
+ {brushPreview + ? createPortal( +
+ {brushPreview.adjusting ? {brushSize}px : null} +
, + document.body, + ) + : null}
diff --git a/web/src/components/canvas/canvas-node-split-dialog.tsx b/web/src/components/canvas/canvas-node-split-dialog.tsx index afc6fc0..f85acdb 100644 --- a/web/src/components/canvas/canvas-node-split-dialog.tsx +++ b/web/src/components/canvas/canvas-node-split-dialog.tsx @@ -162,7 +162,9 @@ export function CanvasNodeSplitDialog({ dataUrl, open, onClose, onConfirm }: { d >
- +
+ +
diff --git a/web/src/components/canvas/use-image-editor-viewport.ts b/web/src/components/canvas/use-image-editor-viewport.ts index 8037368..51583ab 100644 --- a/web/src/components/canvas/use-image-editor-viewport.ts +++ b/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(null); const stageRef = useRef(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(null); const [viewportSize, setViewportSize] = useState({ 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, }; }