trafficlunar/blockmatic
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: add cursor showing when dragging

Browse source
This commit is contained in:
trafficlunar 2024-12-05 21:18:13 +00:00
parent f0445c208b
commit f50f109d27
1 changed files with 17 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/App.tsx
View file

@ -36,6 +36,8 @@ function App() {
const [tool, setTool] = useState<Tool>("hand"); const [tool, setTool] = useState<Tool>("hand");
const [blocks, setBlocks] = useState<Block[]>([]); const [blocks, setBlocks] = useState<Block[]>([]);
const [cssCursor, setCssCursor] = useState("grab");
const onMouseMove = (e) => { const onMouseMove = (e) => {
const stage = e.target.getStage(); const stage = e.target.getStage();
const oldScale = stage.scaleX(); 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 onWheel = (e) => {
const stage = e.target.getStage(); const stage = e.target.getStage();
const oldScale = stage.scaleX(); const oldScale = stage.scaleX();
@ -121,7 +135,10 @@ function App() {
scaleX={stageScale} scaleX={stageScale}
scaleY={stageScale} scaleY={stageScale}
onMouseMove={onMouseMove} onMouseMove={onMouseMove}
onMouseDown={onMouseDown}
onMouseUp={onMouseUp}
onWheel={onWheel} onWheel={onWheel}
style={{ cursor: cssCursor }}
> >
<Layer imageSmoothingEnabled={false}> <Layer imageSmoothingEnabled={false}>
<Blocks blocks={blocks} setBlocks={setBlocks} /> <Blocks blocks={blocks} setBlocks={setBlocks} />