@konfuzio/document-validation-ui 0.1.3-pre-release-2 → 0.1.3-pre-release-3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konfuzio/document-validation-ui",
-  "version": "0.1.3-pre-release-2",
+  "version": "0.1.3-pre-release-3",
   "repository": "git://github.com:konfuzio-ai/document-validation-ui.git",
   "main": "dist/app.js",
   "scripts": {

package/src/components/DocumentPage/ScrollingDocument.vue

@@ -88,14 +88,14 @@ export default {
       this.clientHeight = clientHeight;
     },
     /**
-     * Scrolls the ScrollingDocument to the offset specified by scrollTop
+     * Scrolls the ScrollingDocument to the offset specified by scrollTop & scrollLeft (if zoomed in)
      * (i.e., another page).
      */
-    onPageJump(scrollTop) {
-      const actualScroll = scrollTop;
-      this.$refs.scrollingDocument.scrollTop =
-        // the 4 comes from the margin between pages
-        actualScroll - (this.$refs.scrollingDocument.offsetTop + 4);
+    onPageJump(scrollTop, scrollLeft) {
+      const scrollY = scrollTop - (this.$refs.scrollingDocument.offsetTop + 4); // + 4 due to margin between pages
+      const scrollX = scrollLeft - this.$refs.scrollingDocument.offsetLeft - 4; // - 4 to add more space before the entity
+
+      this.$refs.scrollingDocument.scroll(scrollX, scrollY);
     },
   },
 };

package/src/components/DocumentPage/ScrollingPage.vue

@@ -109,7 +109,10 @@ export default {
         // to the focused annotation.
         this.$nextTick(() => {
           // Scroll to the annotation
-          this.scrollTo(this.getYForBbox(this.documentAnnotationSelected.span));
+          this.scrollTo(
+            this.getYForBbox(this.documentAnnotationSelected.span),
+            this.getXForBbox(this.documentAnnotationSelected.span)
+          );
         });
       }
     },
@@ -123,7 +126,7 @@ export default {
         (this.page.number === number || this.page.number === number) &&
         !this.isElementFocused
       ) {
-        this.$emit("page-jump", this.elementTop);
+        this.$emit("page-jump", this.elementTop, 0);
       }
     },
   },
@@ -161,12 +164,16 @@ export default {
       return this.bboxToRect(this.page, bbox).y;
     },
 
+    getXForBbox(bbox) {
+      return this.bboxToRect(this.page, bbox).x;
+    },
+
     /**
      * Scroll to a relative position in the page. It gets added
      * the page's element top and a padding margin.
      */
-    scrollTo(y) {
-      this.$emit("page-jump", this.elementTop + y - 80);
+    scrollTo(y, x) {
+      this.$emit("page-jump", this.elementTop + y - 80, x);
     },
   },
 };