Merge pull request #35 from CodeGod911/smoothandboundless

Performance and Acuraccy Improvements

Author: MarvinKlein1508

SignaturePad/wwwroot/sigpad.interop.js

@@ -1,4 +1,4 @@
-import Sigpad from "./sigpad.min.js?ver=8.1.0"
+import Sigpad from "./sigpad.min.js?ver=8.1.1"
 var dotNetHelper;
 
 export function setup(id, reference, options, image) {

SignaturePad/wwwroot/sigpad.min.js

@@ -9,12 +9,21 @@
 const sigpadMap = new Map();
 
 function drawPoints(ctx, points) {
-    // draw a basic circle instead
-    if (points.length < 6) {
+    // draw a point instead
+    if (points.length == 1) {
         var b = points[0];
         ctx.beginPath(), ctx.arc(b.x, b.y, ctx.lineWidth / 2, 0, Math.PI * 2, !0), ctx.closePath(), ctx.fill();
         return
     }
+
+    // draw line for just two points
+    if (points.length == 2) {
+        ctx.beginPath(), ctx.moveTo(points[0].x, points[0].y);
+        ctx.lineTo(points[1].x, points[1].y);
+        ctx.stroke();
+        return
+    }
+
     ctx.beginPath(), ctx.moveTo(points[0].x, points[0].y);
     // draw a bunch of quadratics, using the average of two points as the control point
     var i;
@@ -59,7 +68,6 @@ export default class Sigpad {
         this._config = this._getConfig(options);
         this._element = element;
         this._mousePosis = [];
-        this._mousePosisChanged = true;
         this._drawing = false;
 
         this._setListeners();
@@ -222,6 +230,7 @@ export default class Sigpad {
             return;
         }
 
+        data.render();
         data._drawing = false;
 
         const event = new CustomEvent('sigpad.finish', { detail: data.getImage() });
@@ -230,7 +239,7 @@ export default class Sigpad {
 
     _onMove(sender, mouseEvent) {
         if (!this._drawing) return;
-        mouseEvent.preventDefault();
+        //mouseEvent.preventDefault();
         if ("touches" in mouseEvent) {
             mouseEvent = mouseEvent.touches[0];
         }
@@ -244,9 +253,8 @@ export default class Sigpad {
         if (data._drawing) {
             var pos = data._getRelativeMousePos(mouseEvent);
             if (pos != null) {
-                data._mousePosis[0].push(pos)
-                data._mousePosisChanged = true;
-                const event = new CustomEvent('sigpad.move', { detail: data.getImage() });
+                data._mousePosis[0].push(pos);
+                const event = new CustomEvent('sigpad.move', {});
                 data._element.dispatchEvent(event);
             } else {
                 console.log("OUT OF BOUNDS")
@@ -261,15 +269,14 @@ export default class Sigpad {
         if (this._element.width != this._element.clientWidth) {
             this._element.width = this._element.clientWidth;
         }
-        var ctx = this._element.getContext("2d");
-        ctx.clearRect(0, 0, this._element.width, this._element.height);
-        this._applyOptions(ctx);
-        this._mousePosis.filter((stroke) => stroke.length > 2).forEach((stroke) => drawPoints(ctx, stroke));
+        if (this._drawing) {
+            var ctx = this._element.getContext("2d");
+            this._applyOptions(ctx);
+            this._mousePosis.filter((stroke) => stroke.length > 0).forEach((stroke) => drawPoints(ctx, stroke));
+        }
     }
 }
 
-
-
 const requestAnimFrame = (function (callback) {
     return window.requestAnimationFrame ||
         window.webkitRequestAnimationFrame ||