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

package/eslint.config.js

@@ -0,0 +1,7 @@
+// @ts-check
+const tseslint = require("typescript-eslint");
+const rootConfig = require("../../eslint.config.js");
+
+module.exports = tseslint.config(
+  ...rootConfig,
+);

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/photo-editor",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@rdlabo/ionic-angular-photo-editor",
-  "version": "20.0.3",
+  "version": "21.0.1",
   "peerDependencies": {
-    "@angular/cdk": "^20.0.0",
-    "@angular/common": "^20.0.0",
-    "@angular/core": "^20.0.0",
+    "@angular/cdk": "^21.0.0",
+    "@angular/common": "^21.0.0",
+    "@angular/core": "^21.0.0",
     "@capacitor/camera": ">=6.0.0 <8.0.0",
     "@capacitor/core": ">=6.0.0 <8.0.0",
     "@ionic/angular": "^8.0.0",
@@ -14,16 +14,5 @@
   "dependencies": {
     "tslib": "^2.3.0"
   },
-  "sideEffects": false,
-  "module": "fesm2022/rdlabo-ionic-angular-photo-editor.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "default": "./fesm2022/rdlabo-ionic-angular-photo-editor.mjs"
-    }
-  }
-}
+  "sideEffects": false
+}

package/src/lib/dictionaries.ts

@@ -0,0 +1,31 @@
+import { IDictionaryForEditor, IDictionaryForService, IDictionaryForViewer } from './types';
+
+export const dictionaryForEditor = (): IDictionaryForEditor => ({
+  // UI labels
+  save: '保存',
+  crop: '切り抜き・回転',
+  filter: 'フィルター',
+  brightness: '明るさ',
+
+  // Filter labels
+  original: 'オリジナル',
+  invert: '反転',
+  sepia: 'セピア',
+  vintage: 'ヴィンテージ',
+  blur: 'ぼかし',
+  grayscale: 'グレースケール',
+  sharpen: '輪郭',
+  emboss: 'エンボス',
+});
+
+export const dictionaryForViewer = (): IDictionaryForViewer => ({
+  // UI labels
+  delete: '削除',
+});
+
+export const dictionaryForService = (): IDictionaryForService => ({
+  // UI labels
+  camera: 'カメラ撮影',
+  album: 'アルバムから選択',
+  cancel: 'キャンセル',
+});

package/src/lib/filter-preset.ts

@@ -0,0 +1,44 @@
+import { IDictionaryForEditor, IFilterPreset } from './types';
+
+export const filterPreset = (dictionary: IDictionaryForEditor): IFilterPreset[] => [
+  {
+    name: dictionary.original,
+    type: 'Default',
+    option: null,
+  },
+  // {
+  //   name: dictionary.invert,
+  //   type: 'Invert',
+  //   option: null,
+  // },
+  {
+    name: dictionary.sepia,
+    type: 'Sepia',
+    option: null,
+  },
+  {
+    name: dictionary.vintage,
+    type: 'vintage',
+    option: null,
+  },
+  {
+    name: 'ぼかし',
+    type: 'Blur',
+    option: { blur: 0.1 },
+  },
+  {
+    name: dictionary.grayscale,
+    type: 'Grayscale',
+    option: null,
+  },
+  // {
+  //   name: dictionary.sharpen,
+  //   type: 'Sharpen',
+  //   option: null,
+  // },
+  // {
+  //   name: dictionary.emboss,
+  //   type: 'Emboss',
+  //   option: null,
+  // },
+];

package/src/lib/ion-components.ts

@@ -0,0 +1,3 @@
+import { IonButton, IonButtons, IonContent, IonFooter, IonHeader, IonIcon, IonRange, IonText, IonToolbar } from '@ionic/angular/standalone';
+
+export const ionComponents = [IonHeader, IonToolbar, IonButtons, IonButton, IonIcon, IonContent, IonFooter, IonText, IonRange];

package/src/lib/pages/core.scss

@@ -0,0 +1,63 @@
+:host {
+  --editor-background: var(--ion-photo-editor-background, --ion-color-step-100, #2a2a2a);
+  --editor-background-tint: var(--ion-photo-editor-background-tint, --ion-color-step-200, #414141);
+
+  --editor-color: var(--ion-photo-editor-color, --ion-color-step-950, #f0f0f0);
+  --editor-color-tint: var(--ion-photo-editor-color-tint, --ion-color-step-850, #dbdbdb);
+
+  --ion-color-photo-editor-primary: var(--ion-photo-editor-primary, --ion-color-primary, #4d8dff);
+  //--ion-color-photo-editor-primary-rgb: var(--ion-photo-editor-primary-rgb, --ion-color-primary-rgb, '77, 141, 255');
+  //--ion-color-photo-editor-primary-contrast: var(--ion-photo-editor-primary-contrast, --ion-color-primary-contrast, #000);
+  //--ion-color-photo-editor-primary-contrast-rgb: var(--ion-photo-editor-primary-contrast-rgb, --ion-color-primary-rgb, '0,0,0');
+  //--ion-color-photo-editor-primary-shade: var(--ion-photo-editor-primary-shade　--ion-color-primary-shade, #447ce0);
+  //--ion-color-photo-editor-primary-tint: var(--ion-photo-editor-primary-tint, --ion-color-primary-tint, #5f98ff);
+
+  --ion-color-photo-editor-danger: var(--ion-photo-editor-danger, #f24c58);
+  //--ion-color-photo-editor-danger-rgb: var(--ion-photo-editor-danger, '242,76,88');
+  //--ion-color-photo-editor-danger-contrast: var(--ion-photo-editor-danger, #000000);
+  //--ion-color-photo-editor-danger-contrast-rgb: var(--ion-photo-editor-danger, '0,0,0');
+  //--ion-color-photo-editor-danger-shade: var(--ion-photo-editor-danger, #d5434d);
+  //--ion-color-photo-editor-danger-tint: var(--ion-photo-editor-danger, #f35e69);
+
+  --ion-color-photo-editor-success: var(--ion-photo-editor-success, #2dd55b);
+  //--ion-color-photo-editor-success-rgb: var(--ion-photo-editor-success, '45,213,91');
+  //--ion-color-photo-editor-success-contrast: var(--ion-photo-editor-success, #000000);
+  //--ion-color-photo-editor-success-contrast-rgb: var(--ion-photo-editor-success, '0,0,0');
+  //--ion-color-photo-editor-success-shade: var(--ion-photo-editor-success, #28bb50);
+  //--ion-color-photo-editor-success-tint: var(--ion-photo-editor-success, #42d96b);
+}
+
+.ion-color-photo-editor-primary {
+  --ion-color-base: var(--ion-color-photo-editor-primary);
+  //--ion-color-base-rgb: var(--ion-color-photo-editor-primary-rgb);
+  //--ion-color-contrast: var(--ion-color-photo-editor-primary-contrast);
+  //--ion-color-contrast-rgb: var(--ion-color-photo-editor-primary-contrast-rgb);
+  //--ion-color-shade: var(--ion-color-photo-editor-primary-shade);
+  //--ion-color-tint: var(--ion-color-photo-editor-primary-tint);
+}
+
+.ion-color-photo-editor-danger {
+  --ion-color-base: var(--ion-color-photo-editor-danger);
+  //--ion-color-base-rgb: var(--ion-color-photo-editor-danger-rgb);
+  //--ion-color-contrast: var(--ion-color-photo-editor-danger-contrast);
+  //--ion-color-contrast-rgb: var(--ion-color-photo-editor-danger-contrast-rgb);
+  //--ion-color-shade: var(--ion-color-photo-editor-danger-shade);
+  //--ion-color-tint: var(--ion-color-photo-editor-danger-tint);
+}
+
+.ion-color-photo-editor-success {
+  --ion-color-base: var(--ion-color-photo-editor-success);
+  //--ion-color-base-rgb: var(--ion-color-photo-editor-success-rgb);
+  //--ion-color-contrast: var(--ion-color-photo-editor-success-contrast);
+  //--ion-color-contrast-rgb: var(--ion-color-photo-editor-success-contrast-rgb);
+  //--ion-color-shade: var(--ion-color-photo-editor-success-shade);
+  //--ion-color-tint: var(--ion-color-photo-editor-success-tint);
+}
+
+ion-content,
+ion-toolbar,
+ion-header,
+ion-footer {
+  background: var(--editor-background) !important;
+  --background: var(--editor-background) !important;
+}

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

@@ -0,0 +1,95 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start"
+      ><ion-button (click)="modalCtrl.dismiss()"><ion-icon name="close-outline" slot="icon-only"></ion-icon></ion-button
+    ></ion-buttons>
+    <ion-buttons slot="end">
+      <ion-button color="photo-editor-primary" fill="solid" type="submit" [disabled]="!['menu', 'filter'].includes(footerMenu())" (click)="imageSave()">
+        {{ dictionary().save }}
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding" [scrollY]="false">
+  <div #imageEditor></div>
+</ion-content>
+<ion-footer>
+  <ion-toolbar>
+    @if (this.footerMenu() === 'menu') {
+      <aside class="ion-justify-content-center">
+        <button (click)="footerMenu.set('crop')">
+          <ion-text>{{ dictionary().crop }}</ion-text>
+          <ion-icon name="crop-outline" size="large"></ion-icon>
+        </button>
+        <button (click)="footerMenu.set('filter')">
+          <ion-text>{{ dictionary().filter }}</ion-text>
+          <ion-icon name="color-filter-outline" size="large"></ion-icon>
+        </button>
+        <button (click)="footerMenu.set('brightness')">
+          <ion-text>{{ dictionary().brightness }}</ion-text>
+          <ion-icon name="sunny-outline" size="large"></ion-icon>
+        </button>
+      </aside>
+    }
+
+    @if (this.footerMenu() === 'filter') {
+      <aside>
+        @for (item of filters(); track item) {
+          <button (click)="filterImage(item)">
+            <ion-text>{{ item.name }}</ion-text>
+            <span class="image-filter-box" [style.background-image]="'url(' + item.data + ')'"></span>
+          </button>
+        }
+      </aside>
+    }
+
+    @if (this.footerMenu() === 'crop' && !requireSquare()) {
+      <ion-buttons class="ion-justify-content-center submenu-icon-buttons">
+        <ion-button (click)="changeCrop('cover')" [color]="currentCrop() === 'cover' ? 'success' : undefined">
+          <ion-icon name="expand-outline" slot="icon-only"></ion-icon>
+        </ion-button>
+        <ion-button (click)="changeCrop('16/9')" [color]="currentCrop() === '16/9' ? 'success' : undefined">
+          <ion-icon name="tablet-landscape-outline" slot="icon-only" style="transform: scale(1, 0.8)"></ion-icon>
+        </ion-button>
+        <ion-button (click)="changeCrop('1')" [color]="currentCrop() === '1' ? 'success' : undefined">
+          <ion-icon name="square-outline" slot="icon-only"></ion-icon>
+        </ion-button>
+        <ion-button (click)="changeCrop('auto')" [color]="currentCrop() === 'auto' ? 'success' : undefined">
+          <ion-icon name="crop-outline" slot="icon-only"></ion-icon>
+        </ion-button>
+        <ion-button (click)="rotate()"><ion-icon name="refresh-outline" slot="icon-only"></ion-icon></ion-button>
+      </ion-buttons>
+    }
+
+    @if (['brightness'].includes(this.footerMenu())) {
+      <div class="ion-padding ion-margin">
+        <ion-range [pin]="true" [min]="-100" [max]="100" (ionChange)="changeRange($any($event))"></ion-range>
+      </div>
+    }
+  </ion-toolbar>
+  @if (this.footerMenu() !== 'menu') {
+    <ion-toolbar mode="md">
+      @if (this.footerMenu() === 'filter') {
+        <ion-buttons class="ion-justify-content-center" style="margin: 0 8px">
+          <ion-button fill="outline" shape="round" (click)="this.footerMenu.set('menu')">戻る</ion-button>
+        </ion-buttons>
+      } @else {
+        <ion-buttons slot="start" style="min-width: 60px">
+          @if (!requireSquare() || isCropped()) {
+            <ion-button (click)="closeCrop('cancel')"><ion-icon name="close-outline" slot="icon-only"></ion-icon></ion-button>
+          }</ion-buttons
+        ><ion-text class="footer-title">
+          @if (footerMenu() === 'crop') {
+            {{ dictionary().crop }}
+          } @else if (footerMenu() === 'brightness') {
+            {{ dictionary().brightness }}
+          }</ion-text
+        ><ion-buttons slot="end"
+          ><ion-button (click)="closeCrop('apply')"
+            ><ion-icon name="checkmark-outline" color="photo-editor-success" slot="icon-only"></ion-icon></ion-button
+        ></ion-buttons>
+      }
+    </ion-toolbar>
+  }
+</ion-footer>

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

@@ -0,0 +1,95 @@
+ion-content {
+  --background: var(--editor-background);
+  & > div {
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+    display: grid;
+    align-items: center;
+    justify-items: center;
+  }
+}
+
+aside {
+  display: flex;
+  overflow-x: scroll;
+  margin-top: 16px;
+  min-height: 120px;
+
+  ion-icon {
+    color: var(--editor-color);
+    border: 1px solid var(--editor-background-tint);
+    border-radius: 50%;
+    padding: 16px;
+  }
+
+  button {
+    width: 120px;
+    display: block;
+    flex: 1;
+    background: transparent;
+    margin: 0 8px 16px;
+
+    ion-text {
+      display: block;
+      color: var(--editor-color);
+      margin-bottom: 8px;
+      font-size: 0.8rem;
+    }
+    span.image-filter-box {
+      width: 96px;
+      height: 64px;
+      border-radius: 8px;
+      overflow: hidden;
+      display: block;
+      background-position: center, center;
+      background-size: cover;
+    }
+  }
+}
+
+ion-header,
+ion-footer {
+  ion-button {
+    --color: var(--editor-color) !important;
+  }
+}
+
+ion-footer {
+  ion-toolbar {
+    ion-text.footer-title {
+      color: var(--editor-color) !important;
+      display: block;
+      text-align: center;
+    }
+    ion-range {
+      --bar-background: var(--editor-color);
+      --bar-background-active: var(--editor-color);
+      --bar-height: 2px;
+      --bar-border-radius: 8px;
+      --knob-background: var(--editor-color);
+      --knob-size: 20px;
+      --pin-background: none;
+      --pin-color: var(--editor-color);
+    }
+    ion-buttons {
+      &[slot='start'],
+      &[slot='end'] {
+        ion-button {
+          --background: var(--editor-background-tint) !important;
+          --border-radius: 50%;
+          margin: 0 8px;
+          min-width: 32px;
+          min-height: 32px;
+        }
+      }
+
+      &.submenu-icon-buttons {
+        ion-button {
+          margin: 16px;
+        }
+      }
+    }
+  }
+}

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

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

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

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