@rdlabo/ionic-angular-photo-editor 21.0.1 → 21.0.3-3

package/src/lib/pages/photo-editor/photo-editor.page.spec.ts

@@ -1,21 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { PhotoEditorPage } from './photo-editor.page';
-import { testConfig } from '../../../../../util/test.config';
-
-describe('PhotoEditorPage', () => {
-  let component: PhotoEditorPage;
-  let fixture: ComponentFixture<PhotoEditorPage>;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: testConfig.providers,
-    });
-    fixture = TestBed.createComponent(PhotoEditorPage);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/pages/photo-editor/photo-editor.page.ts

@@ -1,221 +0,0 @@
-import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  effect,
-  ElementRef,
-  inject,
-  input,
-  OnDestroy,
-  OnInit,
-  signal,
-  viewChild,
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { IonContent, ModalController, RangeCustomEvent, ViewDidEnter, ViewDidLeave } from '@ionic/angular/standalone';
-import ImageEditor from 'tui-image-editor';
-import { filterPreset } from '../../filter-preset';
-import { Subscription } from 'rxjs';
-import { toObservable } from '@angular/core/rxjs-interop';
-import { IDictionaryForEditor, IFilter, IPhotoEditorDismiss, ISize } from '../../types';
-import { ionComponents } from '../../ion-components';
-import { dictionaryForEditor } from '../../dictionaries';
-import { initializeEditorIcons, waitToFindDom } from '../util';
-
-@Component({
-  selector: 'app-editor-image',
-  templateUrl: './photo-editor.page.html',
-  styleUrls: ['../core.scss', './photo-editor.page.scss'],
-  imports: [CommonModule, FormsModule, ...ionComponents],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class PhotoEditorPage implements OnInit, OnDestroy, ViewDidEnter, ViewDidLeave {
-  readonly modalCtrl = inject(ModalController);
-
-  protected readonly dictionary = signal<IDictionaryForEditor>(dictionaryForEditor());
-
-  readonly requireSquare = input<boolean, BooleanInput>(false, {
-    transform: coerceBooleanProperty,
-  });
-  readonly labels = input<Partial<IDictionaryForEditor> | undefined>(undefined);
-  readonly setLabels = effect(() => {
-    if (this.labels()) {
-      this.dictionary.update((value) => ({ ...value, ...this.labels() }));
-    }
-  });
-  readonly value = input.required<string>();
-
-  readonly editorRef = viewChild.required<ElementRef>('imageEditor');
-  readonly ionContent = viewChild.required(IonContent, { read: ElementRef });
-
-  readonly filters = signal<IFilter[]>([]);
-  readonly footerMenu = signal<'filter' | 'menu' | 'crop' | 'brightness'>('menu');
-  readonly currentCrop = signal<'cover' | '16/9' | '1' | 'auto'>('cover');
-  readonly currentRotate = signal<number>(0);
-  readonly photoCrop = signal<ISize>({
-    width: 0,
-    height: 0,
-  });
-  readonly isCropped = signal<boolean>(false);
-  private readonly adoptFilter = signal<IFilter | undefined>(undefined);
-  protected readonly filterPreset = computed(() => filterPreset(this.dictionary()));
-
-  private readonly footerMenu$ = toObservable(this.footerMenu);
-
-  private readonly initSubscription$: Subscription[] = [];
-  private readonly filterImageSize = 240;
-  private editorInstance!: ImageEditor;
-
-  private canvasContainerObserver: MutationObserver = new MutationObserver((mutationsList: MutationRecord[]) => {
-    if (mutationsList.find((mutation) => mutation.type === 'attributes' && mutation.attributeName === 'style')) {
-      // Cover the image editor with the parent element
-      const editorRef = this.editorRef();
-      editorRef.nativeElement.style.minWidth = mutationsList[0].target.parentElement!.style.maxWidth;
-      editorRef.nativeElement.style.minHeight = mutationsList[0].target.parentElement!.style.maxHeight;
-
-      this.photoCrop.set({
-        width: mutationsList[0].target.parentElement!.querySelector('canvas')!.width,
-        height: mutationsList[0].target.parentElement!.querySelector('canvas')!.height,
-      });
-    }
-  });
-
-  constructor() {
-    initializeEditorIcons();
-  }
-
-  ngOnInit() {
-    this.initSubscription$.push(
-      this.footerMenu$.subscribe((value) => {
-        if (value === 'filter') {
-          this.initializeFilterMenu().then();
-        }
-        if (value === 'crop') {
-          this.editorInstance.startDrawingMode('CROPPER');
-          this.changeCrop(this.requireSquare() ? '1' : 'cover');
-        }
-      }),
-    );
-  }
-
-  ngOnDestroy() {
-    this.initSubscription$.forEach((subscription) => subscription.unsubscribe());
-  }
-
-  async ionViewDidEnter() {
-    this.editorInstance = new ImageEditor(this.editorRef().nativeElement, {
-      cssMaxWidth: this.ionContent().nativeElement.clientWidth - 32,
-      cssMaxHeight: this.ionContent().nativeElement.clientHeight - 32,
-    });
-    waitToFindDom(this.editorRef().nativeElement, '.tui-image-editor-canvas-container').then(() => {
-      this.canvasContainerObserver.observe(this.editorRef().nativeElement.querySelector('.tui-image-editor-canvas-container'), {
-        attributes: true,
-        childList: false,
-        subtree: true,
-      });
-    });
-    const blob = await fetch(this.value()).then((res) => res.blob());
-    await this.editorInstance.loadImageFromFile(new File([blob], 'data.png', { type: blob.type }));
-    this.footerMenu.set(this.requireSquare() ? 'crop' : 'menu');
-  }
-
-  ionViewDidLeave() {
-    this.editorInstance.destroy();
-    this.canvasContainerObserver.disconnect();
-  }
-
-  changeCrop(crop: 'cover' | '16/9' | '1' | 'auto') {
-    const rect = crop === 'cover' ? this.photoCrop().width / this.photoCrop().height : crop === '16/9' ? 16 / 9 : 1;
-    this.editorInstance.setCropzoneRect(crop !== 'auto' ? rect : undefined);
-    this.currentCrop.set(crop);
-  }
-
-  async rotate() {
-    this.editorInstance.stopDrawingMode();
-    await this.editorInstance.rotate(90);
-    this.currentRotate.update((value) => value + 90);
-    this.editorInstance.startDrawingMode('CROPPER');
-    requestAnimationFrame(() => this.changeCrop(this.currentCrop()));
-  }
-
-  async closeCrop(type: 'cancel' | 'apply') {
-    if (this.footerMenu() === 'crop') {
-      if (type === 'cancel') {
-        await this.editorInstance.rotate(this.currentRotate() * -1);
-      } else {
-        await this.editorInstance.crop(this.editorInstance.getCropzoneRect());
-        this.isCropped.set(true);
-      }
-      this.currentRotate.set(0);
-      this.currentCrop.set('cover');
-      this.editorInstance.stopDrawingMode();
-    } else if (this.footerMenu() === 'brightness') {
-      if (type === 'cancel' && this.editorInstance.hasFilter('brightness')) {
-        await this.editorInstance.removeFilter('brightness');
-      }
-    }
-    this.footerMenu.set('menu');
-  }
-
-  async changeRange(event: RangeCustomEvent) {
-    if (this.editorInstance.hasFilter('brightness')) {
-      await this.editorInstance.removeFilter('brightness');
-    }
-    await this.editorInstance.applyFilter('brightness', {
-      brightness: Number(event.detail.value) / 255,
-    });
-  }
-
-  imageSave() {
-    const value = this.editorInstance.toDataURL();
-    this.modalCtrl.dismiss({ value } as IPhotoEditorDismiss);
-  }
-
-  private async initializeFilterMenu() {
-    const filters: IFilter[] = [];
-
-    const defaultInstance = new ImageEditor(document.createElement('div'), {
-      cssMaxWidth: this.filterImageSize,
-      cssMaxHeight: (this.photoCrop().height * this.filterImageSize) / this.photoCrop().width,
-    });
-    const blob = await fetch(
-      this.editorInstance.toDataURL({
-        multiplier: this.filterImageSize / this.photoCrop().width,
-      }),
-    ).then((res) => res.blob());
-    await defaultInstance.loadImageFromFile(new File([blob], 'defaultInstance.png', { type: blob.type }));
-
-    for (const filter of this.filterPreset()) {
-      if (filter.type !== 'Default') {
-        await defaultInstance.applyFilter(filter.type, filter.option);
-      }
-      filters.push({
-        name: filter.name,
-        type: filter.type,
-        option: filter.option,
-        data: defaultInstance.toDataURL(),
-        width: this.filterImageSize,
-        height: (this.photoCrop().height * this.filterImageSize) / this.photoCrop().width,
-      });
-      if (filter.type !== 'Default') {
-        await defaultInstance.removeFilter(filter.type);
-      }
-    }
-    this.filters.set(filters);
-    defaultInstance.destroy();
-  }
-
-  async filterImage(filter: IFilter) {
-    if (this.adoptFilter()) {
-      await this.editorInstance.removeFilter(this.adoptFilter()!.type);
-    }
-    if (filter.type === 'Default') {
-      this.adoptFilter.set(undefined);
-      return;
-    }
-    await this.editorInstance.applyFilter(filter.type, filter.option);
-    this.adoptFilter.set(filter);
-  }
-}

package/src/lib/pages/photo-viewer/photo-viewer.page.html

@@ -1,31 +0,0 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-buttons slot="start">
-      <ion-button (click)="modalCtrl.dismiss()" class="viewer-close-button">
-        <ion-icon name="close-outline" slot="icon-only"></ion-icon>
-      </ion-button>
-    </ion-buttons>
-    @if (enableDelete()) {
-      <ion-buttons slot="end">
-        <ion-button color="photo-editor-danger" fill="solid" type="submit" (click)="remove()">{{ dictionary().delete }}</ion-button>
-      </ion-buttons>
-    }
-  </ion-toolbar>
-</ion-header>
-
-<ion-content [fullscreen]="true">
-  <swiper-container #swiper>
-    @for (url of imageUrls(); track url) {
-      <swiper-slide>
-        <div class="swiper-zoom-container"><img [src]="url" alt="" [class.circle]="isCircle()" /></div>
-      </swiper-slide>
-    }
-  </swiper-container>
-</ion-content>
-
-@if (enableFooterSafeArea()) {
-  <!-- use for safe area-->
-  <ion-footer>
-    <ion-toolbar style="--border-width: 0; --min-height: 0"></ion-toolbar>
-  </ion-footer>
-}

package/src/lib/pages/photo-viewer/photo-viewer.page.scss

@@ -1,29 +0,0 @@
-ion-button.viewer-close-button {
-  --color: var(--editor-color) !important;
-}
-
-img.circle {
-  border-radius: 50%;
-  display: block;
-  padding: 16px;
-}
-
-swiper-container {
-  height: 100%;
-  max-height: 100%;
-}
-
-swiper-slide {
-  height: 100%;
-  max-height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-swiper-slide img {
-  display: block;
-  object-fit: contain;
-  max-width: 100%;
-  max-height: 100%;
-}

package/src/lib/pages/photo-viewer/photo-viewer.page.spec.ts

@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ComponentRef } from '@angular/core';
-import { PhotoViewerPage } from './photo-viewer.page';
-import { testConfig } from '../../../../../util/test.config';
-
-describe('PhotoViewerPage', () => {
-  let component: PhotoViewerPage;
-  let fixture: ComponentFixture<PhotoViewerPage>;
-  let componentRef: ComponentRef<PhotoViewerPage>;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: testConfig.providers,
-    });
-    fixture = TestBed.createComponent(PhotoViewerPage);
-    component = fixture.componentInstance;
-    componentRef = fixture.componentRef;
-    componentRef.setInput('imageUrls', []);
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/pages/photo-viewer/photo-viewer.page.ts

@@ -1,134 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  CUSTOM_ELEMENTS_SCHEMA,
-  effect,
-  ElementRef,
-  inject,
-  input,
-  OnDestroy,
-  OnInit,
-  signal,
-  viewChild,
-} from '@angular/core';
-import { IonicSlides, ModalController } from '@ionic/angular/standalone';
-import { Navigation, Zoom } from 'swiper/modules';
-import { fromEvent, Subscription, throttleTime, withLatestFrom, zipWith } from 'rxjs';
-import { SwiperContainer } from 'swiper/element';
-import { ionComponents } from '../../ion-components';
-import { IDictionaryForViewer, IPhotoViewerDismiss } from '../../types';
-import { register } from 'swiper/element/bundle';
-import { dictionaryForViewer } from '../../dictionaries';
-import { BooleanInput, coerceBooleanProperty, coerceNumberProperty, NumberInput } from '@angular/cdk/coercion';
-import { initializeViewerIcons, waitToFindDom } from '../util';
-
-@Component({
-  selector: 'app-photo-image',
-  templateUrl: './photo-viewer.page.html',
-  styleUrls: ['../core.scss', './photo-viewer.page.scss'],
-  imports: [...ionComponents],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class PhotoViewerPage implements OnInit, OnDestroy {
-  readonly imageUrls = input.required<string[]>();
-  readonly index = input<number, NumberInput>(0, {
-    transform: coerceNumberProperty,
-  });
-  readonly isCircle = input<boolean, BooleanInput>(false, {
-    transform: coerceBooleanProperty,
-  });
-  readonly enableDelete = input<boolean, BooleanInput>(false, {
-    transform: coerceBooleanProperty,
-  });
-  readonly enableFooterSafeArea = input<boolean, BooleanInput>(false, {
-    transform: coerceBooleanProperty,
-  });
-  readonly labels = input<Partial<IDictionaryForViewer>>();
-  readonly setLabels = effect(() => {
-    if (this.labels()) {
-      this.dictionary.update((value) => ({ ...value, ...this.labels() }));
-    }
-  });
-
-  readonly swiper = viewChild.required<ElementRef<SwiperContainer>>('swiper');
-  protected readonly dictionary = signal<IDictionaryForViewer>(dictionaryForViewer());
-
-  readonly watchSwipe$ = new Subscription();
-  readonly modalCtrl = inject(ModalController);
-  private readonly el = inject(ElementRef);
-
-  constructor() {
-    register();
-    initializeViewerIcons();
-  }
-
-  async ngOnInit() {
-    waitToFindDom(this.el.nativeElement, 'swiper-container').then(() => {
-      const index = this.index();
-      const swiper = this.swiper();
-      Object.assign(swiper.nativeElement, {
-        modules: [Navigation, Zoom, IonicSlides],
-        initialSlide: index,
-        slidesPerView: 1,
-        pagination: {
-          enabled: true,
-          clickable: true,
-        },
-        zoom: true,
-      });
-      swiper.nativeElement.initialize();
-      swiper.nativeElement.swiper.zoom.enable();
-
-      swiper.nativeElement.swiper.activeIndex = index;
-      swiper.nativeElement.swiper.update();
-    });
-
-    this.watchSwipe$.add(
-      fromEvent<TouchEvent>(this.el.nativeElement, 'touchstart')
-        .pipe(
-          zipWith(
-            fromEvent<TouchEvent>(this.el.nativeElement, 'touchend').pipe(
-              withLatestFrom(fromEvent<TouchEvent>(this.el.nativeElement, 'touchmove')),
-            ),
-          ),
-          throttleTime(1),
-        )
-        .subscribe(([touchstart, [_, touchmove]]) => {
-          const touchstartClientX = touchstart.touches ? touchstart.touches[0].clientX : (touchstart as any).detail[1].clientX;
-          const touchmoveClientX = touchmove.touches ? touchmove.touches[0].clientX : (touchmove as any).detail[1].clientX;
-
-          const touchstartClientY = touchstart.touches ? touchstart.touches[0].clientY : (touchstart as any).detail[1].clientY;
-          const touchmoveClientY = touchmove.touches ? touchmove.touches[0].clientY : (touchmove as any).detail[1].clientY;
-
-          const xDiff = touchstartClientX - touchmoveClientX;
-          const yDiff = touchstartClientY - touchmoveClientY;
-
-          const slides = (this.swiper() as any).nativeElement.querySelectorAll('swiper-slide') as HTMLElement[];
-          const isZoomed = Array.from(slides).find((slide: HTMLElement) => {
-            return ['swiper-slide-zoomed', 'swiper-slide-active'].every((c) => slide.classList.contains(c));
-          });
-
-          const threshold = touchmove.touches ? -50 : -5;
-
-          if (!isZoomed && Math.abs(xDiff) < Math.abs(threshold) && yDiff < threshold && touchstart.timeStamp <= touchmove.timeStamp) {
-            this.watchSwipe$.unsubscribe();
-            this.modalCtrl.dismiss();
-          }
-        }),
-    );
-  }
-
-  ngOnDestroy() {
-    this.watchSwipe$.unsubscribe();
-  }
-
-  remove() {
-    this.modalCtrl.dismiss({
-      delete: {
-        index: this.swiper().nativeElement.swiper.activeIndex,
-        value: this.imageUrls()[this.swiper().nativeElement.swiper.activeIndex],
-      },
-    } as IPhotoViewerDismiss);
-  }
-}

package/src/lib/pages/util.ts

@@ -1,48 +0,0 @@
-import { addIcons } from 'ionicons';
-import {
-  checkmarkOutline,
-  closeOutline,
-  colorFilterOutline,
-  cropOutline,
-  expandOutline,
-  refreshOutline,
-  removeOutline,
-  send,
-  squareOutline,
-  sunnyOutline,
-  tabletLandscapeOutline,
-} from 'ionicons/icons';
-
-export const initializeViewerIcons = (): void => {
-  addIcons({
-    closeOutline,
-    removeOutline,
-  });
-};
-
-export const initializeEditorIcons = (): void => {
-  addIcons({
-    closeOutline,
-    send,
-    cropOutline,
-    colorFilterOutline,
-    sunnyOutline,
-    expandOutline,
-    tabletLandscapeOutline,
-    squareOutline,
-    refreshOutline,
-    checkmarkOutline,
-  });
-};
-
-export const waitToFindDom = (nativeElement: HTMLElement, selector: string): Promise<void> => {
-  return new Promise<void>((resolve) => {
-    const interval = setInterval(() => {
-      const find = nativeElement.querySelector(selector);
-      if (find) {
-        clearInterval(interval);
-        resolve();
-      }
-    });
-  });
-};

package/src/lib/photoEditorErrors.ts

@@ -1,5 +0,0 @@
-export enum PhotoEditorErrors {
-  initialize = 'input dom is not found',
-  cancel = 'user canceled',
-  type = 'upload file is not image.',
-}

package/src/lib/services/photo-file.service.spec.ts

@@ -1,19 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { PhotoFileService } from './photo-file.service';
-import { testConfig } from '../../../../util/test.config';
-
-describe('PhotoService', () => {
-  let service: PhotoFileService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: [...testConfig.providers],
-    });
-    service = TestBed.inject(PhotoFileService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});