@libresign/pdf-elements 0.2.3 → 0.2.5

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.5",
   "author": "LibreCode <contact@librecode.coop>",
   "private": false,
   "main": "dist/pdf-elements.umd.js",
@@ -31,7 +31,6 @@
     "lint:fix": "vue-cli-service lint"
   },
   "dependencies": {
-    "debounce": "^3.0.0",
     "pdfjs-dist": "^5.4.530",
     "vue": "^2.7.16"
   },

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,44 @@ 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
+      const toolbarOffset = 60
+      const nextTop = y - toolbarOffset
+      const top = nextTop < 0 ? (y + 8) : nextTop
       return {
         left: `${(x + width / 2) * scale}px`,
-        top: `${(y - 48) * scale}px`,
+        top: `${top * scale}px`,
         transform: 'translateX(-50%)',
       }
     },
@@ -203,6 +226,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 +246,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 +283,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 +346,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
@@ -442,7 +470,7 @@ export default {
   border-radius: 6px;
   padding: 6px 8px;
   box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.15), 0 2px 6px -2px rgba(0, 0, 0, 0.1);
-  z-index: 100;
+  z-index: 5;
   white-space: nowrap;
 }
 .action-btn {
@@ -471,35 +499,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;
+  z-index: 5;
 }
 .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>