Fixed bug with corrupted map state on token deletion

src/components/map/Map.js

@@ -209,7 +209,6 @@ function Map({
       tokenGroup={tokenDraggingOptions && tokenDraggingOptions.tokenGroup}
       dragging={!!(tokenDraggingOptions && tokenDraggingOptions.dragging)}
       token={tokensById[tokenDraggingOptions.tokenState.tokenId]}
-      mapState={mapState}
     />
   );
 

src/components/map/MapToken.js

@@ -31,7 +31,6 @@ function MapToken({
   onTokenDragStart,
   onTokenDragEnd,
   draggable,
-  mapState,
   fadeOnHover,
   map,
 }) {
@@ -111,7 +110,6 @@ function MapToken({
         mountedToken.moveTo(parent);
         mountedToken.absolutePosition(position);
         mountChanges[mountedToken.id()] = {
-          ...mapState.tokens[mountedToken.id()],
           x: mountedToken.x() / mapWidth,
           y: mountedToken.y() / mapHeight,
           lastModifiedBy: userId,
@@ -124,7 +122,6 @@ function MapToken({
     onTokenStateChange({
       ...mountChanges,
       [tokenState.id]: {
-        ...tokenState,
         x: tokenGroup.x() / mapWidth,
         y: tokenGroup.y() / mapHeight,
         lastModifiedBy: userId,

src/components/map/MapTokens.js

@@ -119,7 +119,6 @@ function MapTokens({
               !(tokenState.id in disabledTokens) &&
               !tokenState.locked
             }
-            mapState={mapState}
             fadeOnHover={selectedToolId === "drawing"}
             map={map}
           />

src/components/token/TokenDragOverlay.js

@@ -15,7 +15,6 @@ function TokenDragOverlay({
   tokenState,
   tokenGroup,
   dragging,
-  mapState,
 }) {
   const { userId } = useAuth();
 
@@ -34,7 +33,6 @@ function TokenDragOverlay({
         mountedToken.absolutePosition(position);
         onTokenStateChange({
           [mountedToken.id()]: {
-            ...mapState.tokens[mountedToken.id()],
             x: mountedToken.x() / mapWidth,
             y: mountedToken.y() / mapHeight,
             lastModifiedBy: userId,

src/components/token/TokenMenu.js

@@ -51,8 +51,7 @@ function TokenMenu({
 
   function handleLabelChange(event) {
     const label = event.target.value.substring(0, 144);
-    tokenState &&
-      onTokenStateChange({ [tokenState.id]: { ...tokenState, label: label } });
+    tokenState && onTokenStateChange({ [tokenState.id]: { label: label } });
   }
 
   function handleStatusChange(status) {
@@ -66,35 +65,34 @@ function TokenMenu({
       statuses.add(status);
     }
     onTokenStateChange({
-      [tokenState.id]: { ...tokenState, statuses: [...statuses] },
+      [tokenState.id]: { statuses: [...statuses] },
     });
   }
 
   function handleSizeChange(event) {
     const newSize = parseFloat(event.target.value);
-    tokenState &&
-      onTokenStateChange({ [tokenState.id]: { ...tokenState, size: newSize } });
+    tokenState && onTokenStateChange({ [tokenState.id]: { size: newSize } });
   }
 
   function handleRotationChange(event) {
     const newRotation = parseInt(event.target.value);
     tokenState &&
       onTokenStateChange({
-        [tokenState.id]: { ...tokenState, rotation: newRotation },
+        [tokenState.id]: { rotation: newRotation },
       });
   }
 
   function handleVisibleChange() {
     tokenState &&
       onTokenStateChange({
-        [tokenState.id]: { ...tokenState, visible: !tokenState.visible },
+        [tokenState.id]: { visible: !tokenState.visible },
       });
   }
 
   function handleLockChange() {
     tokenState &&
       onTokenStateChange({
-        [tokenState.id]: { ...tokenState, locked: !tokenState.locked },
+        [tokenState.id]: { locked: !tokenState.locked },
       });
   }
 

src/helpers/diff.js

@@ -1,8 +1,17 @@
 import { applyChange, revertChange, diff as deepDiff } from "deep-diff";
+import get from "lodash.get";
 
 export function applyChanges(target, changes) {
   for (let change of changes) {
-    applyChange(target, true, change);
+    if (change.path && (change.kind === "E" || change.kind === "A")) {
+      // If editing an object or array ensure that the value exists
+      const valid = get(target, change.path) !== undefined;
+      if (valid) {
+        applyChange(target, true, change);
+      }
+    } else {
+      applyChange(target, true, change);
+    }
   }
 }
 

src/network/NetworkedMapAndTokens.js

@@ -377,20 +377,32 @@ function NetworkedMapAndTokens({ session }) {
       const { id, lastModified, owner } = token;
       addAssetIfNeeded({ type: "token", id, lastModified, owner });
     }
-    handleMapTokenStateChange({ [tokenState.id]: tokenState });
+    setCurrentMapState((prevMapState) => ({
+      ...prevMapState,
+      tokens: {
+        ...prevMapState.tokens,
+        [tokenState.id]: tokenState,
+      },
+    }));
   }
 
   function handleMapTokenStateChange(change) {
     if (!currentMapState) {
       return;
     }
-    setCurrentMapState((prevMapState) => ({
-      ...prevMapState,
-      tokens: {
-        ...prevMapState.tokens,
-        ...change,
-      },
-    }));
+    setCurrentMapState((prevMapState) => {
+      let tokens = { ...prevMapState.tokens };
+      for (let id in change) {
+        if (id in tokens) {
+          tokens[id] = { ...tokens[id], ...change[id] };
+        }
+      }
+
+      return {
+        ...prevMapState,
+        tokens,
+      };
+    });
   }
 
   function handleMapTokenStateRemove(tokenState) {