diff --git a/src/components/map/Map.js b/src/components/map/Map.js
index 710813f..0bca52e 100644
--- a/src/components/map/Map.js
+++ b/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"}
/>
);
diff --git a/src/components/map/MapControls.js b/src/components/map/MapControls.js
index 80e4840..fb71b72 100644
--- a/src/components/map/MapControls.js
+++ b/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: ,
title: "Note Tool (N)",
- SettingsComponent: NoteToolSettings,
},
};
const tools = ["pan", "fog", "drawing", "measure", "pointer", "note"];
diff --git a/src/components/map/MapInteraction.js b/src/components/map/MapInteraction.js
index 6be1a86..13e40d7 100644
--- a/src/components/map/MapInteraction.js
+++ b/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";
diff --git a/src/components/map/MapNote.js b/src/components/map/MapNote.js
index b2f5fba..0afea46 100644
--- a/src/components/map/MapNote.js
+++ b/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}
>
{/* Use an invisible text block to work out text sizing */}
diff --git a/src/components/map/MapNotes.js b/src/components/map/MapNotes.js
index 64b1591..d297cb3 100644
--- a/src/components/map/MapNotes.js
+++ b/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}
/>
))}
diff --git a/src/components/map/controls/NoteToolSettings.js b/src/components/map/controls/NoteToolSettings.js
deleted file mode 100644
index 869fd01..0000000
--- a/src/components/map/controls/NoteToolSettings.js
+++ /dev/null
@@ -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: ,
- },
- {
- id: "move",
- title: "Move Note (V)",
- isSelected: settings.type === "move",
- icon: ,
- },
- ];
-
- return (
-
- onSettingChange({ type: tool.id })}
- />
-
- );
-}
-
-export default NoteToolSettings;
diff --git a/src/settings.js b/src/settings.js
index e865967..16bfa7c 100644
--- a/src/settings.js
+++ b/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() {