@vertexvis/doc-viewer 0.24.5-canary.8

package/dist/collection/__mocks__/pdfjs-mock.js

@@ -0,0 +1,33 @@
+/*!
+ * Copyright (c) 2026 Vertex Software LLC. All rights reserved.
+ */
+export class MockOptionalContentConfig extends Map {
+    constructor() {
+        super(...arguments);
+        this.setVisibility = jest.fn();
+    }
+}
+export const mockGetViewport = jest.fn(() => ({ width: 100, height: 100 }));
+export const mockPageRender = jest.fn(() => ({ promise: Promise.resolve() }));
+export const mockGetPage = jest.fn(() => ({
+    getTextContent: jest.fn(() => ({
+        items: [],
+    })),
+    render: mockPageRender,
+    getViewport: mockGetViewport,
+}));
+export const mockDestroy = jest.fn();
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const mockGetDocument = jest.fn(() => ({
+    promise: Promise.resolve(mockPdfDocument),
+}));
+export const mockPdfDocument = {
+    numPages: 10,
+    getPage: mockGetPage,
+    getOptionalContentConfig: jest.fn(() => Promise.resolve(new MockOptionalContentConfig())),
+    destroy: mockDestroy,
+};
+export const GlobalWorkerOptions = {
+    workerSrc: '',
+};
+export const getDocument = mockGetDocument;

package/dist/collection/__setup__/polyfills.js

@@ -0,0 +1,28 @@
+/*!
+ * Copyright (c) 2026 Vertex Software LLC. All rights reserved.
+ */
+// This file contains imports for any browser polyfills that are needed by
+// tests.
+import "abortcontroller-polyfill/dist/polyfill-patch-fetch";
+import { ResizeObserver } from "resize-observer";
+/* eslint-disable @typescript-eslint/no-empty-function */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+global.ResizeObserver = ResizeObserver;
+global.MessageEvent = class extends Event {
+    constructor(type, initDict) {
+        super(type);
+        this.data = initDict === null || initDict === void 0 ? void 0 : initDict.data;
+    }
+};
+global.CloseEvent = class extends Event {
+    constructor(type, initDict) {
+        super(type);
+        this.code = initDict === null || initDict === void 0 ? void 0 : initDict.code;
+        this.reason = initDict === null || initDict === void 0 ? void 0 : initDict.reason;
+    }
+};
+global.MutationObserver = class {
+    constructor() { }
+    disconnect() { }
+    observe() { }
+};

package/dist/collection/__setup__/resize-observer.js

@@ -0,0 +1,13 @@
+/*!
+ * Copyright (c) 2026 Vertex Software LLC. All rights reserved.
+ */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export const triggerResizeObserver = jest.fn();
+global.ResizeObserver = class {
+    constructor(fn) {
+        this.disconnect = jest.fn();
+        this.observe = jest.fn();
+        this.trigger = triggerResizeObserver.mockImplementation((entries) => this.fn(entries));
+        this.fn = fn;
+    }
+};

package/dist/collection/collection-manifest.json

@@ -0,0 +1,14 @@
+{
+  "entries": [
+    "components/document-viewer/document-viewer.js"
+  ],
+  "mixins": [],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.43.3",
+    "typescriptVersion": "5.8.3"
+  },
+  "collections": [],
+  "bundles": [],
+  "global": "polyfill/index.js"
+}

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

@@ -0,0 +1,26 @@
+:host {
+  display: block;
+  position: relative;
+  width: 300px;
+  height: 300px;
+  min-width: 1px;
+  min-height: 1px;
+
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.viewer-container {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.canvas-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}

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

@@ -0,0 +1,556 @@
+/*!
+ * Copyright (c) 2026 Vertex Software LLC. All rights reserved.
+ */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+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 { PanInteractionHandler } from "../../lib/interactions/pan-interaction-handler";
+import { PdfJsProvider } from "../../lib/pdf/pdfjs-provider";
+export class VertexDocumentViewer {
+    constructor() {
+        /**
+         * The provider used to create the document API and renderer.
+         */
+        this.provider = new PdfJsProvider();
+        /**
+         * The interaction mode for the viewer. When set to `'pan'`, click and drag
+         * will pan the document. When set to `'none'`, no pointer interactions
+         * are registered.
+         */
+        this.interactionMode = 'pan';
+        /**
+         * An optional value that will debounce image updates when resizing
+         * this viewer element.
+         */
+        this.resizeDebounce = 100;
+        this.dimensions = Dimensions.create(0, 0);
+    }
+    componentWillLoad() {
+        this.handleElementResize = this.handleElementResize.bind(this);
+        this.handleDocumentApiStateChanged = this.handleDocumentApiStateChanged.bind(this);
+        this.handlePageLoaded = this.handlePageLoaded.bind(this);
+        this.handlePageDrawn = this.handlePageDrawn.bind(this);
+        this.resizeObserver = new ResizeObserver(this.handleElementResize);
+    }
+    componentShouldUpdate(newValue, oldValue, propName) {
+        // Ignore updates to the documentState property, as it is only intended to reflect the current state
+        // of the document and should not trigger a rerender.
+        return propName !== 'documentState';
+    }
+    componentDidLoad() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.hostEl);
+        this.updateComponentDimensions();
+        this.handleSrcChange();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.clearCurrentDocument();
+    }
+    /**
+     * Pans the currently loaded document by the specified delta.
+     *
+     * This method will be bounded to the visible portion of the document to ensure
+     * at least a portion of the document is always visible, and the `canvas` does not
+     * appear blank.
+     *
+     * @param delta The delta to pan the document by.
+     */
+    async panByDelta(delta) {
+        await this.getDocumentApi().panByDelta(delta);
+    }
+    /**
+     * Zooms the currently loaded document to the specified zoom percentage.
+     *
+     * This method will automatically adjust existing offsets to maintain the
+     * same center point of the document where possible.
+     *
+     * @param percentage The zoom percentage to set.
+     */
+    async zoomTo(percentage) {
+        await this.getDocumentApi().zoomTo(percentage);
+    }
+    /**
+     * Loads a specific page of the currently loaded document.
+     *
+     * Note that any offset applied by panning the document will be reset when loading
+     * a new page.
+     *
+     * @param pageNumber The page number to load.
+     */
+    async loadPage(pageNumber) {
+        const documentApi = this.getDocumentApi();
+        await documentApi.loadPage(pageNumber);
+    }
+    async handleSrcChange() {
+        if (this.src != null && this.canvasEl != null) {
+            this.clearCurrentDocument();
+            const { api, renderer } = this.provider.create(this.canvasEl, this.config);
+            this.documentApi = api;
+            this.documentRenderer = renderer;
+            this.layers = new DocumentLayersController(api);
+            this.updateInteractionHandler();
+            this.updateDocumentApiListeners();
+            await this.documentApi.updateViewport(this.dimensions);
+            await this.documentApi.load(this.src);
+            await this.documentApi.loadPage(1);
+            this.documentReady.emit();
+        }
+    }
+    handleConfigChange() {
+        this.clearCurrentDocument();
+        this.handleSrcChange();
+    }
+    handleInteractionModeChange() {
+        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', {
+                'enable-pointer-events ': window.PointerEvent != null,
+            }) }, h("canvas", { key: '3a705edd1985b11256e565880298a729a5e7260b', role: "presentation", ref: el => (this.canvasEl = el) })), h("slot", { key: '9ccb82cc0493342c4e4caf7188c23ad8a55ca93b' }))));
+    }
+    getDocumentApi() {
+        if (this.documentApi == null) {
+            throw new Error('No document has been loaded. Ensure that the `src` property is set and the resource is accessible.');
+        }
+        return this.documentApi;
+    }
+    clearCurrentDocument() {
+        var _a, _b, _c, _d, _e, _f;
+        (_a = this.documentRenderer) === null || _a === void 0 ? void 0 : _a.dispose();
+        (_b = this.documentApi) === null || _b === void 0 ? void 0 : _b.dispose();
+        (_c = this.panInteractionHandler) === null || _c === void 0 ? void 0 : _c.dispose();
+        (_d = this.documentApiStateChangedDisposable) === null || _d === void 0 ? void 0 : _d.dispose();
+        (_e = this.pageLoadedDisposable) === null || _e === void 0 ? void 0 : _e.dispose();
+        (_f = this.pageDrawnDisposable) === null || _f === void 0 ? void 0 : _f.dispose();
+        this.layers = undefined;
+    }
+    handleDocumentApiStateChanged(state) {
+        this.documentState = state;
+        this.documentStateChanged.emit(state);
+    }
+    handlePageLoaded(state) {
+        this.pageLoaded.emit(state);
+    }
+    handlePageDrawn(state) {
+        this.pageDrawn.emit(state);
+    }
+    updateDocumentApiListeners() {
+        var _a, _b, _c;
+        this.documentApiStateChangedDisposable = (_a = this.documentApi) === null || _a === void 0 ? void 0 : _a.onStateChanged(this.handleDocumentApiStateChanged);
+        this.pageLoadedDisposable = (_b = this.documentRenderer) === null || _b === void 0 ? void 0 : _b.onPageLoaded(this.handlePageLoaded);
+        this.pageDrawnDisposable = (_c = this.documentRenderer) === null || _c === void 0 ? void 0 : _c.onPageDrawn(this.handlePageDrawn);
+    }
+    updateInteractionHandler() {
+        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);
+        }
+    }
+    updateComponentDimensions(dimensions) {
+        this.dimensions = dimensions !== null && dimensions !== void 0 ? dimensions : getElementBoundingClientRect(this.hostEl);
+        if (this.canvasEl != null) {
+            this.canvasEl.width = Math.floor(this.dimensions.width * window.devicePixelRatio);
+            this.canvasEl.height = Math.floor(this.dimensions.height * window.devicePixelRatio);
+            this.canvasEl.style.width = `${this.dimensions.width}px`;
+            this.canvasEl.style.height = `${this.dimensions.height}px`;
+        }
+    }
+    async handleElementResize(entries) {
+        const dimensionsHaveChanged = entries.length > 0 && this.dimensions != null && !Dimensions.isEqual(entries[0].contentRect, this.dimensions);
+        if (dimensionsHaveChanged) {
+            this.restartResizeTimer(Dimensions.create(entries[0].contentRect.width, entries[0].contentRect.height));
+        }
+    }
+    restartResizeTimer(dimensions) {
+        if (this.resizeTimer != null) {
+            window.clearTimeout(this.resizeTimer);
+        }
+        this.resizeTimer = window.setTimeout(async () => {
+            var _a;
+            this.updateComponentDimensions(dimensions);
+            await ((_a = this.documentApi) === null || _a === void 0 ? void 0 : _a.updateViewport(this.dimensions));
+        }, this.resizeDebounce);
+    }
+    static get is() { return "vertex-document-viewer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["document-viewer.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["document-viewer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "src": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A URI of the document to load when the component is mounted in the DOM tree.\nCurrently only supports URLs for client-side rendering."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "src"
+            },
+            "documentId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The ID of the loaded `Document`. This ID is required to enable persistence of\nannotations.\n\nNote that this is different than a `File` ID within the Vertex Platform, and must\nbe created separately using the `/documents` endpoints.\nSee https://docs.vertex3d.com/ for more details."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "document-id"
+            },
+            "provider": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "DocumentProvider",
+                    "resolved": "DocumentProvider",
+                    "references": {
+                        "DocumentProvider": {
+                            "location": "import",
+                            "path": "../../lib/document/provider",
+                            "id": "src/lib/document/provider.ts::DocumentProvider",
+                            "referenceLocation": "DocumentProvider"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The provider used to create the document API and renderer."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "new PdfJsProvider()"
+            },
+            "interactionMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "InteractionMode",
+                    "resolved": "\"none\" | \"pan\"",
+                    "references": {
+                        "InteractionMode": {
+                            "location": "local",
+                            "path": "/home/runner/work/vertex-web-sdk/vertex-web-sdk/packages/doc-viewer/src/components/document-viewer/document-viewer.tsx",
+                            "id": "src/components/document-viewer/document-viewer.tsx::InteractionMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The interaction mode for the viewer. When set to `'pan'`, click and drag\nwill pan the document. When set to `'none'`, no pointer interactions\nare registered."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "interaction-mode",
+                "defaultValue": "'pan'"
+            },
+            "documentState": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "DocumentApiState",
+                    "resolved": "DocumentApiState | undefined",
+                    "references": {
+                        "DocumentApiState": {
+                            "location": "import",
+                            "path": "../../lib/document/api",
+                            "id": "src/lib/document/api.ts::DocumentApiState",
+                            "referenceLocation": "DocumentApiState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Common state of the current document. This value includes information common to all\ntypes of documents, including state like zoom percentage, viewport definition, and offsets."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "layers": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "DocumentLayersController",
+                    "resolved": "DocumentLayersController | undefined",
+                    "references": {
+                        "DocumentLayersController": {
+                            "location": "import",
+                            "path": "../../lib/document/layers/controller",
+                            "id": "src/lib/document/layers/controller.ts::DocumentLayersController",
+                            "referenceLocation": "DocumentLayersController"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Controller for interacting with layers in the currently loaded document.\n\nThis controller will automatically be created along with the loaded document.\nNote that the methods available on this controller will only be supported if\nthe underlying document type supports layers."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "config": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "PartialConfig",
+                    "resolved": "Config | undefined",
+                    "references": {
+                        "PartialConfig": {
+                            "location": "import",
+                            "path": "../../lib/config",
+                            "id": "src/lib/config.ts::PartialConfig",
+                            "referenceLocation": "PartialConfig"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Configuration values for the document viewer. See {@link Config } for more information\non the available configuration options."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "resizeDebounce": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "An optional value that will debounce image updates when resizing\nthis viewer element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "resize-debounce",
+                "defaultValue": "100"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "documentReady",
+                "name": "documentReady",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits an event when the document is ready to be interacted with."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "documentStateChanged",
+                "name": "documentStateChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits an event when the document state changes."
+                },
+                "complexType": {
+                    "original": "DocumentApiState",
+                    "resolved": "DocumentApiState",
+                    "references": {
+                        "DocumentApiState": {
+                            "location": "import",
+                            "path": "../../lib/document/api",
+                            "id": "src/lib/document/api.ts::DocumentApiState",
+                            "referenceLocation": "DocumentApiState"
+                        }
+                    }
+                }
+            }, {
+                "method": "pageLoaded",
+                "name": "pageLoaded",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits an event when a page has been loaded or reloaded prior to being\ndrawn to the canvas."
+                },
+                "complexType": {
+                    "original": "DocumentApiState",
+                    "resolved": "DocumentApiState",
+                    "references": {
+                        "DocumentApiState": {
+                            "location": "import",
+                            "path": "../../lib/document/api",
+                            "id": "src/lib/document/api.ts::DocumentApiState",
+                            "referenceLocation": "DocumentApiState"
+                        }
+                    }
+                }
+            }, {
+                "method": "pageDrawn",
+                "name": "pageDrawn",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits an event when a page has been drawn to the canvas."
+                },
+                "complexType": {
+                    "original": "DocumentApiState",
+                    "resolved": "DocumentApiState",
+                    "references": {
+                        "DocumentApiState": {
+                            "location": "import",
+                            "path": "../../lib/document/api",
+                            "id": "src/lib/document/api.ts::DocumentApiState",
+                            "referenceLocation": "DocumentApiState"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "panByDelta": {
+                "complexType": {
+                    "signature": "(delta: Point.Point) => Promise<void>",
+                    "parameters": [{
+                            "name": "delta",
+                            "type": "Point",
+                            "docs": "The delta to pan the document by."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Point": {
+                            "location": "import",
+                            "path": "@vertexvis/geometry",
+                            "id": "../geometry/dist/index.d.ts::\"/home/runner/work/vertex-web-sdk/vertex-web-sdk/packages/geometry/dist/point\"",
+                            "referenceLocation": "Point"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Pans the currently loaded document by the specified delta.\n\nThis method will be bounded to the visible portion of the document to ensure\nat least a portion of the document is always visible, and the `canvas` does not\nappear blank.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "delta The delta to pan the document by."
+                        }]
+                }
+            },
+            "zoomTo": {
+                "complexType": {
+                    "signature": "(percentage: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "percentage",
+                            "type": "number",
+                            "docs": "The zoom percentage to set."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Zooms the currently loaded document to the specified zoom percentage.\n\nThis method will automatically adjust existing offsets to maintain the\nsame center point of the document where possible.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "percentage The zoom percentage to set."
+                        }]
+                }
+            },
+            "loadPage": {
+                "complexType": {
+                    "signature": "(pageNumber: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "pageNumber",
+                            "type": "number",
+                            "docs": "The page number to load."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Loads a specific page of the currently loaded document.\n\nNote that any offset applied by panning the document will be reset when loading\na new page.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "pageNumber The page number to load."
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostEl"; }
+    static get watchers() {
+        return [{
+                "propName": "src",
+                "methodName": "handleSrcChange"
+            }, {
+                "propName": "config",
+                "methodName": "handleConfigChange"
+            }, {
+                "propName": "interactionMode",
+                "methodName": "handleInteractionModeChange"
+            }];
+    }
+}

package/dist/collection/index.js

@@ -0,0 +1,5 @@
+/*!
+ * Copyright (c) 2026 Vertex Software LLC. All rights reserved.
+ */
+export * from './components';
+export * from './lib';