@konfuzio/document-validation-ui 0.2.0-dev.2 → 0.2.0

package/package.json

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

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

@@ -270,11 +270,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

@@ -1604,6 +1604,12 @@ const actions = {
   showAcceptedAnnotations({ commit }, show) {
     commit("SET_SHOW_ACCEPTED_ANNOTATIONS", show);
   },
+  unloadDocumentPage: ({ commit }, pageNumber) => {
+    commit("REMOVE_PAGE", pageNumber);
+  },
+  putNextAnnotationInLabelFirst({ commit }, label) {
+    commit("PUT_NEXT_ANN_IN_LABEL_FIRST", label);
+  },
   setAnnotationAsFirstInLabel({ commit, state }, { label, annotation }) {
     state.annotationSets.forEach((annotationSet) => {
       annotationSet.labels.forEach((labelToFind) => {
@@ -1935,6 +1941,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 {