@konfuzio/document-validation-ui 0.2.5-dev.0 → 0.2.6-dev.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konfuzio/document-validation-ui",
-  "version": "0.2.5-dev.0",
+  "version": "0.2.6-dev.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.6",
+    "vue-i18n": "^10.0.8",
     "vue-konva": "^3.2.1",
     "vue3-observe-visibility": "^1.0.3",
     "vuedraggable": "^4.1.0",

package/src/assets/scss/document_page.scss

@@ -16,7 +16,10 @@
     background-color: variables.$text-color;
     color: variables.$white;
     font-size: 12px;
-    padding: 4px;
+    padding: 5px;
     word-break: break-all;
+    border-radius: 5px;
+    font-family: variables.$font-family;
+    font-weight: 500;
   }
 }

package/src/assets/scss/theme.scss

@@ -59,6 +59,16 @@
     color: variables.$primary;
   }
 
+  .v-enter-active,
+  .v-leave-active {
+    transition: opacity 0.2s ease-in-out;
+  }
+
+  .v-enter-from,
+  .v-leave-to {
+    opacity: 0;
+  }
+
   button {
     &.is-primary {
       background-color: variables.$primary !important;

package/src/components/DocumentDashboard.vue

@@ -3,7 +3,7 @@
     <DocumentTopBar />
     <div :class="['dashboard-viewer', renameAndCategorize ? 'edit-mode' : '']">
       <DocumentThumbnails v-if="!editMode" ref="documentPages" />
-      <splitpanes class="default-theme">
+      <splitpanes class="default-theme" style="overflow:hidden;">
         <pane :size="50" :min-size="10">
           <ScrollingDocument
             ref="scrollingDocument"

package/src/components/DocumentPage/DocumentPage.vue

@@ -20,14 +20,15 @@
       @close="closePopups"
     />
 
-    <div
-      v-if="showAnnotationLabel"
-      class="annotation-label"
-      :style="getAnnotationLabelPosition(showAnnotationLabel)"
-    >
-      {{ showAnnotationLabel.labelName }}
-    </div>
-
+    <Transition>
+      <div
+        v-if="showAnnotationLabel"
+        class="annotation-label"
+        :style="getAnnotationLabelPosition(showAnnotationLabel)"
+      >
+        {{ showAnnotationLabel && showAnnotationLabel.labelName }}
+      </div>
+    </Transition>
     <AnnSetTableOptions v-if="showAnnSetTable" :page="page" />
 
     <v-stage
@@ -527,9 +528,9 @@ export default {
     annotationRect(bbox, annotationId, draggable) {
       const selected = this.annotationId == annotationId && !this.searchEnabled;
       const focused = this.isAnnotationFocused(annotationId);
-      let fillColor = "yellow";
-      let strokeWidth = 0;
-      let strokeColor = "";
+      let fillColor = "#c6ff91";
+      let strokeWidth = 0.4;
+      let strokeColor = "black";
 
       // if annotation is selected
       if (selected) {
@@ -539,7 +540,7 @@ export default {
       } // if hovered
       else if (focused) {
         fillColor = "#67E9B7";
-        strokeWidth = 1;
+        strokeWidth = 0.6;
         strokeColor = "black";
       }
       return {
@@ -549,7 +550,8 @@ export default {
         stroke: strokeColor,
         name: "annotation",
         draggable,
-        ...this.bboxToRect(this.page, bbox),
+        cornerRadius: 2,
+        ...this.bboxToRect(this.page, bbox, focused),
       };
     },
     getAnnotationLabelPosition(annotation) {

package/src/store/display.js

@@ -153,7 +153,7 @@ const getters = {
     },
   bboxToRect:
     (state, getters) =>
-    (page, bbox, hasOffset = false) => {
+    (page, bbox, hasPadding = false) => {
       const imageScale = getters.imageScale(page);
       if (bbox.x0 && bbox.y0) {
         const { x0, x1, y0, y1 } = bbox;
@@ -161,7 +161,7 @@ const getters = {
         const rect = {
           // left
           x: new BigNumber(x0)
-            .minus(hasOffset ? 1 : 0)
+            .minus(hasPadding ? 1 : 0)
             .times(state.scale)
             .times(imageScale)
             .div(PIXEL_RATIO)
@@ -169,13 +169,14 @@ const getters = {
           // top
           y: pageHeight
             .minus(new BigNumber(y1))
-            .minus(hasOffset ? 17.1 : 0)
+            .minus(hasPadding ? 1 : 0)
             .times(state.scale)
             .times(imageScale)
             .div(PIXEL_RATIO)
             .toNumber(),
           width: new BigNumber(x1)
             .minus(x0)
+            .plus(hasPadding ? 2 : 0)
             .abs()
             .times(state.scale)
             .times(imageScale)
@@ -183,6 +184,7 @@ const getters = {
             .toNumber(),
           height: new BigNumber(y1)
             .minus(y0)
+            .plus(hasPadding ? 2 : 0)
             .times(state.scale)
             .times(imageScale)
             .div(PIXEL_RATIO)

package/src/store/selection.js

@@ -88,27 +88,29 @@ const actions = {
     let xDiff;
     let yDiff;
 
-    if (end) {
-      xDiff = Math.abs(state.selection.start.x - end.x);
-      yDiff = Math.abs(state.selection.start.y - end.y);
-    }
+    if (state.selection && state.selection.start) {
+      if (end) {
+        xDiff = Math.abs(state.selection.start.x - end.x);
+        yDiff = Math.abs(state.selection.start.y - end.y);
+      }
 
-    // if "end" is not provided, start and end points are the same, or if we have a selection smaller than 5x5,
-    // just reset
-    if (
-      !end ||
-      (yDiff <= 5 && xDiff <= 5) ||
-      (state.selection.start.x === end.x && state.selection.start.y == end.y)
-    ) {
-      commit("RESET_SELECTION");
-    } else {
-      state.selection.start.x = state.selection.start.x - selectionPadding;
-      state.selection.start.y = state.selection.start.y - selectionPadding;
+      // if "end" is not provided, start and end points are the same, or if we have a selection smaller than 5x5,
+      // just reset
+      if (
+        !end ||
+        (yDiff <= 5 && xDiff <= 5) ||
+        (state.selection.start.x === end.x && state.selection.start.y == end.y)
+      ) {
+        commit("RESET_SELECTION");
+      } else {
+        state.selection.start.x = state.selection.start.x - selectionPadding;
+        state.selection.start.y = state.selection.start.y - selectionPadding;
 
-      end.x = end.x + selectionPadding;
-      end.y = end.y + selectionPadding;
+        end.x = end.x + selectionPadding;
+        end.y = end.y + selectionPadding;
 
-      commit("END_SELECTION", end);
+        commit("END_SELECTION", end);
+      }
     }
   },