fix: reimplement changing cursor based on tool

This commit is contained in:
trafficlunar 2024-12-14 23:41:34 +00:00
parent 2da5ba7af3
commit d9690eb619
2 changed files with 15 additions and 6 deletions

View file

@ -1,4 +1,4 @@
import { createContext, ReactNode, useState } from "react";
import { createContext, ReactNode, useEffect, useState } from "react";
interface Props {
children: ReactNode;
@ -7,13 +7,20 @@ interface Props {
export const ToolContext = createContext({
tool: "hand" as Tool,
selectedBlock: "stone",
cssCursor: "pointer",
setTool: (tool: Tool) => {},
setSelectedBlock: (block: string) => {},
setCssCursor: (cursor: string) => {},
});
export const ToolProvider = ({ children }: Props) => {
const [tool, setTool] = useState<Tool>("hand");
const [selectedBlock, setSelectedBlock] = useState("stone");
const [cssCursor, setCssCursor] = useState("pointer");
return <ToolContext.Provider value={{ tool, selectedBlock, setTool, setSelectedBlock }}>{children}</ToolContext.Provider>;
useEffect(() => {
setCssCursor(tool === "hand" ? "grab" : "pointer");
}, [tool]);
return <ToolContext.Provider value={{ tool, selectedBlock, cssCursor, setTool, setSelectedBlock, setCssCursor }}>{children}</ToolContext.Provider>;
};