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

fix: resize canvas on window resize

Browse source
This commit is contained in:
trafficlunar 2024-12-07 16:03:27 +00:00
parent 3bc0032d4b
commit 2c960ebd84
1 changed files with 15 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
src/App.tsx
View file

@ -54,7 +54,7 @@ function App() {
})); }));
} }
onMouseDown(e); onMouseDown();
} }
const stageRect = stageContainerRef.current?.getBoundingClientRect(); const stageRect = stageContainerRef.current?.getBoundingClientRect();
@ -65,15 +65,15 @@ function App() {
setMousePosition({ setMousePosition({
x: mouseX, x: mouseX,
y: mouseY y: mouseY,
}); });
setLocalMousePosition({ setLocalMousePosition({
x: (mouseX - coords.x) / scale, x: (mouseX - coords.x) / scale,
y: (mouseY - coords.y) / scale y: (mouseY - coords.y) / scale,
}); });
}; };
const onMouseDown = (e: React.MouseEvent) => { const onMouseDown = () => {
setDragging(true); setDragging(true);
const blockX = Math.floor(localMousePosition.x / 16); const blockX = Math.floor(localMousePosition.x / 16);
@ -120,11 +120,17 @@ function App() {
}; };
useEffect(() => { useEffect(() => {
if (stageContainerRef.current) { const resizeCanvas = () => {
setStageSize({ if (stageContainerRef.current) {
width: stageContainerRef.current.offsetWidth, setStageSize({
height: stageContainerRef.current.offsetHeight, width: stageContainerRef.current.offsetWidth,
}); height: stageContainerRef.current.offsetHeight,
});
}
};
resizeCanvas();
window.addEventListener("resize", resizeCanvas);
} }
}, []); }, []);