From e92a9acb5a3f3a2956011493dd5d1de6ef9f03fb Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Fri, 9 Oct 2020 14:50:51 +1100
Subject: [PATCH] Added grid inset to map snapping

---
 src/components/map/Map.js      |  5 +++--
 src/components/map/MapGrid.js  |  9 +++++----
 src/components/map/MapToken.js | 20 +++++++++++++++++---
 src/helpers/drawing.js         | 20 +++++++++++++++++---
 4 files changed, 42 insertions(+), 12 deletions(-)

diff --git a/src/components/map/Map.js b/src/components/map/Map.js
index 7cbf956..ba2fb2d 100644
--- a/src/components/map/Map.js
+++ b/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;
 
diff --git a/src/components/map/MapGrid.js b/src/components/map/MapGrid.js
index e900814..66ca389 100644
--- a/src/components/map/MapGrid.js
+++ b/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;
diff --git a/src/components/map/MapToken.js b/src/components/map/MapToken.js
index 0eab316..d3ec881 100644
--- a/src/components/map/MapToken.js
+++ b/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) {
diff --git a/src/helpers/drawing.js b/src/helpers/drawing.js
index 5c5c4d8..50c7e57 100644
--- a/src/helpers/drawing.js
+++ b/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)