feat: add isEmpty instance method

semdy · Aug 30, 2023 · d1a79b2 · d1a79b2
1 parent 32cfc73
commit d1a79b2
Show file tree

Hide file tree

Showing 9 changed files with 113 additions and 42 deletions.
diff --git a/README.md b/README.md
@@ -1,7 +1,9 @@
 # h5-signature
-   基于canvas的手写签名. [online demo](https://semdy.github.io/h5-signature/demo)
+
+基于 canvas 的手写签名. [online demo](https://semdy.github.io/h5-signature/demo)
 
 ## Install
+
 ```bash
     npm install h5-signature
     # or
@@ -13,74 +15,93 @@
     npm run build
 ```
 
-
 ## Usage
 
-``` js
-<div style="width:300px;height:300px" id="container"></div>
-var container = document.getElementById('container')
+```js
+<div style="width:300px;height:300px" id="container"></div>;
+var container = document.getElementById("container");
 new Signature.default({
-    root: container, // root dom container
-    color: '#000', // draw color
-    lineWidth: 8, // draw line width
-    width: 'auto', // canvas width, auto fill to root width if set to 'auto'
-    height: 'auto', // canvas height, auto fill to root height if set to 'auto'
-    openSmooth: true, // if enable brush thickness effect
-    rotate: 0,         // export rotated image, available values: -90/90/-180/180
-    minWidth: 2,        // minimize linWidth
-    minSpeed: 1.5,      // minimize brush move speed
-    scaleRatio: window.devicePixelRatio, // canvas scale ratio
-    maxWidthDiffRate: 20, // Smooth transition threshold
-    resizeDebounceTime: 200, // window resize debounce elapse time
-    maxHistoryLength: 0, // max history length, no limit if set to 0
-    exportPadding: 0, // padding from edge
-    exportMaxWidth: 300, // export max image width
-    exportMaxHeight: 300, // export max image height
-    undoRedoStateChange: Function, // state change callback if undo/redo state changed
-    onDrawStart: Function, // called when draw starts, [MouseEvent, point]
-    onDrawing: Function,  // called when draw going , [MouseEvent, point]
-    onDrawUp: Function    // called when draw up , [MouseEvent, Image]
-})
+  root: container, // root dom container
+  color: "#000", // draw color
+  lineWidth: 8, // draw line width
+  width: "auto", // canvas width, auto fill to root width if set to 'auto'
+  height: "auto", // canvas height, auto fill to root height if set to 'auto'
+  openSmooth: true, // if enable brush thickness effect
+  rotate: 0, // export rotated image, available values: -90/90/-180/180
+  minWidth: 2, // minimize linWidth
+  minSpeed: 1.5, // minimize brush move speed
+  scaleRatio: window.devicePixelRatio, // canvas scale ratio
+  maxWidthDiffRate: 20, // Smooth transition threshold
+  resizeDebounceTime: 200, // window resize debounce elapse time
+  maxHistoryLength: 0, // max history length, no limit if set to 0
+  exportPadding: 0, // padding from edge
+  exportMaxWidth: 300, // export max image width
+  exportMaxHeight: 300, // export max image height
+  undoRedoStateChange: Function, // state change callback if undo/redo state changed
+  onDrawStart: Function, // called when draw starts, [MouseEvent, point]
+  onDrawing: Function, // called when draw going , [MouseEvent, point]
+  onDrawUp: Function, // called when draw up , [MouseEvent, Image]
+});
 ```
 
 ## instance methods
 
 #### setLineWidth
+
     parameters: width [number]
+
 set draw lineWidth dynamic
-    
+
 #### setColor
+
     parameters: color [string]
+
 set draw color dynamic
 
 #### setOptions
+
     parameters: options Object
+
 set override options, all properties same as constructor parameters, see above
-    
+
 #### clear
+
 clear the canvas
-    
+
 #### undo
+
 go prev draw stage
-    
+
 #### redo
+
 go next draw stage
-    
+
 #### canUndo
+
 query if can undo
-    
+
 #### canRedo
+
 query if can redo
-
+
+#### isEmpty
+
+query if canvas is nothing drawed
+
 #### getResult
+
     parameters: origin [boolean]
+
 get the cropped or origin canvas dom
-    
+
 #### destroy
+
 destroy the instance
-    
+
 #### downloadFile
+
 download the origin draw image
-    
+
 ## Thanks
+
 [smooth-signature](https://github.com/linjc/smooth-signature)
diff --git a/demo/index.js b/demo/index.js
diff --git a/es/index.js b/es/index.js
@@ -504,6 +504,7 @@ var Painter = /*#__PURE__*/function (_Base) {
     _this.options = options;
     _this._isStart = false;
     _this._isMoved = false;
+    _this._isEmpty = true;
     _this._touchCount = 0;
     _this.prePoint = {};
     _this.point = {};
@@ -643,6 +644,7 @@ var Painter = /*#__PURE__*/function (_Base) {
 
       this.prePoint = painter_objectSpread({}, this.point);
       this._isMoved = true;
+      this._isEmpty = false;
       this.options.onDrawing(evt, this.point);
     }
   }, {
@@ -658,6 +660,7 @@ var Painter = /*#__PURE__*/function (_Base) {
       }
 
       this._isStart = false;
+      this._isEmpty = false;
       this._isMoved = false;
       var img = new Image();
       img.src = this.drawElement.toDataURL();
@@ -700,16 +703,24 @@ var Painter = /*#__PURE__*/function (_Base) {
       var lineWidth = Math.max(maxWidth - addWidth, minWidth);
       return Math.min(lineWidth, maxWidth);
     }
+  }, {
+    key: "isEmpy",
+    value: function isEmpy() {
+      return this._isEmpty;
+    }
   }, {
     key: "clear",
     value: function clear() {
+      this._isEmpty = true;
       if (!this.drawElement) return;
       this.drawCtx.clearRect(0, 0, this.drawElement.width, this.drawElement.height);
     }
   }, {
     key: "destroy",
     value: function destroy() {
-      this._isStart = false;
+      this._isStart = null;
+      this._isMoved = null;
+      this._isEmpty = null;
       this.prePoint = null;
       this.point = null;
       this.clear();
@@ -861,6 +872,7 @@ var Stage = /*#__PURE__*/function () {
     this.drawStack = [];
     this.lastCanUndo = false;
     this.lastCanRedo = false;
+    this._isEmpty = true;
     this.painter = new painter(stage_objectSpread(stage_objectSpread({}, this.options), {}, {
       onDrawUp: this.onDrawUp.bind(this)
     }));
@@ -984,6 +996,11 @@ var Stage = /*#__PURE__*/function () {
     value: function canRedo() {
       return this.undoRedoManager.canRedo();
     }
+  }, {
+    key: "isEmpty",
+    value: function isEmpty() {
+      return this.painter.isEmpy();
+    }
   }, {
     key: "destroy",
     value: function destroy() {

diff --git a/index.d.ts b/index.d.ts
@@ -55,6 +55,7 @@ export default class Signature {
   redo: () => void
   canUndo: () => void
   canRedo: () => void
+  isEmpty: () => boolean
   getResult: (origin?: boolean) => HTMLCanvasElement | undefined
   getRotateCanvas: (degree: -90 | 90 | -180 | 180) => HTMLCanvasElement
   base64ToBlob: (code: string) => Blob

diff --git a/lib/index.js b/lib/index.js
@@ -528,6 +528,7 @@ var Painter = /*#__PURE__*/function (_Base) {
     _this.options = options;
     _this._isStart = false;
     _this._isMoved = false;
+    _this._isEmpty = true;
     _this._touchCount = 0;
     _this.prePoint = {};
     _this.point = {};
@@ -667,6 +668,7 @@ var Painter = /*#__PURE__*/function (_Base) {
 
       this.prePoint = painter_objectSpread({}, this.point);
       this._isMoved = true;
+      this._isEmpty = false;
       this.options.onDrawing(evt, this.point);
     }
   }, {
@@ -682,6 +684,7 @@ var Painter = /*#__PURE__*/function (_Base) {
       }
 
       this._isStart = false;
+      this._isEmpty = false;
       this._isMoved = false;
       var img = new Image();
       img.src = this.drawElement.toDataURL();
@@ -724,16 +727,24 @@ var Painter = /*#__PURE__*/function (_Base) {
       var lineWidth = Math.max(maxWidth - addWidth, minWidth);
       return Math.min(lineWidth, maxWidth);
     }
+  }, {
+    key: "isEmpy",
+    value: function isEmpy() {
+      return this._isEmpty;
+    }
   }, {
     key: "clear",
     value: function clear() {
+      this._isEmpty = true;
       if (!this.drawElement) return;
       this.drawCtx.clearRect(0, 0, this.drawElement.width, this.drawElement.height);
     }
   }, {
     key: "destroy",
     value: function destroy() {
-      this._isStart = false;
+      this._isStart = null;
+      this._isMoved = null;
+      this._isEmpty = null;
       this.prePoint = null;
       this.point = null;
       this.clear();
@@ -885,6 +896,7 @@ var Stage = /*#__PURE__*/function () {
     this.drawStack = [];
     this.lastCanUndo = false;
     this.lastCanRedo = false;
+    this._isEmpty = true;
     this.painter = new painter(stage_objectSpread(stage_objectSpread({}, this.options), {}, {
       onDrawUp: this.onDrawUp.bind(this)
     }));
@@ -1008,6 +1020,11 @@ var Stage = /*#__PURE__*/function () {
     value: function canRedo() {
       return this.undoRedoManager.canRedo();
     }
+  }, {
+    key: "isEmpty",
+    value: function isEmpty() {
+      return this.painter.isEmpy();
+    }
   }, {
     key: "destroy",
     value: function destroy() {

diff --git a/lib/index.min.js b/lib/index.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "h5-signature",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "h5 signature",
   "main": "lib/index.js",
   "module": "es/index.js",

diff --git a/src/painter.js b/src/painter.js
@@ -7,6 +7,7 @@ class Painter extends Base {
     this.options = options;
     this._isStart = false;
     this._isMoved = false;
+    this._isEmpty = true;
     this._touchCount = 0;
     this.prePoint = {};
     this.point = {};
@@ -140,6 +141,7 @@ class Painter extends Base {
     }
     this.prePoint = { ...this.point };
     this._isMoved = true;
+    this._isEmpty = false;
     this.options.onDrawing(evt, this.point);
   }
 
@@ -150,6 +152,7 @@ class Painter extends Base {
       this.drawStartPoint(evt);
     }
     this._isStart = false;
+    this._isEmpty = false;
     this._isMoved = false;
     const img = new Image();
     img.src = this.drawElement.toDataURL();
@@ -191,7 +194,12 @@ class Painter extends Base {
     return Math.min(lineWidth, maxWidth);
   }
 
+  isEmpy() {
+    return this._isEmpty;
+  }
+
   clear() {
+    this._isEmpty = true;
     if (!this.drawElement) return;
     this.drawCtx.clearRect(
       0,
@@ -202,7 +210,9 @@ class Painter extends Base {
   }
 
   destroy() {
-    this._isStart = false;
+    this._isStart = null;
+    this._isMoved = null;
+    this._isEmpty = null;
     this.prePoint = null;
     this.point = null;
     this.clear();

diff --git a/src/stage.js b/src/stage.js
@@ -8,6 +8,7 @@ class Stage {
     this.drawStack = [];
     this.lastCanUndo = false;
     this.lastCanRedo = false;
+    this._isEmpty = true;
     this.painter = new Painter({
       ...this.options,
       onDrawUp: this.onDrawUp.bind(this),
@@ -107,6 +108,10 @@ class Stage {
     return this.undoRedoManager.canRedo();
   }
 
+  isEmpty() {
+    return this.painter.isEmpy();
+  }
+
   destroy() {
     this.clear();
     this.painter.destroy();