Merge branch 'master' into release/v1.7.0

src/components/map/MapDrawing.js

@@ -136,10 +136,7 @@ function MapDrawing({
         onShapeAdd(drawingShape);
       }
 
-      if (erasingShapes.length > 0) {
-        onShapesRemove(erasingShapes.map((shape) => shape.id));
-        setErasingShapes([]);
-      }
+      eraseHoveredShapes();
 
       setDrawingShape(null);
       setIsBrushDown(false);
@@ -164,6 +161,13 @@ function MapDrawing({
     }
   }
 
+  function eraseHoveredShapes() {
+    if (erasingShapes.length > 0) {
+      onShapesRemove(erasingShapes.map((shape) => shape.id));
+      setErasingShapes([]);
+    }
+  }
+
   function renderShape(shape) {
     const defaultProps = {
       key: shape.id,
@@ -171,6 +175,8 @@ function MapDrawing({
       onTouchOver: () => handleShapeOver(shape, isBrushDown),
       onMouseDown: () => handleShapeOver(shape, true),
       onTouchStart: () => handleShapeOver(shape, true),
+      onMouseUp: eraseHoveredShapes,
+      onTouchEnd: eraseHoveredShapes,
       fill: colors[shape.color] || shape.color,
       opacity: shape.blend ? 0.5 : 1,
       id: shape.id,

src/components/map/MapFog.js

@@ -143,20 +143,7 @@ function MapFog({
         setDrawingShape(null);
       }
 
-      // Erase
-      if (editingShapes.length > 0) {
-        if (toolSettings.type === "remove") {
-          onShapesRemove(editingShapes.map((shape) => shape.id));
-        } else if (toolSettings.type === "toggle") {
-          onShapesEdit(
-            editingShapes.map((shape) => ({
-              ...shape,
-              visible: !shape.visible,
-            }))
-          );
-        }
-        setEditingShapes([]);
-      }
+      eraseHoveredShapes();
 
       setIsBrushDown(false);
     }
@@ -280,6 +267,23 @@ function MapFog({
 
   useKeyboard(handleKeyDown, handleKeyUp);
 
+  function eraseHoveredShapes() {
+    // Erase
+    if (editingShapes.length > 0) {
+      if (toolSettings.type === "remove") {
+        onShapesRemove(editingShapes.map((shape) => shape.id));
+      } else if (toolSettings.type === "toggle") {
+        onShapesEdit(
+          editingShapes.map((shape) => ({
+            ...shape,
+            visible: !shape.visible,
+          }))
+        );
+      }
+      setEditingShapes([]);
+    }
+  }
+
   function handleShapeOver(shape, isDown) {
     if (shouldHover && isDown) {
       if (editingShapes.findIndex((s) => s.id === shape.id) === -1) {
@@ -304,6 +308,8 @@ function MapFog({
         onTouchOver={() => handleShapeOver(shape, isBrushDown)}
         onMouseDown={() => handleShapeOver(shape, true)}
         onTouchStart={() => handleShapeOver(shape, true)}
+        onMouseUp={eraseHoveredShapes}
+        onTouchEnd={eraseHoveredShapes}
         points={points}
         stroke={colors[shape.color] || shape.color}
         fill={colors[shape.color] || shape.color}

src/docs/assets/index.js

@@ -26,7 +26,7 @@ import filteringMaps from "./FilteringMaps.mp4";
 import groupAndRemovingTokens from "./GroupAndRemovingTokens.mp4";
 import filteringTokens from "./FilteringTokens.mp4";
 
-export default {
+const assets = {
   defaultMaps,
   customMaps,
   editingMapsAdvanced,
@@ -55,3 +55,5 @@ export default {
   groupAndRemovingTokens,
   filteringTokens,
 };
+
+export default assets;

src/theme.js

@@ -1,4 +1,4 @@
-export default {
+const theme = {
   colors: {
     text: "hsl(210, 50%, 96%)",
     background: "hsl(230, 25%, 18%)",
@@ -281,3 +281,5 @@ export default {
     },
   },
 };
+
+export default theme;