@libresign/pdf-elements 0.1.0

package/src/components/PDFElements.vue

@@ -0,0 +1,870 @@
+<!--
+SPDX-FileCopyrightText: 2026 LibreCode coop and contributors
+SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+  <div :style="{ width, height }" class="pdf-elements-root">
+    <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">
+          <div class="page-wrapper"
+            @mousedown="selectPage(docIndex, pIndex)"
+            @touchstart="selectPage(docIndex, pIndex)">
+            <div class="page-canvas" :class="{ 'shadow-outline': docIndex === selectedDocIndex && pIndex === selectedPageIndex }">
+              <PDFPage
+                :ref="`page${docIndex}-${pIndex}`"
+                :page="page"
+                :scale="scale"
+                @onMeasure="onMeasure($event, docIndex, pIndex)"
+              />
+                <div
+                class="overlay"
+              >
+                <div
+                  v-if="isAddingMode && previewPageDocIndex === docIndex && previewPageIndex === pIndex && previewElement && previewVisible"
+                  class="preview-element"
+                  :style="{
+                    left: `${previewPosition.x * previewScale.x}px`,
+                    top: `${previewPosition.y * previewScale.y}px`,
+                    width: `${previewElement.width * previewScale.x}px`,
+                    height: `${previewElement.height * previewScale.y}px`,
+                  }"
+                >
+                  <slot
+                    name="custom"
+                    :object="previewElement"
+                    :isSelected="false"
+                  />
+                </div>
+
+                <DraggableElement
+                  v-for="object in pdfDoc.allObjects[pIndex]"
+                  :key="object.id"
+                  :ref="`draggable${docIndex}-${pIndex}-${object.id}`"
+                  :object="object"
+                  :pages-scale="getRenderPageScale(docIndex, pIndex)"
+                  :page-width="getPageWidth(docIndex, pIndex)"
+                  :page-height="getPageHeight(docIndex, pIndex)"
+                  :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)"
+                  :on-drag-move="updateDraggingPosition"
+                  :on-drag-end="stopDraggingElement"
+                  :is-being-dragged-globally="isDraggingElement && draggingObject && draggingObject.id === object.id"
+                  :dragging-client-pos="draggingClientPosition"
+                  :current-doc-index="docIndex"
+                  :current-page-index="pIndex"
+                  :global-drag-doc-index="draggingDocIndex"
+                  :global-drag-page-index="draggingPageIndex"
+                  :show-selection-ui="showSelectionHandles && !hideSelectionUI && object.resizable !== false"
+                  :show-default-actions="showElementActions && !hideSelectionUI"
+                >
+                  <template #default="slotProps">
+                    <slot
+                      :name="slotProps.object.type ? `element-${slotProps.object.type}` : 'custom'"
+                      :object="slotProps.object"
+                      :onDelete="slotProps.onDelete"
+                      :onResize="slotProps.onResize"
+                    >
+                      <slot
+                        name="custom"
+                        :object="slotProps.object"
+                        :onDelete="slotProps.onDelete"
+                        :onResize="slotProps.onResize"
+                      />
+                    </slot>
+                  </template>
+                  <template #actions="slotProps">
+                    <slot
+                      name="actions"
+                      :object="slotProps.object"
+                      :onDelete="slotProps.onDelete"
+                    />
+                  </template>
+                </DraggableElement>
+              </div>
+            </div>
+            <div v-if="showPageFooter" class="page-footer">
+              <span>{{ pdfDoc.name }}</span>
+              <span>{{ formatPageNumber(pIndex + 1, pdfDoc.numPages) }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div
+      v-if="isDraggingElement && draggingObject"
+      class="drag-portal"
+      :style="{
+        position: 'fixed',
+        left: `${draggingClientPosition.x}px`,
+        top: `${draggingClientPosition.y}px`,
+        width: `${draggingObject.width * draggingScale}px`,
+        height: `${draggingObject.height * draggingScale}px`,
+        pointerEvents: 'none',
+      }"
+    >
+      <slot
+        :name="draggingObject.type ? `element-${draggingObject.type}` : 'custom'"
+        :object="draggingObject"
+        :isSelected="false"
+      >
+        <slot
+          name="custom"
+          :object="draggingObject"
+          :isSelected="false"
+        />
+      </slot>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import debounce from 'debounce'
+import PDFPage from './PDFPage.vue'
+import DraggableElement from './DraggableElement.vue'
+import { readAsPDF, readAsArrayBuffer } from '../utils/asyncReader.js'
+
+export default {
+  name: 'PDFElements',
+  components: {
+    PDFPage,
+    DraggableElement,
+  },
+  props: {
+    width: {
+      type: String,
+      default: '100%',
+    },
+    height: {
+      type: String,
+      default: '100%',
+    },
+    initFiles: {
+      type: Array,
+      default: () => [],
+    },
+    initFileNames: {
+      type: Array,
+      default: () => [],
+    },
+    initialScale: {
+      type: Number,
+      default: 1,
+    },
+    showPageFooter: {
+      type: Boolean,
+      default: true,
+    },
+    hideSelectionUI: {
+      type: Boolean,
+      default: false,
+    },
+    showSelectionHandles: {
+      type: Boolean,
+      default: true,
+    },
+    showElementActions: {
+      type: Boolean,
+      default: true,
+    },
+    pageCountFormat: {
+      type: String,
+      default: '{currentPage} of {totalPages}',
+    },
+  },
+  data() {
+    return {
+      scale: this.initialScale,
+      pdfDocuments: [],
+      selectedDocIndex: -1,
+      selectedPageIndex: -1,
+      isAddingMode: false,
+      previewElement: null,
+      previewPosition: { x: 0, y: 0 },
+      previewScale: { x: 1, y: 1 },
+      previewPageDocIndex: -1,
+      previewPageIndex: -1,
+      previewVisible: false,
+      pagesBoundingRects: {},
+      isDraggingElement: false,
+      draggingObject: null,
+      draggingDocIndex: -1,
+      draggingPageIndex: -1,
+      draggingClientPosition: { x: 0, y: 0 },
+      draggingScale: 1,
+      draggingInitialMouseOffset: { x: 0, y: 0 },
+      draggingElementShift: { x: 0, y: 0 },
+      lastMouseClientPos: { x: 0, y: 0 },
+      viewportRafId: 0,
+      objectIndexCache: {},
+      zoomRafId: null,
+      boundHandleWheel: null,
+      debouncedApplyZoom: null,
+      visualScale: this.initialScale,
+    }
+  },
+  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 })
+    this.$el?.addEventListener('wheel', this.boundHandleWheel, { passive: false })
+  },
+  beforeUnmount() {
+    if (this.zoomRafId) {
+      cancelAnimationFrame(this.zoomRafId)
+    }
+    this.debouncedApplyZoom?.clear?.()
+    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)
+    window.removeEventListener('scroll', this.onViewportScroll)
+    window.removeEventListener('resize', this.onViewportScroll)
+    this.$el?.removeEventListener('scroll', this.onViewportScroll)
+    if (this.viewportRafId) {
+      window.cancelAnimationFrame(this.viewportRafId)
+      this.viewportRafId = 0
+    }
+  },
+  methods: {
+    async init() {
+      if (!this.initFiles || this.initFiles.length === 0) return
+      const docs = []
+
+      for (let i = 0; i < this.initFiles.length; i++) {
+        const file = this.initFiles[i]
+        const name = this.initFileNames[i] || `document-${i + 1}.pdf`
+
+        let pdfDoc
+        if (file instanceof Blob) {
+          const buffer = await readAsArrayBuffer(file)
+          pdfDoc = await readAsPDF({ data: buffer })
+        } else {
+          pdfDoc = await readAsPDF(file)
+        }
+
+        const pages = []
+        for (let p = 1; p <= pdfDoc.numPages; p++) {
+          pages.push(pdfDoc.getPage(p))
+        }
+
+        docs.push({
+          name,
+          file,
+          pdfDoc,
+          numPages: pdfDoc.numPages,
+          pages,
+          pagesScale: Array(pdfDoc.numPages).fill(this.scale),
+          allObjects: Array(pdfDoc.numPages).fill(0).map(() => []),
+        })
+      }
+
+      this.pdfDocuments = docs
+      if (docs.length) {
+        this.selectedDocIndex = 0
+        this.selectedPageIndex = 0
+        this.$emit('pdf-elements:end-init', { docsCount: docs.length })
+      }
+    },
+
+    selectPage(docIndex, pageIndex) {
+      this.selectedDocIndex = docIndex
+      this.selectedPageIndex = pageIndex
+    },
+
+    startDraggingElement(docIndex, pageIndex, object, mouseX, mouseY, pointerOffset, dragShift) {
+      this.isDraggingElement = true
+      this.draggingObject = { ...object }
+      this.draggingDocIndex = docIndex
+      this.draggingPageIndex = pageIndex
+      this.draggingScale = this.getDisplayedPageScale(docIndex, pageIndex)
+      this.lastMouseClientPos.x = mouseX
+      this.lastMouseClientPos.y = mouseY
+      this.draggingElementShift = dragShift && typeof dragShift.x === 'number' && typeof dragShift.y === 'number'
+        ? dragShift
+        : { x: 0, y: 0 }
+
+      const pageKey = `${docIndex}-${pageIndex}`
+      if (!this.pagesBoundingRects[pageKey]) {
+        this.cachePageBounds()
+      }
+      const pageRect = this.pagesBoundingRects[pageKey]?.rect
+      if (pointerOffset && typeof pointerOffset.x === 'number' && typeof pointerOffset.y === 'number') {
+        this.draggingInitialMouseOffset.x = pointerOffset.x
+        this.draggingInitialMouseOffset.y = pointerOffset.y
+        this.draggingClientPosition.x = mouseX - this.draggingInitialMouseOffset.x
+        this.draggingClientPosition.y = mouseY - this.draggingInitialMouseOffset.y
+      } else if (pageRect) {
+        const elementScreenX = pageRect.left + (object.x * this.draggingScale)
+        const elementScreenY = pageRect.top + (object.y * this.draggingScale)
+        this.draggingInitialMouseOffset.x = mouseX - elementScreenX
+        this.draggingInitialMouseOffset.y = mouseY - elementScreenY
+
+        this.draggingClientPosition.x = mouseX - this.draggingInitialMouseOffset.x
+        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
+    },
+
+    stopDraggingElement() {
+      if (this.draggingObject) {
+        const objectId = this.draggingObject.id
+        const originalDocIndex = this.draggingDocIndex
+
+        const finalPageIndex = this.checkAndMoveObjectPage(
+          this.draggingDocIndex,
+          objectId,
+          this.lastMouseClientPos.x,
+          this.lastMouseClientPos.y
+        )
+
+        if (finalPageIndex !== undefined) {
+          this.$nextTick(() => {
+            this.selectPage(originalDocIndex, finalPageIndex)
+
+            const refKey = `draggable${originalDocIndex}-${finalPageIndex}-${objectId}`
+            const draggableRefs = this.$refs[refKey]
+            if (draggableRefs && Array.isArray(draggableRefs) && draggableRefs[0]) {
+              draggableRefs[0].isSelected = true
+            }
+          })
+        }
+      }
+      this.isDraggingElement = false
+      this.draggingObject = null
+      this.draggingDocIndex = -1
+      this.draggingPageIndex = -1
+      this.draggingElementShift = { x: 0, y: 0 }
+    },
+
+    startAddingElement(templateObject) {
+      if (!this.pdfDocuments.length) return
+      this.isAddingMode = true
+      this.previewElement = { ...templateObject }
+      this.previewPageDocIndex = 0
+      this.previewPageIndex = 0
+      this.previewVisible = false
+      this.previewScale = { x: 1, y: 1 }
+      this.cachePageBounds()
+    },
+
+    cachePageBounds() {
+      this.pagesBoundingRects = {}
+      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
+          const rect = canvas.getBoundingClientRect()
+          this.pagesBoundingRects[`${docIdx}-${pageIdx}`] = {
+            docIndex: docIdx,
+            pageIndex: pageIdx,
+            rect,
+          }
+        }
+      }
+    },
+
+    getDisplayedPageScale(docIndex, pageIndex) {
+      const doc = this.pdfDocuments[docIndex]
+      if (!doc) return 1
+      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
+    },
+    getPageCanvasElement(docIndex, pageIndex) {
+      const pageComponent = this.getPageComponent(docIndex, pageIndex)
+      return pageComponent ? (pageComponent.$el || pageComponent) : null
+    },
+
+    onViewportScroll() {
+      if (this.viewportRafId) return
+      this.viewportRafId = window.requestAnimationFrame(() => {
+        if (this.isAddingMode || this.isDraggingElement) {
+          this.cachePageBounds()
+        }
+        this.viewportRafId = 0
+      })
+    },
+
+    handleMouseMove(event) {
+      if (!this.isAddingMode || !this.previewElement) return
+
+      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 (!foundPage) {
+        this.previewVisible = false
+        this.previewScale = { x: 1, y: 1 }
+      }
+    },
+
+    handleKeyDown(event) {
+      if (event.key === 'Escape' && this.isAddingMode) {
+        this.cancelAdding()
+      }
+    },
+
+    handleWheel(event) {
+      if (!event.ctrlKey) return
+      event.preventDefault()
+
+      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()
+    },
+
+    commitZoom() {
+      const newScale = this.visualScale
+
+      this.scale = newScale
+
+      this.pdfDocuments.forEach((doc) => {
+        doc.pagesScale = doc.pagesScale.map(() => this.scale)
+      })
+
+      this.cachePageBounds()
+    },
+
+    finishAdding() {
+      if (!this.isAddingMode || !this.previewElement) return
+      if (!this.previewVisible) return
+
+      const objectToAdd = {
+        ...this.previewElement,
+        id: `obj-${Date.now()}`,
+        x: Math.round(this.previewPosition.x),
+        y: Math.round(this.previewPosition.y),
+      }
+
+      const doc = this.pdfDocuments[this.previewPageDocIndex]
+      const pageWidth = this.getPageWidth(this.previewPageDocIndex, this.previewPageIndex)
+      const pageHeight = this.getPageHeight(this.previewPageDocIndex, this.previewPageIndex)
+
+      if (objectToAdd.x < 0 || objectToAdd.y < 0 ||
+          objectToAdd.x + objectToAdd.width > pageWidth ||
+          objectToAdd.y + objectToAdd.height > pageHeight) {
+        this.cancelAdding()
+        return
+      }
+
+      doc.allObjects[this.previewPageIndex].push(objectToAdd)
+
+      const pageIndex = this.previewPageIndex
+      const docIndex = this.previewPageDocIndex
+      const objectId = objectToAdd.id
+
+      this.cancelAdding()
+
+      this.$nextTick(() => {
+        const refKey = `draggable${docIndex}-${pageIndex}-${objectId}`
+        const draggableRefs = this.$refs[refKey]
+        if (draggableRefs && Array.isArray(draggableRefs) && draggableRefs[0]) {
+          draggableRefs[0].isSelected = true
+        }
+      })
+    },
+
+    cancelAdding() {
+      this.isAddingMode = false
+      this.previewElement = null
+      this.previewVisible = false
+    },
+
+    addObjectToPage(object, pageIndex = this.selectedPageIndex, docIndex = this.selectedDocIndex) {
+      if (docIndex < 0 || docIndex >= this.pdfDocuments.length) return false
+      if (pageIndex < 0 || pageIndex >= this.pdfDocuments[docIndex].pages.length) return false
+
+      const doc = this.pdfDocuments[docIndex]
+      const pageRef = this.getPageComponent(docIndex, pageIndex)
+      if (!pageRef) return false
+
+      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) {
+        return false
+      }
+
+      doc.allObjects = doc.allObjects.map((objects, pIndex) =>
+        pIndex === pageIndex ? [...objects, object] : objects,
+      )
+      return true
+    },
+
+    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
+
+        pageObjects.forEach(object => {
+          result.push({
+            ...object,
+            pageIndex,
+            pageNumber: pageIndex + 1,
+            scale,
+            normalizedCoordinates: {
+              llx: parseInt(object.x, 10),
+              lly: parseInt(normalizedCanvasHeight - object.y, 10),
+              ury: parseInt(normalizedCanvasHeight - object.y - object.height, 10),
+            },
+          })
+        })
+      })
+
+      return result
+    },
+
+    updateObject(docIndex, objectId, payload) {
+      if (docIndex < 0 || docIndex >= this.pdfDocuments.length) return
+      const doc = this.pdfDocuments[docIndex]
+
+      const cacheKey = `${docIndex}-${objectId}`
+      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
+          }
+        })
+      }
+
+      if (currentPageIndex === undefined) return
+
+      const targetObject = doc.allObjects[currentPageIndex]?.find(o => o.id === objectId)
+      if (!targetObject) return
+
+      if (payload._globalDrag && payload._mouseX !== undefined && payload._mouseY !== undefined) {
+        const mouseX = payload._mouseX
+        const mouseY = payload._mouseY
+
+        if (!this.pagesBoundingRects || Object.keys(this.pagesBoundingRects).length === 0) {
+          this.cachePageBounds()
+        }
+
+        const currentPageRect = this.pagesBoundingRects[`${docIndex}-${currentPageIndex}`]?.rect
+        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
+          )
+        }
+        return
+      }
+
+      if (payload.x !== undefined || payload.y !== undefined) {
+        const newX = payload.x !== undefined ? payload.x : targetObject.x
+        const newY = payload.y !== undefined ? payload.y : targetObject.y
+        const objWidth = payload.width !== undefined ? payload.width : targetObject.width
+        const objHeight = payload.height !== undefined ? payload.height : targetObject.height
+
+        let bestPageIndex = currentPageIndex
+        let maxVisibleArea = 0
+
+        for (let pIndex = 0; pIndex < doc.pages.length; pIndex++) {
+          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
+            }
+          }
+        }
+
+        if (bestPageIndex !== currentPageIndex) {
+          const pageWidth = this.getPageWidth(docIndex, bestPageIndex)
+          const pageHeight = this.getPageHeight(docIndex, bestPageIndex)
+
+          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
+          )
+          const updatedObject = {
+            ...targetObject,
+            ...payload,
+            x: adjustedX,
+            y: adjustedY,
+          }
+          doc.allObjects[bestPageIndex].push(updatedObject)
+          this.objectIndexCache[`${docIndex}-${objectId}`] = bestPageIndex
+          return
+        }
+
+        const pageWidth = this.getPageWidth(docIndex, currentPageIndex)
+        const pageHeight = this.getPageHeight(docIndex, currentPageIndex)
+
+        if (newX < 0 || newY < 0 ||
+            newX + objWidth > pageWidth ||
+            newY + objHeight > pageHeight) {
+          return
+        }
+      }
+
+      doc.allObjects = doc.allObjects.map(objects =>
+        objects.map(object => (object.id === objectId ? { ...object, ...payload } : object)),
+      )
+    },
+
+    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),
+      )
+      delete this.objectIndexCache[`${docIndex}-${objectId}`]
+    },
+
+    checkAndMoveObjectPage(docIndex, objectId, mouseX, mouseY) {
+      if (docIndex < 0 || docIndex >= this.pdfDocuments.length) return undefined
+      const doc = this.pdfDocuments[docIndex]
+
+      const cacheKey = `${docIndex}-${objectId}`
+      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
+          }
+        })
+      }
+
+      if (currentPageIndex === undefined) return undefined
+
+      const targetObject = doc.allObjects[currentPageIndex]?.find(o => o.id === objectId)
+      if (!targetObject) return currentPageIndex
+
+      let targetPageIndex = currentPageIndex
+      for (const key in this.pagesBoundingRects) {
+        const { docIndex: rectDocIndex, pageIndex, rect } = this.pagesBoundingRects[key]
+        if (rectDocIndex === docIndex &&
+            mouseX >= rect.left && mouseX <= rect.right &&
+            mouseY >= rect.top && mouseY <= rect.bottom) {
+          targetPageIndex = pageIndex
+          break
+        }
+      }
+
+      const targetPageRect = this.pagesBoundingRects[`${docIndex}-${targetPageIndex}`]?.rect
+      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))
+
+      if (targetPageIndex !== currentPageIndex) {
+        doc.allObjects[currentPageIndex] = doc.allObjects[currentPageIndex].filter(
+          obj => obj.id !== objectId
+        )
+        doc.allObjects[targetPageIndex].push({
+          ...targetObject,
+          x: clampedX,
+          y: clampedY,
+        })
+        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
+        )
+      }
+
+      return targetPageIndex
+    },
+
+    onMeasure(e, docIndex, pageIndex) {
+      if (docIndex < 0 || docIndex >= this.pdfDocuments.length) return
+      this.pdfDocuments[docIndex].pagesScale[pageIndex] = e.scale
+      this.cachePageBounds()
+    },
+
+    formatPageNumber(currentPage, totalPages) {
+      return this.pageCountFormat
+        .replace('{currentPage}', currentPage)
+        .replace('{totalPages}', totalPages)
+    },
+    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
+    },
+    getPageHeight(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().canvasHeight / pagesScale
+    },
+  },
+}
+</script>
+
+<style scoped>
+.pdf-elements-root {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  box-sizing: border-box;
+}
+.pages-container {
+  width: 100%;
+  padding: 20px 0 0 0;
+  text-align: center;
+  background: #f7fafc;
+  overflow: hidden;
+}
+.page-slot {
+  margin: 0 auto;
+}
+.page-wrapper {
+  display: inline-block;
+  margin-bottom: 0;
+}
+.page-canvas {
+  position: relative;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+}
+.shadow-outline {
+  box-shadow: 0 0 0 3px rgb(66 153 225 / 50%);
+}
+.preview-element {
+  position: absolute;
+  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;
+  left: 0;
+  transform-origin: top left;
+  width: 100%;
+  height: 100%;
+}
+.page-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 20px 20px 20px;
+  color: #4b5563;
+  font-size: 14px;
+}
+</style>