keevo-components 2.0.106 → 2.0.107

package/src/lib/api/services/image.cutter.service.ts

@@ -0,0 +1,290 @@
+import { Component, ComponentRef, Injectable, signal } from '@angular/core';
+import { DialogService, DynamicDialogComponent, DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
+import { DialogModule } from 'primeng/dialog';
+import { ImageCroppedEvent, ImageCropperComponent, LoadedImage } from 'ngx-image-cropper';
+
+@Injectable({providedIn: 'root'})
+export class ImageCutterService {
+
+  constructor(private readonly dialogservice: DialogService) {}
+
+  cut(imageBase64: string, width: number, height: number, indCircle: boolean = false, avatar?: boolean, maintainAspectRatio: boolean = true): Promise<string> {
+    const cutConfig = { imageBase64, width, height, indCircle, maintainAspectRatio };
+    this.abrirModal(cutConfig, avatar);
+    return new Promise<string>((resolve, reject) => {
+      window.addEventListener('cropImage', (event: any) => {
+        if(event.detail.status == true ) {
+          resolve(event.detail.result);
+        }else{
+          reject('Operacao cancelada.');
+        }
+      });
+    });
+  }
+
+  abrirModal(cutConfig: { imageBase64: string, width: number, height: number, indCircle: boolean, maintainAspectRatio: boolean}, avatar?: boolean) {
+    let quality = 100
+    if(avatar) {
+      quality = 80
+    }
+    const params =       {
+      closable: true,
+      maximizable: false,
+      popup: true,
+      width: '75vw',
+      header: `Cortar` ,
+      id: { imagem: cutConfig.imageBase64, width: cutConfig.width, height: cutConfig.height, indCircle: cutConfig.indCircle, quality: quality, maintainAspectRatio: cutConfig.maintainAspectRatio },
+      styleClass: 'modal',
+    }
+    const dialogRef: DynamicDialogRef = FormService.openDialog(this.dialogservice, SimpleComponent, ()=>{}, params);
+  }
+
+}
+
+
+// ? Componente de modal usado no cutter
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { KvLabelModule } from '../../components/kv-label/kv-label.module';
+import { FormService } from './form.service';
+import { KvModalModule } from '../../components/kv-modal/kv-modal.module';
+import { KvButtonModule } from '../../components/kv-button/kv-button.module';
+import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
+
+@Component({
+  selector: 'app-simple-component',
+  template: `
+      <div class="modal-content">
+
+          <image-cropper
+            [imageBase64]="_variaviesDialog()?.imagem"
+            (imageCropped)="imageCropped($event)"
+            [aspectRatio]="aspectRatio()"
+            (imageLoaded)="imageLoaded($event)"
+            (cropperReady)="cropperReady()"
+            (loadImageFailed)="loadImageFailed()"
+            [roundCropper]="this._variaviesDialog()?.indCircle"
+            [maintainAspectRatio]="_variaviesDialog()?.maintainAspectRatio"
+            [imageQuality]="quality"
+            [backgroundColor]="'white'"
+            format="jpeg"
+            output='base64'
+            alignImage="center"
+          />
+
+          
+        </div>
+        <div class="button-container">
+          <kv-button label="Cancelar" severity="tertiary" icon="close" (click)="cancel()"></kv-button>
+          <kv-button label="Recortar" severity="primary" icon="crop" (click)="cropImage()" class="ml-2"></kv-button>
+        </div>
+
+
+
+  `,
+  styles: [`
+
+    img {
+      border-style: solid;
+      border-width: 2px;
+      border-radius: 50%;
+      object-fit: cover;
+    }
+    
+    i {
+      font-size: 22px;
+    }
+    
+    .botao-alterar-foto {
+      border-style: none;
+      width: max-content;
+      background-color: #002542;
+      color: black;
+      font-weight: bold;
+      cursor: pointer;
+      padding: 7px 9px;
+    }
+    
+    .botao-alterar-foto i {
+      color: #fff;
+    }
+    
+    .botao-excluir-foto {
+      border-style: none;
+      width: max-content;
+      background-color: #002542;
+      color: black;
+      font-weight: bold;
+      cursor: pointer;
+      padding: 7px 9px;
+    }
+    
+    .botao-excluir-foto i {
+      color: #fff;
+    }
+    
+    .btn {
+      position: absolute;
+      top: 87%;
+      left: 87%;
+      transform: translate(-50%, -50%);
+    }
+    
+    .image-container {
+      display: inline-block;
+      position: relative;
+    }
+    
+    .modal-content {
+      height: 60vh;
+      position: relative;
+      background-color: #fefefe;
+      margin: 1% auto;
+      padding: 20px;
+      width: 80%;
+      max-width: fit-content;
+      text-align: center;
+      border-radius: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    
+    .crop-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    
+    .crop-canvas {
+      border: 1px solid #d1d5db;
+      border-radius: 12px;
+      width: 100%;
+      height: auto;
+    }
+    
+    .crop-border {
+      position: absolute;
+      border: 2px dashed #9ca3af;
+      pointer-events: none;
+    }
+    
+    .zoom-container {
+      padding-top: 20px;
+      padding-bottom: 20px;
+    }
+    
+    .button-container {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      flex-direction: row;
+      margin-top: 24px;
+      position: fixed;
+      bottom: 0px;
+      background: #fff;
+      width: 90%;
+      padding: 15px;
+    }
+    
+    
+    
+      `],
+  standalone: true,
+  imports: [
+    CommonModule,
+    DialogModule,
+    KvModalModule,
+    FormsModule,
+    ReactiveFormsModule,
+    KvButtonModule,
+    KvLabelModule,
+    ImageCropperComponent
+  ]
+})
+
+class SimpleComponent {
+
+  constructor(private dynamicDialogRef: DynamicDialogRef, private readonly dialogService: DialogService, private dynamicDialogConfig: DynamicDialogConfig) {}
+  imageChangedEvent: Event | null = null;
+  croppedImage: SafeUrl  = '';
+  
+  quality: number = this.dynamicDialogConfig.data.id.quality;
+    
+    fileChangeEvent(event: Event): void {
+      this.imageChangedEvent = event;
+    }
+    imageCropped(event: ImageCroppedEvent) {
+      this.croppedImage = event.base64!;
+    }
+    imageLoaded(image: LoadedImage) {}
+    cropperReady() {}
+    loadImageFailed() {}
+
+
+
+  //#region Variáveis de controle
+    _variaviesDialog = signal<{ imagem: string, width: number, height: number, indCircle: boolean, maintainAspectRatio:boolean }|null>(null)
+    private dialogInstance!:DynamicDialogComponent;
+    aspectRatio = signal<any>(1/1)
+  //#endregion
+
+
+  ngAfterContentInit(): void {
+    this.recuperarVariaviesDialog()
+    this.recuperaInstanciaDialog()
+    this.setAspectRatio()
+  }
+
+
+
+  setAspectRatio(width: number = this._variaviesDialog()?.width!, height: number = this._variaviesDialog()?.height!) {
+    const gcd = (a: number, b: number): number => (b === 0 ? a : gcd(b, a % b));
+    const divisor = gcd(width, height);
+    const aspectWidth = width / divisor;
+    const aspectHeight = height / divisor;
+    this.aspectRatio.set(aspectWidth/aspectHeight)
+
+  }
+
+  //#region Métodos de recuperação de dados
+  recuperaInstanciaDialog(): DynamicDialogComponent {
+    const arr: Map<DynamicDialogRef<any>, ComponentRef<any>> = this.dialogService.dialogComponentRefMap
+    const entries = arr.entries();
+    const firstEntry = entries.next().value;
+    const [firstKey, firstValue] = firstEntry!;
+    const instance = this.dialogService.getInstance(firstKey)
+    this.dialogInstance = instance
+    return instance
+  }
+
+  recuperarVariaviesDialog(): void{
+    this._variaviesDialog.set(this.recuperaInstanciaDialog().data.id)
+  }
+  //#endregion
+
+
+  //#region Métodos de corte e fechamento do modal
+  cropImage() {
+          window.dispatchEvent(new CustomEvent('cropImage', { detail: {
+            result: this.croppedImage,
+            status: true
+          } }));
+          this.closeCropModal();
+  }
+
+  closeCropModal() {
+    this.dialogInstance.close();
+  }
+
+  cancel(){
+    window.dispatchEvent(new CustomEvent('cropImage', { detail:{
+      result: Promise.resolve('cancel'),
+      status: false
+    } }));
+
+    this.closeCropModal()
+  }
+  //#endregion
+
+}