@konfuzio/document-validation-ui 0.1.38-dev.0 → 0.1.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konfuzio/document-validation-ui",
-  "version": "0.1.38-dev.0",
+  "version": "0.1.38",
   "repository": "git://github.com:konfuzio-ai/document-validation-ui.git",
   "main": "dist/app.js",
   "scripts": {

package/src/components/DocumentAnnotations/AnnotationContent.vue

@@ -148,6 +148,17 @@ export default {
             custom: false,
           };
 
+          // check if this is part of a group of spans to show the whole bounding box as a placeholder
+          if (
+            this.annotation.selection_bbox &&
+            this.annotation.span.length > 1
+          ) {
+            selection.placeholderBox = this.bboxToRect(
+              page,
+              this.annotation.selection_bbox
+            );
+          }
+
           this.$store.dispatch("selection/setSelection", {
             selection,
             span: this.span,

package/src/components/DocumentPage/BoxSelection.vue

@@ -8,7 +8,16 @@
       @dragend="onChange"
       @transformend="onChange"
     />
-    <v-transformer ref="boxTransformer" :config="transformerConfig" />
+    <v-transformer
+      v-if="editable"
+      ref="boxTransformer"
+      :config="transformerConfig"
+    />
+    <v-rect
+      v-if="selection.placeholderBox"
+      ref="placeholderSelection"
+      :config="placeholderConfig"
+    />
   </v-group>
 </template>
 
@@ -21,6 +30,11 @@ export default {
       required: true,
       type: Object,
     },
+    editable: {
+      required: false,
+      type: Boolean,
+      default: true,
+    },
   },
   computed: {
     /**
@@ -42,6 +56,21 @@ export default {
         draggable: true,
       };
     },
+    placeholderConfig() {
+      return {
+        x: this.selection.placeholderBox.x,
+        y: this.selection.placeholderBox.y,
+        width: this.selection.placeholderBox.width,
+        height: this.selection.placeholderBox.height,
+        fill: "transparent",
+        stroke: "#41af85",
+        strokeWidth: 3,
+        globalCompositeOperation: "multiply",
+        shadowForStrokeEnabled: false,
+        name: "placeholderSelection",
+        draggable: false,
+      };
+    },
     transformerConfig() {
       return {
         borderEnabled: false,

package/src/components/DocumentPage/DocumentPage.vue

@@ -16,6 +16,7 @@
       :new-annotation="newAnnotation"
       :container-width="scaledViewport.width"
       :container-height="scaledViewport.height"
+      :page="page"
       @close="closePopups"
     />
     <EditAnnotation

package/src/components/DocumentPage/EditAnnotation.vue

@@ -118,7 +118,7 @@
 <script>
 /**
  * This component is used to show a popup
- * for creating a new annotation.
+ * for editing an annotation.
  */
 const heightOfPopup = 142;
 const margin = 12;
@@ -179,7 +179,7 @@ export default {
 
       //check if the popup will not go off the container on the top
       return this.selection.start.y > heightOfPopup
-        ? top
+        ? top - margin
         : this.selection.start.y + height + margin;
     },
     left() {

package/src/components/DocumentPage/NewAnnotation.vue

@@ -149,6 +149,10 @@ export default {
       type: Number,
       required: true,
     },
+    page: {
+      required: true,
+      type: Object,
+    },
   },
   data() {
     return {
@@ -167,6 +171,7 @@ export default {
       "labelsFilteredForAnnotationCreation",
       "isNegative",
     ]),
+    ...mapGetters("display", ["clientToBbox"]),
     ...mapState("selection", ["spanSelection", "selection"]),
     top() {
       if (this.selection && this.selection.end) {
@@ -259,12 +264,19 @@ export default {
         };
       });
 
+      const selection_bbox = this.clientToBbox(
+        this.page,
+        this.selection.start,
+        this.selection.end
+      );
+
       const annotationToCreate = {
         document: this.documentId,
         span: span,
         label: this.selectedLabel.id,
         is_correct: true,
         revised: false,
+        selection_bbox,
       };
 
       if (this.selectedSet.id) {

package/src/store/selection.js

@@ -10,6 +10,7 @@ const state = {
     start: null,
     end: null,
     custom: false, // if the box was created by user in document or it comes from an annotation
+    placeholderBox: null, // show a not editable placeholder box
   },
   isSelecting: false,
   spanSelection: null,
@@ -183,6 +184,7 @@ const mutations = {
     state.selection.pageNumber = pageNumber;
     state.selection.custom = true;
     state.selection.start = start;
+    state.selection.placeholderBox = null;
   },
   MOVE_SELECTION: (state, points) => {
     const { start, end } = points;
@@ -202,6 +204,7 @@ const mutations = {
     state.selection.pageNumber = null;
     state.selection.start = null;
     state.selection.end = null;
+    state.selection.placeholderBox = null;
   },
   SET_SPAN_SELECTION: (state, span) => {
     state.spanSelection = span;