@libresign/pdf-elements 0.2.3 → 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.3",
+  "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,
       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 })
@@ -234,7 +245,10 @@ 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)
     }
@@ -400,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
@@ -442,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
       })
     },
@@ -463,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
 
@@ -506,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() {
@@ -593,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),
             },
           })
         })
@@ -729,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) {