Fork of szimek/signaturepad

[DynamoEffects]

Fork of szimek/signaturepad

[szimek]

I've started rewriting signature pad to TypeScript and it's actually almost done at https://github.com/szimek/signature_pad/tree/typescript. I don't have much experience with TS, so I'm not sure if it's ok or not, but I still have to figure out how to generate declaration files in rollup and what versions of built library to generate (or rather how to properly generate es6 version, because UMD one should just work). It would be awesome if anyone could review TS code ;)

[wulfsolter]

Apologies @DynamoEffects , locked other issue due to off topic posting - Which only gets worse as the off-topic gets indexed by search engines.....

If you're after a nod of agreement that it's a good idea, I'm sure you'll get that from everyone here. :) FOSS works best by people writing code - sure, I've contributed far less on this project than I'd intended to initially, but such is how projects work out sometimes.

Would love a PR :) Especially with tests. Or if it works better, copy this repo's code into your fork and then updating angular2-signaturepad is only a pull from szimek/signaturepad away...? I'm down with easy maintenance.

[DynamoEffects]

Ok great! I'll update my fork with the proposed updates and make a PR when it's ready.

[lathonez]

@DynamoEffects thanks a lot for reaching out.

Once we have a fork that works with this repo I will go back to @szimek with a solid PR of what we need to get it working here.

In creating a fork I am looking to get the absolute minimal changes from szimek/signaturepad that allow us to build it with AOT compiling - from the latest version.

The only way @wulfsolter and I are going to be able to maintain a separate fork (in the case that @szimek is unable / willing to merge the eventual PR), is if we are able to simply pull in the latest upstream changes from szimek/signaturepad.

What I am not looking to do:

• Fork off 1.5.3 (updates will have to be done by hand)
• Add any new features (the space for adding features is upstream)
• Add any bug fixes that apply upstream (ditto)

The current version of signaturepad has some major flaws that aren't getting fast resolution and I don't think the author is going to change his package to be compatible with this one, so I agree that this is the best route.

You need to address this over on szimek/signaturepad. I've seen many excellent projects such as signaturepad hampered by forks that claim to be the next / best / better maintained repo - but we'll all be better off if we can get the changes in one place - upstream.

However, If you have a fork of the latest version of signaturepad working with this repo (regardless of any other changes / fixes you have merged in), we would be very grateful for it!

Thanks

[DynamoEffects]

Ok, I'll send him some PRs to fix some of the bigger issues I've resolved.

Oddly enough it seems to be building with 2.1.1, is it possible AoT compiling supports default exports now?

D:\Projects\angular2-signaturepad>node -v
v6.10.2

D:\Projects\angular2-signaturepad>npm -v
5.0.2

I changed the signature_pad dependency version from 1.5.3 to 2.1.1;

D:\Projects\angular2-signaturepad>npm pack
npm WARN prepublish-on-install As of npm@5, `prepublish` scripts are deprecated.
npm WARN prepublish-on-install Use `prepare` for build steps and `prepublishOnly` for upload-only
npm WARN prepublish-on-install See the deprecation note in `npm help scripts` for more information

> [email protected] prepublish D:\Projects\angular2-signaturepad
> node ./node_modules/@angular/compiler-cli/src/main.js

angular2-signaturepad-2.4.0.tgz

So I switched over to my Ionic 2 app, removed both angular2-signaturepad and signature_pad and did the following:

1. npm install --save [email protected]

2. npm remove signature_pad && npm install [email protected]

3. Made the following edit to /node_modules/angular2-signaturepad/signature-pad.js:

from this:

        var sp = require('signature_pad');

to this:

        var ref = require('signature_pad');
        var sp = ref['default'];

Just tested on my Ionic 2 app and it works fine. Can you confirm?

[lathonez]

This is really helpful - thanks. I hadn't tried doing it via require. Will give it a whirl ASAP

[codemonkey00]

We created a similar module around signature_pad because we needed the save on the page to get the signature image from the canvas. DynamoEffects fixed worked for our deployed version which is bundled with angular-cli. We develop using systemjs, which works with the previous version.

For systemjs I have to use:
const SignaturePad = require('signature_pad');

For angular-cli: I have to use:
var ref = require('signature_pad');
var SignaturePad = ref['default'];

Any idea why this works different for each environment?
When I use the wrong one I get SignaturePad is not a constructor whenever I visit a page with the signature pad component on it. It fails on this line: this._signaturePad = new SignaturePad(this._canvas); which is inside the ngAfterViewInit()

[codemonkey00]

I loaded the 4 source ts files into my project and first thing was an error in signature_pad.ts at line 64,
this._strokeMoveUpdate = throttle(SignaturePad.prototype._strokeUpdate, this.throttle);,

with error: TS2346 TypeScript Supplied parameters do not match any signature of call target.

looks like the wait peramitter is missing from the throttle(func, wait, options)

I put the src files in the same folder as my Signature-Pad.component and imported it with:
import { default as SignaturePad } from './signature_pad';

When the component tries to load it I get an error:
Cannot read property 'addEventListener' of undefined

Here's our Component class:

import { Component, Output, Input, EventEmitter, OnInit, ElementRef } from '@angular/core';

import { default as SignaturePad } from './signature_pad';

@Component({
    selector: 'signature-pad,[SignaturePad]',
    templateUrl: './SignaturePad.component.html',
    styleUrls: ['./SignaturePad.component.css']
})
export class SignaturePadComponent implements OnInit {
@Output() onSave = new EventEmitter();
@Output() onClear = new EventEmitter();

private _fromDataURL: String;
private _fromData: any;

public _width: string = "auto";
public _height: string = "auto";
public _hideFooter: boolean;
public _label: string = 'Sign Above';

private _canvas: any;
private _signaturePad: any;

constructor(
    private _el: ElementRef
) {}

ngOnInit() {
}

@Input()
set width(value: string) {
    this._width = value;
}

@Input()
set height(value: string) {
    this._height = value;
}

@Input()
set fromDataURL(value: string) {
    this._fromDataURL = value;
    this._signaturePad.fromDataURL(this._fromDataURL);
}

@Input()
set fromData(value: string) {
    this._fromData = value;
    this._signaturePad.fromData(this._fromData);
}

@Input()
set hideFooter(value: boolean) {
    this._hideFooter = value;
}

@Input()
set label(value: string) {
    this._label = value;
}

ngAfterViewInit() {
    this._canvas = this._el.nativeElement.querySelector("canvas");
    this._signaturePad = new SignaturePad(this._canvas);
    
}

public getDataURL(): any {
    return this._signaturePad.toDataURL();
}
onClearClick() {
    this._signaturePad.clear();
    this.onClear.emit();
}

onSaveClick() {
    this.onSave.emit(this._signaturePad.toDataURL());
}

}

template html

<div id="signature-pad" class="m-signature-pad" [style.width]="_width" [style.height]="_height">
    <div class="m-signature-pad--body" style="margin-bottom:20px" >
        <canvas style="touch-action: none; width:100%"></canvas>
    </div>
    <div class="m-signature-pad--footer" [hidden]="_hideFooter">
        <div class="description">{{_label}}</div>
        <button type="button" class="button clear" data-action="clear" (click)="onClearClick()">Clear</button>
    </div>
</div>

[wulfsolter]

a bit cheeky asking for help, on something that isn't finished and out of your capabilities 😜

[codemonkey00]

I was trying to be helpful by using it.