From dcdbb1ea98a7df02d37179d8f4482a95d9daf9fa Mon Sep 17 00:00:00 2001 From: Mitchell McCaffrey Date: Thu, 5 Nov 2020 12:28:28 +1100 Subject: [PATCH] Removed modes from note tool --- src/components/map/Map.js | 1 + src/components/map/MapControls.js | 2 - src/components/map/MapInteraction.js | 2 +- src/components/map/MapNote.js | 21 +++++++- src/components/map/MapNotes.js | 52 +++++++++---------- .../map/controls/NoteToolSettings.js | 47 ----------------- src/settings.js | 5 -- 7 files changed, 46 insertions(+), 84 deletions(-) delete mode 100644 src/components/map/controls/NoteToolSettings.js 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() {