Merge pull request #28 from LibreSign/fix/element-click-event

feat: element click event

Author: vitormattos

package.json

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

src/components/PDFElements.vue

@@ -25,6 +25,8 @@ SPDX-License-Identifier: AGPL-3.0-or-later
                 class="overlay"
                 @mousemove="handleMouseMove"
                 @touchmove="handleMouseMove"
+                @click="handleOverlayClick(docIndex, pIndex, $event)"
+                @touchend="handleOverlayClick(docIndex, pIndex, $event)"
               >
                 <div
                   v-if="isAddingMode && previewPageDocIndex === docIndex && previewPageIndex === pIndex && previewElement && previewVisible"
@@ -194,6 +196,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    emitObjectClick: {
+      type: Boolean,
+      default: false,
+    },
     ignoreClickOutsideSelectors: {
       type: Array,
       default: () => [],
@@ -651,6 +657,48 @@ export default {
         this.previewVisible = true
       })
     },
+    handleOverlayClick(docIndex, pageIndex, event) {
+      if (!this.emitObjectClick) return
+
+      const { x: clientX, y: clientY } = this.getPointerPosition(event)
+      if (!Number.isFinite(clientX) || !Number.isFinite(clientY)) return
+
+      this.cachePageBoundsForPage(docIndex, pageIndex)
+      const pageRect = this.getPageRect(docIndex, pageIndex)
+      if (!pageRect) return
+
+      const pagesScale = this.getDisplayedPageScale(docIndex, pageIndex) || 1
+      const relX = (clientX - pageRect.left) / pagesScale
+      const relY = (clientY - pageRect.top) / pagesScale
+
+      const doc = this.pdfDocuments?.[docIndex]
+      const pageObjects = doc?.allObjects?.[pageIndex] || []
+      let hitObject = null
+
+      for (let i = pageObjects.length - 1; i >= 0; i--) {
+        const object = pageObjects[i]
+        const x = Number(object.x)
+        const y = Number(object.y)
+        const width = Number(object.width)
+        const height = Number(object.height)
+        if (![x, y, width, height].every(Number.isFinite)) {
+          continue
+        }
+        if (relX >= x && relX <= x + width && relY >= y && relY <= y + height) {
+          hitObject = object
+          break
+        }
+      }
+
+      if (!hitObject) return
+
+      this.$emit('pdf-elements:object-click', {
+        docIndex,
+        pageIndex,
+        object: hitObject,
+        event,
+      })
+    },
 
     handleKeyDown(event) {
       if (event.key === 'Escape' && this.isAddingMode) {