bounding box mask support

Author: seveibar

src/FullImageSegmentationAnnotator/index.story.js

@@ -23,21 +23,34 @@ storiesOf("FullImageSegmentationAnnotator.Basic", module)
             // src: "https://i.imgur.com/Dv5lkQZ.png",
             src: orange,
             regions: [
-              [0, 100, 125],
-              [0, 100, 150],
               [1, 40, 280],
               [1, 10, 10],
               [1, 240, 300],
-            ].map(([cls, y, x], i) => ({
-              cls: ["fg", "bg"][cls],
-              color: "hsl(162,100%,50%)",
-              editingLabels: false,
-              highlighted: false,
-              id: "a" + i,
-              type: "point",
-              x: x / 320,
-              y: y / 249,
-            })),
+            ]
+              .map(([cls, y, x], i) => ({
+                cls: ["fg", "bg"][cls],
+                color: "hsl(162,100%,50%)",
+                editingLabels: false,
+                highlighted: false,
+                id: "a" + i,
+                type: "point",
+                x: x / 320,
+                y: y / 249,
+              }))
+              .concat([
+                {
+                  cls: "fg",
+                  color: "hsl(162,100%,50%)",
+                  editingLabels: false,
+                  highlighted: false,
+                  id: "bb",
+                  type: "box",
+                  x: 0.3,
+                  y: 0.25,
+                  w: 0.35,
+                  h: 0.38,
+                },
+              ]),
           },
         ]}
         regionClsList={["bg", "fg"]}

src/ImageMask/index.js

@@ -37,7 +37,7 @@ export const ImageMask = ({
       if (hide) return
       if (!canvasRef) return
       if (!sampleImageData) return
-      if (regions.filter((cp) => cp.cls).length < 3) return
+      if (regions.filter((cp) => cp.cls).length < 2) return
       if (!mmgc.setImageSize) return
       const context = canvasRef.getContext("2d")
 
@@ -88,6 +88,19 @@ export const ImageMask = ({
         )
       }
       const classPolygons = regions
+        .map((r) => {
+          if (r.type !== "box") return r
+          return {
+            ...r,
+            type: "polygon",
+            points: [
+              [r.x, r.y],
+              [r.x + r.w, r.y],
+              [r.x + r.w, r.y + r.h],
+              [r.x, r.y + r.h],
+            ],
+          }
+        })
         .filter((r) => r.type === "polygon")
         .filter((r) => r.cls)
       for (const polygon of classPolygons) {