@libresign/pdf-elements 0.2.3 → 0.2.5

package/src/components/PDFElements.vue

@@ -8,7 +8,6 @@ SPDX-License-Identifier: AGPL-3.0-or-later
     <div
       v-if="pdfDocuments.length"
       class="pages-container"
-      :style="{ transform: `scale(${visualScale / scale})`, transformOrigin: 'top center' }"
     >
       <div v-for="(pdfDoc, docIndex) in pdfDocuments" :key="docIndex">
         <div v-for="(page, pIndex) in pdfDoc.pages" :key="`${docIndex}-${pIndex}`" class="page-slot">
@@ -24,6 +23,8 @@ SPDX-License-Identifier: AGPL-3.0-or-later
               />
                 <div
                 class="overlay"
+                @mousemove="handleMouseMove"
+                @touchmove="handleMouseMove"
               >
                 <div
                   v-if="isAddingMode && previewPageDocIndex === docIndex && previewPageIndex === pIndex && previewElement && previewVisible"
@@ -36,10 +37,16 @@ SPDX-License-Identifier: AGPL-3.0-or-later
                   }"
                 >
                   <slot
-                    name="custom"
+                    :name="previewElement.type ? `element-${previewElement.type}` : 'custom'"
                     :object="previewElement"
                     :isSelected="false"
-                  />
+                  >
+                    <slot
+                      name="custom"
+                      :object="previewElement"
+                      :isSelected="false"
+                    />
+                  </slot>
                 </div>
 
                 <DraggableElement
@@ -47,9 +54,10 @@ SPDX-License-Identifier: AGPL-3.0-or-later
                   :key="object.id"
                   :ref="`draggable${docIndex}-${pIndex}-${object.id}`"
                   :object="object"
-                  :pages-scale="getRenderPageScale(docIndex, pIndex)"
+                  :pages-scale="getDisplayedPageScale(docIndex, pIndex)"
                   :page-width="getPageWidth(docIndex, pIndex)"
                   :page-height="getPageHeight(docIndex, pIndex)"
+                  :read-only="readOnly"
                   :on-update="(payload) => updateObject(docIndex, object.id, payload)"
                   :on-delete="() => deleteObject(docIndex, object.id)"
                   :on-drag-start="(mouseX, mouseY, pointerOffset, dragShift) => startDraggingElement(docIndex, pIndex, object, mouseX, mouseY, pointerOffset, dragShift)"
@@ -127,10 +135,14 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 </template>
 
 <script>
-import debounce from 'debounce'
 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 {
   name: 'PDFElements',
@@ -175,6 +187,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    readOnly: {
+      type: Boolean,
+      default: false,
+    },
     pageCountFormat: {
       type: String,
       default: '{currentPage} of {totalPages}',
@@ -197,7 +213,16 @@ export default {
       previewPageDocIndex: -1,
       previewPageIndex: -1,
       previewVisible: false,
-      pagesBoundingRects: {},
+      hoverRafId: 0,
+      pendingHoverClientPos: null,
+      lastHoverRect: null,
+      addingListenersAttached: false,
+      dragRafId: 0,
+      pendingDragClientPos: null,
+      pageBoundsVersion: 0,
+      lastScrollTop: 0,
+      lastClientWidth: 0,
+      nextObjectCounter: 0,
       isDraggingElement: false,
       draggingObject: null,
       draggingDocIndex: -1,
@@ -210,21 +235,23 @@ export default {
       viewportRafId: 0,
       objectIndexCache: {},
       zoomRafId: null,
+      wheelZoomRafId: null,
       boundHandleWheel: null,
-      debouncedApplyZoom: null,
       visualScale: this.initialScale,
       autoFitApplied: false,
+      lastContainerWidth: 0,
     }
   },
+  created() {
+      this._pagesBoundingRects = {}
+      this._pagesBoundingRectsList = []
+      this._pageMeasurementCache = {}
+      this._lastPageBoundsScrollTop = 0
+      this._lastPageBoundsClientHeight = 0
+  },
   mounted() {
     this.boundHandleWheel = this.handleWheel.bind(this)
-    this.debouncedApplyZoom = debounce(this.commitZoom, 150)
     this.init()
-    document.addEventListener('mousemove', this.handleMouseMove)
-    document.addEventListener('touchmove', this.handleMouseMove, { passive: true })
-    document.addEventListener('mouseup', this.finishAdding)
-    document.addEventListener('touchend', this.finishAdding)
-    document.addEventListener('keydown', this.handleKeyDown)
     window.addEventListener('scroll', this.onViewportScroll, { passive: true })
     window.addEventListener('resize', this.onViewportScroll)
     this.$el?.addEventListener('scroll', this.onViewportScroll, { passive: true })
@@ -234,15 +261,14 @@ export default {
     if (this.zoomRafId) {
       cancelAnimationFrame(this.zoomRafId)
     }
-    this.debouncedApplyZoom?.clear?.()
+    if (this.wheelZoomRafId) {
+      cancelAnimationFrame(this.wheelZoomRafId)
+      this.wheelZoomRafId = null
+    }
     if (this.boundHandleWheel) {
       this.$el?.removeEventListener('wheel', this.boundHandleWheel)
     }
-    document.removeEventListener('mousemove', this.handleMouseMove)
-    document.removeEventListener('touchmove', this.handleMouseMove)
-    document.removeEventListener('mouseup', this.finishAdding)
-    document.removeEventListener('touchend', this.finishAdding)
-    document.removeEventListener('keydown', this.handleKeyDown)
+    this.detachAddingListeners()
     window.removeEventListener('scroll', this.onViewportScroll)
     window.removeEventListener('resize', this.onViewportScroll)
     this.$el?.removeEventListener('scroll', this.onViewportScroll)
@@ -250,6 +276,14 @@ export default {
       window.cancelAnimationFrame(this.viewportRafId)
       this.viewportRafId = 0
     }
+    if (this.hoverRafId) {
+      window.cancelAnimationFrame(this.hoverRafId)
+      this.hoverRafId = 0
+    }
+    if (this.dragRafId) {
+      window.cancelAnimationFrame(this.dragRafId)
+      this.dragRafId = 0
+    }
   },
   methods: {
     async init() {
@@ -274,7 +308,7 @@ export default {
         for (let p = 1; p <= pdfDoc.numPages; p++) {
           const pagePromise = pdfDoc.getPage(p)
           pagePromise.then((page) => {
-            pageWidths[p - 1] = page.getViewport({ scale: 1 }).width
+            pageWidths.splice(p - 1, 1, page.getViewport({ scale: 1 }).width)
             if (this.autoFitZoom) {
               this.scheduleAutoFitZoom()
             }
@@ -295,6 +329,7 @@ export default {
       }
 
       this.pdfDocuments = docs
+      this._pageMeasurementCache = {}
       if (docs.length) {
         this.selectedDocIndex = 0
         this.selectedPageIndex = 0
@@ -324,11 +359,8 @@ export default {
         ? dragShift
         : { x: 0, y: 0 }
 
-      const pageKey = `${docIndex}-${pageIndex}`
-      if (!this.pagesBoundingRects[pageKey]) {
-        this.cachePageBounds()
-      }
-      const pageRect = this.pagesBoundingRects[pageKey]?.rect
+      this.cachePageBounds()
+      const pageRect = this.getPageRect(docIndex, pageIndex)
       if (pointerOffset && typeof pointerOffset.x === 'number' && typeof pointerOffset.y === 'number') {
         this.draggingInitialMouseOffset.x = pointerOffset.x
         this.draggingInitialMouseOffset.y = pointerOffset.y
@@ -344,17 +376,22 @@ export default {
         this.draggingClientPosition.y = mouseY - this.draggingInitialMouseOffset.y
       }
 
-      this.cachePageBounds()
     },
 
     updateDraggingPosition(clientX, clientY) {
       if (!this.isDraggingElement) return
 
-      this.lastMouseClientPos.x = clientX
-      this.lastMouseClientPos.y = clientY
-
-      this.draggingClientPosition.x = clientX - this.draggingInitialMouseOffset.x
-      this.draggingClientPosition.y = clientY - this.draggingInitialMouseOffset.y
+      this.pendingDragClientPos = { x: clientX, y: clientY }
+      if (this.dragRafId) return
+      this.dragRafId = window.requestAnimationFrame(() => {
+        this.dragRafId = 0
+        const pending = this.pendingDragClientPos
+        if (!pending) return
+        this.lastMouseClientPos.x = pending.x
+        this.lastMouseClientPos.y = pending.y
+        this.draggingClientPosition.x = pending.x - this.draggingInitialMouseOffset.x
+        this.draggingClientPosition.y = pending.y - this.draggingInitialMouseOffset.y
+      })
     },
 
     stopDraggingElement() {
@@ -386,10 +423,12 @@ export default {
       this.draggingDocIndex = -1
       this.draggingPageIndex = -1
       this.draggingElementShift = { x: 0, y: 0 }
+      this.pendingDragClientPos = null
     },
 
     startAddingElement(templateObject) {
       if (!this.pdfDocuments.length) return
+      this.attachAddingListeners()
       this.isAddingMode = true
       this.previewElement = { ...templateObject }
       this.previewPageDocIndex = 0
@@ -400,33 +439,103 @@ export default {
     },
 
     cachePageBounds() {
-      this.pagesBoundingRects = {}
+      const nextRects = {}
+      const container = this.$el
+      const scrollTop = container?.scrollTop || 0
+      const viewHeight = container?.clientHeight || 0
+      if (!this.isAddingMode && !this.isDraggingElement &&
+        scrollTop === this._lastPageBoundsScrollTop &&
+        viewHeight === this._lastPageBoundsClientHeight) {
+        return
+      }
+      this._lastPageBoundsScrollTop = scrollTop
+      this._lastPageBoundsClientHeight = viewHeight
+      const { minY, maxY } = getViewportWindow(scrollTop, viewHeight)
       for (let docIdx = 0; docIdx < this.pdfDocuments.length; docIdx++) {
         for (let pageIdx = 0; pageIdx < this.pdfDocuments[docIdx].pages.length; pageIdx++) {
           const canvas = this.getPageCanvasElement(docIdx, pageIdx)
           if (!canvas) continue
+          if (viewHeight) {
+            const wrapper = canvas.closest('.page-wrapper') || canvas
+            const offsetTop = wrapper.offsetTop || 0
+            const offsetHeight = wrapper.offsetHeight || 0
+            if (!isPageInViewport(offsetTop, offsetHeight, minY, maxY)) {
+              continue
+            }
+          }
           const rect = canvas.getBoundingClientRect()
-          this.pagesBoundingRects[`${docIdx}-${pageIdx}`] = {
+          nextRects[`${docIdx}-${pageIdx}`] = {
             docIndex: docIdx,
             pageIndex: pageIdx,
             rect,
           }
         }
       }
+      this._pagesBoundingRects = nextRects
+      this._pagesBoundingRectsList = Object.values(nextRects)
+      this.pageBoundsVersion++
+    },
+    cachePageBoundsForPage(docIndex, pageIndex) {
+      const canvas = this.getPageCanvasElement(docIndex, pageIndex)
+      if (!canvas) return
+      const rect = canvas.getBoundingClientRect()
+      this._pagesBoundingRects = {
+        ...this._pagesBoundingRects,
+        [`${docIndex}-${pageIndex}`]: {
+          docIndex,
+          pageIndex,
+          rect,
+        },
+      }
+      this._pagesBoundingRectsList = Object.values(this._pagesBoundingRects)
+      this.pageBoundsVersion++
+    },
+    getPageBoundsMap() {
+      return this._pagesBoundingRects || {}
+    },
+    getPageBoundsList() {
+      return this._pagesBoundingRectsList || []
+    },
+    getPageRect(docIndex, pageIndex) {
+      return this.getPageBoundsMap()[`${docIndex}-${pageIndex}`]?.rect || null
+    },
+    getPointerPosition(event) {
+      if (event?.type?.includes?.('touch')) {
+        return {
+          x: event.touches?.[0]?.clientX,
+          y: event.touches?.[0]?.clientY,
+        }
+      }
+      return {
+        x: event?.clientX,
+        y: event?.clientY,
+      }
     },
 
     getDisplayedPageScale(docIndex, pageIndex) {
+      this.pageBoundsVersion
       const doc = this.pdfDocuments[docIndex]
       if (!doc) return 1
+      const baseWidth = doc.pageWidths?.[pageIndex] || 0
+      const pageBoundsMap = this.getPageBoundsMap()
+      if (!pageBoundsMap[`${docIndex}-${pageIndex}`]) {
+        this.cachePageBoundsForPage(docIndex, pageIndex)
+      }
+      const rectWidth = this.getPageBoundsMap()[`${docIndex}-${pageIndex}`]?.rect?.width || 0
+      if (rectWidth && baseWidth) {
+        return rectWidth / baseWidth
+      }
+      if (this.isAddingMode || this.isDraggingElement) {
+        const canvas = this.getPageCanvasElement(docIndex, pageIndex)
+        const fallbackRectWidth = canvas?.getBoundingClientRect?.().width || 0
+        if (fallbackRectWidth && baseWidth) {
+          return fallbackRectWidth / baseWidth
+        }
+      }
       const base = doc.pagesScale[pageIndex] || 1
       const factor = this.visualScale && this.scale ? (this.visualScale / this.scale) : 1
       return base * factor
     },
-    getRenderPageScale(docIndex, pageIndex) {
-      const doc = this.pdfDocuments[docIndex]
-      if (!doc) return 1
-      return doc.pagesScale[pageIndex] || 1
-    },
     getPageComponent(docIndex, pageIndex) {
       const pageRef = this.$refs[`page${docIndex}-${pageIndex}`]
       return pageRef && Array.isArray(pageRef) && pageRef[0] ? pageRef[0] : null
@@ -439,8 +548,25 @@ export default {
     onViewportScroll() {
       if (this.viewportRafId) return
       this.viewportRafId = window.requestAnimationFrame(() => {
+        const container = this.$el
+        const scrollTop = container?.scrollTop || 0
+        const clientWidth = container?.clientWidth || 0
+        const scrollChanged = scrollTop !== this.lastScrollTop
+        const widthChanged = clientWidth !== this.lastClientWidth
+        this.lastScrollTop = scrollTop
+        this.lastClientWidth = clientWidth
+
         if (this.isAddingMode || this.isDraggingElement) {
-          this.cachePageBounds()
+          if (scrollChanged || widthChanged) {
+            this.cachePageBounds()
+          }
+        }
+        if (this.autoFitZoom && !this.isAddingMode && !this.isDraggingElement) {
+          if (clientWidth && widthChanged) {
+            this.lastContainerWidth = clientWidth
+            this.autoFitApplied = false
+            this.scheduleAutoFitZoom()
+          }
         }
         this.viewportRafId = 0
       })
@@ -448,49 +574,75 @@ export default {
 
     handleMouseMove(event) {
       if (!this.isAddingMode || !this.previewElement) return
+      const { x, y } = this.getPointerPosition(event)
+      if (x === undefined || y === undefined) return
+      this.pendingHoverClientPos = { x, y }
+      if (this.hoverRafId) return
+      this.hoverRafId = window.requestAnimationFrame(() => {
+        this.hoverRafId = 0
+        const pending = this.pendingHoverClientPos
+        if (!pending) return
+
+        const cursorX = pending.x
+        const cursorY = pending.y
+        let target = null
+
+        if (this.lastHoverRect &&
+          cursorX >= this.lastHoverRect.left && cursorX <= this.lastHoverRect.right &&
+          cursorY >= this.lastHoverRect.top && cursorY <= this.lastHoverRect.bottom) {
+          target = {
+            docIndex: this.previewPageDocIndex,
+            pageIndex: this.previewPageIndex,
+            rect: this.lastHoverRect,
+          }
+        } else {
+          const rects = this.getPageBoundsList().length
+            ? this.getPageBoundsList()
+            : Object.values(this.getPageBoundsMap())
+          for (let i = 0; i < rects.length; i++) {
+            const entry = rects[i]
+            const rect = entry.rect
+            if (cursorX >= rect.left && cursorX <= rect.right &&
+                cursorY >= rect.top && cursorY <= rect.bottom) {
+              target = entry
+              break
+            }
+          }
+        }
 
-      const clientX = event.type.includes('touch') ? event.touches[0].clientX : event.clientX
-      const clientY = event.type.includes('touch') ? event.touches[0].clientY : event.clientY
-
-      let foundPage = false
-      for (const key in this.pagesBoundingRects) {
-        const { docIndex, pageIndex, rect } = this.pagesBoundingRects[key]
-        if (clientX >= rect.left && clientX <= rect.right &&
-            clientY >= rect.top && clientY <= rect.bottom) {
-          this.previewPageDocIndex = docIndex
-          this.previewPageIndex = pageIndex
-          foundPage = true
-
-          const canvasEl = this.getPageCanvasElement(docIndex, pageIndex)
-          const pagesScale = this.pdfDocuments[docIndex]?.pagesScale?.[pageIndex] || 1
-          const layoutWidth = canvasEl?.offsetWidth || rect.width
-          const layoutHeight = canvasEl?.offsetHeight || rect.height
-          const layoutScaleX = layoutWidth ? rect.width / layoutWidth : 1
-          const layoutScaleY = layoutHeight ? rect.height / layoutHeight : 1
-          const relX = (clientX - rect.left) / layoutScaleX / pagesScale
-          const relY = (clientY - rect.top) / layoutScaleY / pagesScale
-
-          const pageWidth = layoutWidth / pagesScale
-          const pageHeight = layoutHeight / pagesScale
-          this.previewScale.x = pagesScale * layoutScaleX
-          this.previewScale.y = pagesScale * layoutScaleY
-          let x = relX - this.previewElement.width / 2
-          let y = relY - this.previewElement.height / 2
-
-          x = Math.max(0, Math.min(x, pageWidth - this.previewElement.width))
-          y = Math.max(0, Math.min(y, pageHeight - this.previewElement.height))
-
-          this.previewPosition.x = x
-          this.previewPosition.y = y
-          this.previewVisible = true
-          break
+        if (!target) {
+          this.previewVisible = false
+          this.previewScale = { x: 1, y: 1 }
+          this.lastHoverRect = null
+          return
         }
-      }
 
-      if (!foundPage) {
-        this.previewVisible = false
-        this.previewScale = { x: 1, y: 1 }
-      }
+        this.previewPageDocIndex = target.docIndex
+        this.previewPageIndex = target.pageIndex
+        this.lastHoverRect = target.rect
+        const canvasEl = this.getPageCanvasElement(target.docIndex, target.pageIndex)
+        const pagesScale = this.pdfDocuments[target.docIndex]?.pagesScale?.[target.pageIndex] || 1
+        const renderWidth = canvasEl?.width || target.rect.width
+        const renderHeight = canvasEl?.height || target.rect.height
+        const layoutScaleX = renderWidth ? target.rect.width / renderWidth : 1
+        const layoutScaleY = renderHeight ? target.rect.height / renderHeight : 1
+        const relX = (cursorX - target.rect.left) / layoutScaleX / pagesScale
+        const relY = (cursorY - target.rect.top) / layoutScaleY / pagesScale
+
+        const pageWidth = renderWidth / pagesScale
+        const pageHeight = renderHeight / pagesScale
+        this.previewScale.x = pagesScale
+        this.previewScale.y = pagesScale
+        let x = relX - this.previewElement.width / 2
+        let y = relY - this.previewElement.height / 2
+
+        x = Math.max(0, Math.min(x, pageWidth - this.previewElement.width))
+        y = Math.max(0, Math.min(y, pageHeight - this.previewElement.height))
+
+        this.previewPosition.x = x
+        this.previewPosition.y = y
+        this.previewVisible = true
+      })
     },
 
     handleKeyDown(event) {
@@ -506,7 +658,11 @@ export default {
       const factor = 1 - (event.deltaY * 0.002)
       const nextVisual = Math.max(0.5, Math.min(3.0, this.visualScale * factor))
       this.visualScale = nextVisual
-      this.debouncedApplyZoom()
+      if (this.wheelZoomRafId) return
+      this.wheelZoomRafId = window.requestAnimationFrame(() => {
+        this.wheelZoomRafId = null
+        this.commitZoom()
+      })
     },
 
     commitZoom() {
@@ -514,10 +670,9 @@ export default {
 
       this.scale = newScale
 
-      this.pdfDocuments.forEach((doc) => {
-        doc.pagesScale = doc.pagesScale.map(() => this.scale)
-      })
+      applyScaleToDocs(this.pdfDocuments, this.scale)
 
+      this._pageMeasurementCache = {}
       this.cachePageBounds()
     },
 
@@ -527,7 +682,7 @@ export default {
 
       const objectToAdd = {
         ...this.previewElement,
-        id: `obj-${Date.now()}`,
+        id: this.generateObjectId(),
         x: Math.round(this.previewPosition.x),
         y: Math.round(this.previewPosition.y),
       }
@@ -564,6 +719,30 @@ export default {
       this.isAddingMode = false
       this.previewElement = null
       this.previewVisible = false
+      this.detachAddingListeners()
+    },
+    generateObjectId() {
+      const counter = this.nextObjectCounter++
+      const rand = Math.random().toString(36).slice(2, 8)
+      return `obj-${Date.now()}-${counter}-${rand}`
+    },
+    attachAddingListeners() {
+      if (this.addingListenersAttached) return
+      this.addingListenersAttached = true
+      document.addEventListener('mousemove', this.handleMouseMove)
+      document.addEventListener('touchmove', this.handleMouseMove, { passive: true })
+      document.addEventListener('mouseup', this.finishAdding)
+      document.addEventListener('touchend', this.finishAdding)
+      document.addEventListener('keydown', this.handleKeyDown)
+    },
+    detachAddingListeners() {
+      if (!this.addingListenersAttached) return
+      this.addingListenersAttached = false
+      document.removeEventListener('mousemove', this.handleMouseMove)
+      document.removeEventListener('touchmove', this.handleMouseMove, { passive: true })
+      document.removeEventListener('mouseup', this.finishAdding)
+      document.removeEventListener('touchend', this.finishAdding)
+      document.removeEventListener('keydown', this.handleKeyDown)
     },
 
     addObjectToPage(object, pageIndex = this.selectedPageIndex, docIndex = this.selectedDocIndex) {
@@ -574,45 +753,65 @@ export default {
       const pageRef = this.getPageComponent(docIndex, pageIndex)
       if (!pageRef) return false
 
+      let objectToAdd = object
+      if (!objectToAdd.id || this.objectIdExists(docIndex, objectToAdd.id)) {
+        objectToAdd = { ...objectToAdd, id: this.generateObjectId() }
+      }
+
       const pageWidth = this.getPageWidth(docIndex, pageIndex)
       const pageHeight = this.getPageHeight(docIndex, pageIndex)
 
-      if (object.x < 0 || object.y < 0 ||
-          object.x + object.width > pageWidth ||
-          object.y + object.height > pageHeight) {
+      if (objectToAdd.x < 0 || objectToAdd.y < 0 ||
+          objectToAdd.x + objectToAdd.width > pageWidth ||
+          objectToAdd.y + objectToAdd.height > pageHeight) {
         return false
       }
 
-      doc.allObjects = doc.allObjects.map((objects, pIndex) =>
-        pIndex === pageIndex ? [...objects, object] : objects,
-      )
+      doc.allObjects[pageIndex].push(objectToAdd)
+      this.objectIndexCache[`${docIndex}-${objectToAdd.id}`] = pageIndex
       return true
     },
+    objectIdExists(docIndex, objectId) {
+      if (!objectId) return false
+      const cacheKey = `${docIndex}-${objectId}`
+      if (this.objectIndexCache[cacheKey] !== undefined) return true
+      const doc = this.pdfDocuments[docIndex]
+      return objectIdExistsInDoc(doc, objectId)
+    },
+    updateObjectInPage(docIndex, pageIndex, objectId, payload) {
+      const doc = this.pdfDocuments[docIndex]
+      updateObjectInDoc(doc, pageIndex, objectId, payload)
+    },
+    removeObjectFromPage(docIndex, pageIndex, objectId) {
+      const doc = this.pdfDocuments[docIndex]
+      removeObjectFromDoc(doc, pageIndex, objectId)
+    },
 
     getAllObjects(docIndex = this.selectedDocIndex) {
       if (docIndex < 0 || docIndex >= this.pdfDocuments.length) return []
 
       const doc = this.pdfDocuments[docIndex]
-      const scale = this.scale || 1
       const result = []
 
       doc.allObjects.forEach((pageObjects, pageIndex) => {
         const pageRef = this.getPageComponent(docIndex, pageIndex)
         if (!pageRef) return
-
-        const measurement = pageRef.getCanvasMeasurement()
-        const normalizedCanvasHeight = measurement.canvasHeight / scale
+        const measurement = this.getCachedMeasurement(docIndex, pageIndex, pageRef)
+        const normalizedCanvasHeight = measurement.height
+        const pagesScale = doc.pagesScale[pageIndex] || 1
 
         pageObjects.forEach(object => {
           result.push({
             ...object,
             pageIndex,
             pageNumber: pageIndex + 1,
-            scale,
+            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),
             },
           })
         })
@@ -629,12 +828,10 @@ export default {
       let currentPageIndex = this.objectIndexCache[cacheKey]
 
       if (currentPageIndex === undefined) {
-        doc.allObjects.forEach((objects, pIndex) => {
-          if (objects.find(o => o.id === objectId)) {
-            currentPageIndex = pIndex
-            this.objectIndexCache[cacheKey] = pIndex
-          }
-        })
+        currentPageIndex = findObjectPageIndex(doc, objectId)
+        if (currentPageIndex !== undefined) {
+          this.objectIndexCache[cacheKey] = currentPageIndex
+        }
       }
 
       if (currentPageIndex === undefined) return
@@ -646,19 +843,18 @@ export default {
         const mouseX = payload._mouseX
         const mouseY = payload._mouseY
 
-        if (!this.pagesBoundingRects || Object.keys(this.pagesBoundingRects).length === 0) {
+        const pageBoundsMap = this.getPageBoundsMap()
+        if (!pageBoundsMap || Object.keys(pageBoundsMap).length === 0) {
           this.cachePageBounds()
         }
 
-        const currentPageRect = this.pagesBoundingRects[`${docIndex}-${currentPageIndex}`]?.rect
+        const currentPageRect = this.getPageRect(docIndex, currentPageIndex)
         if (currentPageRect) {
           const pagesScale = this.getDisplayedPageScale(docIndex, currentPageIndex)
           const relX = (mouseX - currentPageRect.left - this.draggingElementShift.x) / pagesScale - (this.draggingInitialMouseOffset.x / pagesScale)
           const relY = (mouseY - currentPageRect.top - this.draggingElementShift.y) / pagesScale - (this.draggingInitialMouseOffset.y / pagesScale)
 
-          doc.allObjects[currentPageIndex] = doc.allObjects[currentPageIndex].map(obj =>
-            obj.id === objectId ? { ...obj, x: relX, y: relY } : obj
-          )
+          this.updateObjectInPage(docIndex, currentPageIndex, objectId, { x: relX, y: relY })
         }
         return
       }
@@ -669,6 +865,14 @@ export default {
         const objWidth = payload.width !== undefined ? payload.width : targetObject.width
         const objHeight = payload.height !== undefined ? payload.height : targetObject.height
 
+        const { width: currentPageWidth, height: currentPageHeight } = this.getPageSize(docIndex, currentPageIndex)
+        if (newX >= 0 && newY >= 0 &&
+            newX + objWidth <= currentPageWidth &&
+            newY + objHeight <= currentPageHeight) {
+          this.updateObjectInPage(docIndex, currentPageIndex, objectId, payload)
+          return
+        }
+
         let bestPageIndex = currentPageIndex
         let maxVisibleArea = 0
 
@@ -676,30 +880,18 @@ export default {
           const pageWidth = this.getPageWidth(docIndex, pIndex)
           const pageHeight = this.getPageHeight(docIndex, pIndex)
 
-          const visibleLeft = Math.max(0, newX)
-          const visibleTop = Math.max(0, newY)
-          const visibleRight = Math.min(pageWidth, newX + objWidth)
-          const visibleBottom = Math.min(pageHeight, newY + objHeight)
-
-          if (visibleRight > visibleLeft && visibleBottom > visibleTop) {
-            const visibleArea = (visibleRight - visibleLeft) * (visibleBottom - visibleTop)
-            if (visibleArea > maxVisibleArea) {
-              maxVisibleArea = visibleArea
-              bestPageIndex = pIndex
-            }
+          const visibleArea = getVisibleArea(newX, newY, objWidth, objHeight, pageWidth, pageHeight)
+          if (visibleArea > maxVisibleArea) {
+            maxVisibleArea = visibleArea
+            bestPageIndex = pIndex
           }
         }
 
         if (bestPageIndex !== currentPageIndex) {
-          const pageWidth = this.getPageWidth(docIndex, bestPageIndex)
-          const pageHeight = this.getPageHeight(docIndex, bestPageIndex)
+          const { width: pageWidth, height: pageHeight } = this.getPageSize(docIndex, bestPageIndex)
+          const { x: adjustedX, y: adjustedY } = clampPosition(newX, newY, objWidth, objHeight, pageWidth, pageHeight)
 
-          const adjustedX = Math.max(0, Math.min(newX, pageWidth - objWidth))
-          const adjustedY = Math.max(0, Math.min(newY, pageHeight - objHeight))
-
-          doc.allObjects[currentPageIndex] = doc.allObjects[currentPageIndex].filter(
-            obj => obj.id !== objectId
-          )
+          this.removeObjectFromPage(docIndex, currentPageIndex, objectId)
           const updatedObject = {
             ...targetObject,
             ...payload,
@@ -711,8 +903,7 @@ export default {
           return
         }
 
-        const pageWidth = this.getPageWidth(docIndex, currentPageIndex)
-        const pageHeight = this.getPageHeight(docIndex, currentPageIndex)
+        const { width: pageWidth, height: pageHeight } = this.getPageSize(docIndex, currentPageIndex)
 
         if (newX < 0 || newY < 0 ||
             newX + objWidth > pageWidth ||
@@ -721,18 +912,33 @@ export default {
         }
       }
 
-      doc.allObjects = doc.allObjects.map(objects =>
-        objects.map(object => (object.id === objectId ? { ...object, ...payload } : object)),
-      )
+      this.updateObjectInPage(docIndex, currentPageIndex, objectId, payload)
     },
 
     deleteObject(docIndex, objectId) {
       if (docIndex < 0 || docIndex >= this.pdfDocuments.length) return
       const doc = this.pdfDocuments[docIndex]
-      doc.allObjects = doc.allObjects.map(objects =>
-        objects.filter(object => object.id !== objectId),
-      )
+      let deletedObject = null
+      let deletedPageIndex = -1
+
+      doc.allObjects.some((objects, pageIndex) => {
+        const objectIndex = objects.findIndex(object => object.id === objectId)
+        if (objectIndex === -1) {
+          return false
+        }
+        deletedObject = objects[objectIndex]
+        deletedPageIndex = pageIndex
+        objects.splice(objectIndex, 1)
+        return true
+      })
       delete this.objectIndexCache[`${docIndex}-${objectId}`]
+      if (deletedObject) {
+        this.$emit('pdf-elements:delete-object', {
+          object: deletedObject,
+          docIndex,
+          pageIndex: deletedPageIndex,
+        })
+      }
     },
 
     checkAndMoveObjectPage(docIndex, objectId, mouseX, mouseY) {
@@ -743,12 +949,10 @@ export default {
       let currentPageIndex = this.objectIndexCache[cacheKey]
 
       if (currentPageIndex === undefined) {
-        doc.allObjects.forEach((objects, pIndex) => {
-          if (objects.find(o => o.id === objectId)) {
-            currentPageIndex = pIndex
-            this.objectIndexCache[cacheKey] = pIndex
-          }
-        })
+        currentPageIndex = findObjectPageIndex(doc, objectId)
+        if (currentPageIndex !== undefined) {
+          this.objectIndexCache[cacheKey] = currentPageIndex
+        }
       }
 
       if (currentPageIndex === undefined) return undefined
@@ -757,8 +961,9 @@ export default {
       if (!targetObject) return currentPageIndex
 
       let targetPageIndex = currentPageIndex
-      for (const key in this.pagesBoundingRects) {
-        const { docIndex: rectDocIndex, pageIndex, rect } = this.pagesBoundingRects[key]
+      const pageBoundsMap = this.getPageBoundsMap()
+      for (const key in pageBoundsMap) {
+        const { docIndex: rectDocIndex, pageIndex, rect } = pageBoundsMap[key]
         if (rectDocIndex === docIndex &&
             mouseX >= rect.left && mouseX <= rect.right &&
             mouseY >= rect.top && mouseY <= rect.bottom) {
@@ -767,23 +972,25 @@ export default {
         }
       }
 
-      const targetPageRect = this.pagesBoundingRects[`${docIndex}-${targetPageIndex}`]?.rect
+      const targetPageRect = this.getPageRect(docIndex, targetPageIndex)
       if (!targetPageRect) return currentPageIndex
 
       const pagesScale = this.getDisplayedPageScale(docIndex, targetPageIndex)
       const relX = (mouseX - targetPageRect.left - this.draggingElementShift.x) / pagesScale - (this.draggingInitialMouseOffset.x / pagesScale)
       const relY = (mouseY - targetPageRect.top - this.draggingElementShift.y) / pagesScale - (this.draggingInitialMouseOffset.y / pagesScale)
 
-      const pageWidth = this.getPageWidth(docIndex, targetPageIndex)
-      const pageHeight = this.getPageHeight(docIndex, targetPageIndex)
-
-      const clampedX = Math.max(0, Math.min(relX, pageWidth - targetObject.width))
-      const clampedY = Math.max(0, Math.min(relY, pageHeight - targetObject.height))
+      const { width: pageWidth, height: pageHeight } = this.getPageSize(docIndex, targetPageIndex)
+      const { x: clampedX, y: clampedY } = clampPosition(
+        relX,
+        relY,
+        targetObject.width,
+        targetObject.height,
+        pageWidth,
+        pageHeight,
+      )
 
       if (targetPageIndex !== currentPageIndex) {
-        doc.allObjects[currentPageIndex] = doc.allObjects[currentPageIndex].filter(
-          obj => obj.id !== objectId
-        )
+        this.removeObjectFromPage(docIndex, currentPageIndex, objectId)
         doc.allObjects[targetPageIndex].push({
           ...targetObject,
           x: clampedX,
@@ -791,9 +998,7 @@ export default {
         })
         this.objectIndexCache[cacheKey] = targetPageIndex
       } else if (clampedX !== targetObject.x || clampedY !== targetObject.y) {
-        doc.allObjects[currentPageIndex] = doc.allObjects[currentPageIndex].map(obj =>
-          obj.id === objectId ? { ...obj, x: clampedX, y: clampedY } : obj
-        )
+        this.updateObjectInPage(docIndex, currentPageIndex, objectId, { x: clampedX, y: clampedY })
       }
 
       return targetPageIndex
@@ -801,8 +1006,9 @@ export default {
 
     onMeasure(e, docIndex, pageIndex) {
       if (docIndex < 0 || docIndex >= this.pdfDocuments.length) return
-      this.pdfDocuments[docIndex].pagesScale[pageIndex] = e.scale
-      this.cachePageBounds()
+      this.pdfDocuments[docIndex].pagesScale.splice(pageIndex, 1, e.scale)
+      this._pageMeasurementCache[`${docIndex}-${pageIndex}`] = null
+      this.cachePageBoundsForPage(docIndex, pageIndex)
       if (this.autoFitZoom) {
         this.scheduleAutoFitZoom()
       }
@@ -816,16 +1022,26 @@ export default {
     getPageWidth(docIndex, pageIndex) {
       const pageRef = this.getPageComponent(docIndex, pageIndex)
       if (!pageRef) return 0
-      const doc = this.pdfDocuments[docIndex]
-      const pagesScale = doc.pagesScale[pageIndex] || 1
-      return pageRef.getCanvasMeasurement().canvasWidth / pagesScale
+      const measurement = this.getCachedMeasurement(docIndex, pageIndex, pageRef)
+      return measurement.width
     },
     getPageHeight(docIndex, pageIndex) {
       const pageRef = this.getPageComponent(docIndex, pageIndex)
       if (!pageRef) return 0
+      const measurement = this.getCachedMeasurement(docIndex, pageIndex, pageRef)
+      return measurement.height
+    },
+    getPageSize(docIndex, pageIndex) {
+      return {
+        width: this.getPageWidth(docIndex, pageIndex),
+        height: this.getPageHeight(docIndex, pageIndex),
+      }
+    },
+    getCachedMeasurement(docIndex, pageIndex, pageRef) {
+      const cacheKey = `${docIndex}-${pageIndex}`
       const doc = this.pdfDocuments[docIndex]
       const pagesScale = doc.pagesScale[pageIndex] || 1
-      return pageRef.getCanvasMeasurement().canvasHeight / pagesScale
+      return getCachedMeasurement(this._pageMeasurementCache, cacheKey, pageRef, pagesScale)
     },
     calculateOptimalScale(maxPageWidth) {
       const containerWidth = this.$el?.clientWidth || 0
@@ -869,9 +1085,8 @@ export default {
       if (Math.abs(optimalScale - this.scale) > 0.01) {
         this.scale = optimalScale
         this.visualScale = optimalScale
-        this.pdfDocuments.forEach((doc) => {
-          doc.pagesScale = doc.pagesScale.map(() => this.scale)
-        })
+        applyScaleToDocs(this.pdfDocuments, this.scale)
+        this._pageMeasurementCache = {}
         this.cachePageBounds()
       }
     },
@@ -913,15 +1128,6 @@ export default {
   opacity: 0.7;
   pointer-events: none;
 }
-.drag-ghost {
-  position: fixed;
-  opacity: 0.9;
-  pointer-events: none;
-  z-index: 10000;
-  transform-origin: top left;
-  transition: none;
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-}
 .overlay {
   position: absolute;
   top: 0;