diff --git a/components/canvas/EnhanceProWorkspace.tsx b/components/canvas/EnhanceProWorkspace.tsx index c3b1afb09..9bbd6225f 100644 --- a/components/canvas/EnhanceProWorkspace.tsx +++ b/components/canvas/EnhanceProWorkspace.tsx @@ -160,13 +160,6 @@ function clampNumber(value: number, min: number, max: number) { return Math.min(max, Math.max(min, value)); } -function isEnhanceCompareControlTarget(target: EventTarget | null) { - return ( - target instanceof HTMLElement && - Boolean(target.closest("[data-enhance-pro-compare-control='true']")) - ); -} - function fitDimensions(width: number, height: number, maxOutputEdge: number) { const safeWidth = Math.max(1, Math.round(width || 1024)); const safeHeight = Math.max(1, Math.round(height || 1024)); @@ -403,16 +396,8 @@ export function EnhanceProWorkspace({ const [settingsOpen, setSettingsOpen] = useState(true); const [adjustmentsOpen, setAdjustmentsOpen] = useState(true); const [faceOpen, setFaceOpen] = useState(true); - const [previewOffset, setPreviewOffset] = useState({ x: 0, y: 0 }); const [comparePosition, setComparePosition] = useState(50); - const [isPreviewDragging, setIsPreviewDragging] = useState(false); - const previewDragStateRef = useRef<{ - pointerId: number; - startX: number; - startY: number; - originX: number; - originY: number; - } | null>(null); + const compareDragPointerIdRef = useRef(null); const { data: configPayload, isLoading } = useSWR<{ success?: boolean; @@ -523,12 +508,6 @@ export function EnhanceProWorkspace({ setLastErrorMessage(""); }, [sourceImageUrl]); - useEffect(() => { - setPreviewOffset({ x: 0, y: 0 }); - setIsPreviewDragging(false); - previewDragStateRef.current = null; - }, [activePreviewUrl]); - useEffect(() => { setComparePosition(50); }, [selectedResultIndex]); @@ -682,67 +661,43 @@ export function EnhanceProWorkspace({ return items; }, [generatedImages, sourceImageUrl]); - const handlePreviewPointerDown = ( + const updateComparePositionFromPointer = ( event: ReactPointerEvent ) => { - if (!activePreviewUrl || event.button !== 0) { - return; - } - if (isEnhanceCompareControlTarget(event.target)) { - return; - } + const rect = event.currentTarget.getBoundingClientRect(); + if (rect.width <= 0) return; + const nextPosition = ((event.clientX - rect.left) / rect.width) * 100; + setComparePosition(clampNumber(nextPosition, 0, 100)); + }; - previewDragStateRef.current = { - pointerId: event.pointerId, - startX: event.clientX, - startY: event.clientY, - originX: previewOffset.x, - originY: previewOffset.y, - }; - setIsPreviewDragging(true); + const handleComparePointerDown = ( + event: ReactPointerEvent + ) => { + if (event.button !== 0) return; + event.preventDefault(); + event.stopPropagation(); + compareDragPointerIdRef.current = event.pointerId; event.currentTarget.setPointerCapture(event.pointerId); + updateComparePositionFromPointer(event); }; - const handlePreviewPointerMove = ( + const handleComparePointerMove = ( event: ReactPointerEvent ) => { - const dragState = previewDragStateRef.current; - if (!dragState || dragState.pointerId !== event.pointerId) { - return; - } - - const maxOffsetX = Math.max(48, event.currentTarget.clientWidth * 0.18); - const maxOffsetY = Math.max(48, event.currentTarget.clientHeight * 0.18); - - setPreviewOffset({ - x: clampNumber( - dragState.originX + event.clientX - dragState.startX, - -maxOffsetX, - maxOffsetX - ), - y: clampNumber( - dragState.originY + event.clientY - dragState.startY, - -maxOffsetY, - maxOffsetY - ), - }); + if (compareDragPointerIdRef.current !== event.pointerId) return; + event.preventDefault(); + event.stopPropagation(); + updateComparePositionFromPointer(event); }; - const finishPreviewDrag = (event?: ReactPointerEvent) => { - const dragState = previewDragStateRef.current; - if (!dragState) { - return; + const finishCompareDrag = (event: ReactPointerEvent) => { + if (compareDragPointerIdRef.current !== event.pointerId) return; + event.preventDefault(); + event.stopPropagation(); + if (event.currentTarget.hasPointerCapture(event.pointerId)) { + event.currentTarget.releasePointerCapture(event.pointerId); } - - if ( - event && - event.currentTarget.hasPointerCapture(dragState.pointerId) - ) { - event.currentTarget.releasePointerCapture(dragState.pointerId); - } - - previewDragStateRef.current = null; - setIsPreviewDragging(false); + compareDragPointerIdRef.current = null; }; return ( @@ -751,24 +706,9 @@ export function EnhanceProWorkspace({
{activePreviewUrl ? ( -
setPreviewOffset({ x: 0, y: 0 })} - onPointerCancel={finishPreviewDrag} - onPointerDown={handlePreviewPointerDown} - onPointerMove={handlePreviewPointerMove} - onPointerUp={finishPreviewDrag} - > +
-
+
{activePreviewLabel} +
event.stopPropagation()} + onPointerCancel={finishCompareDrag} + onPointerDown={handleComparePointerDown} + onPointerMove={handleComparePointerMove} + onPointerUp={finishCompareDrag} + > +
+
+
+ +
+
+
) : null} {showComparisonPreview ? ( @@ -802,38 +761,6 @@ export function EnhanceProWorkspace({
增强后
-
event.stopPropagation()} - onPointerDown={(event) => event.stopPropagation()} - onPointerMove={(event) => event.stopPropagation()} - > -
-
-
-
- - setComparePosition(Number(event.target.value) || 0) - } - onInput={(event) => - setComparePosition(Number(event.currentTarget.value) || 0) - } - type="range" - value={comparePosition} - /> -
) : null}
@@ -843,7 +770,7 @@ export function EnhanceProWorkspace({ {activePreviewLabel}
- 双击回正 + 图片固定显示
) : (