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) {

src/helpers/drawing.js

@@ -14,6 +14,7 @@ export function getBrushPositionForTool(
   shapes
 ) {
   let position = brushPosition;
+
   const useGridSnappning =
     map.snapToGrid &&
     ((tool === "drawing" &&
@@ -25,13 +26,26 @@ export function getBrushPositionForTool(
 
   if (useGridSnappning) {
     // Snap to corners of grid
-    const gridSnap = Vector2.roundTo(position, gridSize);
+    // Subtract offset to transform into offset space then add it back transform back
+    const offset = map.grid.inset.topLeft;
+    const gridSnap = Vector2.add(
+      Vector2.roundTo(Vector2.subtract(position, offset), gridSize),
+      offset
+    );
     const gridDistance = Vector2.length(Vector2.subtract(gridSnap, position));
 
     // Snap to center of grid
+    // Subtract offset and half size to transform it into offset half space then transform it back
+    const halfSize = Vector2.multiply(gridSize, 0.5);
     const centerSnap = Vector2.add(
-      Vector2.roundTo(position, gridSize),
-      Vector2.multiply(gridSize, 0.5)
+      Vector2.add(
+        Vector2.roundTo(
+          Vector2.subtract(Vector2.subtract(position, offset), halfSize),
+          gridSize
+        ),
+        halfSize
+      ),
+      offset
     );
     const centerDistance = Vector2.length(
       Vector2.subtract(centerSnap, position)