@konfuzio/document-validation-ui 0.1.59 → 0.1.60-dev.0

package/package.json

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

package/src/components/DocumentPage/DocumentToolbar.vue

@@ -105,6 +105,7 @@ export default {
   data() {
     return {
       currentPercentage: 100,
+      fitWidthScale: 1, // baseline for 100%
       maxPercentage: 500,
       defaultPercentage: 0.25,
       fitPercentage: 0.5,
@@ -136,6 +137,13 @@ export default {
         this.editModeDisabled = true;
       }
     },
+    scale(newScale) {
+      if (this.fitWidthScale > 0) {
+        this.currentPercentage = Math.round((newScale / this.fitWidthScale) * 100);
+      } else {
+        this.currentPercentage = Math.round(newScale * 100);
+      }
+    },
   },
   mounted() {
     if (this.selectedDocument) {
@@ -178,12 +186,13 @@ export default {
       this.updateScale(this.scale - this.defaultPercentage);
     },
     fitAuto() {
-      // exit edit mode of Annotation if changing zoom during editing
       this.cancelAnnotationEditMode();
-
-      // Always set to 50%
-      this.currentPercentage = 50;
-      this.$store.dispatch("display/updateFit", "all");
+      this.$store.dispatch("display/updateFit", "all").then(() => {
+        this.$nextTick(() => {
+          this.fitWidthScale = this.scale;
+          this.currentPercentage = 100;
+        });
+      });
     },
     updateScale(scale) {
       this.$store.dispatch("display/updateFit", "custom").then(() => {

package/src/components/DocumentPage/ScrollingPage.vue

@@ -1,7 +1,7 @@
 <template>
-  <div>
+  <div v-observe-visibility="visibilityChanged">
     <DummyPage
-      v-if="!loadedPage || !pageInVisibleRange(page)"
+      v-if="!loadedPage"
       :width="page.size[0]"
       :height="page.size[1]"
     />
@@ -179,6 +179,14 @@ export default {
           this.pageBeingLoaded = false;
         });
     },
+    visibilityChanged(isVisible) {
+      if (isVisible && !this.loadedPage && !this.pageBeingLoaded) {
+        this.loadPage();
+      }
+      if (!isVisible && this.loadedPage) {
+        this.$store.dispatch("document/unloadDocumentPage", this.page.number);
+      }
+    },
     pageInVisibleRange(page) {
       return (
         this.currentPage === page.number ||

package/src/store/display.js

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

package/src/store/document.js

@@ -1541,6 +1541,9 @@ const actions = {
   showAcceptedAnnotations({ commit }, show) {
     commit("SET_SHOW_ACCEPTED_ANNOTATIONS", show);
   },
+  unloadDocumentPage: ({ commit }, pageNumber) => {
+    commit("REMOVE_PAGE", pageNumber);
+  },
 };
 
 const mutations = {
@@ -1814,6 +1817,9 @@ const mutations = {
   SET_SHOW_FEEDBACK_NEEDED_ANNOTATIONS: (state, show) => {
     state.annotationFilters.showFeedbackNeeded = show;
   },
+  REMOVE_PAGE: (state, pageNumber) => {
+    state.pages = state.pages.filter((p) => p.number !== pageNumber);
+  },
 };
 
 export default {