fix(front): Display new polygon on image only if viewId matches (#74)

pixano · Feb 15, 2024 · acbe87a · acbe87a
1 parent 1b02a07
commit acbe87a
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 21 deletions.
diff --git a/ui/components/canvas2d/src/Canvas2D.svelte b/ui/components/canvas2d/src/Canvas2D.svelte
@@ -519,6 +519,7 @@
       status: "creating",
       type: "mask",
       points: [...oldPoints, { x, y, id: oldPoints.length || 0 }],
+      viewId,
     };
   }
 

diff --git a/ui/components/canvas2d/src/components/CreatePolygon.svelte b/ui/components/canvas2d/src/components/CreatePolygon.svelte
@@ -89,24 +89,26 @@
   $: flatPoints = polygonPoints[0]?.reduce((acc, val) => [...acc, val.x, val.y], [] as number[]);
 </script>
 
-<Group config={{ id: "polygon", draggable: true }}>
-  <Line
-    config={{
-      points: flatPoints,
-      stroke: "hsl(316deg 60% 29.41%)",
-      strokeWidth: INPUTRECT_STROKEWIDTH / zoomFactor[viewId],
-      fill: "#f9f4f773",
-      closed: isClosed,
-    }}
-  />
-  <PolygonPoints
-    {viewId}
-    {stage}
-    {zoomFactor}
-    polygonId={POLYGON_ID}
-    points={polygonPoints}
-    {handlePolygonPointsClick}
-    {handlePolygonPointsDragMove}
-    handlePolygonPointsDragEnd={null}
-  />
-</Group>
+{#if "viewId" in newShape && newShape.viewId === viewId}
+  <Group config={{ id: "polygon", draggable: true }}>
+    <Line
+      config={{
+        points: flatPoints,
+        stroke: "hsl(316deg 60% 29.41%)",
+        strokeWidth: INPUTRECT_STROKEWIDTH / zoomFactor[viewId],
+        fill: "#f9f4f773",
+        closed: isClosed,
+      }}
+    />
+    <PolygonPoints
+      {viewId}
+      {stage}
+      {zoomFactor}
+      polygonId={POLYGON_ID}
+      points={polygonPoints}
+      {handlePolygonPointsClick}
+      {handlePolygonPointsDragMove}
+      handlePolygonPointsDragEnd={null}
+    />
+  </Group>
+{/if}
diff --git a/ui/components/core/src/lib/types/objectTypes.ts b/ui/components/core/src/lib/types/objectTypes.ts
@@ -47,6 +47,7 @@ export type CreateMaskShape = {
   status: "creating";
   type: "mask";
   points: PolygonGroupPoint[];
+  viewId: string;
 };
 
 export type editMaskShape = {