js-kompo-utils 1.0.32 → 1.0.34

package/components/VlSignaturePad.vue

@@ -15,6 +15,7 @@
                 @touchend="stopDrawing"
             ></canvas>
             <button
+                class="signature-pad-button"
                 type="button"
                 :class="clearButtonClass"
                 @click="clearSignature"
@@ -54,17 +55,14 @@ export default {
             const canvas = this.$refs.canvas
             this.context = canvas.getContext('2d')
 
-            // Fill background
             this.context.fillStyle = this.backgroundColor
             this.context.fillRect(0, 0, this.canvasWidth, this.canvasHeight)
 
-            // Set drawing style
             this.context.strokeStyle = this.penColor
             this.context.lineWidth = this.penWidth
             this.context.lineCap = 'round'
             this.context.lineJoin = 'round'
 
-            // Load existing signature if any
             if (this.component.value) {
                 this.loadSignature(this.component.value)
             }
@@ -74,7 +72,8 @@ export default {
             const canvas = this.$refs.canvas
             const rect = canvas.getBoundingClientRect()
 
-            // Calculer le ratio entre la taille affichée et la taille réelle du canvas
+            // CSS stretches the canvas past its attribute size, so pointer coordinates
+            // have to be scaled back into canvas space or the ink lands off-cursor.
             const scaleX = canvas.width / rect.width
             const scaleY = canvas.height / rect.height
 
@@ -94,9 +93,19 @@ export default {
         startDrawing(event) {
             event.preventDefault()
             this.isDrawing = true
+
             const coords = this.getCoordinates(event)
             this.lastX = coords.x
             this.lastY = coords.y
+
+            // A click with no movement is a dot, and a signature is full of them.
+            this.context.beginPath()
+            this.context.arc(coords.x, coords.y, this.penWidth / 2, 0, Math.PI * 2)
+            this.context.fillStyle = this.penColor
+            this.context.fill()
+            this.context.fillStyle = this.backgroundColor
+
+            this.isEmpty = false
         },
 
         draw(event) {
@@ -113,12 +122,13 @@ export default {
             this.lastX = coords.x
             this.lastY = coords.y
             this.isEmpty = false
-
-            this.saveSignature()
         },
 
         stopDrawing() {
+            if (!this.isDrawing) return
+
             this.isDrawing = false
+            this.saveSignature()
         },
 
         clearSignature() {
@@ -130,11 +140,11 @@ export default {
         },
 
         saveSignature() {
-            if (!this.isEmpty) {
-                const dataURL = this.$refs.canvas.toDataURL('image/png')
-                this.component.value = dataURL
-                this.$emit('input', dataURL)
-            }
+            if (this.isEmpty) return
+
+            const dataURL = this.$refs.canvas.toDataURL('image/png')
+            this.component.value = dataURL
+            this.$emit('input', dataURL)
         },
 
         loadSignature(dataURL) {
@@ -154,20 +164,29 @@ export default {
 
 <style scoped>
 .signature-pad-container {
+    position: relative;
     display: flex;
     flex-direction: column;
-    gap: 0.75rem;
+    gap: 0.5rem;
+    border: 1px solid #d1d5db;
+    border-radius: 0.5rem;
+    padding: 2px;
+}
+
+.signature-pad-container:hover {
+    border-color: #9ca3af;
 }
 
 .signature-canvas {
-    border: 1px solid #d1d5db;
-    border-radius: 0.5rem;
     cursor: crosshair;
     touch-action: none;
     display: block;
+    width: 100%;
 }
 
-.signature-canvas:hover {
-    border-color: #9ca3af;
+.signature-pad-button {
+    position: absolute;
+    bottom: 0.5rem;
+    right: 0.5rem;
 }
-</style>
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-kompo-utils",
-  "version": "1.0.32",
+  "version": "1.0.34",
   "description": "",
   "main": "app.js",
   "scripts": {