@vertexvis/doc-viewer 1.0.0-testing.8 → 1.0.1-canary.0

package/dist/esm/doc-viewer.js

@@ -19,5 +19,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["vertex-document-viewer",[[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 bootstrapLazy([["vertex-document-viewer",[[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);
 });

package/dist/esm/loader.js

@@ -7,7 +7,7 @@ export { s as setNonce } from './index-CZJPiyR_.js';
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["vertex-document-viewer",[[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 bootstrapLazy([["vertex-document-viewer",[[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);
 };
 
 export { defineCustomElements };

package/dist/esm/loader.mjs

@@ -7,7 +7,7 @@ export { s as setNonce } from './index-CZJPiyR_.js';
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["vertex-document-viewer",[[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 bootstrapLazy([["vertex-document-viewer",[[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);
 };
 
 export { defineCustomElements };

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

@@ -642,11 +642,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);
@@ -655,11 +664,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) {
@@ -703,7 +713,6 @@ class PanInteractionHandler {
     removeWindowListeners() {
         window.removeEventListener('pointermove', this.handlePointerMove);
         window.removeEventListener('pointerup', this.handlePointerUp);
-        window.removeEventListener('wheel', this.handleWheel);
     }
 }
 
@@ -34615,6 +34624,7 @@ const VertexDocumentViewer = class {
          */
         this.resizeDebounce = 100;
         this.dimensions = dimensions.create(0, 0);
+        this.interactionHandlers = [];
     }
     componentWillLoad() {
         this.handleElementResize = this.handleElementResize.bind(this);
@@ -34622,6 +34632,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
@@ -34633,12 +34644,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.
      *
@@ -34697,9 +34732,9 @@ const VertexDocumentViewer = class {
         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) {
@@ -34737,7 +34772,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) {
@@ -34765,6 +34800,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 getElement(this); }
     static get watchers() { return {
         "src": [{

package/dist/types/components/document-viewer/document-viewer.d.ts

@@ -1,11 +1,12 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { Point } from '@vertexvis/geometry';
+import { BasicInteractionHandler, BasicViewer, Disposable } from '@vertexvis/utils';
 import { PartialConfig } from '../../lib/config';
 import { DocumentApiState } from '../../lib/document/api';
 import { DocumentLayersController } from '../../lib/document/layers/controller';
 import { DocumentProvider } from '../../lib/document/provider';
 export type InteractionMode = 'none' | 'pan';
-export declare class VertexDocumentViewer {
+export declare class VertexDocumentViewer implements BasicViewer {
     /**
      * A URI of the document to load when the component is mounted in the DOM tree.
      * Currently only supports URLs for client-side rendering.
@@ -76,17 +77,30 @@ export declare class VertexDocumentViewer {
     private canvasEl?;
     private dimensions;
     private resizeObserver?;
+    private mutationObserver?;
     private resizeTimer?;
     private documentRenderer?;
     private documentApi?;
-    private panInteractionHandler?;
     private documentApiStateChangedDisposable?;
     private pageLoadedDisposable?;
     private pageDrawnDisposable?;
+    private interactionHandlers;
+    private panInteractionHandler?;
     protected componentWillLoad(): void;
     protected componentShouldUpdate(newValue: unknown, oldValue: unknown, propName: string): boolean;
     protected componentDidLoad(): void;
     protected disconnectedCallback(): void;
+    /**
+     * 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.
+     */
+    registerBasicInteractionHandler(interactionHandler: BasicInteractionHandler): Promise<Disposable>;
     /**
      * Pans the currently loaded document by the specified delta.
      *
@@ -129,4 +143,7 @@ export declare class VertexDocumentViewer {
     private updateComponentDimensions;
     private handleElementResize;
     private restartResizeTimer;
+    private initializeInteractionHandler;
+    private registerSlotChangeListeners;
+    private injectViewerApi;
 }

package/dist/types/components.d.ts

@@ -10,12 +10,14 @@ import { InteractionMode } from "./components/document-viewer/document-viewer";
 import { DocumentApiState } from "./lib/document/api";
 import { DocumentLayersController } from "./lib/document/layers/controller";
 import { PartialConfig } from "./lib/config";
+import { BasicInteractionHandler, Disposable } from "@vertexvis/utils";
 import { Point } from "@vertexvis/geometry";
 export { DocumentProvider } from "./lib/document/provider";
 export { InteractionMode } from "./components/document-viewer/document-viewer";
 export { DocumentApiState } from "./lib/document/api";
 export { DocumentLayersController } from "./lib/document/layers/controller";
 export { PartialConfig } from "./lib/config";
+export { BasicInteractionHandler, Disposable } from "@vertexvis/utils";
 export { Point } from "@vertexvis/geometry";
 export namespace Components {
     interface VertexDocumentViewer {
@@ -55,6 +57,12 @@ export namespace Components {
           * @default new PdfJsProvider()
          */
         "provider": DocumentProvider;
+        /**
+          * 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 A promise containing the disposable to use to deregister the handler.
+         */
+        "registerBasicInteractionHandler": (interactionHandler: BasicInteractionHandler) => Promise<Disposable>;
         /**
           * An optional value that will debounce image updates when resizing this viewer element.
           * @default 100

package/dist/types/lib/dom.d.ts

@@ -1 +1,2 @@
 export declare function getElementBoundingClientRect(element: HTMLElement): ClientRect;
+export declare function getAllVertexElementChildren(element: Element): Element[];

package/dist/types/lib/interactions/pan-interaction-handler.d.ts

@@ -2,11 +2,12 @@ import { Disposable } from '@vertexvis/utils';
 import { DocumentApi } from '../document/api';
 export declare class PanInteractionHandler implements Disposable {
     private readonly element;
+    private readonly hostElement;
     private readonly api;
     private lastPosition?;
     private isDragging;
     private downPosition?;
-    constructor(element: HTMLElement, api: DocumentApi);
+    constructor(element: HTMLElement, hostElement: HTMLElement, api: DocumentApi);
     dispose(): void;
     private handleWheel;
     private handlePointerDown;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertexvis/doc-viewer",
-  "version": "1.0.0-testing.8",
+  "version": "1.0.1-canary.0",
   "description": "The Vertex SDK for viewing documents.",
   "type": "module",
   "main": "dist/index.cjs",
@@ -11,7 +11,7 @@
   "collection:main": "dist/collection/index.js",
   "unpkg": "dist/doc-viewer/doc-viewer.esm.js",
   "license": "MIT",
-  "author": "Vertex Developers <support@vertexvis.com> (https://developer.vertexvis.com)",
+  "author": "Vertex Developers <support@vertex3d.com> (https://developer.vertex3d.com)",
   "homepage": "https://github.com/Vertexvis/vertex-web-sdk#readme",
   "repository": {
     "type": "git",
@@ -95,11 +95,11 @@
     "typescript": "~5.8.3"
   },
   "dependencies": {
-    "@vertexvis/geometry": "1.0.0-testing.8",
-    "@vertexvis/utils": "1.0.0-testing.8",
+    "@vertexvis/geometry": "1.0.1-canary.0",
+    "@vertexvis/utils": "1.0.1-canary.0",
     "classnames": "^2.5.1",
     "pdfjs-dist": "^5.5.207",
     "resize-observer": "^1.0.4"
   },
-  "gitHead": "7e9ed2544c3275dbeeeadb576e87a536df2531a3"
+  "gitHead": "7daa5cb17dea388bb10ec14fd35d6c525f1846e3"
 }

package/readme.md

@@ -13,5 +13,5 @@ can run in any browser supporting the Custom Elements v1 specification. For
 browsers that do not support the Custom Elements v1 spec, a polyfill will
 automatically be used.
 
-[vertex]: https://www.vertexvis.com
+[vertex]: https://www.vertex3d.com
 [web components]: https://developer.mozilla.org/en-US/docs/Web/Web_Components