@konfuzio/document-validation-ui 0.2.6-dev.1 → 0.2.6-dev.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konfuzio/document-validation-ui",
-  "version": "0.2.6-dev.1",
+  "version": "0.2.6-dev.2",
   "repository": "https://github.com/konfuzio-ai/document-validation-ui",
   "main": "dist/app.js",
   "scripts": {
@@ -44,7 +44,7 @@
   "devDependencies": {
     "@4tw/cypress-drag-drop": "^2.3.0",
     "@babel/preset-env": "^7.26.9",
-    "@vue/cli-service": "^5.0.8",
+    "@vue/cli-service": "^5.0.9",
     "@vue/compiler-sfc": "^3.1.0",
     "@vue/test-utils": "^2.4.6",
     "@vue/vue3-jest": "^29.2.6",
@@ -57,5 +57,9 @@
     "jest": "^29.2.6",
     "jest-environment-jsdom": "^29.7.0",
     "prettier": "2.8.1"
+  },
+  "overrides": {
+    "postcss": "8.4.31",
+    "webpack-dev-server": "5.2.1"
   }
 }

package/src/components/DocumentPage/DocumentPage.vue

@@ -74,6 +74,11 @@
               @mouseleave="onElementLeave"
             />
           </v-group>
+          <template v-for="annotationSet in pageAnnotationSets">
+            <v-group>
+              <v-rect :config="groupAnnotationRect(annotationSet)" />
+            </v-group>
+          </template>
           <template v-for="annotation in pageAnnotations">
             <template
               v-for="(bbox, index) in annotation.span.filter(
@@ -217,6 +222,7 @@ export default {
       "isDocumentReadyToBeReviewed",
       "isDocumentReviewed",
       "labelOfAnnotation",
+      "annotationSetBoxForPageNumber",
     ]),
     selectionPage() {
       return this.selection && this.selection.pageNumber;
@@ -275,6 +281,31 @@ export default {
       return annotations;
     },
 
+    pageAnnotationSets() {
+      const annotationSets = [];
+
+      if (this.getAnnotationsFiltered.annotationSets) {
+        this.getAnnotationsFiltered.annotationSets.forEach((annotationSet) => {
+          let samePage = false;
+          annotationSet.labels.forEach((label) => {
+            label.annotations.forEach((annotation) => {
+              if (
+                annotation.span.find(
+                  (span) => span.page_index + 1 === this.page.number
+                )
+              ) {
+                samePage = true;
+              }
+            });
+          });
+          if (samePage) {
+            annotationSets.push(annotationSet);
+          }
+        });
+      }
+      return annotationSets;
+    },
+
     selection() {
       return this.$store.getters["selection/getSelectionForPage"](
         this.page.number
@@ -551,7 +582,20 @@ export default {
         name: "annotation",
         draggable,
         cornerRadius: 2,
-        ...this.bboxToRect(this.page, bbox, focused),
+        ...this.bboxToRect(this.page, bbox, focused ? 2 : 0),
+      };
+    },
+    groupAnnotationRect(annotationSet) {
+      const box = this.annotationSetBoxForPageNumber(annotationSet);
+      return {
+        fill: "#2f80ed",
+        globalCompositeOperation: "multiply",
+        strokeWidth: 0.2,
+        stroke: "black",
+        name: "annotationSet",
+        cornerRadius: 4,
+        opacity: 0.3,
+        ...this.bboxToRect(this.page, box, 4),
       };
     },
     getAnnotationLabelPosition(annotation) {

package/src/store/display.js

@@ -153,7 +153,7 @@ const getters = {
     },
   bboxToRect:
     (state, getters) =>
-    (page, bbox, hasPadding = false) => {
+    (page, bbox, hasPadding = 0) => {
       const imageScale = getters.imageScale(page);
       if (bbox.x0 && bbox.y0) {
         const { x0, x1, y0, y1 } = bbox;
@@ -161,7 +161,7 @@ const getters = {
         const rect = {
           // left
           x: new BigNumber(x0)
-            .minus(hasPadding ? 1 : 0)
+            .minus(hasPadding)
             .times(state.scale)
             .times(imageScale)
             .div(PIXEL_RATIO)
@@ -169,14 +169,14 @@ const getters = {
           // top
           y: pageHeight
             .minus(new BigNumber(y1))
-            .minus(hasPadding ? 1 : 0)
+            .minus(hasPadding)
             .times(state.scale)
             .times(imageScale)
             .div(PIXEL_RATIO)
             .toNumber(),
           width: new BigNumber(x1)
             .minus(x0)
-            .plus(hasPadding ? 2 : 0)
+            .plus(hasPadding * 2)
             .abs()
             .times(state.scale)
             .times(imageScale)
@@ -184,7 +184,7 @@ const getters = {
             .toNumber(),
           height: new BigNumber(y1)
             .minus(y0)
-            .plus(hasPadding ? 2 : 0)
+            .plus(hasPadding * 2)
             .times(state.scale)
             .times(imageScale)
             .div(PIXEL_RATIO)

package/src/store/document.js

@@ -278,6 +278,65 @@ const getters = {
     return foundAnnotationSet;
   },
 
+  /* Get annotation set box to cover all annotations */
+  annotationSetBoxForPageNumber: (state) => (annotationSet) => {
+    let box = {
+      x0: null,
+      y0: null,
+      x1: null,
+      y1: null,
+    };
+    const annotationIdsOfAnnSet = [];
+    annotationSet.labels.forEach((label) => {
+      label.annotations.forEach((annotation) => {
+        annotationIdsOfAnnSet.push(annotation.id);
+        annotation.span.forEach((span) => {
+          if (!box.x0 || box.x0 > span.x0) {
+            box.x0 = span.x0;
+          }
+          if (!box.x1 || box.x1 < span.x1) {
+            box.x1 = span.x1;
+          }
+          if (!box.y0 || box.y0 > span.y0) {
+            box.y0 = span.y0;
+          }
+          if (!box.y1 || box.y1 < span.y1) {
+            box.y1 = span.y1;
+          }
+        });
+      });
+    });
+
+    // check if doesn't cover any other annotation
+    if (box.x0) {
+      state.annotations.forEach((annotation) => {
+        // don't check for annotations of the intended annotation set
+        if (!annotationIdsOfAnnSet.includes(annotation.id)) {
+          annotation.span.forEach((span) => {
+            if (
+              span.x0 >= box.x0 &&
+              span.x1 <= box.x1 &&
+              span.y0 >= box.y0 &&
+              span.y1 <= box.y1
+            ) {
+              box = {
+                x0: null,
+                y0: null,
+                x1: null,
+                y1: null,
+              };
+              return;
+            }
+          });
+        }
+        if (!box.x0) {
+          return;
+        }
+      });
+    }
+    return box;
+  },
+
   /* Get label for a given annotation */
   labelOfAnnotation: (state) => (annotationToFind) => {
     let foundLabel = null;