fix adding mask duplication issue

SysCV · Mar 4, 2024 · ab9fa5f · ab9fa5f
1 parent c477696
commit ab9fa5f
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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;