keevo-components 2.0.185 → 2.0.187

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

@@ -1,290 +0,0 @@
-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
-
-}