Removed modes from note tool

This commit is contained in:
Mitchell McCaffrey 2020-11-05 12:28:28 +11:00
parent a3ae3471e8
commit dcdbb1ea98
7 changed files with 46 additions and 84 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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;

View File

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