From abf75f1566f1386066a89f2b62880d5d78d0ad14 Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Wed, 29 Apr 2020 09:42:58 +1000
Subject: [PATCH] Added smoothing to freehand fog

---
 src/components/map/MapFog.js |  6 ++--
 src/helpers/drawing.js       | 57 ++++++++++++++++++++----------------
 2 files changed, 33 insertions(+), 30 deletions(-)

diff --git a/src/components/map/MapFog.js b/src/components/map/MapFog.js
index 1f06701..1d81a6f 100644
--- a/src/components/map/MapFog.js
+++ b/src/components/map/MapFog.js
@@ -57,9 +57,6 @@ function MapFog({
       gridSize,
       shapes
     );
-    const commonShapeData = {
-      id: shortid.generate(),
-    };
     if (isEditing && toolSettings.type === "add") {
       setDrawingShape({
         type: "fog",
@@ -67,7 +64,8 @@ function MapFog({
         strokeWidth: 0.1,
         color: "black",
         blend: true, // Blend while drawing
-        ...commonShapeData,
+        id: shortid.generate(),
+        fogType: toolSettings.useGridSnapping ? "sharp" : "smooth",
       });
     }
   }
diff --git a/src/helpers/drawing.js b/src/helpers/drawing.js
index 989e26d..f02b07c 100644
--- a/src/helpers/drawing.js
+++ b/src/helpers/drawing.js
@@ -134,7 +134,7 @@ export function shapeHasFill(shape) {
   );
 }
 
-export function pointsToPath(points, close, canvasWidth, canvasHeight) {
+export function pointsToPathSmooth(points, close, canvasWidth, canvasHeight) {
   const path = new Path2D();
   if (points.length < 2) {
     return path;
@@ -169,6 +169,19 @@ export function pointsToPath(points, close, canvasWidth, canvasHeight) {
   return path;
 }
 
+export function pointsToPathSharp(points, close, canvasWidth, canvasHeight) {
+  const path = new Path2D();
+  path.moveTo(points[0].x * canvasWidth, points[0].y * canvasHeight);
+  for (let point of points.slice(1)) {
+    path.lineTo(point.x * canvasWidth, point.y * canvasHeight);
+  }
+  if (close) {
+    path.closePath();
+  }
+
+  return path;
+}
+
 export function circleToPath(x, y, radius, canvasWidth, canvasHeight) {
   const path = new Path2D();
   const minSide = canvasWidth < canvasHeight ? canvasWidth : canvasHeight;
@@ -201,32 +214,10 @@ export function rectangleToPath(
   return path;
 }
 
-export function triangleToPath(points, canvasWidth, canvasHeight) {
-  const path = new Path2D();
-  path.moveTo(points[0].x * canvasWidth, points[0].y * canvasHeight);
-  for (let point of points.slice(1)) {
-    path.lineTo(point.x * canvasWidth, point.y * canvasHeight);
-  }
-  path.closePath();
-
-  return path;
-}
-
-export function fogToPath(points, canvasWidth, canvasHeight) {
-  const path = new Path2D();
-  path.moveTo(points[0].x * canvasWidth, points[0].y * canvasHeight);
-  for (let point of points.slice(1)) {
-    path.lineTo(point.x * canvasWidth, point.y * canvasHeight);
-  }
-  path.closePath();
-
-  return path;
-}
-
 export function shapeToPath(shape, canvasWidth, canvasHeight) {
   const data = shape.data;
   if (shape.type === "path") {
-    return pointsToPath(
+    return pointsToPathSmooth(
       data.points,
       shape.pathType === "fill",
       canvasWidth,
@@ -251,10 +242,24 @@ export function shapeToPath(shape, canvasWidth, canvasHeight) {
         canvasHeight
       );
     } else if (shape.shapeType === "triangle") {
-      return triangleToPath(data.points, canvasWidth, canvasHeight);
+      return pointsToPathSharp(data.points, true, canvasWidth, canvasHeight);
     }
   } else if (shape.type === "fog") {
-    return fogToPath(shape.data.points, canvasWidth, canvasHeight);
+    if (shape.fogType === "smooth") {
+      return pointsToPathSmooth(
+        shape.data.points,
+        true,
+        canvasWidth,
+        canvasHeight
+      );
+    } else if (shape.fogType === "sharp") {
+      return pointsToPathSharp(
+        shape.data.points,
+        true,
+        canvasWidth,
+        canvasHeight
+      );
+    }
   }
 }