@libresign/pdf-elements 0.4.0 → 1.0.1

package/dist/types.d.ts

@@ -0,0 +1,30 @@
+export interface PDFElementObject {
+    id?: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    type?: string;
+    label?: string;
+    icon?: string;
+    resizable?: boolean;
+    [key: string]: unknown;
+}
+export interface PDFDocumentEntry {
+    name: string;
+    file: unknown;
+    pdfDoc: unknown;
+    numPages: number;
+    pages: Promise<unknown>[];
+    pageWidths: number[];
+    pagesScale: number[];
+    allObjects: PDFElementObject[][];
+}
+export interface PDFElementsPublicApi {
+    startAddingElement: (templateObject: PDFElementObject) => void;
+    addObjectToPage: (object: PDFElementObject, pageIndex?: number, docIndex?: number) => boolean;
+    getAllObjects: (docIndex?: number) => PDFElementObject[];
+    updateObject: (docIndex: number, objectId: string, payload: Partial<PDFElementObject>) => void;
+    deleteObject: (docIndex: number, objectId: string) => void;
+    duplicateObject: (docIndex: number, objectId: string) => void;
+}

package/dist/utils/asyncReader.d.ts

@@ -0,0 +1,10 @@
+import { PDFDocumentProxy } from 'pdfjs-dist';
+export declare function setWorkerPath(path: string): void;
+export declare function readAsArrayBuffer(file: Blob): Promise<ArrayBuffer>;
+type PdfInput = string | ArrayBuffer | ArrayBufferView | Blob | {
+    url?: string;
+    data?: ArrayBuffer | Uint8Array;
+    [key: string]: unknown;
+};
+export declare function readAsPDF(file: PdfInput, options?: Record<string, unknown>): Promise<PDFDocumentProxy>;
+export {};

package/dist/utils/geometry.d.ts

@@ -0,0 +1,5 @@
+export declare function clampPosition(x: number, y: number, width: number, height: number, pageWidth: number, pageHeight: number): {
+    x: number;
+    y: number;
+};
+export declare function getVisibleArea(newX: number, newY: number, objWidth: number, objHeight: number, pageWidth: number, pageHeight: number): number;

package/dist/utils/measurements.d.ts

@@ -0,0 +1,12 @@
+export interface CanvasMeasurement {
+    canvasWidth: number;
+    canvasHeight: number;
+}
+export interface PageMeasurement {
+    width: number;
+    height: number;
+}
+export interface PageMeasurementProvider {
+    getCanvasMeasurement: () => CanvasMeasurement;
+}
+export declare function getCachedMeasurement(cache: Record<string, PageMeasurement>, cacheKey: string, pageRef: PageMeasurementProvider, pagesScale: number): PageMeasurement;

package/dist/utils/objectStore.d.ts

@@ -0,0 +1,5 @@
+import { PDFDocumentEntry, PDFElementObject } from '../types';
+export declare function objectIdExistsInDoc(doc: PDFDocumentEntry | undefined, objectId: string): boolean;
+export declare function findObjectPageIndex(doc: PDFDocumentEntry | undefined, objectId: string): number;
+export declare function updateObjectInDoc(doc: PDFDocumentEntry | undefined, pageIndex: number, objectId: string, payload: Partial<PDFElementObject>): boolean;
+export declare function removeObjectFromDoc(doc: PDFDocumentEntry | undefined, pageIndex: number, objectId: string): boolean;

package/dist/utils/pageBounds.d.ts

@@ -0,0 +1,5 @@
+export declare function getViewportWindow(scrollTop: number, viewHeight: number, margin?: number): {
+    minY: number;
+    maxY: number;
+};
+export declare function isPageInViewport(offsetTop: number, offsetHeight: number, minY: number, maxY: number): boolean;

package/dist/utils/zoom.d.ts

@@ -0,0 +1,2 @@
+import { PDFDocumentEntry } from '../types';
+export declare function applyScaleToDocs(docs: PDFDocumentEntry[], scale: number): void;

package/package.json

@@ -1,11 +1,20 @@
 {
   "name": "@libresign/pdf-elements",
-  "description": "PDF viewer with draggable and resizable element overlays for Vue 2",
-  "version": "0.4.0",
+  "description": "PDF viewer with draggable and resizable element overlays for Vue 3",
+  "version": "1.0.1",
   "author": "LibreCode <contact@librecode.coop>",
   "private": false,
-  "main": "dist/pdf-elements.umd.js",
-  "module": "dist/pdf-elements.esm.js",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./src/components/PDFElements.vue": "./src/components/PDFElements.vue",
+    "./src/utils/asyncReader": "./src/utils/asyncReader.ts"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/LibreSign/pdf-elements"
@@ -21,40 +30,58 @@
     "draggable",
     "resizable",
     "libresign",
-    "vue2"
+    "vue3"
   ],
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "build:lib": "vue-cli-service build --target lib --name pdf-elements src/index.js",
-    "lint": "vue-cli-service lint --no-fix",
-    "lint:fix": "vue-cli-service lint"
+    "dev": "vite",
+    "build": "vite build",
+    "build:report": "vite build --mode report",
+    "build:demo": "vite build --mode demo",
+    "preview:demo": "vite preview --outDir dist-demo",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "eslint . --ext .vue,.ts,.js --max-warnings=0",
+    "lint:fix": "eslint . --ext .vue,.ts,.js --fix"
   },
   "dependencies": {
-    "pdfjs-dist": "^5.4.530",
-    "vue": "^2.7.16"
+    "pdfjs-dist": "^5.4.624",
+    "vue": "^3.5.28"
   },
   "devDependencies": {
-    "@babel/core": "^7.28.6",
-    "@babel/eslint-parser": "^7.28.6",
-    "@babel/plugin-transform-private-methods": "^7.28.6",
     "@nextcloud/browserslist-config": "^3.1.2",
-    "@vue/cli-plugin-babel": "^5.0.9",
-    "@vue/cli-plugin-eslint": "^5.0.9",
-    "@vue/cli-service": "^5.0.9",
-    "eslint": "^8.57.1",
-    "eslint-plugin-vue": "^9.24.0",
+    "@eslint/js": "^9.39.3",
+    "@typescript-eslint/eslint-plugin": "^8.56.0",
+    "@typescript-eslint/parser": "^8.56.0",
+    "@vitejs/plugin-vue": "^6.0.4",
+    "eslint": "^9.0.0",
+    "eslint-plugin-vue": "^10.8.0",
+    "eslint-plugin-vitest": "^0.5.4",
+    "globals": "^15.9.0",
+    "happy-dom": "^20.7.0",
     "postcss": "^8.5.6",
-    "vue-template-compiler": "^2.7.16"
+    "rollup-plugin-visualizer": "^7.0.0",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.18",
+    "@vue/test-utils": "^2.4.6",
+    "vue-eslint-parser": "^10.4.0",
+    "vue-tsc": "^3.2.4"
   },
   "browserslist": [
     "extends @nextcloud/browserslist-config"
   ],
+  "overrides": {
+    "eslint-plugin-vitest": {
+      "@typescript-eslint/utils": "^8.56.0"
+    }
+  },
   "files": [
     "dist",
     "src",
     "COPYING",
     "README.md"
   ],
+  "sideEffects": false,
   "license": "AGPL-3.0-or-later"
 }

package/src/components/DraggableElement.vue

@@ -54,12 +54,15 @@ SPDX-License-Identifier: AGPL-3.0-or-later
   </div>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent, type PropType, type CSSProperties } from 'vue'
+import type { PDFElementObject } from '../types'
+
+export default defineComponent({
   name: 'DraggableElement',
   props: {
     object: {
-      type: Object,
+      type: Object as PropType<PDFElementObject>,
       required: true,
     },
     pagesScale: {
@@ -75,27 +78,27 @@ export default {
       required: true,
     },
     onUpdate: {
-      type: Function,
+      type: Function as PropType<(...args: any[]) => void>,
       default: () => {},
     },
     onDelete: {
-      type: Function,
+      type: Function as PropType<(...args: any[]) => void>,
       default: () => {},
     },
     onDuplicate: {
-      type: Function,
+      type: Function as PropType<(...args: any[]) => void>,
       default: () => {},
     },
     onDragStart: {
-      type: Function,
+      type: Function as PropType<(...args: any[]) => void>,
       default: () => {},
     },
     onDragMove: {
-      type: Function,
+      type: Function as PropType<(...args: any[]) => void>,
       default: () => {},
     },
     onDragEnd: {
-      type: Function,
+      type: Function as PropType<(...args: any[]) => void>,
       default: () => {},
     },
     isBeingDraggedGlobally: {
@@ -103,7 +106,7 @@ export default {
       default: false,
     },
     draggingClientPos: {
-      type: Object,
+      type: Object as PropType<{ x: number; y: number }>,
       default: () => ({ x: 0, y: 0 }),
     },
     currentDocIndex: {
@@ -135,7 +138,7 @@ export default {
       default: false,
     },
     ignoreClickOutsideSelectors: {
-      type: Array,
+      type: Array as PropType<string[]>,
       default: () => [],
     },
   },
@@ -188,7 +191,7 @@ export default {
         width: `${currentWidth * scale}px`,
         height: `${currentHeight * scale}px`,
         pointerEvents: this.readOnly ? 'none' : 'auto',
-      }
+      } as CSSProperties
     },
     toolbarStyle() {
       const scale = this.pagesScale || 1
@@ -209,7 +212,7 @@ export default {
         left: `${(x + width / 2) * scale}px`,
         top: `${top * scale}px`,
         transform: 'translateX(-50%)',
-      }
+      } as CSSProperties
     },
     dragElementStyle() {
       if (!this.isBeingDraggedGlobally || !this.draggingClientPos) {
@@ -218,7 +221,7 @@ export default {
       return {
         opacity: 0,
         pointerEvents: 'none',
-      }
+      } as CSSProperties
     },
   },
   mounted() {
@@ -476,7 +479,7 @@ export default {
       this.currentPageRect = null
     },
   },
-}
+})
 </script>
 
 <style scoped>

package/src/components/PDFElements.vue

@@ -139,18 +139,21 @@ SPDX-License-Identifier: AGPL-3.0-or-later
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent, type PropType, markRaw } from 'vue'
 import PDFPage from './PDFPage.vue'
 import DraggableElement from './DraggableElement.vue'
-import { readAsPDF, readAsArrayBuffer } from '../utils/asyncReader.js'
-import { clampPosition, getVisibleArea } from '../utils/geometry.js'
-import { getViewportWindow, isPageInViewport } from '../utils/pageBounds.js'
-import { applyScaleToDocs } from '../utils/zoom.js'
-import { objectIdExistsInDoc, findObjectPageIndex, updateObjectInDoc, removeObjectFromDoc } from '../utils/objectStore.js'
-import { getCachedMeasurement } from '../utils/measurements.js'
-
-export default {
+import { readAsPDF, readAsArrayBuffer } from '../utils/asyncReader'
+import { clampPosition, getVisibleArea } from '../utils/geometry'
+import { getViewportWindow, isPageInViewport } from '../utils/pageBounds'
+import { applyScaleToDocs } from '../utils/zoom'
+import { objectIdExistsInDoc, findObjectPageIndex, updateObjectInDoc, removeObjectFromDoc } from '../utils/objectStore'
+import { getCachedMeasurement } from '../utils/measurements'
+import type { PDFDocumentEntry, PDFElementObject } from '../types'
+
+export default defineComponent({
   name: 'PDFElements',
+  emits: ['pdf-elements:end-init', 'pdf-elements:delete-object', 'pdf-elements:object-click'],
   components: {
     PDFPage,
     DraggableElement,
@@ -165,11 +168,13 @@ export default {
       default: '100%',
     },
     initFiles: {
-      type: Array,
+      type: Array as PropType<
+        (string | Blob | ArrayBuffer | ArrayBufferView | Record<string, unknown>)[]
+      >,
       default: () => [],
     },
     initFileNames: {
-      type: Array,
+      type: Array as PropType<string[]>,
       default: () => [],
     },
     initialScale: {
@@ -201,7 +206,7 @@ export default {
       default: false,
     },
     ignoreClickOutsideSelectors: {
-      type: Array,
+      type: Array as PropType<string[]>,
       default: () => [],
     },
     pageCountFormat: {
@@ -212,32 +217,36 @@ export default {
       type: Boolean,
       default: false,
     },
+    pdfjsOptions: {
+      type: Object as PropType<Record<string, unknown>>,
+      default: () => ({}),
+    },
   },
   data() {
     return {
       scale: this.initialScale,
-      pdfDocuments: [],
+      pdfDocuments: [] as PDFDocumentEntry[],
       selectedDocIndex: -1,
       selectedPageIndex: -1,
       isAddingMode: false,
-      previewElement: null,
+      previewElement: null as PDFElementObject | null,
       previewPosition: { x: 0, y: 0 },
       previewScale: { x: 1, y: 1 },
       previewPageDocIndex: -1,
       previewPageIndex: -1,
       previewVisible: false,
       hoverRafId: 0,
-      pendingHoverClientPos: null,
-      lastHoverRect: null,
+      pendingHoverClientPos: null as { x: number; y: number } | null,
+      lastHoverRect: null as DOMRect | null,
       addingListenersAttached: false,
       dragRafId: 0,
-      pendingDragClientPos: null,
+      pendingDragClientPos: null as { x: number; y: number } | null,
       pageBoundsVersion: 0,
       lastScrollTop: 0,
       lastClientWidth: 0,
       nextObjectCounter: 0,
       isDraggingElement: false,
-      draggingObject: null,
+      draggingObject: null as PDFElementObject | null,
       draggingDocIndex: -1,
       draggingPageIndex: -1,
       draggingClientPosition: { x: 0, y: 0 },
@@ -246,22 +255,20 @@ export default {
       draggingElementShift: { x: 0, y: 0 },
       lastMouseClientPos: { x: 0, y: 0 },
       viewportRafId: 0,
-      objectIndexCache: {},
-      zoomRafId: null,
-      wheelZoomRafId: null,
-      boundHandleWheel: null,
+      objectIndexCache: markRaw({}) as Record<string, number>,
+      zoomRafId: null as number | null,
+      wheelZoomRafId: null as number | null,
+      boundHandleWheel: null as ((event: WheelEvent) => void) | null,
       visualScale: this.initialScale,
       autoFitApplied: false,
       lastContainerWidth: 0,
+      _pagesBoundingRects: markRaw({}) as Record<string, { docIndex: number; pageIndex: number; rect: DOMRect }>,
+      _pagesBoundingRectsList: markRaw([]) as { docIndex: number; pageIndex: number; rect: DOMRect }[],
+      _pageMeasurementCache: markRaw({}) as Record<string, { width: number; height: number }>,
+      _lastPageBoundsScrollTop: 0,
+      _lastPageBoundsClientHeight: 0,
     }
   },
-  created() {
-      this._pagesBoundingRects = {}
-      this._pagesBoundingRectsList = []
-      this._pageMeasurementCache = {}
-      this._lastPageBoundsScrollTop = 0
-      this._lastPageBoundsClientHeight = 0
-  },
   mounted() {
     this.boundHandleWheel = this.handleWheel.bind(this)
     this.init()
@@ -301,7 +308,7 @@ export default {
   methods: {
     async init() {
       if (!this.initFiles || this.initFiles.length === 0) return
-      const docs = []
+      const docs: PDFDocumentEntry[] = []
       this.autoFitApplied = false
 
       for (let i = 0; i < this.initFiles.length; i++) {
@@ -311,9 +318,9 @@ export default {
         let pdfDoc
         if (file instanceof Blob) {
           const buffer = await readAsArrayBuffer(file)
-          pdfDoc = await readAsPDF({ data: buffer })
+          pdfDoc = await readAsPDF({ data: buffer }, this.pdfjsOptions)
         } else {
-          pdfDoc = await readAsPDF(file)
+          pdfDoc = await readAsPDF(file, this.pdfjsOptions)
         }
 
         const pages = []
@@ -329,12 +336,14 @@ export default {
           pages.push(pagePromise)
         }
 
+        const rawPages = markRaw(pages)
+
         docs.push({
           name,
           file,
-          pdfDoc,
+          pdfDoc: markRaw(pdfDoc),
           numPages: pdfDoc.numPages,
-          pages,
+          pages: rawPages,
           pageWidths,
           pagesScale: Array(pdfDoc.numPages).fill(this.scale),
           allObjects: Array(pdfDoc.numPages).fill(0).map(() => []),
@@ -342,7 +351,7 @@ export default {
       }
 
       this.pdfDocuments = docs
-      this._pageMeasurementCache = {}
+      this._pageMeasurementCache = markRaw({})
       if (docs.length) {
         this.selectedDocIndex = 0
         this.selectedPageIndex = 0
@@ -394,7 +403,12 @@ export default {
     updateDraggingPosition(clientX, clientY) {
       if (!this.isDraggingElement) return
 
-      this.pendingDragClientPos = { x: clientX, y: clientY }
+      if (this.pendingDragClientPos) {
+        this.pendingDragClientPos.x = clientX
+        this.pendingDragClientPos.y = clientY
+      } else {
+        this.pendingDragClientPos = { x: clientX, y: clientY }
+      }
       if (this.dragRafId) return
       this.dragRafId = window.requestAnimationFrame(() => {
         this.dragRafId = 0
@@ -453,6 +467,7 @@ export default {
 
     cachePageBounds() {
       const nextRects = {}
+      const nextList = []
       const container = this.$el
       const scrollTop = container?.scrollTop || 0
       const viewHeight = container?.clientHeight || 0
@@ -477,22 +492,24 @@ export default {
             }
           }
           const rect = canvas.getBoundingClientRect()
-          nextRects[`${docIdx}-${pageIdx}`] = {
+          const entry = {
             docIndex: docIdx,
             pageIndex: pageIdx,
             rect,
           }
+          nextRects[`${docIdx}-${pageIdx}`] = entry
+          nextList.push(entry)
         }
       }
-      this._pagesBoundingRects = nextRects
-      this._pagesBoundingRectsList = Object.values(nextRects)
+      this._pagesBoundingRects = markRaw(nextRects)
+      this._pagesBoundingRectsList = markRaw(nextList)
       this.pageBoundsVersion++
     },
     cachePageBoundsForPage(docIndex, pageIndex) {
       const canvas = this.getPageCanvasElement(docIndex, pageIndex)
       if (!canvas) return
       const rect = canvas.getBoundingClientRect()
-      this._pagesBoundingRects = {
+      const nextRects = {
         ...this._pagesBoundingRects,
         [`${docIndex}-${pageIndex}`]: {
           docIndex,
@@ -500,7 +517,8 @@ export default {
           rect,
         },
       }
-      this._pagesBoundingRectsList = Object.values(this._pagesBoundingRects)
+      this._pagesBoundingRects = markRaw(nextRects)
+      this._pagesBoundingRectsList = markRaw(Object.values(nextRects))
       this.pageBoundsVersion++
     },
     getPageBoundsMap() {
@@ -526,7 +544,7 @@ export default {
     },
 
     getDisplayedPageScale(docIndex, pageIndex) {
-      this.pageBoundsVersion
+      void this.pageBoundsVersion
       const doc = this.pdfDocuments[docIndex]
       if (!doc) return 1
       const baseWidth = doc.pageWidths?.[pageIndex] || 0
@@ -589,7 +607,12 @@ export default {
       if (!this.isAddingMode || !this.previewElement) return
       const { x, y } = this.getPointerPosition(event)
       if (x === undefined || y === undefined) return
-      this.pendingHoverClientPos = { x, y }
+      if (this.pendingHoverClientPos) {
+        this.pendingHoverClientPos.x = x
+        this.pendingHoverClientPos.y = y
+      } else {
+        this.pendingHoverClientPos = { x, y }
+      }
       if (this.hoverRafId) return
       this.hoverRafId = window.requestAnimationFrame(() => {
         this.hoverRafId = 0
@@ -609,11 +632,11 @@ export default {
             rect: this.lastHoverRect,
           }
         } else {
-          const rects = this.getPageBoundsList().length
+          const rectEntries = this.getPageBoundsList().length
             ? this.getPageBoundsList()
             : Object.values(this.getPageBoundsMap())
-          for (let i = 0; i < rects.length; i++) {
-            const entry = rects[i]
+          for (let i = 0; i < rectEntries.length; i++) {
+            const entry = rectEntries[i]
             const rect = entry.rect
             if (cursorX >= rect.left && cursorX <= rect.right &&
                 cursorY >= rect.top && cursorY <= rect.bottom) {
@@ -673,6 +696,7 @@ export default {
 
       const doc = this.pdfDocuments?.[docIndex]
       const pageObjects = doc?.allObjects?.[pageIndex] || []
+      if (pageObjects.length === 0) return
       let hitObject = null
 
       for (let i = pageObjects.length - 1; i >= 0; i--) {
@@ -727,7 +751,7 @@ export default {
 
       applyScaleToDocs(this.pdfDocuments, this.scale)
 
-      this._pageMeasurementCache = {}
+      this._pageMeasurementCache = markRaw({})
       this.cachePageBounds()
     },
 
@@ -794,7 +818,7 @@ export default {
       if (!this.addingListenersAttached) return
       this.addingListenersAttached = false
       document.removeEventListener('mousemove', this.handleMouseMove)
-      document.removeEventListener('touchmove', this.handleMouseMove, { passive: true })
+      document.removeEventListener('touchmove', this.handleMouseMove)
       document.removeEventListener('mouseup', this.finishAdding)
       document.removeEventListener('touchend', this.finishAdding)
       document.removeEventListener('keydown', this.handleKeyDown)
@@ -813,8 +837,9 @@ export default {
         objectToAdd = { ...objectToAdd, id: this.generateObjectId() }
       }
 
-      const pageWidth = this.getPageWidth(docIndex, pageIndex)
-      const pageHeight = this.getPageHeight(docIndex, pageIndex)
+      const measurement = this.getCachedMeasurement(docIndex, pageIndex, pageRef)
+      const pageWidth = measurement.width
+      const pageHeight = measurement.height
 
       if (objectToAdd.x < 0 || objectToAdd.y < 0 ||
           objectToAdd.x + objectToAdd.width > pageWidth ||
@@ -862,11 +887,11 @@ export default {
             pageNumber: pageIndex + 1,
             scale: pagesScale,
             normalizedCoordinates: {
-              llx: parseInt(object.x, 10),
-              lly: parseInt(normalizedCanvasHeight - object.y, 10),
-              ury: parseInt(normalizedCanvasHeight - object.y - object.height, 10),
-              width: parseInt(object.width, 10),
-              height: parseInt(object.height, 10),
+              llx: Math.round(object.x),
+              lly: Math.round(normalizedCanvasHeight - object.y),
+              ury: Math.round(normalizedCanvasHeight - object.y - object.height),
+              width: Math.round(object.width),
+              height: Math.round(object.height),
             },
           })
         })
@@ -1074,9 +1099,11 @@ export default {
       if (!targetObject) return currentPageIndex
 
       let targetPageIndex = currentPageIndex
+      const pageBoundsList = this.getPageBoundsList()
       const pageBoundsMap = this.getPageBoundsMap()
-      for (const key in pageBoundsMap) {
-        const { docIndex: rectDocIndex, pageIndex, rect } = pageBoundsMap[key]
+      const boundsEntries = pageBoundsList.length ? pageBoundsList : Object.values(pageBoundsMap)
+      for (let i = 0; i < boundsEntries.length; i++) {
+        const { docIndex: rectDocIndex, pageIndex, rect } = boundsEntries[i]
         if (rectDocIndex === docIndex &&
             mouseX >= rect.left && mouseX <= rect.right &&
             mouseY >= rect.top && mouseY <= rect.bottom) {
@@ -1186,7 +1213,7 @@ export default {
           this.scheduleAutoFitZoom()
           return
         }
-        const canvases = this.$el?.querySelectorAll('canvas')
+        const canvases = this.$el?.querySelectorAll('canvas') as NodeListOf<HTMLCanvasElement> | undefined
         if (!canvases?.length) return
         maxCanvasWidth = Math.max(...Array.from(canvases).map(canvas =>
           canvas.width / (this.scale || 1),
@@ -1199,12 +1226,12 @@ export default {
         this.scale = optimalScale
         this.visualScale = optimalScale
         applyScaleToDocs(this.pdfDocuments, this.scale)
-        this._pageMeasurementCache = {}
+        this._pageMeasurementCache = markRaw({})
         this.cachePageBounds()
       }
     },
   },
-}
+})
 </script>
 
 <style scoped>