Added colours and gradients to pointers

src/components/map/MapControls.js

@@ -9,6 +9,7 @@ import SelectMapButton from "./SelectMapButton";
 import FogToolSettings from "./controls/FogToolSettings";
 import DrawingToolSettings from "./controls/DrawingToolSettings";
 import MeasureToolSettings from "./controls/MeasureToolSettings";
+import PointerToolSettings from "./controls/PointerToolSettings";
 
 import PanToolIcon from "../../icons/PanToolIcon";
 import FogToolIcon from "../../icons/FogToolIcon";
@@ -66,6 +67,7 @@ function MapContols({
       id: "pointer",
       icon: <PointerToolIcon />,
       title: "Pointer Tool (Q)",
+      SettingsComponent: PointerToolSettings,
     },
     note: {
       id: "note",

src/components/map/MapPointer.js

@@ -21,6 +21,7 @@ function MapPointer({
   onPointerMove,
   onPointerUp,
   visible,
+  color,
 }) {
   const { mapWidth, mapHeight, interactionEmitter } = useContext(
     MapInteractionContext
@@ -69,7 +70,7 @@ function MapPointer({
       {visible && (
         <Trail
           position={multiply(position, { x: mapWidth, y: mapHeight })}
-          color={colors.red}
+          color={colors[color]}
           size={size}
           duration={200}
         />
@@ -78,4 +79,8 @@ function MapPointer({
   );
 }
 
+MapPointer.defaultProps = {
+  color: "red",
+};
+
 export default MapPointer;

src/components/map/controls/ColorControl.js

@@ -34,7 +34,7 @@ function ColorCircle({ color, selected, onClick, sx }) {
   );
 }
 
-function ColorControl({ color, onColorChange }) {
+function ColorControl({ color, onColorChange, exclude }) {
   const [showColorMenu, setShowColorMenu] = useState(false);
   const [colorMenuOptions, setColorMenuOptions] = useState({});
 
@@ -74,19 +74,21 @@ function ColorControl({ color, onColorChange }) {
         }}
         p={1}
       >
-        {colorOptions.map((c) => (
-          <ColorCircle
-            key={c}
-            color={c}
-            selected={c === color}
-            onClick={() => {
-              onColorChange(c);
-              setShowColorMenu(false);
-              setColorMenuOptions({});
-            }}
-            sx={{ width: "25%", paddingTop: "25%" }}
-          />
-        ))}
+        {colorOptions
+          .filter((color) => !exclude.includes(color))
+          .map((c) => (
+            <ColorCircle
+              key={c}
+              color={c}
+              selected={c === color}
+              onClick={() => {
+                onColorChange(c);
+                setShowColorMenu(false);
+                setColorMenuOptions({});
+              }}
+              sx={{ width: "25%", paddingTop: "25%" }}
+            />
+          ))}
       </Box>
     </MapMenu>
   );
@@ -104,4 +106,8 @@ function ColorControl({ color, onColorChange }) {
   );
 }
 
+ColorControl.defaultProps = {
+  exclude: [],
+};
+
 export default ColorControl;

src/components/map/controls/PointerToolSettings.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { Flex } from "theme-ui";
+
+import ColorControl from "./ColorControl";
+
+function PointerToolSettings({ settings, onSettingChange }) {
+  return (
+    <Flex sx={{ alignItems: "center" }}>
+      <ColorControl
+        color={settings.color}
+        onColorChange={(color) => onSettingChange({ color })}
+        exclude={["black", "darkGray", "lightGray", "white"]}
+      />
+    </Flex>
+  );
+}
+
+export default PointerToolSettings;