@konfuzio/document-validation-ui 0.1.19-dev.1 → 0.1.19

package/src/components/DocumentPage/ScrollingDocument.vue

@@ -1,149 +1,149 @@
-<template>
-  <div id="scrolling-document">
-    <div
-      ref="scrollingDocument"
-      v-scroll.immediate="updateScrollBounds"
-      class="scrolling-document"
-    >
-      <div
-        v-if="
-          selectedDocument && scale && !loading && !recalculatingAnnotations
-        "
-      >
-        <ScrollingPage
-          v-for="page in editMode ? pagesForPostprocess : pages"
-          :key="page.number"
-          ref="scrollingPage"
-          :page="page"
-          :client-height="clientHeight"
-          :scroll-top="scrollTop"
-          class="scrolling-page"
-          @page-jump="onPageJump"
-        />
-      </div>
-
-      <div v-else class="loading-page">
-        <b-skeleton width="100%" height="1000px" />
-      </div>
-    </div>
-    <Toolbar v-if="showToolbar" />
-    <ActionBar v-if="showActionBar" />
-  </div>
-</template>
-<script>
-import { mapState, mapGetters } from "vuex";
-import scroll from "../../directives/scroll";
-import ScrollingPage from "./ScrollingPage";
-import Toolbar from "./DocumentToolbar";
-import ActionBar from "./ActionBar";
-
-export default {
-  components: {
-    ScrollingPage,
-    Toolbar,
-    ActionBar,
-  },
-  directives: {
-    scroll,
-  },
-
-  data() {
-    return {
-      scrollTop: 0,
-      clientHeight: 0,
-      isScolling: false,
-      scrollTimeout: null,
-    };
-  },
-
-  computed: {
-    ...mapState("document", [
-      "recalculatingAnnotations",
-      "selectedDocument",
-      "loading",
-      "annotationSets",
-    ]),
-    ...mapState("edit", [
-      "editMode",
-      "documentPagesListForEditMode",
-      "pagesForPostprocess",
-    ]),
-    ...mapState("display", [
-      "scale",
-      "documentActionBar",
-      "pageChangedFromThumbnail",
-      "currentPage",
-    ]),
-    ...mapGetters("display", ["visiblePageRange"]),
-
-    pages() {
-      if (this.selectedDocument) {
-        return this.selectedDocument.pages;
-      } else {
-        return [];
-      }
-    },
-    showToolbar() {
-      return (
-        !this.loading &&
-        this.pages.length > 0 &&
-        this.scale &&
-        !this.documentActionBar
-      );
-    },
-    showActionBar() {
-      return this.documentActionBar !== null;
-    },
-  },
-  watch: {
-    loading() {
-      this.scrollTop = 0;
-    },
-  },
-  mounted() {
-    this.$refs.scrollingDocument.addEventListener("scroll", this.handleScroll);
-  },
-
-  methods: {
-    updateScrollBounds() {
-      const { scrollTop, clientHeight } = this.$refs.scrollingDocument;
-      this.scrollTop = scrollTop;
-      this.clientHeight = clientHeight;
-    },
-    /**
-     * Scrolls the ScrollingDocument to the offset specified by scrollTop & scrollLeft (if zoomed in)
-     * (i.e., another page).
-     */
-    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);
-    },
-    handleScroll() {
-      if (this.pages.length === 1) return;
-
-      this.isScrolling = true;
-
-      clearTimeout(this.scrollTimeout);
-
-      this.scrollTimeout = setTimeout(() => {
-        this.isScrolling = false;
-
-        if (
-          this.pageChangedFromThumbnail &&
-          this.visiblePageRange[1] === this.currentPage
-        ) {
-          this.$store.dispatch("display/setPageChangedFromThumbnail", false);
-        }
-      }, 300);
-    },
-  },
-};
-</script>
-
-<style
-  scoped
-  lang="scss"
-  src="../../assets/scss/scrolling_document.scss"
-></style>
+<template>
+  <div id="scrolling-document">
+    <div
+      ref="scrollingDocument"
+      v-scroll.immediate="updateScrollBounds"
+      class="scrolling-document"
+    >
+      <div
+        v-if="
+          selectedDocument && scale && !loading && !recalculatingAnnotations
+        "
+      >
+        <ScrollingPage
+          v-for="page in editMode ? pagesForPostprocess : pages"
+          :key="page.number"
+          ref="scrollingPage"
+          :page="page"
+          :client-height="clientHeight"
+          :scroll-top="scrollTop"
+          class="scrolling-page"
+          @page-jump="onPageJump"
+        />
+      </div>
+
+      <div v-else class="loading-page">
+        <b-skeleton width="100%" height="1000px" />
+      </div>
+    </div>
+    <Toolbar v-if="showToolbar" />
+    <ActionBar v-if="showActionBar" />
+  </div>
+</template>
+<script>
+import { mapState, mapGetters } from "vuex";
+import scroll from "../../directives/scroll";
+import ScrollingPage from "./ScrollingPage";
+import Toolbar from "./DocumentToolbar";
+import ActionBar from "./ActionBar";
+
+export default {
+  components: {
+    ScrollingPage,
+    Toolbar,
+    ActionBar,
+  },
+  directives: {
+    scroll,
+  },
+
+  data() {
+    return {
+      scrollTop: 0,
+      clientHeight: 0,
+      isScolling: false,
+      scrollTimeout: null,
+    };
+  },
+
+  computed: {
+    ...mapState("document", [
+      "recalculatingAnnotations",
+      "selectedDocument",
+      "loading",
+      "annotationSets",
+    ]),
+    ...mapState("edit", [
+      "editMode",
+      "documentPagesListForEditMode",
+      "pagesForPostprocess",
+    ]),
+    ...mapState("display", [
+      "scale",
+      "documentActionBar",
+      "pageChangedFromThumbnail",
+      "currentPage",
+    ]),
+    ...mapGetters("display", ["visiblePageRange"]),
+
+    pages() {
+      if (this.selectedDocument) {
+        return this.selectedDocument.pages;
+      } else {
+        return [];
+      }
+    },
+    showToolbar() {
+      return (
+        !this.loading &&
+        this.pages.length > 0 &&
+        this.scale &&
+        !this.documentActionBar
+      );
+    },
+    showActionBar() {
+      return this.documentActionBar !== null;
+    },
+  },
+  watch: {
+    loading() {
+      this.scrollTop = 0;
+    },
+  },
+  mounted() {
+    this.$refs.scrollingDocument.addEventListener("scroll", this.handleScroll);
+  },
+
+  methods: {
+    updateScrollBounds() {
+      const { scrollTop, clientHeight } = this.$refs.scrollingDocument;
+      this.scrollTop = scrollTop;
+      this.clientHeight = clientHeight;
+    },
+    /**
+     * Scrolls the ScrollingDocument to the offset specified by scrollTop & scrollLeft (if zoomed in)
+     * (i.e., another page).
+     */
+    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);
+    },
+    handleScroll() {
+      if (this.pages.length === 1) return;
+
+      this.isScrolling = true;
+
+      clearTimeout(this.scrollTimeout);
+
+      this.scrollTimeout = setTimeout(() => {
+        this.isScrolling = false;
+
+        if (
+          this.pageChangedFromThumbnail &&
+          this.visiblePageRange[1] === this.currentPage
+        ) {
+          this.$store.dispatch("display/setPageChangedFromThumbnail", false);
+        }
+      }, 300);
+    },
+  },
+};
+</script>
+
+<style
+  scoped
+  lang="scss"
+  src="../../assets/scss/scrolling_document.scss"
+></style>

package/src/components/DocumentPage/ScrollingPage.vue

@@ -1,179 +1,179 @@
-<template>
-  <div>
-    <DummyPage
-      v-if="!loadedPage || !pageInVisibleRange(page)"
-      :width="page.size[0]"
-      :height="page.size[1]"
-    />
-    <DocumentPage v-else :page="loadedPage" />
-  </div>
-</template>
-
-<script>
-import { mapGetters, mapState } from "vuex";
-import DocumentPage from "../DocumentPage/DocumentPage";
-import DummyPage from "../DocumentPage/DummyPage";
-
-export default {
-  name: "ScrollingPage",
-
-  components: {
-    DocumentPage,
-    DummyPage,
-  },
-
-  props: {
-    page: {
-      type: Object,
-      required: true,
-    },
-    scrollTop: {
-      type: Number,
-      required: true,
-    },
-    clientHeight: {
-      type: Number,
-      required: true,
-    },
-  },
-
-  data() {
-    return {
-      elementTop: 0,
-      elementHeight: 0,
-      previousFocusedAnnotation: null,
-      previousY: null,
-      pageBeingLoaded: false,
-      isScrolling: false,
-    };
-  },
-
-  computed: {
-    ...mapState("display", ["pageChangedFromThumbnail"]),
-    ...mapGetters("display", ["visiblePageRange", "bboxToRect"]),
-    ...mapGetters("document", ["scrollDocumentToAnnotation"]),
-
-    loadedPage() {
-      if (this.editMode) {
-        return this.page;
-      }
-      let loadedPage = null;
-      if (this.page && this.pages) {
-        loadedPage = this.pages.find((p) => p.number === this.page.number);
-      }
-      if (!loadedPage && this.pageInVisibleRange(this.page)) {
-        if (!this.pageBeingLoaded) {
-          this.loadPage();
-        }
-      }
-      return loadedPage;
-    },
-
-    isElementFocused() {
-      const { elementTop, bottom, elementHeight, scrollTop, clientHeight } =
-        this;
-      if (!elementHeight) return;
-
-      const halfHeight = elementHeight / 2;
-      const halfScreen = clientHeight / 2;
-      const delta = elementHeight >= halfScreen ? halfScreen : halfHeight;
-      const threshold = scrollTop + delta;
-
-      return elementTop < threshold && bottom >= threshold;
-    },
-
-    bottom() {
-      return this.elementTop + this.elementHeight;
-    },
-
-    scrollBottom() {
-      return this.scrollTop + this.clientHeight;
-    },
-
-    ...mapState("display", ["currentPage"]),
-    ...mapState("document", ["pages", "documentAnnotationSelected", "loading"]),
-    ...mapState("edit", ["editMode"]),
-  },
-
-  watch: {
-    scrollTop: "updateElementBounds",
-    clientHeight: "updateElementBounds",
-
-    /**
-     * Scroll to the focused annotation if it changes and it's on this page.
-     */
-    scrollDocumentToAnnotation(isToScroll) {
-      if (
-        isToScroll &&
-        this.documentAnnotationSelected.page === this.page.number
-      ) {
-        // We wait for the page to be focused before actually scrolling
-        // to the focused annotation.
-        this.$nextTick(() => {
-          // Scroll to the annotation
-          this.scrollTo(
-            this.getYForBbox(this.documentAnnotationSelected.span),
-            this.getXForBbox(this.documentAnnotationSelected.span)
-          );
-        });
-      }
-    },
-    isElementFocused(focused) {
-      if (!this.loading && focused && !this.pageChangedFromThumbnail) {
-        this.$store.dispatch("display/updateCurrentPage", this.page.number);
-      }
-    },
-    currentPage(number) {
-      if (this.page.number === number && !this.isElementFocused) {
-        this.$emit("page-jump", this.elementTop, 0);
-      }
-    },
-  },
-  mounted() {
-    this.updateElementBounds();
-  },
-
-  methods: {
-    loadPage() {
-      this.pageBeingLoaded = true;
-      this.$store
-        .dispatch("document/fetchDocumentPage", this.page.number)
-        .then(() => {
-          this.pageBeingLoaded = false;
-        });
-    },
-    pageInVisibleRange(page) {
-      return (
-        this.currentPage === page.number ||
-        this.visiblePageRange.includes(page.number)
-      );
-    },
-    updateElementBounds() {
-      const { offsetTop, offsetHeight } = this.$el;
-      this.elementTop = offsetTop;
-      this.elementHeight = offsetHeight;
-    },
-
-    /**
-     * Calculate the y-position of this bbox on the page
-     * from its top, the scale and the image scale (calculated
-     * from the page object).
-     */
-    getYForBbox(bbox) {
-      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, x) {
-      this.$emit("page-jump", this.elementTop + y - 80, x);
-    },
-  },
-};
-</script>
+<template>
+  <div>
+    <DummyPage
+      v-if="!loadedPage || !pageInVisibleRange(page)"
+      :width="page.size[0]"
+      :height="page.size[1]"
+    />
+    <DocumentPage v-else :page="loadedPage" />
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapState } from "vuex";
+import DocumentPage from "../DocumentPage/DocumentPage";
+import DummyPage from "../DocumentPage/DummyPage";
+
+export default {
+  name: "ScrollingPage",
+
+  components: {
+    DocumentPage,
+    DummyPage,
+  },
+
+  props: {
+    page: {
+      type: Object,
+      required: true,
+    },
+    scrollTop: {
+      type: Number,
+      required: true,
+    },
+    clientHeight: {
+      type: Number,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      elementTop: 0,
+      elementHeight: 0,
+      previousFocusedAnnotation: null,
+      previousY: null,
+      pageBeingLoaded: false,
+      isScrolling: false,
+    };
+  },
+
+  computed: {
+    ...mapState("display", ["pageChangedFromThumbnail"]),
+    ...mapGetters("display", ["visiblePageRange", "bboxToRect"]),
+    ...mapGetters("document", ["scrollDocumentToAnnotation"]),
+
+    loadedPage() {
+      if (this.editMode) {
+        return this.page;
+      }
+      let loadedPage = null;
+      if (this.page && this.pages) {
+        loadedPage = this.pages.find((p) => p.number === this.page.number);
+      }
+      if (!loadedPage && this.pageInVisibleRange(this.page)) {
+        if (!this.pageBeingLoaded) {
+          this.loadPage();
+        }
+      }
+      return loadedPage;
+    },
+
+    isElementFocused() {
+      const { elementTop, bottom, elementHeight, scrollTop, clientHeight } =
+        this;
+      if (!elementHeight) return;
+
+      const halfHeight = elementHeight / 2;
+      const halfScreen = clientHeight / 2;
+      const delta = elementHeight >= halfScreen ? halfScreen : halfHeight;
+      const threshold = scrollTop + delta;
+
+      return elementTop < threshold && bottom >= threshold;
+    },
+
+    bottom() {
+      return this.elementTop + this.elementHeight;
+    },
+
+    scrollBottom() {
+      return this.scrollTop + this.clientHeight;
+    },
+
+    ...mapState("display", ["currentPage"]),
+    ...mapState("document", ["pages", "documentAnnotationSelected", "loading"]),
+    ...mapState("edit", ["editMode"]),
+  },
+
+  watch: {
+    scrollTop: "updateElementBounds",
+    clientHeight: "updateElementBounds",
+
+    /**
+     * Scroll to the focused annotation if it changes and it's on this page.
+     */
+    scrollDocumentToAnnotation(isToScroll) {
+      if (
+        isToScroll &&
+        this.documentAnnotationSelected.page === this.page.number
+      ) {
+        // We wait for the page to be focused before actually scrolling
+        // to the focused annotation.
+        this.$nextTick(() => {
+          // Scroll to the annotation
+          this.scrollTo(
+            this.getYForBbox(this.documentAnnotationSelected.span),
+            this.getXForBbox(this.documentAnnotationSelected.span)
+          );
+        });
+      }
+    },
+    isElementFocused(focused) {
+      if (!this.loading && focused && !this.pageChangedFromThumbnail) {
+        this.$store.dispatch("display/updateCurrentPage", this.page.number);
+      }
+    },
+    currentPage(number) {
+      if (this.page.number === number && !this.isElementFocused) {
+        this.$emit("page-jump", this.elementTop, 0);
+      }
+    },
+  },
+  mounted() {
+    this.updateElementBounds();
+  },
+
+  methods: {
+    loadPage() {
+      this.pageBeingLoaded = true;
+      this.$store
+        .dispatch("document/fetchDocumentPage", this.page.number)
+        .then(() => {
+          this.pageBeingLoaded = false;
+        });
+    },
+    pageInVisibleRange(page) {
+      return (
+        this.currentPage === page.number ||
+        this.visiblePageRange.includes(page.number)
+      );
+    },
+    updateElementBounds() {
+      const { offsetTop, offsetHeight } = this.$el;
+      this.elementTop = offsetTop;
+      this.elementHeight = offsetHeight;
+    },
+
+    /**
+     * Calculate the y-position of this bbox on the page
+     * from its top, the scale and the image scale (calculated
+     * from the page object).
+     */
+    getYForBbox(bbox) {
+      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, x) {
+      this.$emit("page-jump", this.elementTop + y - 80, x);
+    },
+  },
+};
+</script>

package/src/components/DocumentPage/index.js

@@ -1,5 +1,5 @@
-export { default as DocumentPage } from "./DocumentPage";
-export { default as DummyPage } from "./DummyPage";
-export { default as ScrollingDocument } from "./ScrollingDocument";
-export { default as ScrollingPage } from "./ScrollingPage";
-export { default as ToolBar } from "./DocumentToolbar";
+export { default as DocumentPage } from "./DocumentPage";
+export { default as DummyPage } from "./DummyPage";
+export { default as ScrollingDocument } from "./ScrollingDocument";
+export { default as ScrollingPage } from "./ScrollingPage";
+export { default as ToolBar } from "./DocumentToolbar";