@viablelogic/ngx-signature-pad 5.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +78 -0
- package/esm2020/lib/ngx-signature-pad.component.mjs +125 -0
- package/esm2020/lib/ngx-signature-pad.module.mjs +17 -0
- package/esm2020/public-api.mjs +6 -0
- package/esm2020/viablelogic-ngx-signature-pad.mjs +5 -0
- package/fesm2015/viablelogic-ngx-signature-pad.mjs +150 -0
- package/fesm2015/viablelogic-ngx-signature-pad.mjs.map +1 -0
- package/fesm2020/viablelogic-ngx-signature-pad.mjs +150 -0
- package/fesm2020/viablelogic-ngx-signature-pad.mjs.map +1 -0
- package/index.d.ts +5 -0
- package/lib/ngx-signature-pad.component.d.ts +33 -0
- package/lib/ngx-signature-pad.module.d.ts +7 -0
- package/package.json +49 -0
- package/public-api.d.ts +2 -0
package/README.md
ADDED
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
# Forked Project
|
|
2
|
+
THIS IS A FORKED PROJECT FROM THE ORIGINAL REPO
|
|
3
|
+
|
|
4
|
+
# ngx-signature-pad
|
|
5
|
+
Angular component for [szimek/signature_pad](https://www.npmjs.com/package/signature_pad).
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
`npm install ngx-signature-pad --save`
|
|
9
|
+
|
|
10
|
+
## Reference Implementation
|
|
11
|
+
|
|
12
|
+
* [Live Demo](http://lathonez.com/angular2-signaturepad-demo/)
|
|
13
|
+
* [Source](https://github.com/lathonez/angular2-signaturepad-demo)
|
|
14
|
+
|
|
15
|
+
## Usage example
|
|
16
|
+
|
|
17
|
+
API is identical to [szimek/signature_pad](https://www.npmjs.com/package/signature_pad).
|
|
18
|
+
|
|
19
|
+
Options are as per [szimek/signature_pad](https://www.npmjs.com/package/signature_pad) with the following additions:
|
|
20
|
+
* canvasWidth: width of the canvas (px)
|
|
21
|
+
* canvasHeight: height of the canvas (px)
|
|
22
|
+
The above options are provided to avoid accessing the DOM directly from your component to adjust the canvas size.
|
|
23
|
+
|
|
24
|
+
```typescript
|
|
25
|
+
|
|
26
|
+
// import into app module
|
|
27
|
+
|
|
28
|
+
import { SignaturePadModule } from 'ngx-signature-pad';
|
|
29
|
+
|
|
30
|
+
...
|
|
31
|
+
|
|
32
|
+
@NgModule({
|
|
33
|
+
declarations: [ ],
|
|
34
|
+
imports: [ SignaturePadModule ],
|
|
35
|
+
providers: [ ],
|
|
36
|
+
bootstrap: [ AppComponent ]
|
|
37
|
+
})
|
|
38
|
+
|
|
39
|
+
// then import for use in a component
|
|
40
|
+
|
|
41
|
+
import { Component, ViewChild } from '@angular/core';
|
|
42
|
+
import { SignaturePad } from 'ngx-signature-pad/signature-pad';
|
|
43
|
+
|
|
44
|
+
@Component({
|
|
45
|
+
template: '<signature-pad [options]="signaturePadOptions" (onBeginEvent)="drawStart()" (onEndEvent)="drawComplete()"></signature-pad>'
|
|
46
|
+
})
|
|
47
|
+
|
|
48
|
+
export class SignaturePadPage{
|
|
49
|
+
|
|
50
|
+
@ViewChild(SignaturePad) signaturePad: SignaturePad;
|
|
51
|
+
|
|
52
|
+
signaturePadOptions: Object = { // passed through to szimek/signature_pad constructor
|
|
53
|
+
'minWidth': 5,
|
|
54
|
+
'canvasWidth': 500,
|
|
55
|
+
'canvasHeight': 300
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
constructor() {
|
|
59
|
+
// no-op
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
ngAfterViewInit() {
|
|
63
|
+
// this.signaturePad is now available
|
|
64
|
+
this.signaturePad.set('minWidth', 5); // set szimek/signature_pad options at runtime
|
|
65
|
+
this.signaturePad.clear(); // invoke functions from szimek/signature_pad API
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
drawComplete() {
|
|
69
|
+
// will be notified of szimek/signature_pad's onEnd event
|
|
70
|
+
console.log(this.signaturePad.toDataURL());
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
drawStart() {
|
|
74
|
+
// will be notified of szimek/signature_pad's onBegin event
|
|
75
|
+
console.log('begin drawing');
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
```
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
import { Component, EventEmitter, Input, Output, } from '@angular/core';
|
|
2
|
+
import * as SignaturePadNative from 'signature_pad';
|
|
3
|
+
import * as i0 from "@angular/core";
|
|
4
|
+
export class SignaturePad {
|
|
5
|
+
constructor(elementRef) {
|
|
6
|
+
// no op
|
|
7
|
+
this.elementRef = elementRef;
|
|
8
|
+
this.options = this.options || {};
|
|
9
|
+
this.onBeginEvent = new EventEmitter();
|
|
10
|
+
this.onEndEvent = new EventEmitter();
|
|
11
|
+
}
|
|
12
|
+
ngAfterContentInit() {
|
|
13
|
+
const canvas = this.elementRef.nativeElement.querySelector('canvas');
|
|
14
|
+
if (this.options.canvasHeight) {
|
|
15
|
+
canvas.height = this.options.canvasHeight;
|
|
16
|
+
}
|
|
17
|
+
if (this.options.canvasWidth) {
|
|
18
|
+
canvas.width = this.options.canvasWidth;
|
|
19
|
+
}
|
|
20
|
+
this.signaturePad = new SignaturePadNative.default(canvas, this.options);
|
|
21
|
+
this.signaturePad.onBegin = this.onBegin.bind(this);
|
|
22
|
+
this.signaturePad.onEnd = this.onEnd.bind(this);
|
|
23
|
+
}
|
|
24
|
+
ngOnDestroy() {
|
|
25
|
+
const canvas = this.elementRef.nativeElement.querySelector('canvas');
|
|
26
|
+
canvas.width = 0;
|
|
27
|
+
canvas.height = 0;
|
|
28
|
+
}
|
|
29
|
+
resizeCanvas() {
|
|
30
|
+
// When zoomed out to less than 100%, for some very strange reason,
|
|
31
|
+
// some browsers report devicePixelRatio as less than 1
|
|
32
|
+
// and only part of the canvas is cleared then.
|
|
33
|
+
const ratio = Math.max(window.devicePixelRatio || 1, 1);
|
|
34
|
+
const canvas = this.signaturePad.canvas;
|
|
35
|
+
canvas.width = canvas.offsetWidth * ratio;
|
|
36
|
+
canvas.height = canvas.offsetHeight * ratio;
|
|
37
|
+
canvas.getContext('2d').scale(ratio, ratio);
|
|
38
|
+
this.signaturePad.clear(); // otherwise isEmpty() might return incorrect value
|
|
39
|
+
}
|
|
40
|
+
// Returns signature image as an array of point groups
|
|
41
|
+
toData() {
|
|
42
|
+
if (this.signaturePad) {
|
|
43
|
+
return this.signaturePad.toData();
|
|
44
|
+
}
|
|
45
|
+
else {
|
|
46
|
+
return [];
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
// Draws signature image from an array of point groups
|
|
50
|
+
fromData(points) {
|
|
51
|
+
this.signaturePad.fromData(points);
|
|
52
|
+
}
|
|
53
|
+
// Returns signature image as data URL (see https://mdn.io/todataurl for the list of possible paramters)
|
|
54
|
+
toDataURL(imageType, quality) {
|
|
55
|
+
return this.signaturePad.toDataURL(imageType, quality); // save image as data URL
|
|
56
|
+
}
|
|
57
|
+
// Draws signature image from data URL
|
|
58
|
+
fromDataURL(dataURL, options = {}) {
|
|
59
|
+
// set default height and width on read data from URL
|
|
60
|
+
if (!options.hasOwnProperty('height') &&
|
|
61
|
+
this.options.canvasHeight) {
|
|
62
|
+
options.height = this.options.canvasHeight;
|
|
63
|
+
}
|
|
64
|
+
if (!options.hasOwnProperty('width') && this.options.canvasWidth) {
|
|
65
|
+
options.width = this.options.canvasWidth;
|
|
66
|
+
}
|
|
67
|
+
this.signaturePad.fromDataURL(dataURL, options);
|
|
68
|
+
}
|
|
69
|
+
// Clears the canvas
|
|
70
|
+
clear() {
|
|
71
|
+
this.signaturePad.clear();
|
|
72
|
+
}
|
|
73
|
+
// Returns true if canvas is empty, otherwise returns false
|
|
74
|
+
isEmpty() {
|
|
75
|
+
return this.signaturePad.isEmpty();
|
|
76
|
+
}
|
|
77
|
+
// Unbinds all event handlers
|
|
78
|
+
off() {
|
|
79
|
+
this.signaturePad.off();
|
|
80
|
+
}
|
|
81
|
+
// Rebinds all event handlers
|
|
82
|
+
on() {
|
|
83
|
+
this.signaturePad.on();
|
|
84
|
+
}
|
|
85
|
+
// set an option on the signaturePad - e.g. set('minWidth', 50);
|
|
86
|
+
set(option, value) {
|
|
87
|
+
switch (option) {
|
|
88
|
+
case 'canvasHeight':
|
|
89
|
+
this.signaturePad.canvas.height = value;
|
|
90
|
+
break;
|
|
91
|
+
case 'canvasWidth':
|
|
92
|
+
this.signaturePad.canvas.width = value;
|
|
93
|
+
break;
|
|
94
|
+
default:
|
|
95
|
+
this.signaturePad[option] = value;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
// notify subscribers on signature begin
|
|
99
|
+
onBegin() {
|
|
100
|
+
this.onBeginEvent.emit(true);
|
|
101
|
+
}
|
|
102
|
+
// notify subscribers on signature end
|
|
103
|
+
onEnd() {
|
|
104
|
+
this.onEndEvent.emit(true);
|
|
105
|
+
}
|
|
106
|
+
queryPad() {
|
|
107
|
+
return this.signaturePad;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
SignaturePad.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SignaturePad, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
111
|
+
SignaturePad.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: SignaturePad, selector: "signature-pad", inputs: { options: "options" }, outputs: { onBeginEvent: "onBeginEvent", onEndEvent: "onEndEvent" }, ngImport: i0, template: '<canvas></canvas>', isInline: true });
|
|
112
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SignaturePad, decorators: [{
|
|
113
|
+
type: Component,
|
|
114
|
+
args: [{
|
|
115
|
+
template: '<canvas></canvas>',
|
|
116
|
+
selector: 'signature-pad',
|
|
117
|
+
}]
|
|
118
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { options: [{
|
|
119
|
+
type: Input
|
|
120
|
+
}], onBeginEvent: [{
|
|
121
|
+
type: Output
|
|
122
|
+
}], onEndEvent: [{
|
|
123
|
+
type: Output
|
|
124
|
+
}] } });
|
|
125
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LXNpZ25hdHVyZS1wYWQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNpZ25hdHVyZS1wYWQvc3JjL2xpYi9uZ3gtc2lnbmF0dXJlLXBhZC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUVMLFNBQVMsRUFFVCxZQUFZLEVBQ1osS0FBSyxFQUNMLE1BQU0sR0FFUCxNQUFNLGVBQWUsQ0FBQztBQUV2QixPQUFPLEtBQUssa0JBQWtCLE1BQU0sZUFBZSxDQUFDOztBQWNwRCxNQUFNLE9BQU8sWUFBWTtJQVF2QixZQUFZLFVBQXNCO1FBQ2hDLFFBQVE7UUFDUixJQUFJLENBQUMsVUFBVSxHQUFHLFVBQVUsQ0FBQztRQUM3QixJQUFJLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQyxPQUFPLElBQUksRUFBRSxDQUFDO1FBQ2xDLElBQUksQ0FBQyxZQUFZLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUN2QyxJQUFJLENBQUMsVUFBVSxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7SUFDdkMsQ0FBQztJQUVNLGtCQUFrQjtRQUN2QixNQUFNLE1BQU0sR0FBUSxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQyxhQUFhLENBQUMsUUFBUSxDQUFDLENBQUM7UUFFMUUsSUFBSyxJQUFJLENBQUMsT0FBZSxDQUFDLFlBQVksRUFBRTtZQUN0QyxNQUFNLENBQUMsTUFBTSxHQUFJLElBQUksQ0FBQyxPQUFlLENBQUMsWUFBWSxDQUFDO1NBQ3BEO1FBRUQsSUFBSyxJQUFJLENBQUMsT0FBZSxDQUFDLFdBQVcsRUFBRTtZQUNyQyxNQUFNLENBQUMsS0FBSyxHQUFJLElBQUksQ0FBQyxPQUFlLENBQUMsV0FBVyxDQUFDO1NBQ2xEO1FBRUQsSUFBSSxDQUFDLFlBQVksR0FBRyxJQUFJLGtCQUFrQixDQUFDLE9BQU8sQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFD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LENBQUM7SUFDMUIsQ0FBQztJQUVELDZCQUE2QjtJQUN0QixFQUFFO1FBQ1AsSUFBSSxDQUFDLFlBQVksQ0FBQyxFQUFFLEVBQUUsQ0FBQztJQUN6QixDQUFDO0lBRUQsZ0VBQWdFO0lBQ3pELEdBQUcsQ0FBQyxNQUFjLEVBQUUsS0FBVTtRQUNuQyxRQUFRLE1BQU0sRUFBRTtZQUNkLEtBQUssY0FBYztnQkFDakIsSUFBSSxDQUFDLFlBQVksQ0FBQyxNQUFNLENBQUMsTUFBTSxHQUFHLEtBQUssQ0FBQztnQkFDeEMsTUFBTTtZQUNSLEtBQUssYUFBYTtnQkFDaEIsSUFBSSxDQUFDLFlBQVksQ0FBQyxNQUFNLENBQUMsS0FBSyxHQUFHLEtBQUssQ0FBQztnQkFDdkMsTUFBTTtZQUNSO2dCQUNFLElBQUksQ0FBQyxZQUFZLENBQUMsTUFBTSxDQUFDLEdBQUcsS0FBSyxDQUFDO1NBQ3JDO0lBQ0gsQ0FBQztJQUVELHdDQUF3QztJQUNqQyxPQUFPO1FBQ1osSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDL0IsQ0FBQztJQUVELHNDQUFzQztJQUMvQixLQUFLO1FBQ1YsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDN0IsQ0FBQztJQUVNLFFBQVE7UUFDYixPQUFPLElBQUksQ0FBQyxZQUFZLENBQUM7SUFDM0IsQ0FBQzs7eUdBbElVLFlBQVk7NkZBQVosWUFBWSwwSkFIYixtQkFBbUI7MkZBR2xCLFlBQVk7a0JBSnhCLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLG1CQUFtQjtvQkFDN0IsUUFBUSxFQUFFLGVBQWU7aUJBQzFCO2lHQUVpQixPQUFPO3NCQUF0QixLQUFLO2dCQUNXLFlBQVk7c0JBQTVCLE1BQU07Z0JBQ1UsVUFBVTtzQkFBMUIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIEFmdGVyQ29udGVudEluaXQsXG4gIENvbXBvbmVudCxcbiAgRWxlbWVudFJlZixcbiAgRXZlbnRFbWl0dGVyLFxuICBJbnB1dCxcbiAgT3V0cHV0LFxuICBPbkRlc3Ryb3ksXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQgKiBhcyBTaWduYXR1cmVQYWROYXRpdmUgZnJvbSAnc2lnbmF0dXJlX3BhZCc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgUG9pbnQge1xuICB4OiBudW1iZXI7XG4gIHk6IG51bWJlcjtcbiAgdGltZTogbnVtYmVyO1xufVxuXG5leHBvcnQgdHlwZSBQb2ludEdyb3VwID0gQXJyYXk8UG9pbnQ+O1xuXG5AQ29tcG9uZW50KHtcbiAgdGVtcGxhdGU6ICc8Y2FudmFzPjwvY2FudmFzPicsXG4gIHNlbGVjdG9yOiAnc2lnbmF0dXJlLXBhZCcsXG59KVxuZXhwb3J0IGNsYXNzIFNpZ25hdHVyZVBhZCBpbXBsZW1lbnRzIEFmdGVyQ29udGVudEluaXQsIE9uRGVzdHJveSB7XG4gIEBJbnB1dCgpIHB1YmxpYyBvcHRpb25zOiBhbnk7XG4gIEBPdXRwdXQoKSBwdWJsaWMgb25CZWdpbkV2ZW50OiBFdmVudEVtaXR0ZXI8Ym9vbGVhbj47XG4gIEBPdXRwdXQoKSBwdWJsaWMgb25FbmRFdmVudDogRXZlbnRFbWl0dGVyPGJvb2xlYW4+O1xuXG4gIHByaXZhdGUgc2lnbmF0dXJlUGFkOiBhbnk7XG4gIHByaXZhdGUgZWxlbWVudFJlZjogRWxlbWVudFJlZjtcblxuICBjb25zdHJ1Y3RvcihlbGVtZW50UmVmOiBFbGVtZW50UmVmKSB7XG4gICAgLy8gbm8gb3BcbiAgICB0aGlzLmVsZW1lbnRSZWYgPSBlbGVtZW50UmVmO1xuICAgIHRoaXMub3B0aW9ucyA9IHRoaXMub3B0aW9ucyB8fCB7fTtcbiAgICB0aGlzLm9uQmVnaW5FdmVudCA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcbiAgICB0aGlzLm9uRW5kRXZlbnQgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG4gIH1cblxuICBwdWJsaWMgbmdBZnRlckNvbnRlbnRJbml0KCk6IHZvaWQge1xuICAgIGNvbnN0IGNhbnZhczogYW55ID0gdGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQucXVlcnlTZWxlY3RvcignY2FudmFzJyk7XG5cbiAgICBpZiAoKHRoaXMub3B0aW9ucyBhcyBhbnkpLmNhbnZhc0hlaWdodCkge1xuICAgICAgY2FudmFzLmhlaWdodCA9ICh0aGlzLm9wdGlvbnMgYXMgYW55KS5jYW52YXNIZWlnaHQ7XG4gICAgfVxuXG4gICAgaWYgKCh0aGlzLm9wdGlvbnMgYXMgYW55KS5jYW52YXNXaWR0aCkge1xuICAgICAgY2FudmFzLndpZHRoID0gKHRoaXMub3B0aW9ucyBhcyBhbnkpLmNhbnZhc1dpZHRoO1xuICAgIH1cblxuICAgIHRoaXMuc2lnbmF0dXJlUGFkID0gbmV3IFNpZ25hdHVyZVBhZE5hdGl2ZS5kZWZhdWx0KGNhbnZhcywgdGhpcy5vcHRpb25zKTtcbiAgICB0aGlzLnNpZ25hdHVyZVBhZC5vbkJlZ2luID0gdGhpcy5vbkJlZ2luLmJpbmQodGhpcyk7XG4gICAgdGhpcy5zaWduYXR1cmVQYWQub25FbmQgPSB0aGlzLm9uRW5kLmJpbmQodGhpcyk7XG4gIH1cblxuICBwdWJsaWMgbmdPbkRlc3Ryb3koKTogdm9pZCB7XG4gICAgY29uc3QgY2FudmFzOiBhbnkgPSB0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudC5xdWVyeVNlbGVjdG9yKCdjYW52YXMnKTtcbiAgICBjYW52YXMud2lkdGggPSAwO1xuICAgIGNhbnZhcy5oZWlnaHQgPSAwO1xuICB9XG5cbiAgcHVibGljIHJlc2l6ZUNhbnZhcygpOiB2b2lkIHtcbiAgICAvLyBXaGVuIHpvb21lZCBvdXQgdG8gbGVzcyB0aGFuIDEwMCUsIGZvciBzb21lIHZlcnkgc3RyYW5nZSByZWFzb24sXG4gICAgLy8gc29tZSBicm93c2VycyByZXBvcnQgZGV2aWNlUGl4ZWxSYXRpbyBhcyBsZXNzIHRoYW4gMVxuICAgIC8vIGFuZCBvbmx5IHBhcnQgb2YgdGhlIGNhbnZhcyBpcyBjbGVhcmVkIHRoZW4uXG4gICAgY29uc3QgcmF0aW86IG51bWJlciA9IE1hdGgubWF4KHdpbmRvdy5kZXZpY2VQaXhlbFJhdGlvIHx8IDEsIDEpO1xuICAgIGNvbnN0IGNhbnZhczogYW55ID0gdGhpcy5zaWduYXR1cmVQYWQuY2FudmFzO1xuICAgIGNhbnZhcy53aWR0aCA9IGNhbnZhcy5vZmZzZXRXaWR0aCAqIHJhdGlvO1xuICAgIGNhbnZhcy5oZWlnaHQgPSBjYW52YXMub2Zmc2V0SGVpZ2h0ICogcmF0aW87XG4gICAgY2FudmFzLmdldENvbnRleHQoJzJkJykuc2NhbGUocmF0aW8sIHJhdGlvKTtcbiAgICB0aGlzLnNpZ25hdHVyZVBhZC5jbGVhcigpOyAvLyBvdGhlcndpc2UgaXNFbXB0eSgpIG1pZ2h0IHJldHVybiBpbmNvcnJlY3QgdmFsdWVcbiAgfVxuXG4gIC8vIFJldHVybnMgc2lnbmF0dXJlIGltYWdlIGFzIGFuIGFycmF5IG9mIHBvaW50IGdyb3Vwc1xuICBwdWJsaWMgdG9EYXRhKCk6IEFycmF5PFBvaW50R3JvdXA+IHtcbiAgICBpZiAodGhpcy5zaWduYXR1cmVQYWQpIHtcbiAgICAgIHJldHVybiB0aGlzLnNpZ25hdHVyZVBhZC50b0RhdGEoKTtcbiAgICB9IGVsc2Uge1xuICAgICAgcmV0dXJuIFtdO1xuICAgIH1cbiAgfVxuXG4gIC8vIERyYXdzIHNpZ25hdHVyZSBpbWFnZSBmcm9tIGFuIGFycmF5IG9mIHBvaW50IGdyb3Vwc1xuICBwdWJsaWMgZnJvbURhdGEocG9pbnRzOiBBcnJheTxQb2ludEdyb3VwPik6IHZvaWQge1xuICAgIHRoaXMuc2lnbmF0dXJlUGFkLmZyb21EYXRhKHBvaW50cyBhcyBhbnkpO1xuICB9XG5cbiAgLy8gUmV0dXJucyBzaWduYXR1cmUgaW1hZ2UgYXMgZGF0YSBVUkwgKHNlZSBodHRwczovL21kbi5pby90b2RhdGF1cmwgZm9yIHRoZSBsaXN0IG9mIHBvc3NpYmxlIHBhcmFtdGVycylcbiAgcHVibGljIHRvRGF0YVVSTChpbWFnZVR5cGU/OiBzdHJpbmcsIHF1YWxpdHk/OiBudW1iZXIpOiBzdHJpbmcge1xuICAgIHJldHVybiB0aGlzLnNpZ25hdHVyZVBhZC50b0RhdGFVUkwoaW1hZ2VUeXBlLCBxdWFsaXR5KTsgLy8gc2F2ZSBpbWFnZSBhcyBkYXRhIFVSTFxuICB9XG5cbiAgLy8gRHJhd3Mgc2lnbmF0dXJlIGltYWdlIGZyb20gZGF0YSBVUkxcbiAgcHVibGljIGZyb21EYXRhVVJMKGRhdGFVUkw6IHN0cmluZywgb3B0aW9uczogYW55ID0ge30pOiB2b2lkIHtcbiAgICAvLyBzZXQgZGVmYXVsdCBoZWlnaHQgYW5kIHdpZHRoIG9uIHJlYWQgZGF0YSBmcm9tIFVSTFxuICAgIGlmIChcbiAgICAgICFvcHRpb25zLmhhc093blByb3BlcnR5KCdoZWlnaHQnKSAmJlxuICAgICAgKHRoaXMub3B0aW9ucyBhcyBhbnkpLmNhbnZhc0hlaWdodFxuICAgICkge1xuICAgICAgb3B0aW9ucy5oZWlnaHQgPSAodGhpcy5vcHRpb25zIGFzIGFueSkuY2FudmFzSGVpZ2h0O1xuICAgIH1cbiAgICBpZiAoIW9wdGlvbnMuaGFzT3duUHJvcGVydHkoJ3dpZHRoJykgJiYgKHRoaXMub3B0aW9ucyBhcyBhbnkpLmNhbnZhc1dpZHRoKSB7XG4gICAgICBvcHRpb25zLndpZHRoID0gKHRoaXMub3B0aW9ucyBhcyBhbnkpLmNhbnZhc1dpZHRoO1xuICAgIH1cbiAgICB0aGlzLnNpZ25hdHVyZVBhZC5mcm9tRGF0YVVSTChkYXRhVVJMLCBvcHRpb25zKTtcbiAgfVxuXG4gIC8vIENsZWFycyB0aGUgY2FudmFzXG4gIHB1YmxpYyBjbGVhcigpOiB2b2lkIHtcbiAgICB0aGlzLnNpZ25hdHVyZVBhZC5jbGVhcigpO1xuICB9XG5cbiAgLy8gUmV0dXJucyB0cnVlIGlmIGNhbnZhcyBpcyBlbXB0eSwgb3RoZXJ3aXNlIHJldHVybnMgZmFsc2VcbiAgcHVibGljIGlzRW1wdHkoKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuIHRoaXMuc2lnbmF0dXJlUGFkLmlzRW1wdHkoKTtcbiAgfVxuXG4gIC8vIFVuYmluZHMgYWxsIGV2ZW50IGhhbmRsZXJzXG4gIHB1YmxpYyBvZmYoKTogdm9pZCB7XG4gICAgdGhpcy5zaWduYXR1cmVQYWQub2ZmKCk7XG4gIH1cblxuICAvLyBSZWJpbmRzIGFsbCBldmVudCBoYW5kbGVyc1xuICBwdWJsaWMgb24oKTogdm9pZCB7XG4gICAgdGhpcy5zaWduYXR1cmVQYWQub24oKTtcbiAgfVxuXG4gIC8vIHNldCBhbiBvcHRpb24gb24gdGhlIHNpZ25hdHVyZVBhZCAtIGUuZy4gc2V0KCdtaW5XaWR0aCcsIDUwKTtcbiAgcHVibGljIHNldChvcHRpb246IHN0cmluZywgdmFsdWU6IGFueSk6IHZvaWQge1xuICAgIHN3aXRjaCAob3B0aW9uKSB7XG4gICAgICBjYXNlICdjYW52YXNIZWlnaHQnOlxuICAgICAgICB0aGlzLnNpZ25hdHVyZVBhZC5jYW52YXMuaGVpZ2h0ID0gdmFsdWU7XG4gICAgICAgIGJyZWFrO1xuICAgICAgY2FzZSAnY2FudmFzV2lkdGgnOlxuICAgICAgICB0aGlzLnNpZ25hdHVyZVBhZC5jYW52YXMud2lkdGggPSB2YWx1ZTtcbiAgICAgICAgYnJlYWs7XG4gICAgICBkZWZhdWx0OlxuICAgICAgICB0aGlzLnNpZ25hdHVyZVBhZFtvcHRpb25dID0gdmFsdWU7XG4gICAgfVxuICB9XG5cbiAgLy8gbm90aWZ5IHN1YnNjcmliZXJzIG9uIHNpZ25hdHVyZSBiZWdpblxuICBwdWJsaWMgb25CZWdpbigpOiB2b2lkIHtcbiAgICB0aGlzLm9uQmVnaW5FdmVudC5lbWl0KHRydWUpO1xuICB9XG5cbiAgLy8gbm90aWZ5IHN1YnNjcmliZXJzIG9uIHNpZ25hdHVyZSBlbmRcbiAgcHVibGljIG9uRW5kKCk6IHZvaWQge1xuICAgIHRoaXMub25FbmRFdmVudC5lbWl0KHRydWUpO1xuICB9XG5cbiAgcHVibGljIHF1ZXJ5UGFkKCk6IGFueSB7XG4gICAgcmV0dXJuIHRoaXMuc2lnbmF0dXJlUGFkO1xuICB9XG59XG4iXX0=
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { NgModule } from '@angular/core';
|
|
2
|
+
import { SignaturePad } from './ngx-signature-pad.component';
|
|
3
|
+
import * as i0 from "@angular/core";
|
|
4
|
+
export class SignaturePadModule {
|
|
5
|
+
}
|
|
6
|
+
SignaturePadModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SignaturePadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
7
|
+
SignaturePadModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.3", ngImport: i0, type: SignaturePadModule, declarations: [SignaturePad], exports: [SignaturePad] });
|
|
8
|
+
SignaturePadModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SignaturePadModule });
|
|
9
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SignaturePadModule, decorators: [{
|
|
10
|
+
type: NgModule,
|
|
11
|
+
args: [{
|
|
12
|
+
declarations: [SignaturePad],
|
|
13
|
+
imports: [],
|
|
14
|
+
exports: [SignaturePad],
|
|
15
|
+
}]
|
|
16
|
+
}] });
|
|
17
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LXNpZ25hdHVyZS1wYWQubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNpZ25hdHVyZS1wYWQvc3JjL2xpYi9uZ3gtc2lnbmF0dXJlLXBhZC5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sK0JBQStCLENBQUM7O0FBTzdELE1BQU0sT0FBTyxrQkFBa0I7OytHQUFsQixrQkFBa0I7Z0hBQWxCLGtCQUFrQixpQkFKZCxZQUFZLGFBRWpCLFlBQVk7Z0hBRVgsa0JBQWtCOzJGQUFsQixrQkFBa0I7a0JBTDlCLFFBQVE7bUJBQUM7b0JBQ1IsWUFBWSxFQUFFLENBQUMsWUFBWSxDQUFDO29CQUM1QixPQUFPLEVBQUUsRUFBRTtvQkFDWCxPQUFPLEVBQUUsQ0FBQyxZQUFZLENBQUM7aUJBQ3hCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFNpZ25hdHVyZVBhZCB9IGZyb20gJy4vbmd4LXNpZ25hdHVyZS1wYWQuY29tcG9uZW50JztcblxuQE5nTW9kdWxlKHtcbiAgZGVjbGFyYXRpb25zOiBbU2lnbmF0dXJlUGFkXSxcbiAgaW1wb3J0czogW10sXG4gIGV4cG9ydHM6IFtTaWduYXR1cmVQYWRdLFxufSlcbmV4cG9ydCBjbGFzcyBTaWduYXR1cmVQYWRNb2R1bGUge31cbiJdfQ==
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Public API Surface of ngx-signature-pad
|
|
3
|
+
*/
|
|
4
|
+
export * from './lib/ngx-signature-pad.component';
|
|
5
|
+
export * from './lib/ngx-signature-pad.module';
|
|
6
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL25neC1zaWduYXR1cmUtcGFkL3NyYy9wdWJsaWMtYXBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyxtQ0FBbUMsQ0FBQztBQUNsRCxjQUFjLGdDQUFnQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFB1YmxpYyBBUEkgU3VyZmFjZSBvZiBuZ3gtc2lnbmF0dXJlLXBhZFxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vbGliL25neC1zaWduYXR1cmUtcGFkLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9uZ3gtc2lnbmF0dXJlLXBhZC5tb2R1bGUnO1xuIl19
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Generated bundle index. Do not edit.
|
|
3
|
+
*/
|
|
4
|
+
export * from './public-api';
|
|
5
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmlhYmxlbG9naWMtbmd4LXNpZ25hdHVyZS1wYWQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc2lnbmF0dXJlLXBhZC9zcmMvdmlhYmxlbG9naWMtbmd4LXNpZ25hdHVyZS1wYWQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLGNBQWMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9wdWJsaWMtYXBpJztcbiJdfQ==
|
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
|
|
3
|
+
import * as SignaturePadNative from 'signature_pad';
|
|
4
|
+
|
|
5
|
+
class SignaturePad {
|
|
6
|
+
constructor(elementRef) {
|
|
7
|
+
// no op
|
|
8
|
+
this.elementRef = elementRef;
|
|
9
|
+
this.options = this.options || {};
|
|
10
|
+
this.onBeginEvent = new EventEmitter();
|
|
11
|
+
this.onEndEvent = new EventEmitter();
|
|
12
|
+
}
|
|
13
|
+
ngAfterContentInit() {
|
|
14
|
+
const canvas = this.elementRef.nativeElement.querySelector('canvas');
|
|
15
|
+
if (this.options.canvasHeight) {
|
|
16
|
+
canvas.height = this.options.canvasHeight;
|
|
17
|
+
}
|
|
18
|
+
if (this.options.canvasWidth) {
|
|
19
|
+
canvas.width = this.options.canvasWidth;
|
|
20
|
+
}
|
|
21
|
+
this.signaturePad = new SignaturePadNative.default(canvas, this.options);
|
|
22
|
+
this.signaturePad.onBegin = this.onBegin.bind(this);
|
|
23
|
+
this.signaturePad.onEnd = this.onEnd.bind(this);
|
|
24
|
+
}
|
|
25
|
+
ngOnDestroy() {
|
|
26
|
+
const canvas = this.elementRef.nativeElement.querySelector('canvas');
|
|
27
|
+
canvas.width = 0;
|
|
28
|
+
canvas.height = 0;
|
|
29
|
+
}
|
|
30
|
+
resizeCanvas() {
|
|
31
|
+
// When zoomed out to less than 100%, for some very strange reason,
|
|
32
|
+
// some browsers report devicePixelRatio as less than 1
|
|
33
|
+
// and only part of the canvas is cleared then.
|
|
34
|
+
const ratio = Math.max(window.devicePixelRatio || 1, 1);
|
|
35
|
+
const canvas = this.signaturePad.canvas;
|
|
36
|
+
canvas.width = canvas.offsetWidth * ratio;
|
|
37
|
+
canvas.height = canvas.offsetHeight * ratio;
|
|
38
|
+
canvas.getContext('2d').scale(ratio, ratio);
|
|
39
|
+
this.signaturePad.clear(); // otherwise isEmpty() might return incorrect value
|
|
40
|
+
}
|
|
41
|
+
// Returns signature image as an array of point groups
|
|
42
|
+
toData() {
|
|
43
|
+
if (this.signaturePad) {
|
|
44
|
+
return this.signaturePad.toData();
|
|
45
|
+
}
|
|
46
|
+
else {
|
|
47
|
+
return [];
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
// Draws signature image from an array of point groups
|
|
51
|
+
fromData(points) {
|
|
52
|
+
this.signaturePad.fromData(points);
|
|
53
|
+
}
|
|
54
|
+
// Returns signature image as data URL (see https://mdn.io/todataurl for the list of possible paramters)
|
|
55
|
+
toDataURL(imageType, quality) {
|
|
56
|
+
return this.signaturePad.toDataURL(imageType, quality); // save image as data URL
|
|
57
|
+
}
|
|
58
|
+
// Draws signature image from data URL
|
|
59
|
+
fromDataURL(dataURL, options = {}) {
|
|
60
|
+
// set default height and width on read data from URL
|
|
61
|
+
if (!options.hasOwnProperty('height') &&
|
|
62
|
+
this.options.canvasHeight) {
|
|
63
|
+
options.height = this.options.canvasHeight;
|
|
64
|
+
}
|
|
65
|
+
if (!options.hasOwnProperty('width') && this.options.canvasWidth) {
|
|
66
|
+
options.width = this.options.canvasWidth;
|
|
67
|
+
}
|
|
68
|
+
this.signaturePad.fromDataURL(dataURL, options);
|
|
69
|
+
}
|
|
70
|
+
// Clears the canvas
|
|
71
|
+
clear() {
|
|
72
|
+
this.signaturePad.clear();
|
|
73
|
+
}
|
|
74
|
+
// Returns true if canvas is empty, otherwise returns false
|
|
75
|
+
isEmpty() {
|
|
76
|
+
return this.signaturePad.isEmpty();
|
|
77
|
+
}
|
|
78
|
+
// Unbinds all event handlers
|
|
79
|
+
off() {
|
|
80
|
+
this.signaturePad.off();
|
|
81
|
+
}
|
|
82
|
+
// Rebinds all event handlers
|
|
83
|
+
on() {
|
|
84
|
+
this.signaturePad.on();
|
|
85
|
+
}
|
|
86
|
+
// set an option on the signaturePad - e.g. set('minWidth', 50);
|
|
87
|
+
set(option, value) {
|
|
88
|
+
switch (option) {
|
|
89
|
+
case 'canvasHeight':
|
|
90
|
+
this.signaturePad.canvas.height = value;
|
|
91
|
+
break;
|
|
92
|
+
case 'canvasWidth':
|
|
93
|
+
this.signaturePad.canvas.width = value;
|
|
94
|
+
break;
|
|
95
|
+
default:
|
|
96
|
+
this.signaturePad[option] = value;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
// notify subscribers on signature begin
|
|
100
|
+
onBegin() {
|
|
101
|
+
this.onBeginEvent.emit(true);
|
|
102
|
+
}
|
|
103
|
+
// notify subscribers on signature end
|
|
104
|
+
onEnd() {
|
|
105
|
+
this.onEndEvent.emit(true);
|
|
106
|
+
}
|
|
107
|
+
queryPad() {
|
|
108
|
+
return this.signaturePad;
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
SignaturePad.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SignaturePad, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
112
|
+
SignaturePad.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: SignaturePad, selector: "signature-pad", inputs: { options: "options" }, outputs: { onBeginEvent: "onBeginEvent", onEndEvent: "onEndEvent" }, ngImport: i0, template: '<canvas></canvas>', isInline: true });
|
|
113
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SignaturePad, decorators: [{
|
|
114
|
+
type: Component,
|
|
115
|
+
args: [{
|
|
116
|
+
template: '<canvas></canvas>',
|
|
117
|
+
selector: 'signature-pad',
|
|
118
|
+
}]
|
|
119
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { options: [{
|
|
120
|
+
type: Input
|
|
121
|
+
}], onBeginEvent: [{
|
|
122
|
+
type: Output
|
|
123
|
+
}], onEndEvent: [{
|
|
124
|
+
type: Output
|
|
125
|
+
}] } });
|
|
126
|
+
|
|
127
|
+
class SignaturePadModule {
|
|
128
|
+
}
|
|
129
|
+
SignaturePadModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SignaturePadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
130
|
+
SignaturePadModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.3", ngImport: i0, type: SignaturePadModule, declarations: [SignaturePad], exports: [SignaturePad] });
|
|
131
|
+
SignaturePadModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SignaturePadModule });
|
|
132
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SignaturePadModule, decorators: [{
|
|
133
|
+
type: NgModule,
|
|
134
|
+
args: [{
|
|
135
|
+
declarations: [SignaturePad],
|
|
136
|
+
imports: [],
|
|
137
|
+
exports: [SignaturePad],
|
|
138
|
+
}]
|
|
139
|
+
}] });
|
|
140
|
+
|
|
141
|
+
/*
|
|
142
|
+
* Public API Surface of ngx-signature-pad
|
|
143
|
+
*/
|
|
144
|
+
|
|
145
|
+
/**
|
|
146
|
+
* Generated bundle index. Do not edit.
|
|
147
|
+
*/
|
|
148
|
+
|
|
149
|
+
export { SignaturePad, SignaturePadModule };
|
|
150
|
+
//# sourceMappingURL=viablelogic-ngx-signature-pad.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"viablelogic-ngx-signature-pad.mjs","sources":["../../../projects/ngx-signature-pad/src/lib/ngx-signature-pad.component.ts","../../../projects/ngx-signature-pad/src/lib/ngx-signature-pad.module.ts","../../../projects/ngx-signature-pad/src/public-api.ts","../../../projects/ngx-signature-pad/src/viablelogic-ngx-signature-pad.ts"],"sourcesContent":["import {\n AfterContentInit,\n Component,\n ElementRef,\n EventEmitter,\n Input,\n Output,\n OnDestroy,\n} from '@angular/core';\n\nimport * as SignaturePadNative from 'signature_pad';\n\nexport interface Point {\n x: number;\n y: number;\n time: number;\n}\n\nexport type PointGroup = Array<Point>;\n\n@Component({\n template: '<canvas></canvas>',\n selector: 'signature-pad',\n})\nexport class SignaturePad implements AfterContentInit, OnDestroy {\n @Input() public options: any;\n @Output() public onBeginEvent: EventEmitter<boolean>;\n @Output() public onEndEvent: EventEmitter<boolean>;\n\n private signaturePad: any;\n private elementRef: ElementRef;\n\n constructor(elementRef: ElementRef) {\n // no op\n this.elementRef = elementRef;\n this.options = this.options || {};\n this.onBeginEvent = new EventEmitter();\n this.onEndEvent = new EventEmitter();\n }\n\n public ngAfterContentInit(): void {\n const canvas: any = this.elementRef.nativeElement.querySelector('canvas');\n\n if ((this.options as any).canvasHeight) {\n canvas.height = (this.options as any).canvasHeight;\n }\n\n if ((this.options as any).canvasWidth) {\n canvas.width = (this.options as any).canvasWidth;\n }\n\n this.signaturePad = new SignaturePadNative.default(canvas, this.options);\n this.signaturePad.onBegin = this.onBegin.bind(this);\n this.signaturePad.onEnd = this.onEnd.bind(this);\n }\n\n public ngOnDestroy(): void {\n const canvas: any = this.elementRef.nativeElement.querySelector('canvas');\n canvas.width = 0;\n canvas.height = 0;\n }\n\n public resizeCanvas(): void {\n // When zoomed out to less than 100%, for some very strange reason,\n // some browsers report devicePixelRatio as less than 1\n // and only part of the canvas is cleared then.\n const ratio: number = Math.max(window.devicePixelRatio || 1, 1);\n const canvas: any = this.signaturePad.canvas;\n canvas.width = canvas.offsetWidth * ratio;\n canvas.height = canvas.offsetHeight * ratio;\n canvas.getContext('2d').scale(ratio, ratio);\n this.signaturePad.clear(); // otherwise isEmpty() might return incorrect value\n }\n\n // Returns signature image as an array of point groups\n public toData(): Array<PointGroup> {\n if (this.signaturePad) {\n return this.signaturePad.toData();\n } else {\n return [];\n }\n }\n\n // Draws signature image from an array of point groups\n public fromData(points: Array<PointGroup>): void {\n this.signaturePad.fromData(points as any);\n }\n\n // Returns signature image as data URL (see https://mdn.io/todataurl for the list of possible paramters)\n public toDataURL(imageType?: string, quality?: number): string {\n return this.signaturePad.toDataURL(imageType, quality); // save image as data URL\n }\n\n // Draws signature image from data URL\n public fromDataURL(dataURL: string, options: any = {}): void {\n // set default height and width on read data from URL\n if (\n !options.hasOwnProperty('height') &&\n (this.options as any).canvasHeight\n ) {\n options.height = (this.options as any).canvasHeight;\n }\n if (!options.hasOwnProperty('width') && (this.options as any).canvasWidth) {\n options.width = (this.options as any).canvasWidth;\n }\n this.signaturePad.fromDataURL(dataURL, options);\n }\n\n // Clears the canvas\n public clear(): void {\n this.signaturePad.clear();\n }\n\n // Returns true if canvas is empty, otherwise returns false\n public isEmpty(): boolean {\n return this.signaturePad.isEmpty();\n }\n\n // Unbinds all event handlers\n public off(): void {\n this.signaturePad.off();\n }\n\n // Rebinds all event handlers\n public on(): void {\n this.signaturePad.on();\n }\n\n // set an option on the signaturePad - e.g. set('minWidth', 50);\n public set(option: string, value: any): void {\n switch (option) {\n case 'canvasHeight':\n this.signaturePad.canvas.height = value;\n break;\n case 'canvasWidth':\n this.signaturePad.canvas.width = value;\n break;\n default:\n this.signaturePad[option] = value;\n }\n }\n\n // notify subscribers on signature begin\n public onBegin(): void {\n this.onBeginEvent.emit(true);\n }\n\n // notify subscribers on signature end\n public onEnd(): void {\n this.onEndEvent.emit(true);\n }\n\n public queryPad(): any {\n return this.signaturePad;\n }\n}\n","import { NgModule } from '@angular/core';\nimport { SignaturePad } from './ngx-signature-pad.component';\n\n@NgModule({\n declarations: [SignaturePad],\n imports: [],\n exports: [SignaturePad],\n})\nexport class SignaturePadModule {}\n","/*\n * Public API Surface of ngx-signature-pad\n */\n\nexport * from './lib/ngx-signature-pad.component';\nexport * from './lib/ngx-signature-pad.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
|
|
3
|
+
import * as SignaturePadNative from 'signature_pad';
|
|
4
|
+
|
|
5
|
+
class SignaturePad {
|
|
6
|
+
constructor(elementRef) {
|
|
7
|
+
// no op
|
|
8
|
+
this.elementRef = elementRef;
|
|
9
|
+
this.options = this.options || {};
|
|
10
|
+
this.onBeginEvent = new EventEmitter();
|
|
11
|
+
this.onEndEvent = new EventEmitter();
|
|
12
|
+
}
|
|
13
|
+
ngAfterContentInit() {
|
|
14
|
+
const canvas = this.elementRef.nativeElement.querySelector('canvas');
|
|
15
|
+
if (this.options.canvasHeight) {
|
|
16
|
+
canvas.height = this.options.canvasHeight;
|
|
17
|
+
}
|
|
18
|
+
if (this.options.canvasWidth) {
|
|
19
|
+
canvas.width = this.options.canvasWidth;
|
|
20
|
+
}
|
|
21
|
+
this.signaturePad = new SignaturePadNative.default(canvas, this.options);
|
|
22
|
+
this.signaturePad.onBegin = this.onBegin.bind(this);
|
|
23
|
+
this.signaturePad.onEnd = this.onEnd.bind(this);
|
|
24
|
+
}
|
|
25
|
+
ngOnDestroy() {
|
|
26
|
+
const canvas = this.elementRef.nativeElement.querySelector('canvas');
|
|
27
|
+
canvas.width = 0;
|
|
28
|
+
canvas.height = 0;
|
|
29
|
+
}
|
|
30
|
+
resizeCanvas() {
|
|
31
|
+
// When zoomed out to less than 100%, for some very strange reason,
|
|
32
|
+
// some browsers report devicePixelRatio as less than 1
|
|
33
|
+
// and only part of the canvas is cleared then.
|
|
34
|
+
const ratio = Math.max(window.devicePixelRatio || 1, 1);
|
|
35
|
+
const canvas = this.signaturePad.canvas;
|
|
36
|
+
canvas.width = canvas.offsetWidth * ratio;
|
|
37
|
+
canvas.height = canvas.offsetHeight * ratio;
|
|
38
|
+
canvas.getContext('2d').scale(ratio, ratio);
|
|
39
|
+
this.signaturePad.clear(); // otherwise isEmpty() might return incorrect value
|
|
40
|
+
}
|
|
41
|
+
// Returns signature image as an array of point groups
|
|
42
|
+
toData() {
|
|
43
|
+
if (this.signaturePad) {
|
|
44
|
+
return this.signaturePad.toData();
|
|
45
|
+
}
|
|
46
|
+
else {
|
|
47
|
+
return [];
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
// Draws signature image from an array of point groups
|
|
51
|
+
fromData(points) {
|
|
52
|
+
this.signaturePad.fromData(points);
|
|
53
|
+
}
|
|
54
|
+
// Returns signature image as data URL (see https://mdn.io/todataurl for the list of possible paramters)
|
|
55
|
+
toDataURL(imageType, quality) {
|
|
56
|
+
return this.signaturePad.toDataURL(imageType, quality); // save image as data URL
|
|
57
|
+
}
|
|
58
|
+
// Draws signature image from data URL
|
|
59
|
+
fromDataURL(dataURL, options = {}) {
|
|
60
|
+
// set default height and width on read data from URL
|
|
61
|
+
if (!options.hasOwnProperty('height') &&
|
|
62
|
+
this.options.canvasHeight) {
|
|
63
|
+
options.height = this.options.canvasHeight;
|
|
64
|
+
}
|
|
65
|
+
if (!options.hasOwnProperty('width') && this.options.canvasWidth) {
|
|
66
|
+
options.width = this.options.canvasWidth;
|
|
67
|
+
}
|
|
68
|
+
this.signaturePad.fromDataURL(dataURL, options);
|
|
69
|
+
}
|
|
70
|
+
// Clears the canvas
|
|
71
|
+
clear() {
|
|
72
|
+
this.signaturePad.clear();
|
|
73
|
+
}
|
|
74
|
+
// Returns true if canvas is empty, otherwise returns false
|
|
75
|
+
isEmpty() {
|
|
76
|
+
return this.signaturePad.isEmpty();
|
|
77
|
+
}
|
|
78
|
+
// Unbinds all event handlers
|
|
79
|
+
off() {
|
|
80
|
+
this.signaturePad.off();
|
|
81
|
+
}
|
|
82
|
+
// Rebinds all event handlers
|
|
83
|
+
on() {
|
|
84
|
+
this.signaturePad.on();
|
|
85
|
+
}
|
|
86
|
+
// set an option on the signaturePad - e.g. set('minWidth', 50);
|
|
87
|
+
set(option, value) {
|
|
88
|
+
switch (option) {
|
|
89
|
+
case 'canvasHeight':
|
|
90
|
+
this.signaturePad.canvas.height = value;
|
|
91
|
+
break;
|
|
92
|
+
case 'canvasWidth':
|
|
93
|
+
this.signaturePad.canvas.width = value;
|
|
94
|
+
break;
|
|
95
|
+
default:
|
|
96
|
+
this.signaturePad[option] = value;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
// notify subscribers on signature begin
|
|
100
|
+
onBegin() {
|
|
101
|
+
this.onBeginEvent.emit(true);
|
|
102
|
+
}
|
|
103
|
+
// notify subscribers on signature end
|
|
104
|
+
onEnd() {
|
|
105
|
+
this.onEndEvent.emit(true);
|
|
106
|
+
}
|
|
107
|
+
queryPad() {
|
|
108
|
+
return this.signaturePad;
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
SignaturePad.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SignaturePad, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
112
|
+
SignaturePad.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: SignaturePad, selector: "signature-pad", inputs: { options: "options" }, outputs: { onBeginEvent: "onBeginEvent", onEndEvent: "onEndEvent" }, ngImport: i0, template: '<canvas></canvas>', isInline: true });
|
|
113
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SignaturePad, decorators: [{
|
|
114
|
+
type: Component,
|
|
115
|
+
args: [{
|
|
116
|
+
template: '<canvas></canvas>',
|
|
117
|
+
selector: 'signature-pad',
|
|
118
|
+
}]
|
|
119
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { options: [{
|
|
120
|
+
type: Input
|
|
121
|
+
}], onBeginEvent: [{
|
|
122
|
+
type: Output
|
|
123
|
+
}], onEndEvent: [{
|
|
124
|
+
type: Output
|
|
125
|
+
}] } });
|
|
126
|
+
|
|
127
|
+
class SignaturePadModule {
|
|
128
|
+
}
|
|
129
|
+
SignaturePadModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SignaturePadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
130
|
+
SignaturePadModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.3", ngImport: i0, type: SignaturePadModule, declarations: [SignaturePad], exports: [SignaturePad] });
|
|
131
|
+
SignaturePadModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SignaturePadModule });
|
|
132
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SignaturePadModule, decorators: [{
|
|
133
|
+
type: NgModule,
|
|
134
|
+
args: [{
|
|
135
|
+
declarations: [SignaturePad],
|
|
136
|
+
imports: [],
|
|
137
|
+
exports: [SignaturePad],
|
|
138
|
+
}]
|
|
139
|
+
}] });
|
|
140
|
+
|
|
141
|
+
/*
|
|
142
|
+
* Public API Surface of ngx-signature-pad
|
|
143
|
+
*/
|
|
144
|
+
|
|
145
|
+
/**
|
|
146
|
+
* Generated bundle index. Do not edit.
|
|
147
|
+
*/
|
|
148
|
+
|
|
149
|
+
export { SignaturePad, SignaturePadModule };
|
|
150
|
+
//# sourceMappingURL=viablelogic-ngx-signature-pad.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"viablelogic-ngx-signature-pad.mjs","sources":["../../../projects/ngx-signature-pad/src/lib/ngx-signature-pad.component.ts","../../../projects/ngx-signature-pad/src/lib/ngx-signature-pad.module.ts","../../../projects/ngx-signature-pad/src/public-api.ts","../../../projects/ngx-signature-pad/src/viablelogic-ngx-signature-pad.ts"],"sourcesContent":["import {\n AfterContentInit,\n Component,\n ElementRef,\n EventEmitter,\n Input,\n Output,\n OnDestroy,\n} from '@angular/core';\n\nimport * as SignaturePadNative from 'signature_pad';\n\nexport interface Point {\n x: number;\n y: number;\n time: number;\n}\n\nexport type PointGroup = Array<Point>;\n\n@Component({\n template: '<canvas></canvas>',\n selector: 'signature-pad',\n})\nexport class SignaturePad implements AfterContentInit, OnDestroy {\n @Input() public options: any;\n @Output() public onBeginEvent: EventEmitter<boolean>;\n @Output() public onEndEvent: EventEmitter<boolean>;\n\n private signaturePad: any;\n private elementRef: ElementRef;\n\n constructor(elementRef: ElementRef) {\n // no op\n this.elementRef = elementRef;\n this.options = this.options || {};\n this.onBeginEvent = new EventEmitter();\n this.onEndEvent = new EventEmitter();\n }\n\n public ngAfterContentInit(): void {\n const canvas: any = this.elementRef.nativeElement.querySelector('canvas');\n\n if ((this.options as any).canvasHeight) {\n canvas.height = (this.options as any).canvasHeight;\n }\n\n if ((this.options as any).canvasWidth) {\n canvas.width = (this.options as any).canvasWidth;\n }\n\n this.signaturePad = new SignaturePadNative.default(canvas, this.options);\n this.signaturePad.onBegin = this.onBegin.bind(this);\n this.signaturePad.onEnd = this.onEnd.bind(this);\n }\n\n public ngOnDestroy(): void {\n const canvas: any = this.elementRef.nativeElement.querySelector('canvas');\n canvas.width = 0;\n canvas.height = 0;\n }\n\n public resizeCanvas(): void {\n // When zoomed out to less than 100%, for some very strange reason,\n // some browsers report devicePixelRatio as less than 1\n // and only part of the canvas is cleared then.\n const ratio: number = Math.max(window.devicePixelRatio || 1, 1);\n const canvas: any = this.signaturePad.canvas;\n canvas.width = canvas.offsetWidth * ratio;\n canvas.height = canvas.offsetHeight * ratio;\n canvas.getContext('2d').scale(ratio, ratio);\n this.signaturePad.clear(); // otherwise isEmpty() might return incorrect value\n }\n\n // Returns signature image as an array of point groups\n public toData(): Array<PointGroup> {\n if (this.signaturePad) {\n return this.signaturePad.toData();\n } else {\n return [];\n }\n }\n\n // Draws signature image from an array of point groups\n public fromData(points: Array<PointGroup>): void {\n this.signaturePad.fromData(points as any);\n }\n\n // Returns signature image as data URL (see https://mdn.io/todataurl for the list of possible paramters)\n public toDataURL(imageType?: string, quality?: number): string {\n return this.signaturePad.toDataURL(imageType, quality); // save image as data URL\n }\n\n // Draws signature image from data URL\n public fromDataURL(dataURL: string, options: any = {}): void {\n // set default height and width on read data from URL\n if (\n !options.hasOwnProperty('height') &&\n (this.options as any).canvasHeight\n ) {\n options.height = (this.options as any).canvasHeight;\n }\n if (!options.hasOwnProperty('width') && (this.options as any).canvasWidth) {\n options.width = (this.options as any).canvasWidth;\n }\n this.signaturePad.fromDataURL(dataURL, options);\n }\n\n // Clears the canvas\n public clear(): void {\n this.signaturePad.clear();\n }\n\n // Returns true if canvas is empty, otherwise returns false\n public isEmpty(): boolean {\n return this.signaturePad.isEmpty();\n }\n\n // Unbinds all event handlers\n public off(): void {\n this.signaturePad.off();\n }\n\n // Rebinds all event handlers\n public on(): void {\n this.signaturePad.on();\n }\n\n // set an option on the signaturePad - e.g. set('minWidth', 50);\n public set(option: string, value: any): void {\n switch (option) {\n case 'canvasHeight':\n this.signaturePad.canvas.height = value;\n break;\n case 'canvasWidth':\n this.signaturePad.canvas.width = value;\n break;\n default:\n this.signaturePad[option] = value;\n }\n }\n\n // notify subscribers on signature begin\n public onBegin(): void {\n this.onBeginEvent.emit(true);\n }\n\n // notify subscribers on signature end\n public onEnd(): void {\n this.onEndEvent.emit(true);\n }\n\n public queryPad(): any {\n return this.signaturePad;\n }\n}\n","import { NgModule } from '@angular/core';\nimport { SignaturePad } from './ngx-signature-pad.component';\n\n@NgModule({\n declarations: [SignaturePad],\n imports: [],\n exports: [SignaturePad],\n})\nexport class SignaturePadModule {}\n","/*\n * Public API Surface of ngx-signature-pad\n */\n\nexport * from './lib/ngx-signature-pad.component';\nexport * from './lib/ngx-signature-pad.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
package/index.d.ts
ADDED
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { AfterContentInit, ElementRef, EventEmitter, OnDestroy } from '@angular/core';
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
export interface Point {
|
|
4
|
+
x: number;
|
|
5
|
+
y: number;
|
|
6
|
+
time: number;
|
|
7
|
+
}
|
|
8
|
+
export declare type PointGroup = Array<Point>;
|
|
9
|
+
export declare class SignaturePad implements AfterContentInit, OnDestroy {
|
|
10
|
+
options: any;
|
|
11
|
+
onBeginEvent: EventEmitter<boolean>;
|
|
12
|
+
onEndEvent: EventEmitter<boolean>;
|
|
13
|
+
private signaturePad;
|
|
14
|
+
private elementRef;
|
|
15
|
+
constructor(elementRef: ElementRef);
|
|
16
|
+
ngAfterContentInit(): void;
|
|
17
|
+
ngOnDestroy(): void;
|
|
18
|
+
resizeCanvas(): void;
|
|
19
|
+
toData(): Array<PointGroup>;
|
|
20
|
+
fromData(points: Array<PointGroup>): void;
|
|
21
|
+
toDataURL(imageType?: string, quality?: number): string;
|
|
22
|
+
fromDataURL(dataURL: string, options?: any): void;
|
|
23
|
+
clear(): void;
|
|
24
|
+
isEmpty(): boolean;
|
|
25
|
+
off(): void;
|
|
26
|
+
on(): void;
|
|
27
|
+
set(option: string, value: any): void;
|
|
28
|
+
onBegin(): void;
|
|
29
|
+
onEnd(): void;
|
|
30
|
+
queryPad(): any;
|
|
31
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<SignaturePad, never>;
|
|
32
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<SignaturePad, "signature-pad", never, { "options": "options"; }, { "onBeginEvent": "onBeginEvent"; "onEndEvent": "onEndEvent"; }, never, never, false>;
|
|
33
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import * as i0 from "@angular/core";
|
|
2
|
+
import * as i1 from "./ngx-signature-pad.component";
|
|
3
|
+
export declare class SignaturePadModule {
|
|
4
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<SignaturePadModule, never>;
|
|
5
|
+
static ɵmod: i0.ɵɵNgModuleDeclaration<SignaturePadModule, [typeof i1.SignaturePad], never, [typeof i1.SignaturePad]>;
|
|
6
|
+
static ɵinj: i0.ɵɵInjectorDeclaration<SignaturePadModule>;
|
|
7
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@viablelogic/ngx-signature-pad",
|
|
3
|
+
"version": "5.0.0",
|
|
4
|
+
"description": "Angular Component wrapper for szimek / signature_pad",
|
|
5
|
+
"repository": {
|
|
6
|
+
"type": "git",
|
|
7
|
+
"url": "git+https://github.com/hassanasad/ngx-signature-pad.git"
|
|
8
|
+
},
|
|
9
|
+
"keywords": [
|
|
10
|
+
"signature",
|
|
11
|
+
"sign",
|
|
12
|
+
"finger",
|
|
13
|
+
"canvas"
|
|
14
|
+
],
|
|
15
|
+
"author": "Wulf Solter <wulf@wulf.co.nz> (http://wulf.co.nz)",
|
|
16
|
+
"license": "MIT",
|
|
17
|
+
"bugs": {
|
|
18
|
+
"url": "https://github.com/hassanasad/ngx-signature-pad/issues"
|
|
19
|
+
},
|
|
20
|
+
"homepage": "https://github.com/hassanasad/ngx-signature-pad#readme",
|
|
21
|
+
"peerDependencies": {
|
|
22
|
+
"@angular/common": "^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0",
|
|
23
|
+
"@angular/core": "^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0",
|
|
24
|
+
"signature_pad": "4.0.7"
|
|
25
|
+
},
|
|
26
|
+
"dependencies": {
|
|
27
|
+
"tslib": "^2.0.0"
|
|
28
|
+
},
|
|
29
|
+
"module": "fesm2015/viablelogic-ngx-signature-pad.mjs",
|
|
30
|
+
"es2020": "fesm2020/viablelogic-ngx-signature-pad.mjs",
|
|
31
|
+
"esm2020": "esm2020/viablelogic-ngx-signature-pad.mjs",
|
|
32
|
+
"fesm2020": "fesm2020/viablelogic-ngx-signature-pad.mjs",
|
|
33
|
+
"fesm2015": "fesm2015/viablelogic-ngx-signature-pad.mjs",
|
|
34
|
+
"typings": "index.d.ts",
|
|
35
|
+
"exports": {
|
|
36
|
+
"./package.json": {
|
|
37
|
+
"default": "./package.json"
|
|
38
|
+
},
|
|
39
|
+
".": {
|
|
40
|
+
"types": "./index.d.ts",
|
|
41
|
+
"esm2020": "./esm2020/viablelogic-ngx-signature-pad.mjs",
|
|
42
|
+
"es2020": "./fesm2020/viablelogic-ngx-signature-pad.mjs",
|
|
43
|
+
"es2015": "./fesm2015/viablelogic-ngx-signature-pad.mjs",
|
|
44
|
+
"node": "./fesm2015/viablelogic-ngx-signature-pad.mjs",
|
|
45
|
+
"default": "./fesm2020/viablelogic-ngx-signature-pad.mjs"
|
|
46
|
+
}
|
|
47
|
+
},
|
|
48
|
+
"sideEffects": false
|
|
49
|
+
}
|
package/public-api.d.ts
ADDED