Added map context to scale simplification by map scale

Added distance to quadratic functions to vector

src/components/map/MapDrawing.js

@@ -1,8 +1,7 @@
-import React, { useRef, useEffect, useState } from "react";
+import React, { useRef, useEffect, useState, useContext } from "react";
 import shortid from "shortid";
 
 import { compare as comparePoints } from "../../helpers/vector2";
-
 import {
   getBrushPositionForTool,
   getDefaultShapeData,
@@ -13,6 +12,8 @@ import {
   getRelativePointerPosition,
 } from "../../helpers/drawing";
 
+import MapInteractionContext from "../../contexts/MapInteractionContext";
+
 function MapDrawing({
   width,
   height,
@@ -36,6 +37,8 @@ function MapDrawing({
     selectedTool === "shape" ||
     selectedTool === "erase";
 
+  const { scaleRef } = useContext(MapInteractionContext);
+
   // Reset pointer position when tool changes
   useEffect(() => {
     setPointerPosition({ x: -1, y: -1 });
@@ -128,7 +131,8 @@ function MapDrawing({
           }
           const simplified = simplifyPoints(
             [...prevPoints, brushPosition],
-            gridSize
+            gridSize,
+            scaleRef.current
           );
           return {
             ...prevShape,

src/components/map/MapFog.js

@@ -1,8 +1,7 @@
-import React, { useRef, useEffect, useState } from "react";
+import React, { useRef, useEffect, useState, useContext } from "react";
 import shortid from "shortid";
 
 import { compare as comparePoints } from "../../helpers/vector2";
-
 import {
   getBrushPositionForTool,
   isShapeHovered,
@@ -11,6 +10,8 @@ import {
   getRelativePointerPosition,
 } from "../../helpers/drawing";
 
+import MapInteractionContext from "../../contexts/MapInteractionContext";
+
 function MapFog({
   width,
   height,
@@ -32,6 +33,8 @@ function MapFog({
     isEditing &&
     (toolSettings.type === "toggle" || toolSettings.type === "remove");
 
+  const { scaleRef } = useContext(MapInteractionContext);
+
   // Reset pointer position when tool changes
   useEffect(() => {
     setPointerPosition({ x: -1, y: -1 });
@@ -65,7 +68,6 @@ function MapFog({
         color: "black",
         blend: true, // Blend while drawing
         id: shortid.generate(),
-        fogType: toolSettings.useGridSnapping ? "sharp" : "smooth",
       });
     }
   }
@@ -124,7 +126,14 @@ function MapFog({
       if (drawingShape.data.points.length > 1) {
         const shape = {
           ...drawingShape,
-          data: { points: simplifyPoints(drawingShape.data.points, gridSize) },
+          data: {
+            points: simplifyPoints(
+              drawingShape.data.points,
+              gridSize,
+              // Downscale fog as smoothing doesn't currently work with edge snapping
+              scaleRef.current / 2
+            ),
+          },
           blend: false,
         };
         onShapeAdd(shape);

src/components/map/MapInteraction.js

@@ -2,6 +2,8 @@ import React, { useRef, useEffect } from "react";
 import { Box } from "theme-ui";
 import interact from "interactjs";
 
+import { MapInteractionProvider } from "../../contexts/MapInteractionContext";
+
 const zoomSpeed = -0.005;
 const minZoom = 0.1;
 const maxZoom = 5;
@@ -134,7 +136,14 @@ function MapInteraction({ map, aspectRatio, isEnabled, children, controls }) {
               paddingBottom: `${(1 / aspectRatio) * 100}%`,
             }}
           />
-          {children}
+          <MapInteractionProvider
+            value={{
+              translateRef: mapTranslateRef,
+              scaleRef: mapScaleRef,
+            }}
+          >
+            {children}
+          </MapInteractionProvider>
         </Box>
       </Box>
       {controls}