Added grid inset to map snapping

src/components/map/Map.js

@@ -42,9 +42,10 @@ function Map({
 
   const gridX = map && map.grid.size.x;
   const gridY = map && map.grid.size.y;
+  const inset = map && map.grid.inset;
   const gridSizeNormalized = {
-    x: gridX ? 1 / gridX : 0,
-    y: gridY ? 1 / gridY : 0,
+    x: gridX ? (inset.bottomRight.x - inset.topLeft.x) / gridX : 0,
+    y: gridY ? (inset.bottomRight.y - inset.topLeft.y) / gridY : 0,
   };
   const tokenSizePercent = gridSizeNormalized.x;
 

src/components/map/MapGrid.js

@@ -40,12 +40,13 @@ function MapGrid({ map, strokeWidth }) {
     return null;
   }
 
-  const gridSizeNormalized = {
-    x: 1 / gridX,
-    y: 1 / gridY,
-  };
   const gridInset = map && map.grid.inset;
 
+  const gridSizeNormalized = {
+    x: (gridInset.bottomRight.x - gridInset.topLeft.x) / gridX,
+    y: (gridInset.bottomRight.y - gridInset.topLeft.y) / gridY,
+  };
+
   const insetWidth = (gridInset.bottomRight.x - gridInset.topLeft.x) * mapWidth;
   const insetHeight =
     (gridInset.bottomRight.y - gridInset.topLeft.y) * mapHeight;

src/components/map/MapToken.js

@@ -82,15 +82,29 @@ function MapToken({
     const tokenGroup = event.target;
     // Snap to corners of grid
     if (map.snapToGrid) {
+      const offset = Vector2.multiply(map.grid.inset.topLeft, {
+        x: mapWidth,
+        y: mapHeight,
+      });
       const position = {
         x: tokenGroup.x() + tokenGroup.width() / 2,
         y: tokenGroup.y() + tokenGroup.height() / 2,
       };
       const gridSize = {
-        x: mapWidth / map.grid.size.x,
-        y: mapHeight / map.grid.size.y,
+        x:
+          (mapWidth *
+            (map.grid.inset.bottomRight.x - map.grid.inset.topLeft.x)) /
+          map.grid.size.x,
+        y:
+          (mapHeight *
+            (map.grid.inset.bottomRight.x - map.grid.inset.topLeft.x)) /
+          map.grid.size.y,
       };
-      const gridSnap = Vector2.roundTo(position, gridSize);
+      // Transform into offset space, round, then transform back
+      const gridSnap = Vector2.add(
+        Vector2.roundTo(Vector2.subtract(position, offset), gridSize),
+        offset
+      );
       const gridDistance = Vector2.length(Vector2.subtract(gridSnap, position));
       const minGrid = Vector2.min(gridSize);
       if (gridDistance < minGrid * snappingThreshold) {