@vertexvis/doc-viewer 1.0.0-testing.8 → 1.0.0

package/dist/cjs/doc-viewer.cjs.js

@@ -21,7 +21,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await index.globalScripts();
-  return index.bootstrapLazy([["vertex-document-viewer.cjs",[[257,"vertex-document-viewer",{"src":[1],"documentId":[513,"document-id"],"provider":[1040],"interactionMode":[1,"interaction-mode"],"documentState":[1040],"layers":[1040],"config":[16],"resizeDebounce":[2,"resize-debounce"],"panByDelta":[64],"zoomTo":[64],"loadPage":[64]},null,{"src":[{"handleSrcChange":0}],"config":[{"handleConfigChange":0}],"interactionMode":[{"handleInteractionModeChange":0}]}]]]], options);
+  return index.bootstrapLazy([["vertex-document-viewer.cjs",[[257,"vertex-document-viewer",{"src":[1],"documentId":[513,"document-id"],"provider":[1040],"interactionMode":[1,"interaction-mode"],"documentState":[1040],"layers":[1040],"config":[16],"resizeDebounce":[2,"resize-debounce"],"registerBasicInteractionHandler":[64],"panByDelta":[64],"zoomTo":[64],"loadPage":[64]},null,{"src":[{"handleSrcChange":0}],"config":[{"handleConfigChange":0}],"interactionMode":[{"handleInteractionModeChange":0}]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/loader.cjs.js

@@ -8,7 +8,7 @@ var index = require('./index-UmtQ5Ckn.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await index.globalScripts();
-  return index.bootstrapLazy([["vertex-document-viewer.cjs",[[257,"vertex-document-viewer",{"src":[1],"documentId":[513,"document-id"],"provider":[1040],"interactionMode":[1,"interaction-mode"],"documentState":[1040],"layers":[1040],"config":[16],"resizeDebounce":[2,"resize-debounce"],"panByDelta":[64],"zoomTo":[64],"loadPage":[64]},null,{"src":[{"handleSrcChange":0}],"config":[{"handleConfigChange":0}],"interactionMode":[{"handleInteractionModeChange":0}]}]]]], options);
+  return index.bootstrapLazy([["vertex-document-viewer.cjs",[[257,"vertex-document-viewer",{"src":[1],"documentId":[513,"document-id"],"provider":[1040],"interactionMode":[1,"interaction-mode"],"documentState":[1040],"layers":[1040],"config":[16],"resizeDebounce":[2,"resize-debounce"],"registerBasicInteractionHandler":[64],"panByDelta":[64],"zoomTo":[64],"loadPage":[64]},null,{"src":[{"handleSrcChange":0}],"config":[{"handleConfigChange":0}],"interactionMode":[{"handleInteractionModeChange":0}]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

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);
     }
 }
 
@@ -34636,6 +34645,7 @@ const VertexDocumentViewer = class {
          */
         this.resizeDebounce = 100;
         this.dimensions = dimensions.create(0, 0);
+        this.interactionHandlers = [];
     }
     componentWillLoad() {
         this.handleElementResize = this.handleElementResize.bind(this);
@@ -34643,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
@@ -34654,12 +34665,36 @@ 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;
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
         this.clearCurrentDocument();
     }
+    /**
+     * Registers and initializes an interaction handler with the document viewer. Returns a
+     * `Disposable` that should be used to deregister the interaction handler.
+     *
+     * `InteractionHandler`s are used to build custom mouse and touch interactions.
+     *
+     * @param interactionHandler The interaction handler to register.
+     * @returns {Promise<void>} A promise containing the disposable to use to
+     *  deregister the handler.
+     */
+    async registerBasicInteractionHandler(interactionHandler) {
+        this.interactionHandlers.push(interactionHandler);
+        this.initializeInteractionHandler(interactionHandler);
+        return {
+            dispose: () => {
+                const index = this.interactionHandlers.indexOf(interactionHandler);
+                if (index !== -1) {
+                    this.interactionHandlers[index].dispose();
+                    this.interactionHandlers.splice(index, 1);
+                }
+            },
+        };
+    }
     /**
      * Pans the currently loaded document by the specified delta.
      *
@@ -34718,9 +34753,9 @@ const VertexDocumentViewer = class {
         this.updateInteractionHandler();
     }
     render() {
-        return (index.h(index.Host, { key: '9ebb0012f2edde7189b42f35fd2ecefb779b16ef' }, index.h("div", { key: 'ef52dd8c6367213d173f3847ff65deac1da6620e', ref: ref => (this.viewerContainerElement = ref), class: "viewer-container", onContextMenu: event => event.preventDefault() }, index.h("div", { key: 'db0bede43e0798c1c8097f8079d1bbf4bea3fe15', 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: '3a705edd1985b11256e565880298a729a5e7260b', role: "presentation", ref: el => (this.canvasEl = el) })), index.h("slot", { key: '9ccb82cc0493342c4e4caf7188c23ad8a55ca93b' }))));
+            }) }, index.h("canvas", { key: 'b8697a0a5be45d212b16b3bd4b7b50a70c0a1143', role: "presentation", ref: el => (this.canvasEl = el) })), index.h("slot", { key: 'c9ec02fd4bfaa251d8fc742fc868b0d91ee70618' }))));
     }
     getDocumentApi() {
         if (this.documentApi == null) {
@@ -34758,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) {
@@ -34786,6 +34821,25 @@ const VertexDocumentViewer = class {
             await ((_a = this.documentApi) === null || _a === void 0 ? void 0 : _a.updateViewport(this.dimensions));
         }, this.resizeDebounce);
     }
+    initializeInteractionHandler(handler) {
+        if (this.canvasEl == null) {
+            throw new Error('Cannot initialize interaction handler');
+        }
+        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 {
@@ -27,6 +27,7 @@ export class VertexDocumentViewer {
          */
         this.resizeDebounce = 100;
         this.dimensions = Dimensions.create(0, 0);
+        this.interactionHandlers = [];
     }
     componentWillLoad() {
         this.handleElementResize = this.handleElementResize.bind(this);
@@ -34,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
@@ -45,12 +47,36 @@ 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;
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
         this.clearCurrentDocument();
     }
+    /**
+     * Registers and initializes an interaction handler with the document viewer. Returns a
+     * `Disposable` that should be used to deregister the interaction handler.
+     *
+     * `InteractionHandler`s are used to build custom mouse and touch interactions.
+     *
+     * @param interactionHandler The interaction handler to register.
+     * @returns {Promise<void>} A promise containing the disposable to use to
+     *  deregister the handler.
+     */
+    async registerBasicInteractionHandler(interactionHandler) {
+        this.interactionHandlers.push(interactionHandler);
+        this.initializeInteractionHandler(interactionHandler);
+        return {
+            dispose: () => {
+                const index = this.interactionHandlers.indexOf(interactionHandler);
+                if (index !== -1) {
+                    this.interactionHandlers[index].dispose();
+                    this.interactionHandlers.splice(index, 1);
+                }
+            },
+        };
+    }
     /**
      * Pans the currently loaded document by the specified delta.
      *
@@ -109,9 +135,9 @@ export class VertexDocumentViewer {
         this.updateInteractionHandler();
     }
     render() {
-        return (h(Host, { key: '9ebb0012f2edde7189b42f35fd2ecefb779b16ef' }, h("div", { key: 'ef52dd8c6367213d173f3847ff65deac1da6620e', ref: ref => (this.viewerContainerElement = ref), class: "viewer-container", onContextMenu: event => event.preventDefault() }, h("div", { key: 'db0bede43e0798c1c8097f8079d1bbf4bea3fe15', 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: '3a705edd1985b11256e565880298a729a5e7260b', role: "presentation", ref: el => (this.canvasEl = el) })), h("slot", { key: '9ccb82cc0493342c4e4caf7188c23ad8a55ca93b' }))));
+            }) }, h("canvas", { key: 'b8697a0a5be45d212b16b3bd4b7b50a70c0a1143', role: "presentation", ref: el => (this.canvasEl = el) })), h("slot", { key: 'c9ec02fd4bfaa251d8fc742fc868b0d91ee70618' }))));
     }
     getDocumentApi() {
         if (this.documentApi == null) {
@@ -149,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) {
@@ -177,6 +203,25 @@ export class VertexDocumentViewer {
             await ((_a = this.documentApi) === null || _a === void 0 ? void 0 : _a.updateViewport(this.dimensions));
         }, this.resizeDebounce);
     }
+    initializeInteractionHandler(handler) {
+        if (this.canvasEl == null) {
+            throw new Error('Cannot initialize interaction handler');
+        }
+        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() {
@@ -460,6 +505,45 @@ export class VertexDocumentViewer {
     }
     static get methods() {
         return {
+            "registerBasicInteractionHandler": {
+                "complexType": {
+                    "signature": "(interactionHandler: BasicInteractionHandler) => Promise<Disposable>",
+                    "parameters": [{
+                            "name": "interactionHandler",
+                            "type": "BasicInteractionHandler",
+                            "docs": "The interaction handler to register."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Disposable": {
+                            "location": "import",
+                            "path": "@vertexvis/utils",
+                            "id": "../utils/dist/index.d.ts::Disposable",
+                            "referenceLocation": "Disposable"
+                        },
+                        "BasicInteractionHandler": {
+                            "location": "import",
+                            "path": "@vertexvis/utils",
+                            "id": "../utils/dist/index.d.ts::BasicInteractionHandler",
+                            "referenceLocation": "BasicInteractionHandler"
+                        }
+                    },
+                    "return": "Promise<Disposable>"
+                },
+                "docs": {
+                    "text": "Registers and initializes an interaction handler with the document viewer. Returns a\n`Disposable` that should be used to deregister the interaction handler.\n\n`InteractionHandler`s are used to build custom mouse and touch interactions.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "interactionHandler The interaction handler to register."
+                        }, {
+                            "name": "returns",
+                            "text": "A promise containing the disposable to use to\nderegister the handler."
+                        }]
+                }
+            },
             "panByDelta": {
                 "complexType": {
                     "signature": "(delta: Point.Point) => Promise<void>",

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);
     }
 }