diff --git a/src/components/konva/BlankNote.tsx b/src/components/konva/BlankNote.tsx
new file mode 100644
index 0000000..f4a78e1
--- /dev/null
+++ b/src/components/konva/BlankNote.tsx
@@ -0,0 +1,47 @@
+import { Rect } from "react-konva";
+
+import {
+ useMapWidth,
+ useMapHeight,
+} from "../../contexts/MapInteractionContext";
+import { useGridCellPixelSize } from "../../contexts/GridContext";
+
+import colors from "../../helpers/colors";
+
+import { Note as NoteType } from "../../types/Note";
+
+type NoteProps = {
+ note: NoteType;
+};
+
+function BlankNote({ note }: NoteProps) {
+ const mapWidth = useMapWidth();
+ const mapHeight = useMapHeight();
+
+ const gridCellPixelSize = useGridCellPixelSize();
+
+ const minCellSize = Math.min(
+ gridCellPixelSize.width,
+ gridCellPixelSize.height
+ );
+ const noteWidth = minCellSize * note.size;
+ const noteHeight = noteWidth;
+
+ return (
+
+ );
+}
+
+export default BlankNote;
diff --git a/src/components/tools/NoteTool.tsx b/src/components/tools/NoteTool.tsx
index e7ea19d..b9455a0 100644
--- a/src/components/tools/NoteTool.tsx
+++ b/src/components/tools/NoteTool.tsx
@@ -16,7 +16,7 @@ import { getRelativePointerPosition } from "../../helpers/konva";
import useGridSnapping from "../../hooks/useGridSnapping";
-import Note from "../konva/Note";
+import BlankNote from "../konva/BlankNote";
import { Map } from "../../types/Map";
import { Note as NoteType } from "../../types/Note";
@@ -32,20 +32,12 @@ type MapNoteProps = {
active: boolean;
onNoteCreate: NoteCreateEventHander;
onNoteMenuOpen: NoteMenuOpenEventHandler;
- children: React.ReactNode;
};
-function NoteTool({
- map,
- active,
- onNoteCreate,
- onNoteMenuOpen,
- children,
-}: MapNoteProps) {
+function NoteTool({ map, active, onNoteCreate, onNoteMenuOpen }: MapNoteProps) {
const interactionEmitter = useInteractionEmitter();
const userId = useUserId();
const mapStageRef = useMapStage();
- const [isBrushDown, setIsBrushDown] = useState(false);
const [noteData, setNoteData] = useState(null);
const creatingNoteRef = useRef(null);
@@ -98,7 +90,9 @@ function NoteTool({
textOnly: false,
rotation: 0,
});
- setIsBrushDown(true);
+ if (creatingNoteRef.current) {
+ creatingNoteRef.current.visible(true);
+ }
}
function handleBrushMove(props: MapDragEvent) {
@@ -120,7 +114,6 @@ function NoteTool({
y: brushPosition.y,
};
});
- setIsBrushDown(true);
}
}
@@ -131,9 +124,10 @@ function NoteTool({
if (noteData && creatingNoteRef.current) {
onNoteCreate([noteData]);
onNoteMenuOpen(noteData.id, creatingNoteRef.current, true);
+ // Hide creating note tool here as settings noteData to null
+ // was causing performance issues in FireFox
+ creatingNoteRef.current.visible(false);
}
- setNoteData(null);
- setIsBrushDown(false);
}
interactionEmitter?.on("dragStart", handleBrushDown);
@@ -148,13 +142,8 @@ function NoteTool({
});
return (
-
- {children}
-
- {isBrushDown && noteData && (
-
- )}
-
+
+ {noteData && }
);
}
diff --git a/src/hooks/useMapNotes.tsx b/src/hooks/useMapNotes.tsx
index 43647da..1392d2b 100644
--- a/src/hooks/useMapNotes.tsx
+++ b/src/hooks/useMapNotes.tsx
@@ -1,4 +1,5 @@
import Konva from "konva";
+import { Group } from "react-konva";
import { KonvaEventObject } from "konva/lib/Node";
import { useState } from "react";
import { v4 as uuid } from "uuid";
@@ -95,12 +96,7 @@ function useMapNotes(
useBlur(handleBlur);
const notes = (
-
+
{(mapState
? Object.values(mapState.notes).sort((a, b) =>
sortNotes(a, b, noteDraggingOptions)
@@ -129,7 +125,13 @@ function useMapNotes(
}
/>
))}
-
+
+
);
const noteMenu = (