From 8e0bb28e61a3981c5f2a97c2994b580484ed1db3 Mon Sep 17 00:00:00 2001 From: Zylan Date: Sat, 26 Apr 2025 13:37:51 +0800 Subject: [PATCH] =?UTF-8?q?=E7=A7=BB=E9=99=A4=E4=B8=8D=E5=BF=85=E8=A6=81?= =?UTF-8?q?=E7=9A=84=E9=BC=A0=E6=A0=87=E5=92=8C=E8=A7=A6=E6=91=B8=E4=BA=8B?= =?UTF-8?q?=E4=BB=B6=E5=A4=84=E7=90=86=E5=87=BD=E6=95=B0=EF=BC=8C=E7=AE=80?= =?UTF-8?q?=E5=8C=96=E7=94=BB=E5=B8=83=E4=BA=A4=E4=BA=92=E9=80=BB=E8=BE=91?= =?UTF-8?q?=EF=BC=8C=E6=8F=90=E5=8D=87=E4=BB=A3=E7=A0=81=E5=8F=AF=E8=AF=BB?= =?UTF-8?q?=E6=80=A7=E5=92=8C=E7=BB=B4=E6=8A=A4=E6=80=A7=E3=80=82=E5=90=8C?= =?UTF-8?q?=E6=97=B6=EF=BC=8C=E6=9B=B4=E6=96=B0=E5=83=8F=E7=B4=A0=E5=8C=96?= =?UTF-8?q?=E9=A2=84=E8=A7=88=E7=94=BB=E5=B8=83=E7=BB=84=E4=BB=B6=E7=9A=84?= =?UTF-8?q?=E5=B1=9E=E6=80=A7=EF=BC=8C=E5=8E=BB=E9=99=A4=E6=9C=AA=E4=BD=BF?= =?UTF-8?q?=E7=94=A8=E7=9A=84=E9=80=89=E5=AE=9A=E9=A2=9C=E8=89=B2=E5=B1=9E?= =?UTF-8?q?=E6=80=A7=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/page.tsx | 79 ----------------------- src/components/PixelatedPreviewCanvas.tsx | 2 - 2 files changed, 81 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index 468812f..cc5f23b 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -833,84 +833,6 @@ export default function Home() { } }; - // ++ Updated: Mouse move handler ++ - const handleCanvasMouseMove = (event: React.MouseEvent) => { - // Prevent mouse events from interfering during touch interactions - if (touchStartPosRef.current) return; - clearLongPress(); // Clear any potential lingering timer - updateTooltip(event.clientX, event.clientY, event.pageX, event.pageY); - }; - - // ++ Updated: Mouse leave handler ++ - const handleCanvasMouseLeave = () => { - // Prevent mouse events from interfering during touch interactions - if (touchStartPosRef.current) return; - clearLongPress(); - setTooltipData(null); - }; - - // ++ Add a dedicated click handler for coloring ++ - const handleCanvasClick = (event: React.MouseEvent) => { - if (isManualColoringMode && selectedColor) { - // Use the existing interaction logic, passing isClick as true - handleCanvasInteraction(event.clientX, event.clientY, event.pageX, event.pageY, true); - } - }; - - // ++ Touch start handler - Ensure touch variable is used correctly ++ - const handleTouchStart = (event: TouchEvent) => { - const touch = event.touches[0]; - if (!touch) return; - - // Store touch start position for move detection (tooltip logic) - touchStartPosRef.current = { x: touch.clientX, y: touch.clientY, pageX: touch.pageX, pageY: touch.pageY }; - touchMovedRef.current = false; // Reset move flag - - if (isManualColoringMode && selectedColor) { - // Handle coloring on touch start (like a tap) - handleCanvasInteraction(touch.clientX, touch.clientY, touch.pageX, touch.pageY, true); - } else { - // Original Tooltip Long Press Logic - clearLongPress(); // Clear any previous timer - longPressTimerRef.current = setTimeout(() => { - // Only show tooltip if finger hasn't moved significantly - if (!touchMovedRef.current && touchStartPosRef.current) { - // Use coordinates from touchStartPosRef.current here - handleCanvasInteraction(touchStartPosRef.current.x, touchStartPosRef.current.y, touchStartPosRef.current.pageX, touchStartPosRef.current.pageY); - } - }, 500); // 500ms for long press - } - }; - - // ++ Touch move handler - Ensure touch variable and refs are used correctly ++ - const handleTouchMove = (event: TouchEvent) => { - const touch = event.touches[0]; - if (!touch || !touchStartPosRef.current) return; - - // Check if touch has moved significantly from the start position - const dx = Math.abs(touch.clientX - touchStartPosRef.current.x); - const dy = Math.abs(touch.clientY - touchStartPosRef.current.y); - if (dx > 5 || dy > 5) { // Threshold to detect movement - touchMovedRef.current = true; - clearLongPress(); // Cancel long press if finger moves - setTooltipData(null); // Hide tooltip during move - } - }; - - // ++ Touch end handler - Ensure refs are used correctly ++ - const handleTouchEnd = () => { - clearLongPress(); - // Delay hiding tooltip slightly on touch end to avoid flicker if long press just triggered - // and finger didn't move (touchMovedRef is false) - if (!touchMovedRef.current) { - setTimeout(() => setTooltipData(null), 100); - } else { - setTooltipData(null); // Hide immediately if finger moved - } - touchStartPosRef.current = null; // Clear start position - touchMovedRef.current = false; // Reset move flag - }; - // --- Canvas Interaction --- // ++ Re-introduce the combined interaction handler ++ @@ -1304,7 +1226,6 @@ export default function Home() { mappedPixelData={mappedPixelData} gridDimensions={gridDimensions} isManualColoringMode={isManualColoringMode} - selectedColor={selectedColor} onInteraction={handleCanvasInteraction} /> diff --git a/src/components/PixelatedPreviewCanvas.tsx b/src/components/PixelatedPreviewCanvas.tsx index 3ad6cdd..d7cc4d1 100644 --- a/src/components/PixelatedPreviewCanvas.tsx +++ b/src/components/PixelatedPreviewCanvas.tsx @@ -7,7 +7,6 @@ interface PixelatedPreviewCanvasProps { mappedPixelData: MappedPixel[][] | null; gridDimensions: { N: number; M: number } | null; isManualColoringMode: boolean; - selectedColor: MappedPixel | null; canvasRef: React.RefObject; onInteraction: ( clientX: number, @@ -74,7 +73,6 @@ const PixelatedPreviewCanvas: React.FC = ({ mappedPixelData, gridDimensions, isManualColoringMode, - selectedColor, canvasRef, onInteraction, }) => {