Removed modes from note tool

src/components/map/Map.js

@@ -370,6 +370,7 @@ function Map({
       // TODO: Sort by last modified
       notes={mapState ? Object.values(mapState.notes) : []}
       onNoteMenuOpen={handleNoteMenuOpen}
+      draggable={selectedToolId === "note" || selectedToolId === "pan"}
     />
   );
 

src/components/map/MapControls.js

@@ -9,7 +9,6 @@ import SelectMapButton from "./SelectMapButton";
 import FogToolSettings from "./controls/FogToolSettings";
 import DrawingToolSettings from "./controls/DrawingToolSettings";
 import MeasureToolSettings from "./controls/MeasureToolSettings";
-import NoteToolSettings from "./controls/NoteToolSettings";
 
 import PanToolIcon from "../../icons/PanToolIcon";
 import FogToolIcon from "../../icons/FogToolIcon";
@@ -72,7 +71,6 @@ function MapContols({
       id: "note",
       icon: <NoteToolIcon />,
       title: "Note Tool (N)",
-      SettingsComponent: NoteToolSettings,
     },
   };
   const tools = ["pan", "fog", "drawing", "measure", "pointer", "note"];

src/components/map/MapInteraction.js

@@ -156,12 +156,12 @@ function MapInteraction({
         return "move";
       case "fog":
       case "drawing":
-      case "note":
         return settings.settings[tool].type === "move"
           ? "pointer"
           : "crosshair";
       case "measure":
       case "pointer":
+      case "note":
         return "crosshair";
       default:
         return "default";

src/components/map/MapNote.js

@@ -12,7 +12,9 @@ const textPadding = 4;
 
 function MapNote({ note, map, onNoteChange, onNoteMenuOpen, draggable }) {
   const { userId } = useContext(AuthContext);
-  const { mapWidth, mapHeight } = useContext(MapInteractionContext);
+  const { mapWidth, mapHeight, setPreventMapInteraction } = useContext(
+    MapInteractionContext
+  );
 
   const noteWidth = map && (mapWidth / map.grid.size.x) * note.size;
   const noteHeight = map && (mapHeight / map.grid.size.y) * note.size;
@@ -72,6 +74,18 @@ function MapNote({ note, map, onNoteChange, onNoteMenuOpen, draggable }) {
       });
   }
 
+  function handlePointerDown(event) {
+    if (draggable) {
+      setPreventMapInteraction(true);
+    }
+  }
+
+  function handlePointerUp(event) {
+    if (draggable) {
+      setPreventMapInteraction(false);
+    }
+  }
+
   const [fontSize, setFontSize] = useState(1);
   useEffect(() => {
     const text = textRef.current;
@@ -111,6 +125,10 @@ function MapNote({ note, map, onNoteChange, onNoteMenuOpen, draggable }) {
       draggable={draggable}
       onDragEnd={handleDragEnd}
       onDragMove={handleDragMove}
+      onMouseDown={handlePointerDown}
+      onMouseUp={handlePointerUp}
+      onTouchStart={handlePointerDown}
+      onTouchEnd={handlePointerUp}
     >
       <Rect
         width={noteWidth}
@@ -131,6 +149,7 @@ function MapNote({ note, map, onNoteChange, onNoteMenuOpen, draggable }) {
         wrap="word"
         width={noteWidth}
         height={noteHeight}
+        ellipsis={true}
       />
       {/* Use an invisible text block to work out text sizing */}
       <Text visible={false} ref={textRef} text={note.text} wrap="none" />

src/components/map/MapNotes.js

@@ -15,13 +15,13 @@ const defaultNoteSize = 2;
 
 function MapNotes({
   map,
-  selectedToolSettings,
   active,
   gridSize,
   onNoteAdd,
   onNoteChange,
   notes,
   onNoteMenuOpen,
+  draggable,
 }) {
   const { interactionEmitter } = useContext(MapInteractionContext);
   const { userId } = useContext(AuthContext);
@@ -50,38 +50,34 @@ function MapNotes({
     }
 
     function handleBrushDown() {
-      if (selectedToolSettings.type === "add") {
-        const brushPosition = getBrushPosition();
-        setNoteData({
-          x: brushPosition.x,
-          y: brushPosition.y,
-          size: defaultNoteSize,
-          text: "",
-          id: shortid.generate(),
-          lastModified: Date.now(),
-          lastModifiedBy: userId,
-          visible: true,
-          locked: false,
-          color: "yellow",
-        });
-        setIsBrushDown(true);
-      }
+      const brushPosition = getBrushPosition();
+      setNoteData({
+        x: brushPosition.x,
+        y: brushPosition.y,
+        size: defaultNoteSize,
+        text: "",
+        id: shortid.generate(),
+        lastModified: Date.now(),
+        lastModifiedBy: userId,
+        visible: true,
+        locked: false,
+        color: "yellow",
+      });
+      setIsBrushDown(true);
     }
 
     function handleBrushMove() {
-      if (selectedToolSettings.type === "add") {
-        const brushPosition = getBrushPosition();
-        setNoteData((prev) => ({
-          ...prev,
-          x: brushPosition.x,
-          y: brushPosition.y,
-        }));
-        setIsBrushDown(true);
-      }
+      const brushPosition = getBrushPosition();
+      setNoteData((prev) => ({
+        ...prev,
+        x: brushPosition.x,
+        y: brushPosition.y,
+      }));
+      setIsBrushDown(true);
     }
 
     function handleBrushUp() {
-      if (selectedToolSettings.type === "add") {
+      if (noteData) {
         onNoteAdd(noteData);
         onNoteMenuOpen(noteData.id, creatingNoteRef.current);
       }
@@ -108,7 +104,7 @@ function MapNotes({
           map={map}
           key={note.id}
           onNoteMenuOpen={onNoteMenuOpen}
-          draggable={active && selectedToolSettings.type === "move"}
+          draggable={draggable}
           onNoteChange={onNoteChange}
         />
       ))}

src/components/map/controls/NoteToolSettings.js

@@ -1,47 +0,0 @@
-import React from "react";
-import { Flex } from "theme-ui";
-
-import ToolSection from "./ToolSection";
-import NoteAddIcon from "../../../icons/NoteAddIcon";
-import MoveIcon from "../../../icons/MoveIcon";
-
-import useKeyboard from "../../../helpers/useKeyboard";
-
-function NoteToolSettings({ settings, onSettingChange }) {
-  // Keyboard shortcuts
-  function handleKeyDown({ key }) {
-    if (key === "a") {
-      onSettingChange({ type: "add" });
-    } else if (key === "v") {
-      onSettingChange({ type: "move" });
-    }
-  }
-
-  useKeyboard(handleKeyDown);
-
-  const tools = [
-    {
-      id: "add",
-      title: "Add Note (A)",
-      isSelected: settings.type === "add",
-      icon: <NoteAddIcon />,
-    },
-    {
-      id: "move",
-      title: "Move Note (V)",
-      isSelected: settings.type === "move",
-      icon: <MoveIcon />,
-    },
-  ];
-
-  return (
-    <Flex sx={{ alignItems: "center" }}>
-      <ToolSection
-        tools={tools}
-        onToolClick={(tool) => onSettingChange({ type: tool.id })}
-      />
-    </Flex>
-  );
-}
-
-export default NoteToolSettings;

src/settings.js

@@ -32,11 +32,6 @@ function loadVersions(settings) {
     ...prev,
     map: { fullScreen: false, labelSize: 1 },
   }));
-  // v1.7.0 - Added note tool
-  settings.version(3, (prev) => ({
-    ...prev,
-    note: { type: "add" },
-  }));
 }
 
 export function getSettings() {