From 873284811bbcd1c7f1ffd2a05507dbfd999d8666 Mon Sep 17 00:00:00 2001 From: zihanjian Date: Fri, 6 Jun 2025 15:15:56 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=B4=BB=E8=B7=83=E5=B7=A5?= =?UTF-8?q?=E5=85=B7=E5=B1=82=E7=BA=A7=E7=AE=A1=E7=90=86=EF=BC=8C=E4=BC=98?= =?UTF-8?q?=E5=8C=96=E8=B0=83=E8=89=B2=E7=9B=98=E5=92=8C=E6=94=BE=E5=A4=A7?= =?UTF-8?q?=E9=95=9C=E5=B7=A5=E5=85=B7=E7=9A=84=E6=BF=80=E6=B4=BB=E9=80=BB?= =?UTF-8?q?=E8=BE=91=EF=BC=8C=E7=A1=AE=E4=BF=9D=E7=94=A8=E6=88=B7=E4=BA=A4?= =?UTF-8?q?=E4=BA=92=E6=B5=81=E7=95=85=E6=80=A7=E5=92=8C=E7=95=8C=E9=9D=A2?= =?UTF-8?q?=E5=8F=8B=E5=A5=BD=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 | 16 ++++++++++++++++ src/components/FloatingColorPalette.tsx | 17 +++++++++++++---- src/components/FloatingToolbar.tsx | 2 +- src/components/MagnifierTool.tsx | 19 ++++++++++++++----- 4 files changed, 44 insertions(+), 10 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index a94c3e2..bdfb055 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -172,6 +172,9 @@ export default function Home() { endCol: number; } | null>(null); + // 新增：活跃工具层级管理 + const [activeFloatingTool, setActiveFloatingTool] = useState<'palette' | 'magnifier' | null>(null); + // 放大镜切换处理函数 const handleToggleMagnifier = () => { const newActiveState = !isMagnifierActive; @@ -183,6 +186,15 @@ export default function Home() { } }; + // 激活工具处理函数 + const handleActivatePalette = () => { + setActiveFloatingTool('palette'); + }; + + const handleActivateMagnifier = () => { + setActiveFloatingTool('magnifier'); + }; + // 放大镜像素编辑处理函数 const handleMagnifierPixelEdit = (row: number, col: number, colorData: { key: string; color: string }) => { if (!mappedPixelData) return; @@ -2171,6 +2183,8 @@ export default function Home() { onHighlightColor={handleHighlightColor} isOpen={isFloatingPaletteOpen} onToggleOpen={() => setIsFloatingPaletteOpen(!isFloatingPaletteOpen)} + isActive={activeFloatingTool === 'palette'} + onActivate={handleActivatePalette} /> )} @@ -2188,6 +2202,8 @@ export default function Home() { cellSize={gridDimensions ? Math.min(6, Math.max(4, 500 / Math.max(gridDimensions.N, gridDimensions.M))) : 6} selectionArea={magnifierSelectionArea} onClearSelection={() => setMagnifierSelectionArea(null)} + isFloatingActive={activeFloatingTool === 'magnifier'} + onActivateFloating={handleActivateMagnifier} /> {/* 放大镜选择覆盖层 */} diff --git a/src/components/FloatingColorPalette.tsx b/src/components/FloatingColorPalette.tsx index f2bc8c6..db5f5a6 100644 --- a/src/components/FloatingColorPalette.tsx +++ b/src/components/FloatingColorPalette.tsx @@ -22,6 +22,8 @@ interface FloatingColorPaletteProps { onHighlightColor: (colorHex: string) => void; isOpen: boolean; onToggleOpen: () => void; + isActive: boolean; + onActivate: () => void; } const FloatingColorPalette: React.FC = ({ @@ -39,7 +41,9 @@ const FloatingColorPalette: React.FC = ({ onColorReplace, onHighlightColor, isOpen, - onToggleOpen + onToggleOpen, + isActive, + onActivate }) => { const [position, setPosition] = useState({ x: 20, y: 100 }); const [isDragging, setIsDragging] = useState(false); @@ -50,6 +54,7 @@ const FloatingColorPalette: React.FC = ({ const handleMouseDown = useCallback((e: React.MouseEvent) => { if (!paletteRef.current) return; + onActivate(); // 激活调色板，置于最上层 const rect = paletteRef.current.getBoundingClientRect(); setIsDragging(true); setDragOffset({ @@ -57,12 +62,13 @@ const FloatingColorPalette: React.FC = ({ y: e.clientY - rect.top }); e.preventDefault(); - }, []); + }, [onActivate]); // 处理触摸开始 const handleTouchStart = useCallback((e: React.TouchEvent) => { if (!paletteRef.current) return; + onActivate(); // 激活调色板，置于最上层 const rect = paletteRef.current.getBoundingClientRect(); const touch = e.touches[0]; setIsDragging(true); @@ -71,7 +77,7 @@ const FloatingColorPalette: React.FC = ({ y: touch.clientY - rect.top }); e.preventDefault(); - }, []); + }, [onActivate]); // 处理移动 useEffect(() => { @@ -160,13 +166,16 @@ const FloatingColorPalette: React.FC = ({ return (
{/* 标题栏和控制按钮 */}
= ({ if (!isManualColoringMode) return null; return ( -
+
{/* 调色盘开关按钮 */}