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

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

@@ -663,6 +663,14 @@ 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 {
@@ -34644,6 +34652,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 +34664,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 +34752,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) {
@@ -34816,6 +34826,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) {
@@ -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('*'));
+}