refactor: move cssCursor from context to canvas component

src/components/canvas/Canvas.tsx

@@ -38,7 +38,7 @@ function Canvas() {
 	const { settings } = useContext(SettingsContext);
 	const { missingTexture } = useContext(TexturesContext);
 	const { isDark } = useContext(ThemeContext);
-	const { tool, radius, selectedBlock, cssCursor, setTool, setSelectedBlock, setCssCursor } = useContext(ToolContext);
+	const { tool, radius, selectedBlock, setTool, setSelectedBlock } = useContext(ToolContext);
 
 	const textures = useTextures(version);
 	const blockData = useBlockData(version);
@@ -53,6 +53,7 @@ function Canvas() {
 	const holdingAltRef = useRef(false);
 	const holdingShiftRef = useRef(false);
 	const oldToolRef = useRef<Tool>();
+	const [cssCursor, setCssCursor] = useState("crosshair");
 
 	const visibleArea = useMemo(() => {
 		const blockSize = 16 * scale;
@@ -487,6 +488,18 @@ function Canvas() {
 		[setCssCursor, setTool]
 	);
 
+	// Tool cursor handler
+	useEffect(() => {
+		const cursorMapping: Partial<Record<Tool, string>> = {
+			hand: "grab",
+			move: "move",
+			zoom: "zoom-in",
+		};
+
+		setCssCursor(cursorMapping[tool] || "crosshair");
+	}, [tool]);
+
+	// Resize canvas handler
 	useEffect(() => {
 		const container = stageContainerRef.current;
 		if (!container) return;
@@ -505,6 +518,7 @@ function Canvas() {
 		return () => resizeObserver.disconnect();
 	}, [stageContainerRef, setStageSize]);
 
+	// Window events handler
 	useEffect(() => {
 		window.addEventListener("keydown", onKeyDown);
 		window.addEventListener("keyup", onKeyUp);

src/context/Tool.tsx

@@ -1,14 +1,12 @@
-import { createContext, ReactNode, useEffect, useState } from "react";
+import { createContext, ReactNode, useState } from "react";
 
 interface Context {
 	tool: Tool;
 	radius: number;
 	selectedBlock: string;
-	cssCursor: string;
 	setTool: React.Dispatch<React.SetStateAction<Tool>>;
 	setRadius: React.Dispatch<React.SetStateAction<number>>;
 	setSelectedBlock: React.Dispatch<React.SetStateAction<string>>;
-	setCssCursor: React.Dispatch<React.SetStateAction<string>>;
 }
 
 interface Props {
@@ -21,17 +19,6 @@ export const ToolProvider = ({ children }: Props) => {
 	const [tool, setTool] = useState<Tool>("hand");
 	const [radius, setRadius] = useState(1);
 	const [selectedBlock, setSelectedBlock] = useState("stone");
-	const [cssCursor, setCssCursor] = useState("crosshair");
-
-	useEffect(() => {
-		const cursorMapping: Partial<Record<Tool, string>> = {
-			hand: "grab",
-			move: "move",
-			zoom: "zoom-in",
-		};
-
-		setCssCursor(cursorMapping[tool] || "crosshair");
-	}, [tool]);
 
 	return (
 		<ToolContext.Provider
@@ -39,11 +26,9 @@ export const ToolProvider = ({ children }: Props) => {
 				tool,
 				radius,
 				selectedBlock,
-				cssCursor,
 				setTool,
 				setRadius,
 				setSelectedBlock,
-				setCssCursor,
 			}}
 		>
 			{children}