@libresign/pdf-elements 0.2.2 → 0.2.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@libresign/pdf-elements",
   "description": "PDF viewer with draggable and resizable element overlays for Vue 2",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "author": "LibreCode <contact@librecode.coop>",
   "private": false,
   "main": "dist/pdf-elements.umd.js",

package/src/components/DraggableElement.vue

@@ -120,6 +120,10 @@ export default {
     showDefaultActions: {
       type: Boolean,
       default: true,
+    },
+    readOnly: {
+      type: Boolean,
+      default: false,
     }
   },
   data() {
@@ -153,25 +157,41 @@ export default {
     },
     elementStyle() {
       const scale = this.pagesScale || 1
-      const currentX = this.object.x + this.offsetX + this.resizeOffsetX
-      const currentY = this.object.y + this.offsetY + this.resizeOffsetY
-      const currentWidth = this.object.width + this.resizeOffsetW
-      const currentHeight = this.object.height + this.resizeOffsetH
+      const isDragging = this.mode === 'drag'
+      const isResizing = this.mode === 'resize'
+      const offsetX = isDragging ? this.offsetX : 0
+      const offsetY = isDragging ? this.offsetY : 0
+      const resizeOffsetX = isResizing ? this.resizeOffsetX : 0
+      const resizeOffsetY = isResizing ? this.resizeOffsetY : 0
+      const resizeOffsetW = isResizing ? this.resizeOffsetW : 0
+      const resizeOffsetH = isResizing ? this.resizeOffsetH : 0
+      const currentX = this.object.x + offsetX + resizeOffsetX
+      const currentY = this.object.y + offsetY + resizeOffsetY
+      const currentWidth = this.object.width + resizeOffsetW
+      const currentHeight = this.object.height + resizeOffsetH
       return {
         left: `${currentX * scale}px`,
         top: `${currentY * scale}px`,
         width: `${currentWidth * scale}px`,
         height: `${currentHeight * scale}px`,
+        pointerEvents: this.readOnly ? 'none' : 'auto',
       }
     },
     toolbarStyle() {
       const scale = this.pagesScale || 1
-      const x = this.object.x + this.offsetX + this.resizeOffsetX
-      const y = this.object.y + this.offsetY + this.resizeOffsetY
-      const width = this.object.width + this.resizeOffsetW
+      const isDragging = this.mode === 'drag'
+      const isResizing = this.mode === 'resize'
+      const offsetX = isDragging ? this.offsetX : 0
+      const offsetY = isDragging ? this.offsetY : 0
+      const resizeOffsetX = isResizing ? this.resizeOffsetX : 0
+      const resizeOffsetY = isResizing ? this.resizeOffsetY : 0
+      const resizeOffsetW = isResizing ? this.resizeOffsetW : 0
+      const x = this.object.x + offsetX + resizeOffsetX
+      const y = this.object.y + offsetY + resizeOffsetY
+      const width = this.object.width + resizeOffsetW
       return {
         left: `${(x + width / 2) * scale}px`,
-        top: `${(y - 48) * scale}px`,
+        top: `${(y - 60) * scale}px`,
         transform: 'translateX(-50%)',
       }
     },
@@ -203,6 +223,9 @@ export default {
   },
   methods: {
     handleElementClick(event) {
+      if (this.readOnly) {
+        return
+      }
       if (event.target.closest('.delete-handle') || event.target.closest('[data-stop-drag]') || event.target.closest('.actions-toolbar')) {
         return
       }
@@ -220,6 +243,7 @@ export default {
       this.startResize(direction, event)
     },
     startDrag(event) {
+      if (this.readOnly) return
       if (event.target.classList.contains('delete')) return
       if (event.target.classList.contains('resize-handle')) return
       this.mode = 'drag'
@@ -256,6 +280,7 @@ export default {
       window.addEventListener('touchend', this.boundStopInteraction)
     },
     startResize(direction, event) {
+      if (this.readOnly) return
       this.mode = 'resize'
       this.direction = direction
       this.startX = event.type.includes('touch') ? event.touches[0].clientX : event.clientX
@@ -318,7 +343,7 @@ export default {
           return
         }
 
-        const minSize = 16
+        const minSize = 16 / (this.pagesScale || 1)
         let newWidth = this.startWidth
         let newHeight = this.startHeight
         let newLeft = this.startLeft
@@ -471,35 +496,43 @@ export default {
   box-shadow: inset 0 0 0 2px #2563eb;
 }
 .resize-handle {
+  all: unset;
   position: absolute;
-  width: 10px;
-  height: 10px;
+  width: 12px;
+  height: 12px;
+  min-width: 0;
+  min-height: 0;
   background: #2563eb;
   border: 1px solid #ffffff;
-  border-radius: 2px;
+  border-radius: 3px;
   padding: 0;
   margin: 0;
+  line-height: 0;
+  font-size: 0;
+  box-sizing: border-box;
+  display: block;
+  appearance: none;
   cursor: pointer;
   z-index: 200;
 }
 .handle-top-left {
-  top: -6px;
-  left: -6px;
+  top: -7px;
+  left: -7px;
   cursor: nwse-resize;
 }
 .handle-top-right {
-  top: -6px;
-  right: -6px;
+  top: -7px;
+  right: -7px;
   cursor: nesw-resize;
 }
 .handle-bottom-left {
-  bottom: -6px;
-  left: -6px;
+  bottom: -7px;
+  left: -7px;
   cursor: nesw-resize;
 }
 .handle-bottom-right {
-  bottom: -6px;
-  right: -6px;
+  bottom: -7px;
+  right: -7px;
   cursor: nwse-resize;
 }
 </style>

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,7 +135,6 @@ 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'
@@ -175,6 +182,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    readOnly: {
+      type: Boolean,
+      default: false,
+    },
     pageCountFormat: {
       type: String,
       default: '{currentPage} of {totalPages}',
@@ -210,15 +221,15 @@ export default {
       viewportRafId: 0,
       objectIndexCache: {},
       zoomRafId: null,
+      wheelZoomRafId: null,
       boundHandleWheel: null,
-      debouncedApplyZoom: null,
       visualScale: this.initialScale,
-      resizeObserver: null,
+      autoFitApplied: false,
+      lastContainerWidth: 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 })
@@ -229,23 +240,15 @@ export default {
     window.addEventListener('resize', this.onViewportScroll)
     this.$el?.addEventListener('scroll', this.onViewportScroll, { passive: true })
     this.$el?.addEventListener('wheel', this.boundHandleWheel, { passive: false })
-    if (this.autoFitZoom) {
-      window.addEventListener('resize', this.adjustZoomToFit)
-      if (typeof ResizeObserver !== 'undefined') {
-        this.resizeObserver = new ResizeObserver(() => {
-          this.scheduleAutoFitZoom()
-        })
-        if (this.$el) {
-          this.resizeObserver.observe(this.$el)
-        }
-      }
-    }
   },
   beforeUnmount() {
     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)
     }
@@ -257,13 +260,6 @@ export default {
     window.removeEventListener('scroll', this.onViewportScroll)
     window.removeEventListener('resize', this.onViewportScroll)
     this.$el?.removeEventListener('scroll', this.onViewportScroll)
-    if (this.autoFitZoom) {
-      window.removeEventListener('resize', this.adjustZoomToFit)
-      if (this.resizeObserver) {
-        this.resizeObserver.disconnect()
-        this.resizeObserver = null
-      }
-    }
     if (this.viewportRafId) {
       window.cancelAnimationFrame(this.viewportRafId)
       this.viewportRafId = 0
@@ -273,6 +269,7 @@ export default {
     async init() {
       if (!this.initFiles || this.initFiles.length === 0) return
       const docs = []
+      this.autoFitApplied = false
 
       for (let i = 0; i < this.initFiles.length; i++) {
         const file = this.initFiles[i]
@@ -417,24 +414,35 @@ export default {
     },
 
     cachePageBounds() {
-      this.pagesBoundingRects = {}
+      const nextRects = {}
       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}`] = {
+          nextRects[`${docIdx}-${pageIdx}`] = {
             docIndex: docIdx,
             pageIndex: pageIdx,
             rect,
           }
         }
       }
+      this.pagesBoundingRects = nextRects
     },
 
     getDisplayedPageScale(docIndex, pageIndex) {
       const doc = this.pdfDocuments[docIndex]
       if (!doc) return 1
+      const baseWidth = doc.pageWidths?.[pageIndex] || 0
+      const rectWidth = this.pagesBoundingRects[`${docIndex}-${pageIndex}`]?.rect?.width || 0
+      if (rectWidth && baseWidth) {
+        return rectWidth / baseWidth
+      }
+      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
@@ -459,6 +467,14 @@ export default {
         if (this.isAddingMode || this.isDraggingElement) {
           this.cachePageBounds()
         }
+        if (this.autoFitZoom && !this.isAddingMode && !this.isDraggingElement) {
+          const containerWidth = this.$el?.clientWidth || 0
+          if (containerWidth && containerWidth !== this.lastContainerWidth) {
+            this.lastContainerWidth = containerWidth
+            this.autoFitApplied = false
+            this.scheduleAutoFitZoom()
+          }
+        }
         this.viewportRafId = 0
       })
     },
@@ -480,17 +496,17 @@ export default {
 
           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 renderWidth = canvasEl?.width || rect.width
+          const renderHeight = canvasEl?.height || rect.height
+          const layoutScaleX = renderWidth ? rect.width / renderWidth : 1
+          const layoutScaleY = renderHeight ? rect.height / renderHeight : 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
+          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
 
@@ -523,7 +539,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() {
@@ -610,26 +630,27 @@ export default {
       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 pagesScale = doc.pagesScale[pageIndex] || 1
+        const normalizedCanvasHeight = measurement.canvasHeight / pagesScale
 
         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),
             },
           })
         })
@@ -746,10 +767,27 @@ export default {
     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 = doc.allObjects.map((objects, pageIndex) =>
+        objects.filter(object => {
+          if (object.id === objectId) {
+            deletedObject = object
+            deletedPageIndex = pageIndex
+            return false
+          }
+          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) {
@@ -852,6 +890,7 @@ export default {
       return Math.max(0.1, Math.min(2, availableWidth / maxPageWidth))
     },
     scheduleAutoFitZoom() {
+      if (this.autoFitApplied) return
       if (this.zoomRafId) return
       this.zoomRafId = window.requestAnimationFrame(() => {
         this.zoomRafId = 0
@@ -859,7 +898,7 @@ export default {
       })
     },
     adjustZoomToFit() {
-      if (!this.autoFitZoom || !this.pdfDocuments.length) return
+      if (!this.autoFitZoom || this.autoFitApplied || !this.pdfDocuments.length) return
 
       const widths = this.pdfDocuments
         .flatMap(doc => doc.pageWidths || [])
@@ -881,6 +920,7 @@ export default {
       }
 
       const optimalScale = this.calculateOptimalScale(maxCanvasWidth)
+      this.autoFitApplied = true
       if (Math.abs(optimalScale - this.scale) > 0.01) {
         this.scale = optimalScale
         this.visualScale = optimalScale