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

package/package.json

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

package/src/components/App.vue

@@ -129,6 +129,12 @@ export default {
       required: false,
       default: "false",
     },
+    // eslint-disable-next-line vue/prop-name-casing
+    annotation_content_width: {
+      type: String,
+      required: false,
+      default: "60",
+    },
   },
   computed: {
     ...mapState("display", ["pageError"]),
@@ -258,6 +264,13 @@ export default {
         return this.hide_empty_label_sets === "true";
       }
     },
+    annotationContentWidth() {
+      if (process.env.VUE_APP_ANNOTATION_CONTENT_WIDTH) {
+        return process.env.VUE_APP_ANNOTATION_CONTENT_WIDTH;
+      } else {
+        return this.annotation_content_width;
+      }
+    },
   },
   async created() {
     // Sentry config
@@ -305,6 +318,10 @@ export default {
     // document and project config
     Promise.all([
       this.$store.dispatch("display/setDetailsUrl", this.detailsUrl),
+      this.$store.dispatch(
+        "display/setAnnotationWidth",
+        this.annotationContentWidth
+      ),
       this.$store.dispatch(
         "display/hideEmptyLabelSets",
         this.hideEmptyLabelSets

package/src/components/DocumentDashboard.vue

@@ -156,26 +156,28 @@ export default {
       return elementsWidth;
     },
     onDocumentResize() {
-      this.documentContainerLeftPadding =
-        this.$refs.scrollingDocument.$el.getBoundingClientRect().left;
-      this.documentContainerWidth =
-        this.$refs.scrollingDocument.$el.offsetWidth;
-      this.$store.dispatch(
-        "display/updateOptimalResolution",
-        this.$el.offsetWidth
-      );
-      if (this.selectedDocument.pages[0]) {
-        this.$store.dispatch("display/updateScale", {
-          elementsWidth: this.elementsWidth(),
-          client: {
-            width: this.$el.clientWidth,
-            height: this.$el.clientHeight,
-          },
-          viewport: {
-            width: this.selectedDocument.pages[0].size[0],
-            height: this.selectedDocument.pages[0].size[1],
-          },
-        });
+      if (this.$refs.scrollingDocument) {
+        this.documentContainerLeftPadding =
+          this.$refs.scrollingDocument.$el.getBoundingClientRect().left;
+        this.documentContainerWidth =
+          this.$refs.scrollingDocument.$el.offsetWidth;
+        this.$store.dispatch(
+          "display/updateOptimalResolution",
+          this.$el.offsetWidth
+        );
+        if (this.selectedDocument.pages[0]) {
+          this.$store.dispatch("display/updateScale", {
+            elementsWidth: this.elementsWidth(),
+            client: {
+              width: this.$el.clientWidth,
+              height: this.$el.clientHeight,
+            },
+            viewport: {
+              width: this.selectedDocument.pages[0].size[0],
+              height: this.selectedDocument.pages[0].size[1],
+            },
+          });
+        }
       }
     },
   },

package/src/main.js

@@ -8,6 +8,11 @@ import VueObserveVisibility from "vue-observe-visibility";
 import Icons from "./icons";
 import VueSplit from "vue-split-panel";
 
+// Log app version
+console.log(
+  `${require("../package.json").name} ${require("../package.json").version}`
+);
+
 Vue.component("VueFontawesome", Icons);
 Vue.component("App", App);
 Vue.use(VueKonva);

package/src/store/display.js

@@ -316,6 +316,16 @@ const actions = {
     commit("SET_LABEL_WIDTH", value);
     commit("SET_ANNOTATION_WIDTH", 100 - value);
   },
+  setAnnotationWidth: ({ commit }, value) => {
+    const width = Number(value);
+    if (width && width >= 20) {
+      commit("SET_ANNOTATION_WIDTH", width);
+      commit("SET_LABEL_WIDTH", 100 - width);
+    } else {
+      commit("SET_ANNOTATION_WIDTH", 60);
+      commit("SET_LABEL_WIDTH", 40);
+    }
+  },
 
   debounceSearch: debounce(({ commit, dispatch }, query) => {
     dispatch("search", query);