Optimise note creation for FireFox

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 (
+    <Rect
+      x={note.x * mapWidth}
+      y={note.y * mapHeight}
+      width={noteWidth}
+      height={noteHeight}
+      offsetX={noteWidth / 2}
+      offsetY={noteHeight / 2}
+      shadowColor="rgba(0, 0, 0, 0.16)"
+      shadowOffset={{ x: 3, y: 6 }}
+      shadowBlur={6}
+      cornerRadius={0.25}
+      fill={colors[note.color]}
+    />
+  );
+}
+
+export default BlankNote;

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({
+function NoteTool({ map, active, onNoteCreate, onNoteMenuOpen }: MapNoteProps) {
-  map,
-  active,
-  onNoteCreate,
-  onNoteMenuOpen,
-  children,
-}: MapNoteProps) {
   const interactionEmitter = useInteractionEmitter();
   const userId = useUserId();
   const mapStageRef = useMapStage();
-  const [isBrushDown, setIsBrushDown] = useState(false);
   const [noteData, setNoteData] = useState<NoteType | null>(null);
 
   const creatingNoteRef = useRef<Konva.Group>(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 (
-    <Group id="notes">
+    <Group ref={creatingNoteRef}>
-      {children}
+      {noteData && <BlankNote note={noteData} />}
-      <Group ref={creatingNoteRef}>
-        {isBrushDown && noteData && (
-          <Note note={noteData} map={map} selected={false} />
-        )}
-      </Group>
     </Group>
   );
 }

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 = (
-    <NoteTool
+    <Group id="notes">
-      map={map}
-      active={selectedToolId === "note"}
-      onNoteCreate={onNoteCreate}
-      onNoteMenuOpen={handleNoteMenuOpen}
-    >
       {(mapState
         ? Object.values(mapState.notes).sort((a, b) =>
             sortNotes(a, b, noteDraggingOptions)
@@ -129,7 +125,13 @@ function useMapNotes(
           }
         />
       ))}
-    </NoteTool>
+      <NoteTool
+        map={map}
+        active={selectedToolId === "note"}
+        onNoteCreate={onNoteCreate}
+        onNoteMenuOpen={handleNoteMenuOpen}
+      />
+    </Group>
   );
 
   const noteMenu = (