@konfuzio/document-validation-ui 0.2.1-dev.0 → 0.2.1-dev.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konfuzio/document-validation-ui",
-  "version": "0.2.1-dev.0",
+  "version": "0.2.1-dev.2",
   "repository": "https://github.com/konfuzio-ai/document-validation-ui",
   "main": "dist/app.js",
   "scripts": {
@@ -36,7 +36,7 @@
     "splitpanes": "^3.1.8",
     "vue": "^3.5.13",
     "vue-i18n": "^10.0.6",
-    "vue-konva": "^3.2.0",
+    "vue-konva": "^3.2.1",
     "vue3-observe-visibility": "^1.0.3",
     "vuedraggable": "^4.1.0",
     "vuex": "^4.1.0"

package/src/components/DocumentAnnotations/AnnotationContent.vue

@@ -62,7 +62,6 @@ export default {
   },
   computed: {
     ...mapGetters("document", ["isAnnotationInEditMode", "isDocumentReviewed"]),
-    ...mapGetters("display", ["bboxToRect"]),
     ...mapState("document", [
       "editAnnotation",
       "publicView",

package/src/components/DocumentPage/DocumentPage.vue

@@ -554,21 +554,18 @@ export default {
     },
     getAnnotationLabelPosition(annotation) {
       if (annotation && this.$refs.stage) {
-        const padding = 8;
         const maxCharacters = 10;
         const minimumSpaceTopY = 50;
-        const rect = this.bboxToRect(this.page, annotation.span, true);
+        const rect = this.bboxToRect(this.page, annotation.span);
 
         if (
           annotation.labelName.length > maxCharacters &&
           rect.y < minimumSpaceTopY
         ) {
-          return `left: ${rect.x}px; top: ${
-            rect.y + rect.height * 3 + padding
-          }px`;
+          return `left: ${rect.x}px; top: ${rect.y + rect.height}px`;
         } else {
           return `left: ${rect.x}px; bottom: ${
-            this.$refs.stage.$el.clientHeight - rect.y - rect.height - padding
+            this.$refs.stage.$el.clientHeight - rect.y
           }px`;
         }
       } else {

package/src/components/DocumentPage/ScrollingDocument.vue

@@ -1,10 +1,6 @@
 <template>
   <div id="scrolling-document">
-    <div
-      ref="scrollingDocument"
-      v-scroll.immediate="updateScrollBounds"
-      class="scrolling-document"
-    >
+    <div ref="scrollingDocument" class="scrolling-document">
       <transition :name="searchEnabled ? 'slide-down' : 'slide-up'">
         <SearchBar v-if="searchEnabled" />
       </transition>
@@ -114,6 +110,7 @@ export default {
       this.$refs.scrollingDocument.scroll(scrollX, scrollY);
     },
     handleScroll() {
+      this.updateScrollBounds();
       if (this.pages.length === 1) return;
 
       this.isScrolling = true;

package/src/components/DocumentPage/SpanSelection.vue

@@ -121,15 +121,17 @@ export default {
 
     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;
+      if (this.selection) {
+        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;
+          }
         }
       }
     },

package/src/components/DocumentThumbnails/DocumentThumbnails.vue

@@ -1,9 +1,8 @@
 <template>
   <div id="document-pages" ref="documentThumbnails">
-    <div v-if="selectedDocument">
+    <div v-if="selectedDocument" ref="docPage">
       <div
         v-for="page in selectedDocument.pages"
-        ref="docPage"
         :key="page.id"
         :class="[
           'document-thumbnail',
@@ -76,21 +75,12 @@ export default {
   },
   watch: {
     currentPage(newPage) {
-      if (!newPage) return;
+      if (!newPage || newPage == this.thumbnailClicked) return;
 
       // handle thumbnail selection when scrolling the document
       this.scrollToThumbnail(newPage);
     },
   },
-  mounted() {
-    const scrollingPage = document.querySelector(".scrolling-document");
-
-    if (scrollingPage) {
-      scrollingPage.addEventListener("scroll", () => {
-        this.scrollToThumbnail();
-      });
-    }
-  },
 
   methods: {
     /* Change page if not the currently open and not in modal */
@@ -109,17 +99,10 @@ export default {
 
     scrollToThumbnail(page) {
       // select only the active thumbnail
-      const selectedPage = this.$refs.docPage.filter((image) =>
-        image.className.includes("selected")
-      );
-
-      if (page == this.thumbnailClicked) {
-        this.thumbnailClicked = null;
-      }
-
-      if (!this.thumbnailClicked && selectedPage && selectedPage[0]) {
-        selectedPage[0].scrollIntoView();
-      }
+      this.thumbnailClicked = null;
+      this.$refs.docPage.children[page - 1].scrollIntoView({
+        behavior: "smooth",
+      });
     },
   },
 };

package/src/store/display.js

@@ -270,7 +270,11 @@ const actions = {
         commit("SET_SCALE", autoScale);
         break;
       case "all": {
-        const widthScale = getters.pageWidthScale(elementsWidth, client.width, viewport.width);
+        const widthScale = getters.pageWidthScale(
+          elementsWidth,
+          client.width,
+          viewport.width
+        );
         commit("SET_SCALE", widthScale);
         break;
       }

package/src/store/selection.js

@@ -75,10 +75,12 @@ const actions = {
 
   moveSelection: ({ commit, state, dispatch }, points) => {
     // only apply when we have a large enough selection, otherwise we risk counting misclicks
-    const xDiff = Math.abs(state.selection.start.x - points.end.x);
-    const yDiff = Math.abs(state.selection.start.y - points.end.y);
-    if (xDiff > 5 && yDiff > 5) {
-      commit("MOVE_SELECTION", points);
+    if (state.selection && state.selection.start) {
+      const xDiff = Math.abs(state.selection.start.x - points.end.x);
+      const yDiff = Math.abs(state.selection.start.y - points.end.y);
+      if (xDiff > 5 && yDiff > 5) {
+        commit("MOVE_SELECTION", points);
+      }
     }
   },