diff --git a/src/components/map/MapNotes.js b/src/components/map/MapNotes.js index fb81e21..4efacf9 100644 --- a/src/components/map/MapNotes.js +++ b/src/components/map/MapNotes.js @@ -106,7 +106,7 @@ function MapNotes({ map={map} key={note.id} onNoteMenuOpen={onNoteMenuOpen} - draggable={draggable} + draggable={draggable && !note.locked} onNoteChange={onNoteChange} onNoteDragStart={onNoteDragStart} onNoteDragEnd={onNoteDragEnd} diff --git a/src/components/note/Note.js b/src/components/note/Note.js index 628dd57..51f9c1c 100644 --- a/src/components/note/Note.js +++ b/src/components/note/Note.js @@ -29,13 +29,6 @@ function Note({ const noteWidth = map && (mapWidth / map.grid.size.x) * note.size; const noteHeight = map && (mapHeight / map.grid.size.y) * note.size; - function handleClick(event) { - if (draggable) { - const noteNode = event.target; - onNoteMenuOpen && onNoteMenuOpen(note.id, noteNode); - } - } - function handleDragStart(event) { onNoteDragStart && onNoteDragStart(event, note.id); } @@ -90,16 +83,38 @@ function Note({ setPreventMapInteraction(false); } - function handlePointerDown() { + function handleClick(event) { if (draggable) { - setPreventMapInteraction(true); + const noteNode = event.target; + onNoteMenuOpen && onNoteMenuOpen(note.id, noteNode); } } - function handlePointerUp() { + // Store note pointer down time to check for a click when note is locked + const notePointerDownTimeRef = useRef(); + function handlePointerDown(event) { + if (draggable) { + setPreventMapInteraction(true); + } + if (note.locked && map.owner === userId) { + notePointerDownTimeRef.current = event.evt.timeStamp; + } + } + + function handlePointerUp(event) { if (draggable) { setPreventMapInteraction(false); } + // Check note click when locked and we are the map owner + // We can't use onClick because that doesn't check pointer distance + if (note.locked && map.owner === userId) { + // If down and up time is small trigger a click + const delta = event.evt.timeStamp - notePointerDownTimeRef.current; + if (delta < 300) { + const noteNode = event.target; + onNoteMenuOpen(note.id, noteNode); + } + } } const [fontSize, setFontSize] = useState(1);