@vertexvis/doc-viewer 1.0.2-canary.0 → 1.0.2-canary.10

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

@@ -285,21 +285,21 @@ function fromJson$5(json) {
 
 var point = /*#__PURE__*/Object.freeze({
   __proto__: null,
+  add: add$1,
   create: create$d,
-  polar: polar,
   distance: distance$2,
-  subtract: subtract$1,
-  add: add$1,
+  fromJson: fromJson$5,
   isEqual: isEqual$3,
   lerp: lerp$1,
-  negate: negate$1,
-  scale: scale$5,
-  scaleProportional: scaleProportional,
   magnitude: magnitude$2,
-  normalizeVector: normalizeVector,
+  negate: negate$1,
   normalDirectionVector: normalDirectionVector,
+  normalizeVector: normalizeVector,
   orthogonalVector: orthogonalVector,
-  fromJson: fromJson$5
+  polar: polar,
+  scale: scale$5,
+  scaleProportional: scaleProportional,
+  subtract: subtract$1
 });
 
 /**
@@ -510,22 +510,22 @@ function toRectangle(dimensions, position) {
 
 var dimensions = /*#__PURE__*/Object.freeze({
   __proto__: null,
+  area: area,
+  aspectRatio: aspectRatio,
+  center: center$1,
+  containFit: containFit,
   create: create$6,
-  square: square,
+  cropFit: cropFit,
+  fitToRatio: fitToRatio,
+  floor: floor$1,
   isEqual: isEqual,
-  scale: scale,
   proportionalScale: proportionalScale,
-  trim: trim,
-  containFit: containFit,
-  cropFit: cropFit,
-  scaleFit: scaleFit,
   round: round,
-  floor: floor$1,
-  center: center$1,
-  aspectRatio: aspectRatio,
-  area: area,
-  fitToRatio: fitToRatio,
-  toRectangle: toRectangle
+  scale: scale,
+  scaleFit: scaleFit,
+  square: square,
+  toRectangle: toRectangle,
+  trim: trim
 });
 
 var classnames = {exports: {}};
@@ -625,10 +625,22 @@ 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.
@@ -663,6 +675,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-'))
@@ -702,7 +717,7 @@ class PanInteractionHandler {
         }
     }
     handlePointerDown(event) {
-        if (event.button !== 0) {
+        if (event.button !== 2) {
             return;
         }
         event.preventDefault();
@@ -34545,7 +34560,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);
     }
@@ -34587,10 +34602,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
@@ -34620,7 +34643,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) {
@@ -34652,6 +34675,7 @@ 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();
     }
@@ -34664,7 +34688,7 @@ const VertexDocumentViewer = class {
         var _a;
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.hostEl);
         this.updateComponentDimensions();
-        this.handleSrcChange();
+        this.loadInitialSrc();
         this.injectViewerApi();
     }
     disconnectedCallback() {
@@ -34731,12 +34755,13 @@ 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;
-            this.layers = new DocumentLayersController(api);
+            (_a = this.layers) === null || _a === void 0 ? void 0 : _a.setApi(api);
             this.updateInteractionHandler();
             this.updateDocumentApiListeners();
             await this.documentApi.updateViewport(this.dimensions);
@@ -34753,9 +34778,9 @@ const VertexDocumentViewer = class {
         this.updateInteractionHandler();
     }
     render() {
-        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', {
+        return (index.h(index.Host, { key: 'a990831d5f2328f2cf21be0b82d4018b05decd51' }, index.h("div", { key: '349abae36254da570e640417fab459680c576465', ref: ref => (this.viewerContainerElement = ref), class: "viewer-container", onContextMenu: event => event.preventDefault() }, index.h("div", { key: '6fca3f1d5a2c31bdcc0c8dbbd468e306db981740', ref: ref => (this.canvasContainerElement = ref), class: classNames('canvas-container', {
                 'enable-pointer-events ': window.PointerEvent != null,
-            }) }, index.h("canvas", { key: 'b8697a0a5be45d212b16b3bd4b7b50a70c0a1143', role: "presentation", ref: el => (this.canvasEl = el) })), index.h("slot", { key: 'c9ec02fd4bfaa251d8fc742fc868b0d91ee70618' }))));
+            }) }, index.h("canvas", { key: 'deb1c58d8d20000053cd829401163bf1e68ca88e', id: "document-viewer-canvas", role: "presentation", ref: el => (this.canvasEl = el) })), index.h("slot", { key: '6b87846ef17b330b0fae5d03103765bad6fdafa6' }))));
     }
     getDocumentApi() {
         if (this.documentApi == null) {
@@ -34763,15 +34788,25 @@ const VertexDocumentViewer = class {
         }
         return this.documentApi;
     }
+    async loadInitialSrc() {
+        await Promise.resolve();
+        await this.handleSrcChange();
+    }
     clearCurrentDocument() {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g;
         (_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;
+        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();
     }
     handleDocumentApiStateChanged(state) {
         this.documentState = state;

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

@@ -8,7 +8,8 @@ export class MockOptionalContentConfig extends Map {
     }
 }
 export const mockGetViewport = jest.fn(() => ({ width: 100, height: 100 }));
-export const mockPageRender = jest.fn(() => ({ promise: Promise.resolve() }));
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const mockPageRender = jest.fn((args) => ({ promise: Promise.resolve() }));
 export const mockGetPage = jest.fn(() => ({
     getTextContent: jest.fn(() => ({
         items: [],

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

@@ -8,6 +8,13 @@
 
   user-select: none;
   -webkit-user-select: none;
+
+  /**
+   * @prop --viewer-background:
+   * A CSS color value used as the background painted behind the loaded PDF,
+   * visible in the negative space around the page. Defaults to #cccccc.
+   */
+  --viewer-background: #cccccc;
 }
 
 .viewer-container {
@@ -24,3 +31,7 @@
   height: 100%;
   position: relative;
 }
+
+#document-viewer-canvas {
+  background-color: var(--viewer-background);
+}

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

@@ -34,6 +34,7 @@ export class VertexDocumentViewer {
         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();
     }
@@ -46,7 +47,7 @@ export class VertexDocumentViewer {
         var _a;
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.hostEl);
         this.updateComponentDimensions();
-        this.handleSrcChange();
+        this.loadInitialSrc();
         this.injectViewerApi();
     }
     disconnectedCallback() {
@@ -113,12 +114,13 @@ export class VertexDocumentViewer {
         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;
-            this.layers = new DocumentLayersController(api);
+            (_a = this.layers) === null || _a === void 0 ? void 0 : _a.setApi(api);
             this.updateInteractionHandler();
             this.updateDocumentApiListeners();
             await this.documentApi.updateViewport(this.dimensions);
@@ -135,9 +137,9 @@ export class VertexDocumentViewer {
         this.updateInteractionHandler();
     }
     render() {
-        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', {
+        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', {
                 'enable-pointer-events ': window.PointerEvent != null,
-            }) }, h("canvas", { key: 'b8697a0a5be45d212b16b3bd4b7b50a70c0a1143', role: "presentation", ref: el => (this.canvasEl = el) })), h("slot", { key: 'c9ec02fd4bfaa251d8fc742fc868b0d91ee70618' }))));
+            }) }, h("canvas", { key: 'deb1c58d8d20000053cd829401163bf1e68ca88e', id: "document-viewer-canvas", role: "presentation", ref: el => (this.canvasEl = el) })), h("slot", { key: '6b87846ef17b330b0fae5d03103765bad6fdafa6' }))));
     }
     getDocumentApi() {
         if (this.documentApi == null) {
@@ -145,15 +147,25 @@ export class VertexDocumentViewer {
         }
         return this.documentApi;
     }
+    async loadInitialSrc() {
+        await Promise.resolve();
+        await this.handleSrcChange();
+    }
     clearCurrentDocument() {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g;
         (_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;
+        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();
     }
     handleDocumentApiStateChanged(state) {
         this.documentState = state;

package/dist/collection/lib/document/layers/controller.js

@@ -5,10 +5,22 @@ import { apiSupportsLayers } from "./types";
 export 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.

package/dist/collection/lib/dom.js

@@ -4,6 +4,9 @@
 export function getElementBoundingClientRect(element) {
     return element.getBoundingClientRect();
 }
+export function createElement(tagName) {
+    return document.createElement(tagName);
+}
 export function getAllVertexElementChildren(element) {
     return getAllChildren(element)
         .filter(node => node.nodeName.startsWith('VERTEX-'))

package/dist/collection/lib/interactions/pan-interaction-handler.js

@@ -32,7 +32,7 @@ export class PanInteractionHandler {
         }
     }
     handlePointerDown(event) {
-        if (event.button !== 0) {
+        if (event.button !== 2) {
             return;
         }
         event.preventDefault();

package/dist/collection/lib/pdf/pdfjs-renderer.js

@@ -3,13 +3,14 @@
  */
 import { Dimensions } from "@vertexvis/geometry";
 import { DocumentRenderer } from "../document/renderer";
+import { createElement } from "../dom";
 export class PdfJsRenderer extends DocumentRenderer {
     constructor(api, canvas) {
         super(api, canvas);
         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);
     }
@@ -51,10 +52,18 @@ export 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