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

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@konfuzio/document-validation-ui",
-  "version": "0.1.13-dev.0",
+  "version": "0.1.13-dev.2",
   "repository": "git://github.com:konfuzio-ai/document-validation-ui.git",
   "main": "dist/app.js",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build --name DocumentValidationUi ./src/main.js",
     "test:unit": "vue-cli-service test:unit",
+    "cypress:open": "cypress open",
     "i18n:report": "vue-cli-service i18n:report --src \"./src/**/*.?(js|vue)\" --locales \"./src/locales/**/*.json\"",
     "lint": "vue-cli-service lint",
     "format": "prettier .  --write",
@@ -52,6 +53,8 @@
     "@vue/test-utils": "^1.1.3",
     "@vue/vue2-jest": "^27.0.0",
     "babel-jest": "^27.0.6",
+    "cypress": "^12.17.3",
+    "dotenv": "^16.3.1",
     "eslint": "^8.30.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-vue": "^9.8.0",

package/src/components/App.cy.js

@@ -0,0 +1,7 @@
+import App from "./App.vue";
+
+describe("<App />", () => {
+  it("renders the app", () => {
+    cy.mount(App);
+  });
+});

package/src/components/DocumentDashboard.vue

@@ -113,6 +113,11 @@ export default {
         this.onDocumentResize();
       }
     },
+    fit(newFit, oldFit) {
+      if (newFit !== oldFit) {
+        this.onDocumentResize();
+      }
+    },
   },
   mounted() {
     this.resizeObserver = new ResizeObserver(this.onDocumentResize);

package/src/components/DocumentPage/DocumentPage.vue

@@ -247,11 +247,7 @@ export default {
     },
 
     ...mapState("selection", ["isSelecting", "selectedEntities"]),
-    ...mapState("display", [
-      "scale",
-      "optimalScale",
-      "categorizeModalIsActive",
-    ]),
+    ...mapState("display", ["scale", "categorizeModalIsActive"]),
     ...mapState("document", [
       "documentAnnotationSelected",
       "recalculatingAnnotations",

package/src/components/DocumentPage/DocumentToolbar.vue

@@ -27,7 +27,14 @@
         class="toolbar-divider"
       />
       <div class="icons icons-right">
-        <div class="fit-zoom icon" @click.prevent.stop="fitAuto">
+        <div
+          :class="[
+            'fit-zoom',
+            'icon',
+            currentPercentage === 50 && 'zoom-disabled',
+          ]"
+          @click.prevent.stop="fitAuto"
+        >
           <FitZoomIcon />
         </div>
         <div
@@ -67,7 +74,6 @@ export default {
   },
   data() {
     return {
-      defaultScale: null,
       currentPercentage: 100,
       maxPercentage: 500,
       defaultPercentage: 0.25,
@@ -101,8 +107,6 @@ export default {
     },
   },
   mounted() {
-    this.defaultScale = this.scale;
-
     if (this.selectedDocument) {
       if (this.documentCannotBeEdited(this.selectedDocument)) {
         this.editModeDisabled = true;
@@ -127,9 +131,8 @@ export default {
 
       // exit edit mode of Annotation if changing zoom during editing
       this.cancelAnnotationEditMode();
-
       this.currentPercentage += this.defaultPercentage * 100;
-      this.updateScale((this.defaultScale * this.currentPercentage) / 100);
+      this.updateScale(this.scale + this.defaultPercentage);
     },
     zoomOut() {
       if (this.currentPercentage === this.defaultPercentage * 100) {
@@ -140,18 +143,15 @@ export default {
       this.cancelAnnotationEditMode();
 
       this.currentPercentage -= this.defaultPercentage * 100;
-      this.updateScale((this.defaultScale * this.currentPercentage) / 100);
+      this.updateScale(this.scale - this.defaultPercentage);
     },
     fitAuto() {
-      if (this.currentPercentage === 50 || !this.defaultScale) return;
-
       // exit edit mode of Annotation if changing zoom during editing
       this.cancelAnnotationEditMode();
 
       // Always set to 50%
-      this.updateScale(this.defaultScale * this.fitPercentage);
-
-      this.currentPercentage = this.fitPercentage * 100;
+      this.currentPercentage = 50;
+      this.$store.dispatch("display/updateFit", "all");
     },
     updateScale(scale) {
       this.$store.dispatch("display/updateFit", "custom").then(() => {

package/src/icons.js

@@ -0,0 +1,43 @@
+// internal icons
+import { library } from "@fortawesome/fontawesome-svg-core";
+import {
+  faArrowUp,
+  faAngleRight,
+  faAngleLeft,
+  faAngleUp,
+  faAngleDown,
+  faSpinner,
+  faPlus,
+  faXmark,
+  faEllipsisVertical,
+  faCircleInfo,
+  faArrowRotateLeft,
+  faArrowRotateRight,
+  faScissors,
+  faRepeat,
+  faArrowLeft,
+  faArrowRight,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon as Icons } from "@fortawesome/vue-fontawesome";
+
+library.add(
+  faArrowUp,
+  faAngleRight,
+  faAngleLeft,
+  faAngleUp,
+  faAngleDown,
+  faSpinner,
+  faXmark,
+  faSpinner,
+  faPlus,
+  faEllipsisVertical,
+  faCircleInfo,
+  faArrowRotateLeft,
+  faArrowRotateRight,
+  faScissors,
+  faRepeat,
+  faArrowLeft,
+  faArrowRight
+);
+
+export default Icons;

package/src/main.js

@@ -1,53 +1,13 @@
+import App from "./components/App";
 import Vue from "vue";
 import Buefy from "buefy";
 import VueKonva from "vue-konva";
-import App from "./components/App";
 import i18n from "./i18n";
 import store from "./store";
-import { library } from "@fortawesome/fontawesome-svg-core";
 import VueObserveVisibility from "vue-observe-visibility";
+import Icons from "./icons";
 
-// internal icons
-import {
-  faArrowUp,
-  faAngleRight,
-  faAngleLeft,
-  faAngleUp,
-  faAngleDown,
-  faSpinner,
-  faPlus,
-  faXmark,
-  faEllipsisVertical,
-  faCircleInfo,
-  faArrowRotateLeft,
-  faArrowRotateRight,
-  faScissors,
-  faRepeat,
-  faArrowLeft,
-  faArrowRight,
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-
-library.add(
-  faArrowUp,
-  faAngleRight,
-  faAngleLeft,
-  faAngleUp,
-  faAngleDown,
-  faSpinner,
-  faXmark,
-  faSpinner,
-  faPlus,
-  faEllipsisVertical,
-  faCircleInfo,
-  faArrowRotateLeft,
-  faArrowRotateRight,
-  faScissors,
-  faRepeat,
-  faArrowLeft,
-  faArrowRight
-);
-Vue.component("VueFontawesome", FontAwesomeIcon);
+Vue.component("VueFontawesome", Icons);
 Vue.component("App", App);
 Vue.use(VueKonva);
 Vue.use(Buefy, {

package/src/store/display.js

@@ -22,7 +22,6 @@ const floor = (value, precision) => {
 
 const state = {
   scale: undefined,
-  optimalScale: undefined,
   fit: "width",
   currentPage: 1,
   optimalResolution: true,
@@ -202,6 +201,14 @@ const actions = {
         const autoScale = Math.min(pageWidthScale, pageHeightScale);
         commit("SET_SCALE", autoScale);
         break;
+      case "all": {
+        commit(
+          "SET_SCALE",
+          getters.pageWidthScale(elementsWidth, client.width, viewport.width) -
+            0.5
+        );
+        break;
+      }
       case "custom": {
         if (scale) {
           commit("SET_SCALE", scale);