@rdlabo/ionic-angular-photo-editor 21.0.0 → 21.0.1

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

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

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

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

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

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

@@ -0,0 +1,19 @@
+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();
+  });
+});

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

@@ -0,0 +1,161 @@
+import { inject, Injectable, signal } from '@angular/core';
+import { ActionSheetController, Platform } from '@ionic/angular/standalone';
+import { Camera, CameraResultType, CameraSource, ImageOptions } from '@capacitor/camera';
+import ImageEditor from 'tui-image-editor';
+import { PhotoEditorErrors } from '../photoEditorErrors';
+import { dictionaryForService } from '../dictionaries';
+import { IDictionaryForService } from '../types';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class PhotoFileService {
+  private readonly $photoMaxSize = signal<number>(1000);
+  private readonly actionSheetCtrl = inject(ActionSheetController);
+  private readonly platform = inject(Platform);
+  private readonly dictionary = signal<IDictionaryForService>(dictionaryForService());
+
+  set photoMaxSize(value: number) {
+    this.$photoMaxSize.set(value);
+  }
+
+  set labels(d: IDictionaryForService) {
+    this.dictionary.update((value) => ({ ...value, ...d }));
+  }
+
+  async loadPhoto(limit: number): Promise<string[]> {
+    /**
+     * Using Input for browser
+     */
+    if (!this.platform.is('capacitor')) {
+      return this.getPictureFromBrowser();
+    }
+
+    const actionSheet = await this.actionSheetCtrl.create({
+      buttons: [
+        {
+          text: this.dictionary().camera,
+          handler: () => {
+            actionSheet.dismiss('camera');
+          },
+        },
+        {
+          text: this.dictionary().album,
+          handler: () => {
+            actionSheet.dismiss('album');
+          },
+        },
+        {
+          text: this.dictionary().cancel,
+          role: 'cancel',
+        },
+      ],
+    });
+    await actionSheet.present();
+    const { data } = await actionSheet.onDidDismiss<'camera' | 'album'>();
+    if (!data) {
+      return Promise.reject(PhotoEditorErrors.cancel);
+    }
+
+    if (data === 'camera') {
+      const defaultCamera: ImageOptions = {
+        quality: 100,
+        width: this.$photoMaxSize(),
+        allowEditing: false,
+        resultType: CameraResultType.DataUrl,
+        source: CameraSource.Camera,
+        presentationStyle: 'popover',
+      };
+      const image = await Camera.getPhoto(defaultCamera).catch(() => undefined);
+      if (!image?.dataUrl) {
+        return Promise.reject(PhotoEditorErrors.cancel);
+      }
+
+      if (!image.dataUrl.includes('capacitor://localhost')) {
+        return [image.dataUrl];
+      }
+      return Promise.all([image.dataUrl].map(async (image) => await this.loadPhotoFromFilePath(image)));
+    }
+
+    if (data === 'album') {
+      const images = await Camera.pickImages({
+        quality: 100,
+        width: this.$photoMaxSize(),
+        limit,
+        presentationStyle: 'popover',
+      }).catch(() => undefined);
+
+      if (!images) {
+        return Promise.reject(PhotoEditorErrors.cancel);
+      }
+
+      return Promise.all(images.photos.map(async (image) => await this.loadPhotoFromFilePath(image.webPath)));
+    }
+
+    // Not run on this line. This is for lint
+    return [];
+  }
+
+  private getPictureFromBrowser(): Promise<string[]> {
+    const inputFile: HTMLInputElement | null = document.querySelector('input#browserPhotoUploader');
+
+    if (!inputFile) {
+      return Promise.reject(PhotoEditorErrors.initialize);
+    }
+
+    return new Promise((resolve, reject) => {
+      const cancelMethod = () => {
+        inputFile!.removeEventListener('cancel', cancelMethod, false);
+        inputFile!.removeEventListener('change', changeMethod, false);
+
+        reject(PhotoEditorErrors.cancel);
+      };
+      const changeMethod = (e: Event) => {
+        inputFile!.removeEventListener('cancel', cancelMethod, false);
+        inputFile!.removeEventListener('change', changeMethod, false);
+
+        if (!(e.target as HTMLInputElement).files || !(e.target as HTMLInputElement).files![0]) {
+          reject(PhotoEditorErrors.cancel);
+        }
+        const file = (e.target as HTMLInputElement).files![0];
+        const reader = new FileReader();
+
+        reader.onload = (() => {
+          if (file.type.indexOf('image') < 0) {
+            reject(PhotoEditorErrors.type);
+          }
+
+          return async (event) => {
+            inputFile.value = '';
+            const result = event.target!.result as string;
+            const data = await this.loadPhotoFromFilePath(result);
+            resolve([data]);
+          };
+        })();
+
+        reader.readAsDataURL(file);
+      };
+
+      inputFile!.addEventListener('cancel', cancelMethod, false);
+      inputFile!.addEventListener('change', changeMethod, false);
+      inputFile.click();
+    });
+  }
+
+  private async loadPhotoFromFilePath(filePath: string): Promise<string> {
+    const defaultInstance = new ImageEditor(document.createElement('div'), {
+      cssMaxWidth: this.$photoMaxSize(),
+      cssMaxHeight: this.$photoMaxSize(),
+    });
+    const blob = await fetch(filePath).then((res) => res.blob());
+    const loaded = await defaultInstance.loadImageFromFile(new File([blob], 'data.png', { type: blob.type }));
+
+    const maxSize = Math.max(loaded.newWidth, loaded.newHeight);
+    const dataUrl = defaultInstance.toDataURL({
+      multiplier: this.$photoMaxSize() / maxSize,
+    });
+    defaultInstance.destroy();
+
+    return dataUrl;
+  }
+}

package/src/lib/types.ts

@@ -0,0 +1,55 @@
+export interface IFilter {
+  name: string;
+  type: string;
+  option: any;
+  data: string;
+  width: number;
+  height: number;
+}
+
+export interface ISize {
+  width: number;
+  height: number;
+}
+
+export interface IDictionaryForEditor {
+  save: string;
+  crop: string;
+  filter: string;
+  brightness: string;
+  original: string;
+  invert: string;
+  sepia: string;
+  vintage: string;
+  blur: string;
+  grayscale: string;
+  sharpen: string;
+  emboss: string;
+}
+
+export interface IFilterPreset {
+  name: string;
+  type: string;
+  option: any;
+}
+
+export interface IPhotoEditorDismiss {
+  value: string;
+}
+
+export interface IPhotoViewerDismiss {
+  delete: {
+    index: number;
+    value: string;
+  };
+}
+
+export interface IDictionaryForViewer {
+  delete: string;
+}
+
+export interface IDictionaryForService {
+  camera: string;
+  album: string;
+  cancel: string;
+}

package/src/public-api.ts

@@ -0,0 +1,8 @@
+/*
+ * Public API Surface of photo-editor
+ */
+
+export * from './lib/pages/photo-editor/photo-editor.page';
+export * from './lib/pages/photo-viewer/photo-viewer.page';
+export * from './lib/services/photo-file.service';
+export * from './lib/types';

package/tsconfig.lib.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "**/*.spec.ts"
+  ]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/tsconfig.spec.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}