@vertexvis/doc-viewer 1.0.2-canary.2 → 1.0.2-canary.21

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

@@ -7,91 +7,6 @@ function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 }
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
-
-var extendStatics = function(d, b) {
-  extendStatics = Object.setPrototypeOf ||
-      ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-      function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-  return extendStatics(d, b);
-};
-
-function __extends(d, b) {
-  if (typeof b !== "function" && b !== null)
-      throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-  extendStatics(d, b);
-  function __() { this.constructor = d; }
-  d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-}
-
-var __assign = function() {
-  __assign = Object.assign || function __assign(t) {
-      for (var s, i = 1, n = arguments.length; i < n; i++) {
-          s = arguments[i];
-          for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-      }
-      return t;
-  };
-  return __assign.apply(this, arguments);
-};
-
-function __awaiter(thisArg, _arguments, P, generator) {
-  function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-  return new (P || (P = Promise))(function (resolve, reject) {
-      function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-      function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-      function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-      step((generator = generator.apply(thisArg, _arguments || [])).next());
-  });
-}
-
-function __generator(thisArg, body) {
-  var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-  return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-  function verb(n) { return function (v) { return step([n, v]); }; }
-  function step(op) {
-      if (f) throw new TypeError("Generator is already executing.");
-      while (g && (g = 0, op[0] && (_ = 0)), _) try {
-          if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-          if (y = 0, t) op = [op[0] & 2, t.value];
-          switch (op[0]) {
-              case 0: case 1: t = op; break;
-              case 4: _.label++; return { value: op[1], done: false };
-              case 5: _.label++; y = op[1]; op = [0]; continue;
-              case 7: op = _.ops.pop(); _.trys.pop(); continue;
-              default:
-                  if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                  if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                  if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                  if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                  if (t[2]) _.ops.pop();
-                  _.trys.pop(); continue;
-          }
-          op = body.call(thisArg, _);
-      } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-      if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-  }
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-  var e = new Error(message);
-  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
 /**
  * Clamps the given value between `min` and `max`.
  *
@@ -121,24 +36,22 @@ function lerp$2(a, b, t) {
 /**
  * Returns a new `Point` with the given horizontal and vertical position.
  */
-function create$d(x, y) {
-    if (x === void 0) { x = 0; }
-    if (y === void 0) { y = 0; }
-    return { x: x, y: y };
+function create$d(x = 0, y = 0) {
+    return { x, y };
 }
 /**
  * Converts a polar coordinate (length and angle) into a Cartesian coordinate.
  */
 function polar(length, radians) {
-    var x = Math.cos(radians) * length;
-    var y = Math.sin(radians) * length;
+    const x = Math.cos(radians) * length;
+    const y = Math.sin(radians) * length;
     return create$d(x, y);
 }
 /**
  * Returns the distance between two points.
  */
 function distance$2(a, b) {
-    var delta = subtract$1(a, b);
+    const delta = subtract$1(a, b);
     return Math.sqrt(delta.x * delta.x + delta.y * delta.y);
 }
 /**
@@ -210,7 +123,7 @@ function magnitude$2(pt) {
  * Transforms a vector into the corresponding normal (unit) vector.
  */
 function normalizeVector(pt) {
-    var magnitudeOfPoint = magnitude$2(pt);
+    const magnitudeOfPoint = magnitude$2(pt);
     if (magnitudeOfPoint === 0) {
         return create$d(0, 0);
     }
@@ -228,19 +141,19 @@ function normalDirectionVector(ptA, ptB) {
  * Returns a vector orthogonal to the vector between the two given points.
  */
 function orthogonalVector(ptA, ptB) {
-    var unitVectorBetweenPoints = normalDirectionVector(ptA, ptB);
+    const unitVectorBetweenPoints = normalDirectionVector(ptA, ptB);
     // Handle vectors that are parallel to the x or y axis
     if (unitVectorBetweenPoints.x === 0 || unitVectorBetweenPoints.y === 0) {
         return create$d(-1 * unitVectorBetweenPoints.y, unitVectorBetweenPoints.x);
     }
     if (Math.abs(unitVectorBetweenPoints.x) > Math.abs(unitVectorBetweenPoints.y)) {
-        var vectorXValue = 1 - Math.pow(unitVectorBetweenPoints.x, 2);
-        var vectorYValue = -1 * unitVectorBetweenPoints.x * unitVectorBetweenPoints.y;
+        const vectorXValue = 1 - Math.pow(unitVectorBetweenPoints.x, 2);
+        const vectorYValue = -1 * unitVectorBetweenPoints.x * unitVectorBetweenPoints.y;
         return normalizeVector(create$d(vectorXValue, vectorYValue));
     }
     else {
-        var vectorXValue = -1 * unitVectorBetweenPoints.x * unitVectorBetweenPoints.y;
-        var vectorYValue = 1 - Math.pow(unitVectorBetweenPoints.y, 2);
+        const vectorXValue = -1 * unitVectorBetweenPoints.x * unitVectorBetweenPoints.y;
+        const vectorYValue = 1 - Math.pow(unitVectorBetweenPoints.y, 2);
         return normalizeVector(create$d(vectorXValue, vectorYValue));
     }
 }
@@ -251,13 +164,13 @@ function orthogonalVector(ptA, ptB) {
  * @returns A parsed Point.
  */
 function fromJson$5(json) {
-    var obj = JSON.parse(json);
+    const obj = JSON.parse(json);
     if (Array.isArray(obj)) {
-        var x = obj[0], y = obj[1];
+        const [x, y] = obj;
         return create$d(x, y);
     }
     else {
-        var x = obj.x, y = obj.y;
+        const { x, y } = obj;
         return create$d(x, y);
     }
 }
@@ -285,7 +198,7 @@ var point = /*#__PURE__*/Object.freeze({
  * Returns a new `Rectangle` with the given position and size.
  */
 function create$7(x, y, width, height) {
-    return { x: x, y: y, width: width, height: height };
+    return { x, y, width, height };
 }
 /**
  * Returns a new `Rectangle` with the given position and size.
@@ -302,9 +215,9 @@ function fromPointAndDimensions(point, dimensions) {
  * @see {@link cropFit}
  */
 function containFit$1(to, rect) {
-    var scale = Math.min(to.width / rect.width, to.height / rect.height);
-    var dimensions$1 = proportionalScale(scale, rect);
-    var position = subtract$1(center$2(to), center$1(dimensions$1));
+    const scale = Math.min(to.width / rect.width, to.height / rect.height);
+    const dimensions$1 = proportionalScale(scale, rect);
+    const position = subtract$1(center$2(to), center$1(dimensions$1));
     return fromPointAndDimensions(position, dimensions$1);
 }
 /**
@@ -316,9 +229,9 @@ function containFit$1(to, rect) {
  * @see {@link containFit}
  */
 function cropFit$1(to, rect) {
-    var scale = Math.max(to.width / rect.width, to.height / rect.height);
-    var dimensions$1 = proportionalScale(scale, rect);
-    var position = subtract$1(center$2(to), center$1(dimensions$1));
+    const scale = Math.max(to.width / rect.width, to.height / rect.height);
+    const dimensions$1 = proportionalScale(scale, rect);
+    const position = subtract$1(center$2(to), center$1(dimensions$1));
     return fromPointAndDimensions(position, dimensions$1);
 }
 /**
@@ -330,9 +243,9 @@ function cropFit$1(to, rect) {
  * @param rect - the rectangle to scale to fit the specified area
  */
 function scaleFit$1(to, rect) {
-    var scale = Math.min(Math.sqrt(to / area$1(rect)), 1);
-    var dimensions$1 = floor$1(proportionalScale(scale, rect));
-    var position = subtract$1(center$2(rect), center$1(dimensions$1));
+    const scale = Math.min(Math.sqrt(to / area$1(rect)), 1);
+    const dimensions$1 = floor$1(proportionalScale(scale, rect));
+    const position = subtract$1(center$2(rect), center$1(dimensions$1));
     return fromPointAndDimensions(position, dimensions$1);
 }
 /**
@@ -352,27 +265,27 @@ function center$2(rect) {
  * Returns a `Dimensions` with the given width and height.
  *
  */
-var create$6 = function (width, height) {
-    return { width: width, height: height };
+const create$6 = (width, height) => {
+    return { width, height };
 };
 /**
  * Returns a `Dimensions` with the same width and height.
  */
-var square = function (size) {
+const square = (size) => {
     return create$6(size, size);
 };
 /**
  * Returns `true` if two dimensions have the same width and height. Otherwise
  * `false`.
  */
-var isEqual = function (a, b) {
+const isEqual = (a, b) => {
     return a.width === b.width && a.height === b.height;
 };
 /**
  * Returns a scaled dimensions, where the width is scaled by `scaleX` and height
  * is scaled by `scaleY`.
  */
-var scale = function (scaleX, scaleY, dimensions) {
+const scale = (scaleX, scaleY, dimensions) => {
     return {
         width: dimensions.width * scaleX,
         height: dimensions.height * scaleY,
@@ -381,14 +294,14 @@ var scale = function (scaleX, scaleY, dimensions) {
 /**
  * Returns a dimension where each length is scaled by `scaleFactor`.
  */
-var proportionalScale = function (scaleFactor, dimensions) {
+const proportionalScale = (scaleFactor, dimensions) => {
     return scale(scaleFactor, scaleFactor, dimensions);
 };
 /**
  * Returns a `Dimensions` where the lengths of `dimensions` are trimmed to fit
  * into `to`.
  */
-var trim = function (to, dimensions) {
+const trim = (to, dimensions) => {
     return {
         width: Math.min(to.width, dimensions.width),
         height: Math.min(to.height, dimensions.height),
@@ -401,9 +314,9 @@ var trim = function (to, dimensions) {
  *
  * @see #cropFit()
  */
-var containFit = function (to, dimensions) {
-    var _a = containFit$1(toRectangle(to), toRectangle(dimensions)), width = _a.width, height = _a.height;
-    return { width: width, height: height };
+const containFit = (to, dimensions) => {
+    const { width, height } = containFit$1(toRectangle(to), toRectangle(dimensions));
+    return { width, height };
 };
 /**
  * Returns a `Dimensions` where the shortest length of `dimensions` will be
@@ -412,9 +325,9 @@ var containFit = function (to, dimensions) {
  *
  * @see #containFit()
  */
-var cropFit = function (to, dimensions) {
-    var _a = cropFit$1(toRectangle(to), toRectangle(dimensions)), width = _a.width, height = _a.height;
-    return { width: width, height: height };
+const cropFit = (to, dimensions) => {
+    const { width, height } = cropFit$1(toRectangle(to), toRectangle(dimensions));
+    return { width, height };
 };
 /**
  * Returns a `Dimensions` where each side of `dimensions` will be reduced proportionally
@@ -424,14 +337,14 @@ var cropFit = function (to, dimensions) {
  * @param to - the maximum area this dimensions can have
  * @param dimensions - the dimensions to scale to fit the specified area
  */
-var scaleFit = function (to, dimensions) {
-    var _a = scaleFit$1(to, toRectangle(dimensions)), width = _a.width, height = _a.height;
-    return { width: width, height: height };
+const scaleFit = (to, dimensions) => {
+    const { width, height } = scaleFit$1(to, toRectangle(dimensions));
+    return { width, height };
 };
 /**
  * Returns a `Dimensions` with each length rounded.
  */
-var round = function (dimensions) {
+const round = (dimensions) => {
     return {
         width: Math.round(dimensions.width),
         height: Math.round(dimensions.height),
@@ -440,7 +353,7 @@ var round = function (dimensions) {
 /**
  * Returns a `Dimensions` with each length rounded down.
  */
-var floor$1 = function (dimensions) {
+const floor$1 = (dimensions) => {
     return {
         width: Math.floor(dimensions.width),
         height: Math.floor(dimensions.height),
@@ -449,22 +362,20 @@ var floor$1 = function (dimensions) {
 /**
  * Returns the center point of the given `dimensions`.
  */
-var center$1 = function (dimensions) {
+const center$1 = (dimensions) => {
     return { x: dimensions.width / 2, y: dimensions.height / 2 };
 };
 /**
  * Returns the aspect ratio of the given `dimensions`, as defined by width over
  * height.
  */
-var aspectRatio = function (_a) {
-    var width = _a.width, height = _a.height;
+const aspectRatio = ({ width, height }) => {
     return width / height;
 };
 /**
  * Returns the area of the given `dimensions`.
  */
-var area = function (_a) {
-    var width = _a.width, height = _a.height;
+const area = ({ width, height }) => {
     return width * height;
 };
 /**
@@ -473,7 +384,7 @@ var area = function (_a) {
  * @param ratio - Aspect ratio to fit the provided Dimensions to
  * @param dimensions - Dimensions to fit to the specified ratio
  */
-var fitToRatio = function (ratio, dimensions) {
+const fitToRatio = (ratio, dimensions) => {
     if (dimensions.width >= dimensions.height * ratio) {
         return create$6(dimensions.height * ratio, dimensions.height);
     }
@@ -482,8 +393,7 @@ var fitToRatio = function (ratio, dimensions) {
 /**
  * Converts a dimension to a rectangle, with an optional position.
  */
-function toRectangle(dimensions, position) {
-    if (position === void 0) { position = create$d(); }
+function toRectangle(dimensions, position = create$d()) {
     return fromPointAndDimensions(position, dimensions);
 }
 
@@ -604,10 +514,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.
@@ -642,6 +564,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-'))
@@ -681,7 +606,7 @@ class PanInteractionHandler {
         }
     }
     handlePointerDown(event) {
-        if (event.button !== 0) {
+        if (event.button !== 2) {
             return;
         }
         event.preventDefault();
@@ -34181,153 +34106,56 @@ globalThis.pdfjsLib = {
   XfaLayer: XfaLayer
 };
 
-/**
- * A module for defining functional schemas to map between different types. This
- * module is useful for parsing to or from JSON/protobufs to domain types.
- *
- * Mappers support greedy validation, so all validation errors are aggregated
- * and reported vs failing on the first invalid input.
- *
- * @example
- *
- * ```ts
- * import { Mapper as M } from '@vertexvis/utils';
- *
- * interface Address {
- *   address: string;
- *   city: string;
- *   state: string;
- *   zip: string;
- * }
- *
- * interface Person {
- *   name: string;
- *   addresses: Address[];
- * }
- *
- * type AddressJson = Partial<Address>;
- * type PersonJson = {
- *   name?: string;
- *   addresses?: AddressJson[];
- * }
- *
- * const mapAddress: M.Func<AddressJson, Address> = M.defineMapper(
- *   M.read(
- *     M.requireProp('address'),
- *     M.requireProp('city'),
- *     M.requireProp('state'),
- *     M.requireProp('zip')
- *   ),
- *   ([address, city, state, zip]) => ({
- *     address, city, state, zip
- *   })
- * );
- *
- * const mapPerson: M.Func<PersonJson, Person> = M.defineMapper(
- *   M.read(
- *     M.requireProp('name'),
- *     M.mapProp(
- *       'addresses',
- *       M.compose(M.required('addresses'), M.mapArray(mapAddress))
- *     )
- *   ),
- *   ([name, addresses]) => ({ name, addresses })
- * );
- *
- * const person = mapPerson({
- *   name: 'John',
- *   addresses: [{ address: '123', city: 'Ames', state: 'IA', zip: '50010' }]
- * });
- *
- * const invalidPerson = mapPerson({
- *   addresses: [{ city: 'Ames', state: 'IA', zip: '50010' }]
- * });
- * ```
- * // {
- * //   errors: ["Name is required.", "Address is required."]
- * // }
- *
- * @module
- */
-/**
- * An error that is thrown when validation of a schema fails.
- *
- * @see {@link ifInvalidThrow} - for throwing errors on invalid input.
- */
-/** @class */ ((function (_super) {
-    __extends(MapperValidationError, _super);
-    function MapperValidationError(errors) {
-        var _this = _super.call(this, 'Validation error mapping object.') || this;
-        _this.errors = errors;
-        Object.setPrototypeOf(_this, MapperValidationError.prototype);
-        return _this;
-    }
-    return MapperValidationError;
-})(Error));
-
-var EventDispatcher = /** @class */ (function () {
-    function EventDispatcher() {
+class EventDispatcher {
+    constructor() {
         this.listeners = [];
     }
-    EventDispatcher.prototype.on = function (listener, opts) {
-        var _this = this;
+    on(listener, opts = {}) {
         var _a;
-        if (opts === void 0) { opts = {}; }
         this.listeners.push(listener);
-        var controller = new AbortController();
-        controller.signal.addEventListener('abort', function () { return _this.off(listener); });
-        (_a = opts.abort) === null || _a === void 0 ? void 0 : _a.addEventListener('abort', function () { return controller.abort(); });
-        return { dispose: function () { return controller.abort(); } };
-    };
-    EventDispatcher.prototype.once = function (opts) {
-        var _this = this;
-        if (opts === void 0) { opts = {}; }
-        return new Promise(function (resolve) {
-            var subscription = _this.on(function (event) {
+        const controller = new AbortController();
+        controller.signal.addEventListener('abort', () => this.off(listener));
+        (_a = opts.abort) === null || _a === void 0 ? void 0 : _a.addEventListener('abort', () => controller.abort());
+        return { dispose: () => controller.abort() };
+    }
+    once(opts = {}) {
+        return new Promise((resolve) => {
+            const subscription = this.on((event) => {
                 subscription.dispose();
                 resolve(event);
             }, opts);
         });
-    };
-    EventDispatcher.prototype.onceWhen = function (predicate_1) {
-        return __awaiter(this, arguments, Promise, function (predicate, opts) {
-            var controller;
-            var _this = this;
-            var _a;
-            if (opts === void 0) { opts = {}; }
-            return __generator(this, function (_b) {
-                controller = new AbortController();
-                (_a = opts.abort) === null || _a === void 0 ? void 0 : _a.addEventListener('abort', function () { return controller.abort(); });
-                return [2 /*return*/, new Promise(function (resolve) {
-                        _this.when(predicate, function (event) {
-                            if (predicate(event)) {
-                                controller.abort();
-                                resolve(event);
-                            }
-                        }, __assign(__assign({}, opts), { abort: controller.signal }));
-                    })];
-            });
+    }
+    async onceWhen(predicate, opts = {}) {
+        var _a;
+        const controller = new AbortController();
+        (_a = opts.abort) === null || _a === void 0 ? void 0 : _a.addEventListener('abort', () => controller.abort());
+        return new Promise((resolve) => {
+            this.when(predicate, (event) => {
+                if (predicate(event)) {
+                    controller.abort();
+                    resolve(event);
+                }
+            }, { ...opts, abort: controller.signal });
         });
-    };
-    EventDispatcher.prototype.when = function (predicate, listener, opts) {
-        if (opts === void 0) { opts = {}; }
-        return this.on(function (event) {
+    }
+    when(predicate, listener, opts = {}) {
+        return this.on((event) => {
             if (predicate(event)) {
                 listener(event);
             }
         }, opts);
-    };
-    EventDispatcher.prototype.off = function (listener) {
-        var index = this.listeners.indexOf(listener);
+    }
+    off(listener) {
+        const index = this.listeners.indexOf(listener);
         if (index !== -1) {
             this.listeners.splice(index, 1);
         }
-    };
-    EventDispatcher.prototype.emit = function (event) {
-        this.listeners.forEach(function (listener) { return listener(event); });
-    };
-    return EventDispatcher;
-}());
+    }
+    emit(event) {
+        this.listeners.forEach((listener) => listener(event));
+    }
+}
 
 const MAX_ZOOM_PERCENTAGE = 600;
 const MIN_ZOOM_PERCENTAGE = 10;
@@ -34524,7 +34352,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);
     }
@@ -34566,10 +34394,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
@@ -34599,7 +34435,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:#eeeeee}.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) {
@@ -34631,6 +34467,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();
     }
@@ -34643,7 +34480,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() {
@@ -34710,12 +34547,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);
@@ -34732,9 +34570,9 @@ const VertexDocumentViewer = class {
         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) {
@@ -34742,15 +34580,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;