From ab9fa5f11b7fb77eb8109b8153735fac5fd5f490 Mon Sep 17 00:00:00 2001
From: Xu Han <hxhxhx88@gmail.com>
Date: Mon, 4 Mar 2024 21:11:21 +0800
Subject: [PATCH] fix adding mask duplication issue

---
 app/frontend/src/common/yjs/convert.ts                 | 10 +++++-----
 app/frontend/src/common/yjs/event.ts                   |  6 +++++-
 .../src/state/annotate/annotation-broadcast.ts         | 10 +++++-----
 3 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/app/frontend/src/common/yjs/convert.ts b/app/frontend/src/common/yjs/convert.ts
index 78eb587..3c66613 100644
--- a/app/frontend/src/common/yjs/convert.ts
+++ b/app/frontend/src/common/yjs/convert.ts
@@ -89,7 +89,7 @@ export function readComponent(doc: Y.Doc, cid: ComponentId, info: YjsComponent):
       }
       const {topLeft, bottomRight} = rect;
       const comp: RectangleComponent = {type: 'rectangle', topLeft, bottomRight};
-      return {id: cid, ...comp};
+      return {...comp, id: cid};
     }
     case 'polychain': {
       const vs = verts.get(cid);
@@ -100,7 +100,7 @@ export function readComponent(doc: Y.Doc, cid: ComponentId, info: YjsComponent):
       }
       const {closed} = info;
       const comp: PolychainComponent = {type: 'polychain', vertices: vs.toArray(), closed};
-      return {id: cid, ...comp};
+      return {...comp, id: cid};
     }
     case 'mask': {
       const mask = masks.get(cid);
@@ -109,7 +109,7 @@ export function readComponent(doc: Y.Doc, cid: ComponentId, info: YjsComponent):
         comps.delete(cid);
         break;
       }
-      return {id: cid, ...mask};
+      return {...mask, id: cid};
     }
     default:
       console.warn('unexpected');
@@ -126,8 +126,8 @@ function writeComponent(doc: Y.Doc, comp: Component, eid: EntityId, sidx: SliceI
   switch (comp.type) {
     case 'mask':
       doc.transact(() => {
-        const {id: cid, type} = comp;
-        masks.set(cid, comp);
+        const {id: cid, type, ...rest} = comp;
+        masks.set(cid, {type, ...rest});
         comps.set(cid, {type, sidx, eid});
       });
       break;
diff --git a/app/frontend/src/common/yjs/event.ts b/app/frontend/src/common/yjs/event.ts
index 0b4414b..d55f6be 100644
--- a/app/frontend/src/common/yjs/event.ts
+++ b/app/frontend/src/common/yjs/event.ts
@@ -28,7 +28,6 @@ function useComponentsListener() {
 
   useEffect(() => {
     const fn = (e: Y.YMapEvent<ComponentYjs>) => {
-      console.log(e);
       for (const [cid, cc] of e.changes.keys) {
         switch (cc.action) {
           case 'add': {
@@ -37,6 +36,11 @@ function useComponentsListener() {
               break;
             }
 
+            if (info.type === 'mask') {
+              // adding mask will be handled in `useMasksListener`
+              break;
+            }
+
             // add component
             const {sidx, eid} = info;
             const component = readComponent(doc, cid, info);
diff --git a/app/frontend/src/state/annotate/annotation-broadcast.ts b/app/frontend/src/state/annotate/annotation-broadcast.ts
index 80647cb..4cfdd2c 100644
--- a/app/frontend/src/state/annotate/annotation-broadcast.ts
+++ b/app/frontend/src/state/annotate/annotation-broadcast.ts
@@ -669,9 +669,9 @@ export function useUpdateSliceMasks(): Pick<StateManipulation, 'updateSliceMasks
     ]);
 
     doc.transact(() => {
-      adds.forEach(({entityId: eid, component: c}) => {
-        masks.set(c.id, c);
-        comps.set(c.id, {type: 'mask', sidx, eid});
+      adds.forEach(({entityId: eid, component: {id, ...mask}}) => {
+        masks.set(id, mask);
+        comps.set(id, {type: 'mask', sidx, eid});
       });
       removes.forEach(({componentId: cid}) => {
         deleteComponentFromDoc(doc, cid, 'mask');
@@ -874,9 +874,9 @@ function addComponentToDoc(doc: Y.Doc, input: AddComponentInput) {
       break;
     }
     case 'mask': {
-      const {id: cid, type} = component;
+      const {id: cid, type, ...rest} = component;
       doc.transact(() => {
-        masks.set(cid, component);
+        masks.set(cid, {type, ...rest});
         comps.set(cid, {type, sidx, eid});
       });
       break;