Bug with positions coordinates of the mouse

[nowitz]

Bug with positions coordinates of the mouse

[lathonez]

Hey,

I guess it's to do with the all the sizing you're doing?

        this.signaturePad.set('canvasWidth', (this.content.contentWidth / 2) - 5);
        this.signaturePad.set('canvasHeight', (this.content.contentHeight / 2) * 0.84);
//
        this.signaturePad.resizeCanvas()
        this.content.resize();

Check out the demo app, which has a responsive pad: https://github.com/lathonez/angular2-signaturepad-demo/blob/master/src/app/app.component.ts#L30-L44

Let us know if that doesn't solve it, or if you're looking to achieve something outside of what the demo app is doing.

Stephen

[lathonez]

Unsure what the problem is supposed to be.

If something is not working on init, but is working after resize, and you have bound it to window.resize explicitly, there is possibly an issue with the initialisation code?

Google Ionic Nav Lifecycle events and apply your initialisation code to the appropriate event, as opposed to ngAfterViewInit.

[nowitz]

Hey,
thank you for your advice, mouse position is coordinates. :-) But now I have a problem with height on first open page, how can you see on images.

I have this html, sass and code:

<ion-content class="backColor" (window:resize)="beResponsive()">
  <div class="sig-container" #sigContainer1>
    <div fxLayout="row">
      <signature-field></signature-field>
    </div>
  </div>

  <div class="sig-button" fxLayout="row">
    <button ion-button full color="danger" (click)="clearPad()">{{'SIGNATURE.CANCEL' | translate}}</button>
    <button ion-button full color="secondary" (click)="savePad()">{{'SIGNATURE.SAVE' | translate}}</button>
  </div>
</ion-content>

.sig-container {
    height: 80%;
    canvas {
      background: white;
    }
  }
  .sig-button{
    display: flex;
    height: 20%;
    button{
      margin: auto 4px;
    }
  }

 @ViewChildren(SignatureFieldComponent) public sigs: QueryList<SignatureFieldComponent>;
 @ViewChildren('sigContainer1') public sigContainer1: QueryList<ElementRef>;

 public ngAfterViewInit() {
        this.beResponsive();
    }
   
 public beResponsive() {
        this.size(this.sigContainer1.first, this.sigs.first);
    }
 
 public size(container: ElementRef, sig: SignatureFieldComponent){
        sig.signaturePad.set('canvasWidth', container.nativeElement.clientWidth);
        sig.signaturePad.set('canvasHeight', container.nativeElement.clientHeight);
    }

Thank you for your help
John

[nowitz]

You have right, this is right event: ionViewDidEnter.
Thank you for your advice.