Update token state and note events to be more similar

src/components/konva/Note.tsx

@@ -81,11 +81,12 @@ function Note({
     const noteGroup = event.target;
     if (userId) {
       onNoteChange?.({
-        ...note,
-        x: noteGroup.x() / mapWidth,
-        y: noteGroup.y() / mapHeight,
-        lastModifiedBy: userId,
-        lastModified: Date.now(),
+        [note.id]: {
+          x: noteGroup.x() / mapWidth,
+          y: noteGroup.y() / mapHeight,
+          lastModifiedBy: userId,
+          lastModified: Date.now(),
+        },
       });
     }
     onNoteDragEnd?.(event, note.id);

src/components/map/Map.tsx

@@ -36,6 +36,7 @@ import {
   NoteChangeEventHandler,
   NoteRemoveEventHander,
   TokenStateChangeEventHandler,
+  NoteCreateEventHander,
 } from "../../types/Events";
 
 import useMapTokens from "../../hooks/useMapTokens";
@@ -55,6 +56,7 @@ type MapProps = {
   onFogDraw: (action: Action<FogState>) => void;
   onFogDrawUndo: () => void;
   onFogDrawRedo: () => void;
+  onMapNoteCreate: NoteCreateEventHander;
   onMapNoteChange: NoteChangeEventHandler;
   onMapNoteRemove: NoteRemoveEventHander;
   allowMapDrawing: boolean;
@@ -79,6 +81,7 @@ function Map({
   onFogDraw,
   onFogDrawUndo,
   onFogDrawRedo,
+  onMapNoteCreate,
   onMapNoteChange,
   onMapNoteRemove,
   allowMapDrawing,
@@ -206,6 +209,7 @@ function Map({
   const { notes, noteMenu, noteDragOverlay } = useMapNotes(
     map,
     mapState,
+    onMapNoteCreate,
     onMapNoteChange,
     onMapNoteRemove,
     selectedToolId,

src/components/note/NoteDragOverlay.tsx

@@ -1,9 +1,10 @@
 import Konva from "konva";
+import { NoteRemoveEventHander } from "../../types/Events";
 
 import DragOverlay from "../map/DragOverlay";
 
 type NoteDragOverlayProps = {
-  onNoteRemove: (noteId: string) => void;
+  onNoteRemove: NoteRemoveEventHander;
   noteId: string;
   noteGroup: Konva.Node;
   dragging: boolean;
@@ -16,7 +17,7 @@ function NoteDragOverlay({
   dragging,
 }: NoteDragOverlayProps) {
   function handleNoteRemove() {
-    onNoteRemove(noteId);
+    onNoteRemove([noteId]);
   }
 
   return (

src/components/note/NoteMenu.tsx

@@ -73,31 +73,31 @@ function NoteMenu({
 
   function handleTextChange(event: React.ChangeEvent<HTMLTextAreaElement>) {
     const text = event.target.value.substring(0, 1024);
-    note && onNoteChange({ ...note, text: text });
+    note && onNoteChange({ [note.id]: { text: text } });
   }
 
   function handleColorChange(color: Color) {
     if (!note) {
       return;
     }
-    onNoteChange({ ...note, color: color });
+    onNoteChange({ [note.id]: { color: color } });
   }
 
   function handleSizeChange(event: React.ChangeEvent<HTMLInputElement>) {
     const newSize = parseFloat(event.target.value);
-    note && onNoteChange({ ...note, size: newSize });
+    note && onNoteChange({ [note.id]: { size: newSize } });
   }
 
   function handleVisibleChange() {
-    note && onNoteChange({ ...note, visible: !note.visible });
+    note && onNoteChange({ [note.id]: { visible: !note.visible } });
   }
 
   function handleLockChange() {
-    note && onNoteChange({ ...note, locked: !note.locked });
+    note && onNoteChange({ [note.id]: { locked: !note.locked } });
   }
 
   function handleModeChange() {
-    note && onNoteChange({ ...note, textOnly: !note.textOnly });
+    note && onNoteChange({ [note.id]: { textOnly: !note.textOnly } });
   }
 
   function handleModalContent(node: HTMLElement) {

src/components/token/TokenDragOverlay.tsx

@@ -18,7 +18,7 @@ function TokenDragOverlay({
   dragging,
 }: TokenDragOverlayProps) {
   function handleTokenRemove() {
-    onTokenStateRemove(tokenState);
+    onTokenStateRemove([tokenState.id]);
   }
 
   return (

src/components/tools/NoteTool.tsx

@@ -17,7 +17,7 @@ import Note from "../konva/Note";
 import { Map } from "../../types/Map";
 import { Note as NoteType } from "../../types/Note";
 import {
-  NoteAddEventHander,
+  NoteCreateEventHander,
   NoteChangeEventHandler,
   NoteDragEventHandler,
   NoteMenuOpenEventHandler,
@@ -28,7 +28,7 @@ const defaultNoteSize = 2;
 type MapNoteProps = {
   map: Map | null;
   active: boolean;
-  onNoteAdd: NoteAddEventHander;
+  onNoteCreate: NoteCreateEventHander;
   onNoteChange: NoteChangeEventHandler;
   notes: NoteType[];
   onNoteMenuOpen: NoteMenuOpenEventHandler;
@@ -41,7 +41,7 @@ type MapNoteProps = {
 function NoteTool({
   map,
   active,
-  onNoteAdd,
+  onNoteCreate,
   onNoteChange,
   notes,
   onNoteMenuOpen,
@@ -127,7 +127,7 @@ function NoteTool({
 
     function handleBrushUp() {
       if (noteData && creatingNoteRef.current) {
-        onNoteAdd(noteData);
+        onNoteCreate([noteData]);
         onNoteMenuOpen(noteData.id, creatingNoteRef.current);
       }
       setNoteData(null);