diff --git a/src/components/canvas/Canvas.tsx b/src/components/canvas/Canvas.tsx index 35906f2..56f6364 100644 --- a/src/components/canvas/Canvas.tsx +++ b/src/components/canvas/Canvas.tsx @@ -29,7 +29,7 @@ function Canvas() { const { setLoading } = useContext(LoadingContext); const { settings } = useContext(SettingsContext); const { missingTexture, textures, solidTextures } = useContext(TexturesContext); - const { tool, radius, selectedBlock, cssCursor, setTool, setCssCursor } = useContext(ToolContext); + const { tool, radius, selectedBlock, cssCursor, setTool, setSelectedBlock, setCssCursor } = useContext(ToolContext); const stageContainerRef = useRef(null); @@ -189,11 +189,22 @@ function Canvas() { ); const onClick = useCallback(() => { - if (tool === "zoom") { - const scaleChange = holdingAlt ? -0.1 : 0.1; - const newScale = Math.min(Math.max(scale + scaleChange * scale, 0.1), 32); - setScale(newScale); - zoomToMousePosition(newScale); + switch (tool) { + case "eyedropper": { + const mouseBlock = blocks.find((block) => block.x === mouseCoords.x && block.y === mouseCoords.y); + if (mouseBlock) setSelectedBlock(mouseBlock.name); + break; + } + case "zoom": { + const scaleChange = holdingAlt ? -0.1 : 0.1; + const newScale = Math.min(Math.max(scale + scaleChange * scale, 0.1), 32); + setScale(newScale); + zoomToMousePosition(newScale); + break; + } + + default: + break; } }, [tool, holdingAlt, scale, zoomToMousePosition, setScale]); @@ -215,6 +226,9 @@ function Canvas() { setTool("eraser"); break; case "4": + setTool("eyedropper"); + break; + case "5": setTool("zoom"); break; case "Alt": diff --git a/src/components/toolbar/index.tsx b/src/components/toolbar/index.tsx index 7d87e21..1886c3f 100644 --- a/src/components/toolbar/index.tsx +++ b/src/components/toolbar/index.tsx @@ -1,5 +1,5 @@ import { useContext } from "react"; -import { EraserIcon, HandIcon, PencilIcon, ZoomInIcon } from "lucide-react"; +import { EraserIcon, HandIcon, PencilIcon, PipetteIcon, ZoomInIcon } from "lucide-react"; import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"; @@ -57,6 +57,18 @@ function Toolbar() { + {/* Eyedropper */} + + + + + + + +

Eyedropper (4)

+
+
+ {/* Zoom */} @@ -65,7 +77,7 @@ function Toolbar() { -

Zoom (4)

+

Zoom (5)

diff --git a/src/types.d.ts b/src/types.d.ts index 7c35c0f..f80f98a 100644 --- a/src/types.d.ts +++ b/src/types.d.ts @@ -21,7 +21,7 @@ interface Block extends Position { name: string; } -type Tool = "hand" | "pencil" | "eraser" | "zoom"; +type Tool = "hand" | "pencil" | "eraser" | "eyedropper" | "zoom"; interface Settings { blockSelectorWindow: boolean;