diff --git a/src/App.tsx b/src/App.tsx index 96f18a1..e7b5346 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -36,6 +36,8 @@ function App() { const [tool, setTool] = useState("hand"); const [blocks, setBlocks] = useState([]); + const [cssCursor, setCssCursor] = useState("grab"); + const onMouseMove = (e) => { const stage = e.target.getStage(); const oldScale = stage.scaleX(); @@ -47,6 +49,18 @@ function App() { }); }; + const onMouseDown = (e) => { + if (tool == "hand") { + setCssCursor("grabbing"); + } + }; + + const onMouseUp = (e) => { + if (tool == "hand") { + setCssCursor("grab"); + } + }; + const onWheel = (e) => { const stage = e.target.getStage(); const oldScale = stage.scaleX(); @@ -121,7 +135,10 @@ function App() { scaleX={stageScale} scaleY={stageScale} onMouseMove={onMouseMove} + onMouseDown={onMouseDown} + onMouseUp={onMouseUp} onWheel={onWheel} + style={{ cursor: cssCursor }} >