@konfuzio/document-validation-ui 0.1.59-dev.1 → 0.2.0-dev.1

package/src/components/DocumentPage/DocumentPage.vue

@@ -11,26 +11,14 @@
       page.number === currentPage && 'current-page',
     ]"
   >
-    <NewAnnotation
-      v-if="newAnnotation && newAnnotation.length && !editAnnotation"
-      :new-annotation="newAnnotation"
+    <AnnotationPopup
+      v-if="!isSelecting && spanSelectionsForPage(page).length > 0"
+      :spans="spanSelectionsForPage(page)"
       :container-width="scaledViewport.width"
       :container-height="scaledViewport.height"
       :page="page"
       @close="closePopups"
     />
-    <EditAnnotation
-      v-if="
-        editAnnotation &&
-        editAnnotation.pageNumber &&
-        editAnnotation.pageNumber === currentPage &&
-        selection
-      "
-      :edit-annotation="editAnnotation"
-      :page="page"
-      :container-width="scaledViewport.width"
-      :container-height="scaledViewport.height"
-    />
 
     <div
       v-if="showAnnotationLabel"
@@ -70,7 +58,12 @@
               }"
             ></v-rect>
           </template>
-          <v-group v-if="!publicView || !isDocumentReviewed" ref="entities">
+          <v-group
+            v-if="
+              !categorizeModalIsActive || !publicView || !isDocumentReviewed
+            "
+            ref="entities"
+          >
             <v-rect
               v-for="(entity, index) in scaledEntities(page.entities, page)"
               :key="index"
@@ -86,7 +79,7 @@
                 (bbox) => bbox.page_index + 1 == page.number
               )"
             >
-              <v-group :key="'ann' + annotation.id + '-' + index">
+              <v-group>
                 <v-rect
                   v-if="!isAnnotationInEditMode(annotation.id)"
                   :config="annotationRect(bbox, annotation.id)"
@@ -99,7 +92,7 @@
             <template
               v-if="annotation.metadata && annotation.metadata.checkbox"
             >
-              <v-group :key="'ann' + annotation.id + '-checkbox'">
+              <v-group>
                 <v-rect
                   v-if="!isAnnotationInEditMode(annotation.id)"
                   :config="
@@ -122,12 +115,22 @@
           </template>
         </template>
       </v-layer>
-      <v-layer v-if="page.number === selectionPage">
-        <box-selection
-          :page="page"
-          @createAnnotations="handleCreateAnnotationsFromSelection"
-          @selectEntities="handleEntitiesFromSelection"
-        />
+      <v-layer>
+        <template
+          v-for="(span, index) in spanSelectionsForPage(page)"
+          :key="index"
+        >
+          <span-selection :id="index" :span="span" :page="page" />
+        </template>
+        <template
+          v-for="(span, index) in placeholderSelectionForPage(page)"
+          :key="`${index}_placeholder`"
+        >
+          <placeholder-selection :span="span" :page="page" />
+        </template>
+        <template v-if="page.number === selectionPage">
+          <box-selection :page="page" />
+        </template>
       </v-layer>
     </v-stage>
     <b-skeleton
@@ -143,16 +146,18 @@ import { mapState, mapGetters, mapActions } from "vuex";
 import { PIXEL_RATIO } from "../../constants";
 import api from "../../api";
 import BoxSelection from "./BoxSelection";
-import NewAnnotation from "./NewAnnotation";
-import EditAnnotation from "./EditAnnotation";
+import SpanSelection from "./SpanSelection";
+import PlaceholderSelection from "./PlaceholderSelection";
+import AnnotationPopup from "./AnnotationPopup";
 import AnnSetTableOptions from "./AnnSetTableOptions";
 
 export default {
   name: "DocumentPage",
   components: {
     BoxSelection,
-    NewAnnotation,
-    EditAnnotation,
+    SpanSelection,
+    PlaceholderSelection,
+    AnnotationPopup,
     AnnSetTableOptions,
   },
 
@@ -171,12 +176,15 @@ export default {
   data() {
     return {
       image: null,
-      newAnnotation: [],
     };
   },
 
   computed: {
-    ...mapState("selection", ["isSelecting", "selectedEntities"]),
+    ...mapState("selection", [
+      "selectedEntities",
+      "spanSelection",
+      "isSelecting",
+    ]),
     ...mapState("display", [
       "scale",
       "categorizeModalIsActive",
@@ -187,7 +195,6 @@ export default {
     ...mapState("document", [
       "documentAnnotationSelected",
       "recalculatingAnnotations",
-      "editAnnotation",
       "selectedDocument",
       "publicView",
       "annotationId",
@@ -198,7 +205,11 @@ export default {
       "bboxToRect",
       "scaledEntities",
     ]),
-    ...mapGetters("selection", ["isSelectionValid", "isElementSelected"]),
+    ...mapGetters("selection", [
+      "isSelectionValid",
+      "spanSelectionsForPage",
+      "placeholderSelectionForPage",
+    ]),
     ...mapGetters("document", [
       "getAnnotationsFiltered",
       "isAnnotationInEditMode",
@@ -303,12 +314,7 @@ export default {
     scale() {
       this.closePopups();
     },
-    selectedEntities(newValue) {
-      if (!newValue) {
-        this.$store.dispatch("selection/setSpanSelection", null);
-        this.closePopups();
-      }
-    },
+
     page(newValue, oldValue) {
       if (newValue.image_url !== oldValue.image_url) {
         this.drawPage(true);
@@ -337,7 +343,6 @@ export default {
     isAnnotationFocused(annotationId) {
       return (
         this.documentAnnotationSelected &&
-        !this.isElementSelected &&
         annotationId === this.documentAnnotationSelected.id
       );
     },
@@ -353,7 +358,8 @@ export default {
 
       if (
         event.target.getParent() &&
-        event.target.getParent().className === "Transformer"
+        event.target.getParent().className === "Transformer" &&
+        !event.target.name().includes("anchor")
       ) {
         // if we are editing a box then close popups
         this.closePopups();
@@ -369,7 +375,10 @@ export default {
         event.target.name() === "multiAnnBoxTransformer" ||
         event.target.name() === "multiAnnButton" ||
         event.target.name() === "boxSelection" ||
-        event.target.name() === "boxTransformer"
+        event.target.name() === "boxTransformer" ||
+        event.target.name().includes("spanSelection") ||
+        event.target.name().includes("spanTransformer") ||
+        event.target.name().includes("anchor")
       ) {
         return;
       }
@@ -418,104 +427,8 @@ export default {
       this.closePopups();
     },
 
-    handleCreateAnnotationsFromSelection(entities) {
-      if (
-        this.categorizeModalIsActive ||
-        this.publicView ||
-        this.isDocumentReviewed
-      )
-        return;
-      this.newAnnotation = [];
-
-      const normalizedEntities = this.scaledEntities(entities, this.page);
-      if (normalizedEntities) {
-        this.newAnnotation.push(...normalizedEntities);
-      }
-
-      if (this.newAnnotation.length > 0) {
-        this.$store.dispatch(
-          "selection/setSelectedEntities",
-          this.newAnnotation
-        );
-        this.$store.dispatch(
-          "selection/getTextFromEntities",
-          this.newAnnotation
-        );
-      } else {
-        this.$store.dispatch("selection/setSelectedEntities", null);
-      }
-    },
-
-    handleEntitiesFromSelection(entities) {
-      if (
-        this.categorizeModalIsActive ||
-        this.publicView ||
-        this.isDocumentReviewed
-      )
-        return;
-
-      const normalizedEntities = this.scaledEntities(entities, this.page);
-      if (normalizedEntities.length > 0) {
-        this.$store.dispatch(
-          "selection/setSelectedEntities",
-          normalizedEntities
-        );
-        this.$store.dispatch(
-          "selection/getTextFromEntities",
-          normalizedEntities
-        );
-      } else {
-        this.$store.dispatch("selection/setSelectedEntities", null);
-      }
-    },
-
     handleClickedEntity(entity) {
-      if (
-        !entity ||
-        this.categorizeModalIsActive ||
-        this.publicView ||
-        this.isDocumentReviewed
-      )
-        return;
-
-      // Check if we are creating a new Annotation
-      // or if we are removing a previously selected entity
-      // or editing empty one
-      const entityToAdd = entity;
-
-      const found = this.newAnnotation.find(
-        (ann) =>
-          ann.scaled.width === entityToAdd.scaled.width &&
-          ann.original.offset_string === entityToAdd.original.offset_string
-      );
-
-      // reset the selection so that we don't have a drawn rectangle when editing based on entities
-      this.endSelection();
-
-      if (found) {
-        this.newAnnotation = [
-          ...this.newAnnotation.filter(
-            (ann) =>
-              ann.scaled.width !== entityToAdd.scaled.width &&
-              ann.original.offset_string !== entityToAdd.original.offset_string
-          ),
-        ];
-      } else {
-        this.newAnnotation.push(entityToAdd);
-      }
-
-      if (this.newAnnotation.length > 0) {
-        this.$store.dispatch(
-          "selection/setSelectedEntities",
-          this.newAnnotation
-        );
-        this.$store.dispatch(
-          "selection/getTextFromEntities",
-          this.newAnnotation
-        );
-      } else {
-        this.$store.dispatch("selection/setSelectedEntities", null);
-      }
+      this.$store.dispatch("selection/entityClick", entity);
     },
 
     onElementEnter(annotation = null, span = null) {
@@ -593,24 +506,11 @@ export default {
      * Builds the konva config object for the entity.
      */
     entityRect(entity) {
-      let entityIsSelected = false;
-      if (this.selectedEntities && this.selectedEntities.length > 0) {
-        entityIsSelected = this.selectedEntities.find((selectedEntity) => {
-          return (
-            selectedEntity.original &&
-            selectedEntity.original.offset_string ===
-              entity.original.offset_string &&
-            selectedEntity.original.x0 === entity.original.x0 &&
-            selectedEntity.original.y0 === entity.original.y0
-          );
-        });
-      }
-
       return {
         stroke: "#ccc",
         strokeWidth: 1,
         dash: [5, 2],
-        fill: entityIsSelected ? "#67E9B7" : "transparent",
+        fill: "transparent",
         globalCompositeOperation: "multiply",
         transformsEnabled: "position",
         hitStrokeWidth: 0,
@@ -676,7 +576,10 @@ export default {
       }
     },
     closePopups() {
-      this.newAnnotation = [];
+      this.$store.dispatch("selection/entitySelection", {
+        entities: [],
+        selection: null,
+      });
     },
   },
 };

package/src/components/DocumentPage/DocumentToolbar.vue

@@ -225,7 +225,6 @@ export default {
     cancelAnnotationEditMode() {
       this.$store.dispatch("document/resetEditAnnotation");
       this.$store.dispatch("selection/disableSelection");
-      this.$store.dispatch("selection/setSelectedEntities", null);
     },
   },
 };

package/src/components/DocumentPage/PlaceholderSelection.vue

@@ -0,0 +1,51 @@
+<template>
+  <v-group>
+    <v-rect ref="placeholderSelection" :config="placeholderConfig" />
+  </v-group>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+export default {
+  props: {
+    span: {
+      required: true,
+      type: Object,
+    },
+    page: {
+      required: true,
+      type: Object,
+    },
+  },
+  data() {
+    return {
+      selection: {
+        start: null,
+        end: null,
+      },
+    };
+  },
+  computed: {
+    placeholderConfig() {
+      const box = this.bboxToRect(this.page, this.span);
+      const primaryColor = window
+        .getComputedStyle(document.body)
+        .getPropertyValue("--primary-color");
+      return {
+        x: box.x,
+        y: box.y,
+        width: box.width,
+        height: box.height,
+        fill: "transparent",
+        stroke: primaryColor,
+        strokeWidth: 3,
+        globalCompositeOperation: "multiply",
+        shadowForStrokeEnabled: false,
+        name: "placeholderSelection",
+        draggable: false,
+      };
+    },
+    ...mapGetters("display", ["bboxToRect"]),
+  },
+};
+</script>

package/src/components/DocumentPage/SpanSelection.vue

@@ -0,0 +1,259 @@
+<template>
+  <v-group>
+    <v-rect
+      ref="spanSelection"
+      :config="config"
+      :stroke-scale-enabled="false"
+      @dragend="onChange"
+      @transformend="onChange"
+    />
+    <v-transformer
+      v-if="!isSelectionValid"
+      ref="spanTransformer"
+      :config="transformerConfig"
+    />
+  </v-group>
+</template>
+
+<script>
+import { mapGetters, mapState } from "vuex";
+
+export default {
+  props: {
+    id: {
+      required: true,
+      type: Number,
+    },
+    page: {
+      required: true,
+      type: Object,
+    },
+    span: {
+      required: true,
+      type: Object,
+    },
+  },
+  data() {
+    return {
+      selection: {
+        start: null,
+        end: null,
+      },
+      box: {
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0,
+      },
+    };
+  },
+  computed: {
+    /**
+     * Konva options of the selection rectangle, based on the
+     * `selection` object.
+     */
+    config() {
+      const primaryColor = window
+        .getComputedStyle(document.body)
+        .getPropertyValue("--primary-color");
+      return {
+        x: this.box.x,
+        y: this.box.y,
+        width: this.box.width,
+        height: this.box.height,
+        stroke: "#7B61FFB3",
+        fill: `${primaryColor}77`,
+        strokeWidth: 1,
+        globalCompositeOperation: "multiply",
+        shadowForStrokeEnabled: false,
+        perfectDrawEnabled: false,
+        name: `spanSelection_${this.id}`,
+        draggable: true,
+      };
+    },
+    transformerConfig() {
+      return {
+        borderEnabled: false,
+        rotateEnabled: false,
+        ignoreStroke: true,
+        keepRatio: false,
+        anchorStroke: "#7B61FF",
+        anchorSize: 6,
+        name: `spanTransformer_${this.id}`,
+      };
+    },
+    ...mapState("document", ["editAnnotation"]),
+    ...mapGetters("display", ["clientToBbox", "bboxToRect", "scaledEntities"]),
+    ...mapGetters("selection", ["entitiesOnSelection", "isSelectionValid"]),
+  },
+  watch: {
+    box() {
+      this.updateTransformer();
+      this.setSelection();
+    },
+    span() {
+      this.box = this.bboxToRect(this.page, this.span);
+    },
+  },
+  mounted() {
+    this.box = this.bboxToRect(this.page, this.span);
+    this.setSelection();
+    this.$nextTick(() => {
+      this.updateTransformer();
+    });
+  },
+  methods: {
+    setSelection() {
+      this.selection = {
+        start: {
+          x: this.box.x,
+          y: this.box.y,
+        },
+        end: {
+          x: this.box.x + this.box.width,
+          y: this.box.y + this.box.height,
+        },
+      };
+    },
+    startSelection(start) {
+      this.selection.start = start;
+    },
+
+    moveSelection(points) {
+      // only apply when we have a large enough selection, otherwise we risk counting misclicks
+      const xDiff = Math.abs(this.selection.start.x - points.end.x);
+      const yDiff = Math.abs(this.selection.start.y - points.end.y);
+      if (xDiff > 5 && yDiff > 5) {
+        const { start, end } = points;
+        if (start) {
+          this.selection.start = start;
+        }
+        if (end) {
+          this.selection.end = end;
+        }
+      }
+    },
+
+    endSelection(end) {
+      let xDiff;
+      let yDiff;
+
+      if (end) {
+        xDiff = Math.abs(this.selection.start.x - end.x);
+        yDiff = Math.abs(this.selection.start.y - end.y);
+      }
+
+      // if "end" is not provided, start and end points are the same, or if we have a selection smaller than 5x5,
+      // just reset
+      if (
+        !end ||
+        (yDiff <= 5 && xDiff <= 5) ||
+        (this.selection.start.x === end.x && this.selection.start.y == end.y)
+      ) {
+        this.selection.start = null;
+        this.selection.end = null;
+      } else {
+        this.selection.start.x = this.selection.start.x - selectionPadding;
+        this.selection.start.y = this.selection.start.y - selectionPadding;
+
+        end.x = end.x + selectionPadding;
+        end.y = end.y + selectionPadding;
+
+        this.selection.end = end;
+      }
+    },
+    handleSelection() {
+      this.box = {
+        x: this.selection.start.x,
+        y: this.selection.start.y,
+        width: this.selection.end.x - this.selection.start.x,
+        height: this.selection.end.y - this.selection.start.y,
+      };
+
+      const box = this.clientToBbox(
+        this.page,
+        this.selection.start,
+        this.selection.end
+      );
+
+      this.$store.dispatch("selection/entitySelection", {
+        entities: this.scaledEntities(
+          this.entitiesOnSelection(box, this.page),
+          this.page
+        ),
+        selection: box,
+      });
+    },
+    updateTransformer() {
+      // here we need to manually attach or detach Transformer node
+      const transformer = this.$refs.spanTransformer;
+
+      // maybe we're out of sync and the transformer is not available, just return
+      if (!transformer) {
+        return;
+      }
+
+      const transformerNode = transformer.getNode();
+      const stage = transformerNode.getStage();
+      let selectedNode;
+      if (stage) {
+        selectedNode = stage.findOne(`.spanSelection_${this.id}`);
+      }
+
+      // do nothing if selected node is already attached
+      if (selectedNode === transformerNode.node()) {
+        return;
+      }
+
+      if (selectedNode) {
+        // attach to another node
+        transformerNode.nodes([selectedNode]);
+      } else {
+        // remove transformer
+        transformerNode.nodes([]);
+      }
+
+      transformerNode.getLayer().batchDraw();
+    },
+
+    /**
+     * This method is used for both transforms and drags since it just
+     * retrieves the rect's new attributes from the event and uses those
+     * to set the new selection state.
+     */
+    onChange(event) {
+      const { x, y, scaleX, scaleY, skewX, width, height } = event.target.attrs;
+      const realWidth = width * scaleX;
+      const realHeight = height * scaleY;
+      let start;
+      let end;
+
+      // we need to figure out if there's skewing going on, to fix start/end points
+      // (other cases appear to fix themselves automatically)
+      if (skewX >= 0) {
+        start = { x, y };
+        end = {
+          x: start.x + realWidth,
+          y: start.y + realHeight,
+        };
+      } else {
+        end = { x, y };
+        start = { x: end.x - realWidth, y: end.y - realHeight };
+      }
+
+      this.moveSelection({ start, end });
+
+      // reset node's everything after transform (we don't want to deal with that,
+      // just with regular x/y/width/height)
+      const node = this.$refs.spanSelection.getNode();
+      node.skewX(0);
+      node.skewY(0);
+      node.rotation(0);
+      node.scaleX(1);
+      node.scaleY(1);
+
+      this.handleSelection();
+    },
+  },
+};
+</script>

package/src/components/DocumentThumbnails/LoadingThumbnail.vue

@@ -1,9 +1,6 @@
 <template>
-  <div>
-    <b-skeleton
-      width="40px"
-      height="57px"
-    />
+  <div class="loading-thumbnail">
+    <b-skeleton width="40px" height="57px" />
   </div>
 </template>
 
@@ -14,7 +11,7 @@
  */
 
 export default {
-  name: "LoadingThumbnail"
+  name: "LoadingThumbnail",
 };
 </script>
 

package/src/components/DocumentTopBar/DocumentTopBar.vue

@@ -159,7 +159,7 @@ export default {
   created() {
     window.addEventListener("resize", this.handleResize);
   },
-  destroyed() {
+  unmounted() {
     window.removeEventListener("resize", this.handleResize);
   },
   mounted() {
@@ -174,7 +174,9 @@ export default {
       this.$store.dispatch("document/setErrorMessageWidth", width);
     },
     handleResize() {
-      this.setComponentWidth(this.$refs.documentTopBar.offsetWidth);
+      if (this.$refs.documentTopBar) {
+        this.setComponentWidth(this.$refs.documentTopBar.offsetWidth);
+      }
     },
     getPreviousAndNextDocuments(filteredDocuments) {
       if (!filteredDocuments) return;

package/src/constants.js

@@ -2,10 +2,4 @@ export const PIXEL_RATIO = window.devicePixelRatio || 1;
 export const VIEWPORT_RATIO = 0.98;
 export const MINIMUM_APP_WIDTH = 600;
 export const MINIMUM_OPTIMIZED_APP_WIDTH = 950;
-export const TEXT_BREAKPOINT_WIDTH = (locale) => {
-  if (locale === "en") {
-    return 1350;
-  } else {
-    return 1800;
-  }
-};
+export const TEXT_BREAKPOINT_WIDTH = 1800;