Added token preview to edit token modal and refactored Grid from Map Grid

src/components/map/MapGrid.js

@@ -1,5 +1,4 @@
 import React, { useContext, useEffect, useState } from "react";
-import { Line, Group } from "react-konva";
 import useImage from "use-image";
 
 import MapInteractionContext from "../../contexts/MapInteractionContext";
@@ -7,9 +6,10 @@ import MapInteractionContext from "../../contexts/MapInteractionContext";
 import useDataSource from "../../helpers/useDataSource";
 import { mapSources as defaultMapSources } from "../../maps";
 
-import { getStrokeWidth } from "../../helpers/drawing";
 import { getImageLightness } from "../../helpers/image";
 
+import Grid from "../Grid";
+
 function MapGrid({ map, strokeWidth }) {
   const { mapWidth, mapHeight } = useContext(MapInteractionContext);
 
@@ -36,66 +36,19 @@ function MapGrid({ map, strokeWidth }) {
   const gridX = map && map.grid.size.x;
   const gridY = map && map.grid.size.y;
 
-  if (!gridX || !gridY) {
-    return null;
-  }
-
   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;
-
-  const lineSpacingX = insetWidth / gridX;
-  const lineSpacingY = insetHeight / gridY;
-
-  const offsetX = gridInset.topLeft.x * mapWidth * -1;
-  const offsetY = gridInset.topLeft.y * mapHeight * -1;
-
-  const lines = [];
-  for (let x = 1; x < gridX; x++) {
-    lines.push(
-      <Line
-        key={`grid_x_${x}`}
-        points={[x * lineSpacingX, 0, x * lineSpacingX, insetHeight]}
-        stroke={isImageLight ? "black" : "white"}
-        strokeWidth={getStrokeWidth(
-          strokeWidth,
-          gridSizeNormalized,
-          mapWidth,
-          mapHeight
-        )}
-        opacity={0.5}
-        offsetX={offsetX}
-        offsetY={offsetY}
-      />
-    );
-  }
-  for (let y = 1; y < gridY; y++) {
-    lines.push(
-      <Line
-        key={`grid_y_${y}`}
-        points={[0, y * lineSpacingY, insetWidth, y * lineSpacingY]}
-        stroke={isImageLight ? "black" : "white"}
-        strokeWidth={getStrokeWidth(
-          strokeWidth,
-          gridSizeNormalized,
-          mapWidth,
-          mapHeight
-        )}
-        opacity={0.5}
-        offsetX={offsetX}
-        offsetY={offsetY}
-      />
-    );
-  }
-
-  return <Group>{lines}</Group>;
+  return (
+    <Grid
+      gridX={gridX}
+      gridY={gridY}
+      gridInset={gridInset}
+      strokeWidth={strokeWidth}
+      width={mapWidth}
+      height={mapHeight}
+      stroke={isImageLight ? "black" : "white"}
+    />
+  );
 }
 
 MapGrid.defaultProps = {