Added bounds to grid

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 (
-    <>
+    <Container>
       <Stage
         width={width}
         height={height}
@@ -101,6 +104,6 @@ export default function TileGrid() {
         selectedColor={selectedColor}
         setSelectedColor={setSelectedColor}
       />
-    </>
+    </Container>
   );
 }