Merge pull request #16 from LibreSign/fix/elements-position

fix: elements position

Author: vitormattos

src/components/DraggableElement.vue

@@ -171,7 +171,7 @@ export default {
       const width = this.object.width + this.resizeOffsetW
       return {
         left: `${(x + width / 2) * scale}px`,
-        top: `${(y - 48) * scale}px`,
+        top: `${(y - 60) * scale}px`,
         transform: 'translateX(-50%)',
       }
     },
@@ -318,7 +318,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 +471,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>

src/components/PDFElements.vue

@@ -24,6 +24,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 +38,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
@@ -463,17 +471,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
 
@@ -593,26 +601,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 +738,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) {