MEU DEUS DO CEU

import { Component, OnInit, ViewChild, Input, Inject, ChangeDetectionStrategy } from '@angular/core';
import { NgxCroppieComponent } from 'ngx-croppie';
import { CroppieOptions } from 'croppie';
import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material';
import { ImgCropperConfig, ImgCropperEvent } from '@alyle/ui/resizing-cropping-images';
import { LyTheme2, ThemeVariables } from '@alyle/ui';

@Component({
  selector: 'app-badge-image-editor',
  templateUrl: './badge-image-editor.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  styleUrls: ['./badge-image-editor.component.css']
})

export class BadgeImageEditorComponent implements OnInit {

  @ViewChild('ngxCroppie') ngxCroppie: NgxCroppieComponent;


  widthPx = '319'//'319' //'3189';
  heightPx = '370'//'370'//'3700';
  currentImage: string;
  croppieImage: string;

  constructor(public dialogRef: MatDialogRef<BadgeImageEditorComponent>, @Inject(MAT_DIALOG_DATA) public data:any) { }

  ngOnInit() {
    this.currentImage = this.data.url;
    this.croppieImage = this.data.url;
  }


  ngOnChanges(changes: any) {
    if (this.croppieImage) { return; }
    if (!changes.data.url) { return; }
    if (!changes.data.url.previousValue && changes.data.url.currentValue) {
      this.croppieImage = changes.data.url.currentValue;
    }
  }

  saveImage(){
    this.dialogRef.close(this.croppieImage);
  }


  public get imageToDisplay() {
    if (this.currentImage) { return this.currentImage; }
    if (this.data.url) { return this.data.url; }
    return `../../assets/images/idBadgeDefaultImg.png`;
  }

  newImageResultFromCroppie(img: string) {
    this.croppieImage = img;
  }

  saveImageFromCroppie() {
    this.currentImage = this.croppieImage;
  }

  cancelCroppieEdit() {
    this.croppieImage = this.currentImage;
  }

   public get croppieOptions(): CroppieOptions {
    const opts: CroppieOptions = {};
    opts.viewport = {
      width: parseInt(this.widthPx, 10),
      height: parseInt(this.heightPx, 10)
    };
    opts.boundary = {
      width: parseInt(this.widthPx, 10),
      height: parseInt(this.heightPx, 10)
    };
    opts.enforceBoundary = true;
    return opts;
  }

}