Removed modes from note tool
This commit is contained in:
parent
a3ae3471e8
commit
dcdbb1ea98
@ -370,6 +370,7 @@ function Map({
|
||||
// TODO: Sort by last modified
|
||||
notes={mapState ? Object.values(mapState.notes) : []}
|
||||
onNoteMenuOpen={handleNoteMenuOpen}
|
||||
draggable={selectedToolId === "note" || selectedToolId === "pan"}
|
||||
/>
|
||||
);
|
||||
|
||||
|
@ -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"];
|
||||
|
@ -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";
|
||||
|
@ -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" />
|
||||
|
@ -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}
|
||||
/>
|
||||
))}
|
||||
|
@ -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;
|
@ -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() {
|
||||
|
Loading…
Reference in New Issue
Block a user