Atlas48/grungnet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix grid not showing in editor, and width resize

Browse Source
This commit is contained in:
Mitchell McCaffrey 2021-02-08 18:51:44 +11:00
parent d0377596d2
commit f1dce05830
2 changed files with 17 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/Grid.js
View File

@ -19,13 +19,13 @@ function Grid({ strokeWidth, stroke }) {
} = useGrid();
const gridGroupRef = useRef();
const { stageScale } = useMapInteraction();
const { stageScale, mapWidth } = useMapInteraction();
const debouncedStageScale = useDebounce(stageScale, 50);
useEffect(() => {
const gridGroup = gridGroupRef.current;
if (gridGroup && grid?.size.x && grid?.size.y) {
if (gridGroup && grid?.size.x && grid?.size.y && debouncedStageScale) {
const gridRect = gridGroup.getClientRect();
if (gridRect.width > 0 && gridRect.height > 0) {
// 150 pixels per grid cell
const maxMapSize = Math.max(grid.size.x, grid.size.y) * 150;
const maxGridSize =
@ -38,7 +38,8 @@ function Grid({ strokeWidth, stroke }) {
),
});
}
}, [grid, debouncedStageScale]);
}
}, [grid, debouncedStageScale, mapWidth]);
if (!grid?.size.x || !grid?.size.y) {
return null;

2
src/hooks/useDebounce.js
View File

@ -1,7 +1,7 @@
import { useEffect, useState } from "react";
function useDebounce(value, delay) {
const [debouncedValue, setDebouncedValue] = useState(value);
const [debouncedValue, setDebouncedValue] = useState();
useEffect(() => {
const timeout = setTimeout(() => {