@vertexvis/doc-viewer 1.0.0-canary.6 → 1.0.0-canary.8

package/dist/cjs/vertex-document-viewer.cjs.entry.js

@@ -663,11 +663,20 @@ class DocumentLayersController {
 function getElementBoundingClientRect(element) {
     return element.getBoundingClientRect();
 }
+function getAllVertexElementChildren(element) {
+    return getAllChildren(element)
+        .filter(node => node.nodeName.startsWith('VERTEX-'))
+        .reduce((elements, element) => [...elements, element, ...getAllChildren(element)], []);
+}
+function getAllChildren(element) {
+    return Array.from(element.querySelectorAll('*'));
+}
 
 const DRAG_PIXEL_THRESHOLD = 2;
 class PanInteractionHandler {
-    constructor(element, api) {
+    constructor(element, hostElement, api) {
         this.element = element;
+        this.hostElement = hostElement;
         this.api = api;
         this.isDragging = false;
         this.handlePointerDown = this.handlePointerDown.bind(this);
@@ -676,11 +685,12 @@ class PanInteractionHandler {
         this.handleWheel = this.handleWheel.bind(this);
         this.element.addEventListener('pointerdown', this.handlePointerDown);
         this.element.addEventListener('wheel', this.handleWheel);
-        window.addEventListener('wheel', this.handleWheel);
+        this.hostElement.addEventListener('wheel', this.handleWheel);
     }
     dispose() {
         this.element.removeEventListener('pointerdown', this.handlePointerDown);
         this.element.removeEventListener('wheel', this.handleWheel);
+        this.hostElement.removeEventListener('wheel', this.handleWheel);
         this.removeWindowListeners();
     }
     handleWheel(event) {
@@ -724,7 +734,6 @@ class PanInteractionHandler {
     removeWindowListeners() {
         window.removeEventListener('pointermove', this.handlePointerMove);
         window.removeEventListener('pointerup', this.handlePointerUp);
-        window.removeEventListener('wheel', this.handleWheel);
     }
 }
 
@@ -34644,6 +34653,7 @@ const VertexDocumentViewer = class {
         this.handlePageLoaded = this.handlePageLoaded.bind(this);
         this.handlePageDrawn = this.handlePageDrawn.bind(this);
         this.resizeObserver = new ResizeObserver(this.handleElementResize);
+        this.registerSlotChangeListeners();
     }
     componentShouldUpdate(newValue, oldValue, propName) {
         // Ignore updates to the documentState property, as it is only intended to reflect the current state
@@ -34655,6 +34665,7 @@ const VertexDocumentViewer = class {
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.hostEl);
         this.updateComponentDimensions();
         this.handleSrcChange();
+        this.injectViewerApi();
     }
     disconnectedCallback() {
         var _a;
@@ -34742,9 +34753,9 @@ const VertexDocumentViewer = class {
         this.updateInteractionHandler();
     }
     render() {
-        return (index.h(index.Host, { key: '45d2a2dceb6008a12702493edc50337f5d3568f7' }, index.h("div", { key: '862161f98d61fdf01996202e3e9be6281eea62ae', ref: ref => (this.viewerContainerElement = ref), class: "viewer-container", onContextMenu: event => event.preventDefault() }, index.h("div", { key: '05936dfbd06a9b0a05f21d7ada870a40109e93d0', ref: ref => (this.canvasContainerElement = ref), class: classNames('canvas-container', {
+        return (index.h(index.Host, { key: 'f1ddf0b4e321bc244a5d757e48f6d71c23caca3c' }, index.h("div", { key: '174c64c537f4b0f1c45fc6543e5b7f54515e4063', ref: ref => (this.viewerContainerElement = ref), class: "viewer-container", onContextMenu: event => event.preventDefault() }, index.h("div", { key: '4c47dadba03b32bde017252a9a8ea7f6e6d323f3', ref: ref => (this.canvasContainerElement = ref), class: classNames('canvas-container', {
                 'enable-pointer-events ': window.PointerEvent != null,
-            }) }, index.h("canvas", { key: '230fc4741a7eb3c621d93056ab959d3cfd3d9a20', role: "presentation", ref: el => (this.canvasEl = el) })), index.h("slot", { key: '6720a16f6e5ee1bfd605dc8adb6413a4f6d44e24' }))));
+            }) }, index.h("canvas", { key: 'b8697a0a5be45d212b16b3bd4b7b50a70c0a1143', role: "presentation", ref: el => (this.canvasEl = el) })), index.h("slot", { key: 'c9ec02fd4bfaa251d8fc742fc868b0d91ee70618' }))));
     }
     getDocumentApi() {
         if (this.documentApi == null) {
@@ -34782,7 +34793,7 @@ const VertexDocumentViewer = class {
         var _a;
         (_a = this.panInteractionHandler) === null || _a === void 0 ? void 0 : _a.dispose();
         if (this.interactionMode === 'pan' && this.canvasEl != null && this.documentApi != null) {
-            this.panInteractionHandler = new PanInteractionHandler(this.canvasEl, this.documentApi);
+            this.panInteractionHandler = new PanInteractionHandler(this.canvasEl, this.hostEl, this.documentApi);
         }
     }
     updateComponentDimensions(dimensions) {
@@ -34816,6 +34827,19 @@ const VertexDocumentViewer = class {
         }
         handler.initialize(this.canvasEl);
     }
+    registerSlotChangeListeners() {
+        this.mutationObserver = new MutationObserver(_ => this.injectViewerApi());
+        this.mutationObserver.observe(this.hostEl, {
+            childList: true,
+            subtree: true,
+        });
+    }
+    injectViewerApi() {
+        getAllVertexElementChildren(this.hostEl).forEach(node => {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            node.viewer = this.hostEl;
+        });
+    }
     get hostEl() { return index.getElement(this); }
     static get watchers() { return {
         "src": [{

package/dist/collection/components/document-viewer/document-viewer.js

@@ -6,7 +6,7 @@ import { h, Host } from "@stencil/core";
 import { Dimensions } from "@vertexvis/geometry";
 import classNames from "classnames";
 import { DocumentLayersController } from "../../lib/document/layers/controller";
-import { getElementBoundingClientRect } from "../../lib/dom";
+import { getAllVertexElementChildren, getElementBoundingClientRect } from "../../lib/dom";
 import { PanInteractionHandler } from "../../lib/interactions/pan-interaction-handler";
 import { PdfJsProvider } from "../../lib/pdf/pdfjs-provider";
 export class VertexDocumentViewer {
@@ -35,6 +35,7 @@ export class VertexDocumentViewer {
         this.handlePageLoaded = this.handlePageLoaded.bind(this);
         this.handlePageDrawn = this.handlePageDrawn.bind(this);
         this.resizeObserver = new ResizeObserver(this.handleElementResize);
+        this.registerSlotChangeListeners();
     }
     componentShouldUpdate(newValue, oldValue, propName) {
         // Ignore updates to the documentState property, as it is only intended to reflect the current state
@@ -46,6 +47,7 @@ export class VertexDocumentViewer {
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.hostEl);
         this.updateComponentDimensions();
         this.handleSrcChange();
+        this.injectViewerApi();
     }
     disconnectedCallback() {
         var _a;
@@ -133,9 +135,9 @@ export class VertexDocumentViewer {
         this.updateInteractionHandler();
     }
     render() {
-        return (h(Host, { key: '45d2a2dceb6008a12702493edc50337f5d3568f7' }, h("div", { key: '862161f98d61fdf01996202e3e9be6281eea62ae', ref: ref => (this.viewerContainerElement = ref), class: "viewer-container", onContextMenu: event => event.preventDefault() }, h("div", { key: '05936dfbd06a9b0a05f21d7ada870a40109e93d0', ref: ref => (this.canvasContainerElement = ref), class: classNames('canvas-container', {
+        return (h(Host, { key: 'f1ddf0b4e321bc244a5d757e48f6d71c23caca3c' }, h("div", { key: '174c64c537f4b0f1c45fc6543e5b7f54515e4063', ref: ref => (this.viewerContainerElement = ref), class: "viewer-container", onContextMenu: event => event.preventDefault() }, h("div", { key: '4c47dadba03b32bde017252a9a8ea7f6e6d323f3', ref: ref => (this.canvasContainerElement = ref), class: classNames('canvas-container', {
                 'enable-pointer-events ': window.PointerEvent != null,
-            }) }, h("canvas", { key: '230fc4741a7eb3c621d93056ab959d3cfd3d9a20', role: "presentation", ref: el => (this.canvasEl = el) })), h("slot", { key: '6720a16f6e5ee1bfd605dc8adb6413a4f6d44e24' }))));
+            }) }, h("canvas", { key: 'b8697a0a5be45d212b16b3bd4b7b50a70c0a1143', role: "presentation", ref: el => (this.canvasEl = el) })), h("slot", { key: 'c9ec02fd4bfaa251d8fc742fc868b0d91ee70618' }))));
     }
     getDocumentApi() {
         if (this.documentApi == null) {
@@ -173,7 +175,7 @@ export class VertexDocumentViewer {
         var _a;
         (_a = this.panInteractionHandler) === null || _a === void 0 ? void 0 : _a.dispose();
         if (this.interactionMode === 'pan' && this.canvasEl != null && this.documentApi != null) {
-            this.panInteractionHandler = new PanInteractionHandler(this.canvasEl, this.documentApi);
+            this.panInteractionHandler = new PanInteractionHandler(this.canvasEl, this.hostEl, this.documentApi);
         }
     }
     updateComponentDimensions(dimensions) {
@@ -207,6 +209,19 @@ export class VertexDocumentViewer {
         }
         handler.initialize(this.canvasEl);
     }
+    registerSlotChangeListeners() {
+        this.mutationObserver = new MutationObserver(_ => this.injectViewerApi());
+        this.mutationObserver.observe(this.hostEl, {
+            childList: true,
+            subtree: true,
+        });
+    }
+    injectViewerApi() {
+        getAllVertexElementChildren(this.hostEl).forEach(node => {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            node.viewer = this.hostEl;
+        });
+    }
     static get is() { return "vertex-document-viewer"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {

package/dist/collection/lib/dom.js

@@ -4,3 +4,11 @@
 export function getElementBoundingClientRect(element) {
     return element.getBoundingClientRect();
 }
+export function getAllVertexElementChildren(element) {
+    return getAllChildren(element)
+        .filter(node => node.nodeName.startsWith('VERTEX-'))
+        .reduce((elements, element) => [...elements, element, ...getAllChildren(element)], []);
+}
+function getAllChildren(element) {
+    return Array.from(element.querySelectorAll('*'));
+}

package/dist/collection/lib/interactions/pan-interaction-handler.js

@@ -4,8 +4,9 @@
 import { Point } from "@vertexvis/geometry";
 const DRAG_PIXEL_THRESHOLD = 2;
 export class PanInteractionHandler {
-    constructor(element, api) {
+    constructor(element, hostElement, api) {
         this.element = element;
+        this.hostElement = hostElement;
         this.api = api;
         this.isDragging = false;
         this.handlePointerDown = this.handlePointerDown.bind(this);
@@ -14,11 +15,12 @@ export class PanInteractionHandler {
         this.handleWheel = this.handleWheel.bind(this);
         this.element.addEventListener('pointerdown', this.handlePointerDown);
         this.element.addEventListener('wheel', this.handleWheel);
-        window.addEventListener('wheel', this.handleWheel);
+        this.hostElement.addEventListener('wheel', this.handleWheel);
     }
     dispose() {
         this.element.removeEventListener('pointerdown', this.handlePointerDown);
         this.element.removeEventListener('wheel', this.handleWheel);
+        this.hostElement.removeEventListener('wheel', this.handleWheel);
         this.removeWindowListeners();
     }
     handleWheel(event) {
@@ -62,6 +64,5 @@ export class PanInteractionHandler {
     removeWindowListeners() {
         window.removeEventListener('pointermove', this.handlePointerMove);
         window.removeEventListener('pointerup', this.handlePointerUp);
-        window.removeEventListener('wheel', this.handleWheel);
     }
 }