diff --git a/ui/src/components/TileGrid/index.tsx b/ui/src/components/TileGrid/index.tsx index 5823da1..a1911d4 100644 --- a/ui/src/components/TileGrid/index.tsx +++ b/ui/src/components/TileGrid/index.tsx @@ -7,14 +7,13 @@ import TileControls, { EditTool, Tool, defaultColors } from './TileControls'; export default function TileGrid() { // Offset height of navbar from window height - const height = window ? window.innerHeight - 75 : 0; + const height = window ? window.innerHeight - 70 : 0; // Offset width of layout padding from window width const width = window ? window.innerWidth : 0; const [scale, setScale] = useState(1); const [zoom, setZoom] = useState(1); - const [size, setSize] = useState({ width: width * 2, height: height * 2 }); - const [boundaries, setBoundaries] = useState({ top: 0, bottom: 0, left: 0, right: 0 }); + const [gridSize, setGridSize] = useState({ width: width * 2, height: height * 2 }); const [mouseDown, setMouseDown] = useState(false); const [lastPosition, setLastPosition] = useState({ x: -width / 2, y: -height / 2 }); const [position, setPosition] = useState({ x: -width / 2, y: -height / 2 }); @@ -38,8 +37,8 @@ export default function TileGrid() { const draw = useCallback((g: PixiGraphics) => { g.clear(); // Draw dot in the corner of each tile - for (let x = 0; x < size.width; x += 32 * scale) { - for (let y = 0; y < size.height; y += 32 * scale) { + for (let x = 0; x < gridSize.width; x += 32 * scale) { + for (let y = 0; y < gridSize.height; y += 32 * scale) { g.beginFill(0xffffff, 0.5); g.drawCircle(x, y, 1); g.endFill(); @@ -56,9 +55,13 @@ export default function TileGrid() { function moveEvent(e: MouseEvent) { if (mouseDown) { - const dx = position.x + e.clientX - lastPosition.x; - const dy = position.y + e.clientY - lastPosition.y; - // TODO: Boundaries + let dx = position.x + e.clientX - lastPosition.x; + let dy = position.y + e.clientY - lastPosition.y; + // Prevent coordinates from going out of bounds + dx = Math.min(dx, 0); + dx = Math.max(dx, -gridSize.width * scale + width); + dy = Math.min(dy, 0); + dy = Math.max(dy, -gridSize.height * scale + height); setPosition({ x: dx, y: dy }); setLastPosition({ x: e.clientX, y: e.clientY }); } @@ -75,7 +78,7 @@ export default function TileGrid() { } return ( - <> + - + ); }