feat: eyedropper tool

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<HTMLDivElement>(null);
 
@@ -189,11 +189,22 @@ function Canvas() {
 	);
 
 	const onClick = useCallback(() => {
-		if (tool === "zoom") {
+		switch (tool) {
-			const scaleChange = holdingAlt ? -0.1 : 0.1;
+			case "eyedropper": {
-			const newScale = Math.min(Math.max(scale + scaleChange * scale, 0.1), 32);
+				const mouseBlock = blocks.find((block) => block.x === mouseCoords.x && block.y === mouseCoords.y);
-			setScale(newScale);
+				if (mouseBlock) setSelectedBlock(mouseBlock.name);
-			zoomToMousePosition(newScale);
+				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":

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() {
 					</TooltipContent>
 				</Tooltip>
 
+				{/* Eyedropper */}
+				<Tooltip delayDuration={0}>
+					<TooltipTrigger>
+						<ToggleGroupItem value="eyedropper" className="!p-0 !h-8 !min-w-8">
+							<PipetteIcon />
+						</ToggleGroupItem>
+					</TooltipTrigger>
+					<TooltipContent side="right" sideOffset={10}>
+						<p>Eyedropper (4)</p>
+					</TooltipContent>
+				</Tooltip>
+
 				{/* Zoom */}
 				<Tooltip delayDuration={0}>
 					<TooltipTrigger>
@@ -65,7 +77,7 @@ function Toolbar() {
 						</ToggleGroupItem>
 					</TooltipTrigger>
 					<TooltipContent side="right" sideOffset={10}>
-						<p>Zoom (4)</p>
+						<p>Zoom (5)</p>
 					</TooltipContent>
 				</Tooltip>
 

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;