namespace YourProjectName {

    @Serenity.Decorators.element('<div />')
    @Serenity.Decorators.registerEditor([Serenity.IGetEditValue, Serenity.ISetEditValue])
    export class SignatureEditor extends Serenity.Widget<SignatureEditorOptions>
        implements Serenity.IGetEditValue, Serenity.ISetEditValue
    {

        private signaturePad: any;

        constructor(div: JQuery, options: SignatureEditorOptions) {
            super(div, options);

            let canvas = $('<canvas />').attr('id', 'sign_' + this.uniqueName);
            this.element.append(canvas);
            
            this.signaturePad = new SignaturePad(canvas[0]);

            let clearButton = $('<button />').attr('id', 'clearsign_' + this.uniqueName).html('<i class="fa fa-eraser"></i>');
            clearButton.on('click', (e) => {
                e.preventDefault();
                this.signaturePad.clear();
            });
            this.element.append(clearButton);
        }

        public get value(): string {
            return this.get_value();
        }

        protected get_value(): string {
            return this.signaturePad.toDataURL();
        }

        public set value(value: string) {
            this.set_value(value);
        }

        protected set_value(value: string): void {
            this.signaturePad.fromDataURL(value);
        }

        setEditValue(source: any, property: Serenity.PropertyItem): void {
            this.value = source[property.name];
        }
        getEditValue(property: Serenity.PropertyItem, target: any): void {
            target[property.name] = this.value;
        }

    }

    export interface SignatureEditorOptions {
    }
}