@vertexvis/doc-viewer 1.0.2-testing.0 → 1.0.2-testing.1

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

@@ -604,22 +604,10 @@ function apiSupportsLayers(api) {
 class DocumentLayersController {
     constructor(api) {
         this.apiSupportsLayers = false;
-        if (api != null) {
-            this.setApi(api);
-        }
-    }
-    setApi(api) {
         if (apiSupportsLayers(api)) {
             this.apiSupportsLayers = true;
             this.api = api;
         }
-        else {
-            this.clear();
-        }
-    }
-    clear() {
-        this.apiSupportsLayers = false;
-        this.api = undefined;
     }
     /**
      * Returns a boolean indicating whether the document supports layers.
@@ -654,6 +642,9 @@ class DocumentLayersController {
 function getElementBoundingClientRect(element) {
     return element.getBoundingClientRect();
 }
+function createElement(tagName) {
+    return document.createElement(tagName);
+}
 function getAllVertexElementChildren(element) {
     return getAllChildren(element)
         .filter(node => node.nodeName.startsWith('VERTEX-'))
@@ -34536,7 +34527,7 @@ class PdfJsRenderer extends DocumentRenderer {
         this.state = { pages: {}, rendering: false };
         // Render pages using an offscreen canvas to avoid flickering that can occur for
         // PDFs with annotations.
-        this.offscreenCanvas = document.createElement('canvas');
+        this.offscreenCanvas = createElement('canvas');
         this.handleStateChanged = this.handleStateChanged.bind(this);
         this.stateChangedDisposable = this.api.onStateChanged(this.handleStateChanged);
     }
@@ -34578,10 +34569,18 @@ class PdfJsRenderer extends DocumentRenderer {
             });
             this.offscreenCanvas.width = this.canvas.width;
             this.offscreenCanvas.height = this.canvas.height;
+            const offscreenCanvasCtx = this.offscreenCanvas.getContext('2d');
+            // Fill the offscreen canvas with a white background prior to rendering the page to give the content
+            // of the PDF a white background, but maintain the canvas it gets drawn to when copying to the main canvas.
+            if (offscreenCanvasCtx != null) {
+                offscreenCanvasCtx.fillStyle = '#ffffff';
+                offscreenCanvasCtx.fillRect(panOffset.x + centerOffsetX, panOffset.y, scaled.width, scaled.height);
+            }
             await page.render({
                 canvas: this.offscreenCanvas,
                 viewport: scaled,
                 intent: 'display',
+                background: 'transparent',
                 optionalContentConfigPromise: optionalContentConfig != null ? Promise.resolve(optionalContentConfig) : undefined,
             }).promise;
             // Emit an event before the page is drawn, then draw the page to the canvas on the next
@@ -34611,7 +34610,7 @@ class PdfJsProvider {
     }
 }
 
-const documentViewerCss = () => `: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}`;
+const documentViewerCss = () => `:host{display:block;position:relative;width:300px;height:300px;min-width:1px;min-height:1px;user-select:none;-webkit-user-select:none;--viewer-background:#cccccc}.viewer-container{width:100%;height:100%;overflow:hidden}.canvas-container{display:flex;justify-content:center;align-items:center;width:100%;height:100%;position:relative}#document-viewer-canvas{background-color:var(--viewer-background)}`;
 
 const VertexDocumentViewer = class {
     constructor(hostRef) {
@@ -34643,7 +34642,6 @@ const VertexDocumentViewer = class {
         this.handleDocumentApiStateChanged = this.handleDocumentApiStateChanged.bind(this);
         this.handlePageLoaded = this.handlePageLoaded.bind(this);
         this.handlePageDrawn = this.handlePageDrawn.bind(this);
-        this.layers = new DocumentLayersController();
         this.resizeObserver = new ResizeObserver(this.handleElementResize);
         this.registerSlotChangeListeners();
     }
@@ -34656,7 +34654,7 @@ const VertexDocumentViewer = class {
         var _a;
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.hostEl);
         this.updateComponentDimensions();
-        this.loadInitialSrc();
+        this.handleSrcChange();
         this.injectViewerApi();
     }
     disconnectedCallback() {
@@ -34723,13 +34721,12 @@ const VertexDocumentViewer = class {
         await documentApi.loadPage(pageNumber);
     }
     async handleSrcChange() {
-        var _a;
         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;
-            (_a = this.layers) === null || _a === void 0 ? void 0 : _a.setApi(api);
+            this.layers = new DocumentLayersController(api);
             this.updateInteractionHandler();
             this.updateDocumentApiListeners();
             await this.documentApi.updateViewport(this.dimensions);
@@ -34746,9 +34743,9 @@ const VertexDocumentViewer = class {
         this.updateInteractionHandler();
     }
     render() {
-        return (h(Host, { key: 'a990831d5f2328f2cf21be0b82d4018b05decd51' }, h("div", { key: '349abae36254da570e640417fab459680c576465', ref: ref => (this.viewerContainerElement = ref), class: "viewer-container", onContextMenu: event => event.preventDefault() }, h("div", { key: '6fca3f1d5a2c31bdcc0c8dbbd468e306db981740', 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: 'fe22d0a0cbe37951495420fb8efe6ca1062c38a7', role: "presentation", ref: el => (this.canvasEl = el) })), h("slot", { key: '08c7488d0a52bdb369a5a1b70070f3f15da75e3c' }))));
+            }) }, h("canvas", { key: 'ae645889dd5cb93084f820f9f3d14a56de0213f7', id: "document-viewer-canvas", role: "presentation", ref: el => (this.canvasEl = el) })), h("slot", { key: '7762c493306bf5d21cd16218f1abd3c6d0300ace' }))));
     }
     getDocumentApi() {
         if (this.documentApi == null) {
@@ -34756,25 +34753,15 @@ const VertexDocumentViewer = class {
         }
         return this.documentApi;
     }
-    async loadInitialSrc() {
-        await Promise.resolve();
-        await this.handleSrcChange();
-    }
     clearCurrentDocument() {
-        var _a, _b, _c, _d, _e, _f, _g;
+        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.documentRenderer = undefined;
-        this.documentApi = undefined;
-        this.panInteractionHandler = undefined;
-        this.documentApiStateChangedDisposable = undefined;
-        this.pageLoadedDisposable = undefined;
-        this.pageDrawnDisposable = undefined;
-        (_g = this.layers) === null || _g === void 0 ? void 0 : _g.clear();
+        this.layers = undefined;
     }
     handleDocumentApiStateChanged(state) {
         this.documentState = state;

package/dist/types/__mocks__/pdfjs-mock.d.ts

@@ -8,14 +8,14 @@ export declare const mockGetViewport: jest.Mock<{
 }, [], any>;
 export declare const mockPageRender: jest.Mock<{
     promise: Promise<void>;
-}, [], any>;
+}, [args: any], any>;
 export declare const mockGetPage: jest.Mock<{
     getTextContent: jest.Mock<{
         items: never[];
     }, [], any>;
     render: jest.Mock<{
         promise: Promise<void>;
-    }, [], any>;
+    }, [args: any], any>;
     getViewport: jest.Mock<{
         width: number;
         height: number;

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

@@ -134,7 +134,6 @@ export declare class VertexDocumentViewer implements BasicViewer {
     protected handleInteractionModeChange(): void;
     render(): void;
     private getDocumentApi;
-    private loadInitialSrc;
     private clearCurrentDocument;
     private handleDocumentApiStateChanged;
     private handlePageLoaded;

package/dist/types/lib/document/layers/controller.d.ts

@@ -3,9 +3,7 @@ import { DocumentLayer } from './types';
 export declare class DocumentLayersController {
     private apiSupportsLayers;
     private api?;
-    constructor(api?: DocumentApi);
-    setApi(api: DocumentApi): void;
-    clear(): void;
+    constructor(api: DocumentApi);
     /**
      * Returns a boolean indicating whether the document supports layers.
      */

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

@@ -1,2 +1,3 @@
 export declare function getElementBoundingClientRect(element: HTMLElement): ClientRect;
+export declare function createElement<T extends HTMLElement>(tagName: string): T;
 export declare function getAllVertexElementChildren(element: Element): Element[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertexvis/doc-viewer",
-  "version": "1.0.2-testing.0",
+  "version": "1.0.2-testing.1",
   "description": "The Vertex SDK for viewing documents.",
   "type": "module",
   "main": "dist/index.cjs",
@@ -95,11 +95,11 @@
     "typescript": "~5.9.3"
   },
   "dependencies": {
-    "@vertexvis/geometry": "1.0.2-testing.0",
-    "@vertexvis/utils": "1.0.2-testing.0",
+    "@vertexvis/geometry": "1.0.2-testing.1",
+    "@vertexvis/utils": "1.0.2-testing.1",
     "classnames": "^2.5.1",
     "pdfjs-dist": "^5.5.207",
     "resize-observer": "^1.0.4"
   },
-  "gitHead": "a292daa7a84b726f1eeae1a573c353dc060444f0"
+  "gitHead": "d28706dda29e84edaec7c7f2a5781bf619e2f112"
 }