From d420299dd269b25e10a06751f01c017222b90df6 Mon Sep 17 00:00:00 2001 From: zihanjian Date: Fri, 6 Jun 2025 14:11:34 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=82=AC=E6=B5=AE=E8=B0=83?= =?UTF-8?q?=E8=89=B2=E7=9B=98=E5=92=8C=E5=B7=A5=E5=85=B7=E6=A0=8F=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=EF=BC=8C=E4=BC=98=E5=8C=96=E6=89=8B=E5=8A=A8=E4=B8=8A?= =?UTF-8?q?=E8=89=B2=E6=A8=A1=E5=BC=8F=E6=8F=90=E7=A4=BA=E4=BF=A1=E6=81=AF?= =?UTF-8?q?=EF=BC=8C=E6=8F=90=E5=8D=87=E7=94=A8=E6=88=B7=E4=BA=A4=E4=BA=92?= =?UTF-8?q?=E4=BD=93=E9=AA=8C=E5=92=8C=E7=95=8C=E9=9D=A2=E5=8F=8B=E5=A5=BD?= =?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 | 137 +++++----- src/components/FloatingColorPalette.tsx | 320 ++++++++++++++++++++++++ src/components/FloatingToolbar.tsx | 51 ++++ src/hooks/useManualEditingState.ts | 173 +++++++++++++ src/hooks/usePixelEditingOperations.ts | 136 ++++++++++ src/utils/canvasUtils.ts | 55 ++++ src/utils/pixelEditingUtils.ts | 190 ++++++++++++++ 7 files changed, 988 insertions(+), 74 deletions(-) create mode 100644 src/components/FloatingColorPalette.tsx create mode 100644 src/components/FloatingToolbar.tsx create mode 100644 src/hooks/useManualEditingState.ts create mode 100644 src/hooks/usePixelEditingOperations.ts create mode 100644 src/utils/canvasUtils.ts create mode 100644 src/utils/pixelEditingUtils.ts diff --git a/src/app/page.tsx b/src/app/page.tsx index fcad6c9..f2af498 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -2,7 +2,7 @@ import React, { useState, useRef, ChangeEvent, DragEvent, useEffect, useMemo, useCallback } from 'react'; import Script from 'next/script'; -import ColorPalette from '../components/ColorPalette'; + // 导入像素化工具和类型 import { PixelationMode, @@ -79,19 +79,16 @@ const fullBeadPalette: PaletteColor[] = Object.entries(mardToHexMapping) }) .filter((color): color is PaletteColor => color !== null); -// ++ 添加透明键定义 ++ -const TRANSPARENT_KEY = 'ERASE'; - -// ++ 添加透明色数据 ++ -const transparentColorData: MappedPixel = { key: TRANSPARENT_KEY, color: '#FFFFFF', isExternal: true }; - // ++ Add definition for background color keys ++ // 1. 导入新组件 import PixelatedPreviewCanvas from '../components/PixelatedPreviewCanvas'; import GridTooltip from '../components/GridTooltip'; import CustomPaletteEditor from '../components/CustomPaletteEditor'; +import FloatingColorPalette from '../components/FloatingColorPalette'; +import FloatingToolbar from '../components/FloatingToolbar'; import { loadPaletteSelections, savePaletteSelections, presetToSelections, PaletteSelections } from '../utils/localStorageUtils'; +import { TRANSPARENT_KEY, transparentColorData } from '../utils/pixelEditingUtils'; // 1. 导入新的 DonationModal 组件 import DonationModal from '../components/DonationModal'; @@ -161,6 +158,9 @@ export default function Home() { // 新增：组件挂载状态 const [isMounted, setIsMounted] = useState(false); + // 新增：悬浮调色盘状态 + const [isFloatingPaletteOpen, setIsFloatingPaletteOpen] = useState(true); + const originalCanvasRef = useRef(null); const pixelatedCanvasRef = useRef(null); const fileInputRef = useRef(null); @@ -1810,78 +1810,28 @@ export default function Home() {
- {/* ++ RENDER Button/Palette ONLY in manual mode above canvas ++ */} + {/* ++ 手动编辑模式提示信息 ++ */} {isManualColoringMode && mappedPixelData && gridDimensions && ( - // Apply dark mode styles to manual mode container -
- {/* Finish Manual Coloring Button (already has distinct colors, maybe keep as is) */} - - {/* Color Palette (only in manual mode) */} -
-
- {/* Apply dark mode styles to the info box */} -
-
- {/* Icon color */} - - - - {/* Text color implicitly handled by parent */} - 选择颜色/橡皮擦/一键擦除，点击画布格子上色 -
- {/* Separator color */} - | -
- {/* Icon color */} - - - - {/* Text color implicitly handled by parent */} - 为避免误触，推荐使用电脑 -
- {/* Separator color */} - | -
- {/* Icon color */} - - - - {/* Text color implicitly handled by parent */} - Ctrl/Cmd+滚轮缩放 -
+
+
+
+
+ + + + 使用右上角悬浮调色盘进行上色操作 +
+ | +
+ + + + Ctrl/Cmd+滚轮缩放
- {/* ColorPalette component will need internal dark mode styles */} -
- )} {/* ++ End of RENDER Button/Palette ++ */} + )} {/* Canvas Preview Container */} {/* Apply dark mode styles */} @@ -2109,6 +2059,45 @@ export default function Home() { + {/* 悬浮工具栏 */} + setIsFloatingPaletteOpen(!isFloatingPaletteOpen)} + onExitManualMode={() => { + setIsManualColoringMode(false); + setSelectedColor(null); + setTooltipData(null); + setIsEraseMode(false); + setColorReplaceState({ + isActive: false, + step: 'select-source' + }); + setHighlightColorKey(null); + }} + /> + + {/* 悬浮调色盘 */} + {isManualColoringMode && ( + setIsFloatingPaletteOpen(!isFloatingPaletteOpen)} + /> + )} + {/* Apply dark mode styles to the Footer */}