Working on tilemap listeners

ui/src/components/TileGrid/index.tsx

@@ -2,10 +2,14 @@
 
 import { Graphics, Stage } from '@pixi/react';
 import { Graphics as PixiGraphics } from '@pixi/graphics';
-import { useCallback } from 'react';
+import { MouseEvent, WheelEvent, useCallback, useState } from 'react';
 
 // export default function TileGrid({ width, height }: TileGridProps) {
 export default function TIleGrid() {
+  const [mouseDown, setMouseDown] = useState(false);
+  const [lastPosition, setLastPosition] = useState({ x: 0, y: 0 });
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+
   // Offset height of navbar from window height
   const height = window.innerHeight - 75;
   // Offset width of layout padding from window width
@@ -23,6 +27,19 @@ export default function TIleGrid() {
     }
   }, []);
 
+  function pan(e: MouseEvent) {
+    if (mouseDown) {
+      const dx = position.x + e.clientX - lastPosition.x;
+      const dy = position.y + e.clientY - lastPosition.y;
+      setPosition({ x: dx, y: dy });
+      setLastPosition({ x: e.clientX, y: e.clientY });
+    }
+  }
+
+  function zoom(e: WheelEvent) {
+    console.log('zoom', e);
+  }
+
   return (
     <Stage
       width={width}
@@ -31,8 +48,16 @@ export default function TIleGrid() {
         backgroundColor: 0x333333,
         antialias: false
       }}
+      onMouseDown={(e) => {
+        setMouseDown(true);
+        setLastPosition({ x: e.clientX, y: e.clientY });
+      }}
+      onMouseUp={() => setMouseDown(false)}
+      onMouseMove={(e) => pan(e)}
+      onWheel={(e) => zoom(e)}
+      onClick={(e) => console.log(e)}
     >
-      <Graphics draw={draw} />
+      <Graphics x={position.x} y={position.y} draw={draw} />
     </Stage>
   );
 }