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

package/package.json

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

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/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;
       }