diff --git a/src/components/canvas/Canvas.tsx b/src/components/canvas/Canvas.tsx index 050642d..cbf00a6 100644 --- a/src/components/canvas/Canvas.tsx +++ b/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(); + 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> = { + 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); diff --git a/src/context/Tool.tsx b/src/context/Tool.tsx index 86a3c2c..f9132f0 100644 --- a/src/context/Tool.tsx +++ b/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>; setRadius: React.Dispatch>; setSelectedBlock: React.Dispatch>; - setCssCursor: React.Dispatch>; } interface Props { @@ -21,17 +19,6 @@ export const ToolProvider = ({ children }: Props) => { const [tool, setTool] = useState("hand"); const [radius, setRadius] = useState(1); const [selectedBlock, setSelectedBlock] = useState("stone"); - const [cssCursor, setCssCursor] = useState("crosshair"); - - useEffect(() => { - const cursorMapping: Partial> = { - hand: "grab", - move: "move", - zoom: "zoom-in", - }; - - setCssCursor(cursorMapping[tool] || "crosshair"); - }, [tool]); return ( { tool, radius, selectedBlock, - cssCursor, setTool, setRadius, setSelectedBlock, - setCssCursor, }} > {children}