canvico-editor 1.0.2 → 2.0.0

package/LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2025 [Your Name or GitHub username]
+Copyright (c) 2025 Krzysztof Umiński
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -6,13 +6,21 @@ A simple and extensible image editor built with TypeScript and the Canvas API. D
 
 ## Features
 
--   **Image Loading**: Load images from a local file input.
--   **Resizing**: Dynamically resize the image with an option to keep the aspect ratio.
--   **Cropping**: User-friendly crop tool with a movable and resizable selection box.
--   **Saving**: Download the edited image as a PNG file.
--   **Modularity**: Easily extend the editor with new modules (e.g., filters, text, etc.).
--   **Robust Error Handling**: Centralized error management for consistent and descriptive messages.
--   **Strong Typing**: Fully typed API for improved Developer Experience.
+- **Canvas Editing Core**: Load, resize, crop, rotate, flip, and export images in-browser.
+- **Cross-Input Crop UX**: Crop interactions support mouse and touch input.
+- **Modular Design**: Resize, Crop, and Transform are isolated modules for easier maintenance and extension.
+- **State-Driven Architecture**: Central `CanvasState` store with reducer-based updates for predictable editor behavior.
+- **Type-Safe API**: Fully typed configuration and public interfaces for better DX in TypeScript projects.
+- **Input Validation**: Built-in file type and file size checks before processing.
+- **Structured Error Reporting**: Optional `onError` callback with contextual metadata (`source`, `operation`, `timestamp`).
+- **Flexible Logging**: Toggle internal console logging with `logErrorsToConsole`.
+- **Lifecycle-Safe Cleanup**: `destroy()` removes internal listeners and avoids leaking host app handlers.
+
+Behavior note:
+Resize values and aspect-ratio lock work in output image space (`currentImage` dimensions), while the on-screen canvas is a fit-to-container preview.
+
+Supported input formats:
+`image/jpeg`, `image/png`, `image/webp`.
 
 ## Installation
 
@@ -28,11 +36,18 @@ npm install canvico-editor
 import { CanvicoEditor } from "canvico-editor";
 
 const canvico = new CanvicoEditor({
-    containerSelector: `.canvico-containerr`,
+    containerSelector: `.canvico-container`,
     imageFileInputSelector: ".input-upload-file",
     resetEditsButtonSelector: "#resetEdit",
     clearCanvasButtonSelector: "#cleanAll",
     saveButtonSelector: "#saveBtn",
+    maxFileSizeMB: 5,
+    strictModuleSelectors: true, // optional: fail fast on invalid module selectors
+    logErrorsToConsole: true,
+    onError: ({ error, source, operation, timestamp }) => {
+        // Integrate with your logger/monitoring tool here
+        console.error("[CanvicoEditor]", timestamp.toISOString(), source, operation, error);
+    },
     modules: {
         resize: {
             widthInputSelector: "#widthInput",
@@ -45,8 +60,16 @@ const canvico = new CanvicoEditor({
             frameColor: "#d84cb9",
             outsideOverlayColor: "rgba(0,0,0,0.2)",
         },
+        transform: {
+            rotateInputSelector: "#rotateDeg",
+            flipHorizontalButtonSelector: "#flipH",
+            flipVerticalButtonSelector: "#flipV",
+        },
     },
 });
+
+// In SPA/framework apps, clean up on unmount:
+// canvico.destroy();
 ```
 
 ## Documentation

package/dist/CanvicoEditor.d.ts

@@ -1,21 +1,26 @@
 import { CanvicoEditorConfig } from './types.js';
 export declare class CanvicoEditor {
     /** Manages all DOM element interactions and selections. */
-    private dom;
-    private canvas;
-    private ctx;
-    /** The original, unmodified image loaded by the user. */
-    private initialImage?;
-    /** The image currently being displayed and edited, including all modifications. */
-    private currentImage?;
+    private readonly dom;
+    private readonly canvas;
+    private readonly ctx;
+    /** Central shared document state. */
+    private readonly state;
     /** A map holding all registered and initialized modules. */
-    private modules;
+    private readonly modules;
+    private resizeModule?;
+    private cropModule?;
+    private transformModule?;
     /** Handles and logs errors that occur within the editor. */
-    private errorHandler;
+    private readonly errorHandler;
     /** The configuration options passed to the editor upon instantiation. */
-    private config;
-    private DEFAULT_MODULE;
+    private readonly config;
+    private readonly DEFAULT_MODULE;
     private activeModuleName;
+    private renderScheduled;
+    private cleanupCallbacks;
+    private isDestroyed;
+    private asyncOperationVersion;
     /**
      * Creates an instance of CanvasImageEditor.
      * @param config - The configuration object for the editor.
@@ -52,36 +57,52 @@ export declare class CanvicoEditor {
      * Initializes and registers all available modules based on the provided options.
      */
     private _registerModules;
+    private _addManagedListener;
+    private _getOutputDimensions;
+    private _getPreviewDimensions;
     /**
      * Resets the canvas to display the given image, scaled to fit the container.
-     * @param {HTMLImageElement} image - The image to display.
-     * @internal
+     * This should ONLY be called when loading a new image or explicitly resetting the view.
      */
     private _resetCanvasView;
     /**
-     * Sets which module is currently active, deactivating all others.
-     * If the same module is activated again (and it's not the default), it toggles it off,
-     * returning to the default module.
-     * @param {ModuleName | null} moduleName - The name of the module to activate, or null to deactivate all.
-     * @internal
+     * Sets which module is currently active.
+     * Crop mode disables interactions with the remaining modules until exited or applied.
      */
     private _setActiveModule;
+    /**
+     * Disables or enables UI elements for Resize and Transform modules.
+     */
+    private _toggleNonCropInteractions;
     /**
      * Handles the file input change event to load, validate, and display an image.
-     * @param {Event} event - The file input change event.
-     * @internal
      */
     private _loadImage;
     /**
-     * Callback for the CropModule after a crop is applied. Updates the current image with the cropped version.
-     * @param {string} newImageDataUrl - The data URL of the newly cropped image.
-     * @internal
+     * Callback for the CropModule after a crop is applied.
      */
     private _handleCropApplied;
+    private _applyCropAndExit;
+    private _applyImageDataUrl;
+    private _onStateChange;
+    private _enterCropMode;
+    private _requestRender;
     /**
      * Clears the canvas, redraws the base image, and then draws the overlay for the currently active module.
-     * @internal
      */
     private _redraw;
+    private _drawImageLayer;
+    private _exportCurrentViewDataUrl;
+    /**
+     * Creates a new image based on the current crop state.
+     * Crop rectangle is defined in preview space and remapped to output space.
+     */
+    private _bakeCrop;
+    private _normalizeRect;
+    private _beginAsyncOperation;
+    private _cancelPendingAsyncOperations;
+    private _isAsyncOperationActive;
+    private _createAbortError;
+    private _isAbortError;
 }
 //# sourceMappingURL=CanvicoEditor.d.ts.map

package/dist/CanvicoEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CanvicoEditor.d.ts","sourceRoot":"","sources":["../src/CanvicoEditor.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAW,MAAM,YAAY,CAAC;AAc/D,qBAAa,aAAa;IACtB,2DAA2D;IAC3D,OAAO,CAAC,GAAG,CAAa;IAExB,OAAO,CAAC,MAAM,CAAoB;IAClC,OAAO,CAAC,GAAG,CAA2B;IAEtC,yDAAyD;IACzD,OAAO,CAAC,YAAY,CAAC,CAAmB;IACxC,mFAAmF;IACnF,OAAO,CAAC,YAAY,CAAC,CAAmB;IAExC,4DAA4D;IAC5D,OAAO,CAAC,OAAO,CAAmC;IAElD,4DAA4D;IAC5D,OAAO,CAAC,YAAY,CAAe;IAEnC,yEAAyE;IACzE,OAAO,CAAC,MAAM,CAAsB;IAEpC,OAAO,CAAC,cAAc,CAA2B;IACjD,OAAO,CAAC,gBAAgB,CAA2B;IAEnD;;;;OAIG;gBACS,MAAM,EAAE,mBAAmB;IAgBvC;;;;OAIG;IACH,OAAO,CAAC,iBAAiB;IAczB;;OAEG;IACI,OAAO,IAAI,IAAI;IAatB;;OAEG;IACH,OAAO,CAAC,WAAW;IAQnB;;OAEG;IACH,OAAO,CAAC,SAAS;IAoBjB;;OAEG;IACH,OAAO,CAAC,UAAU;IAelB;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAezB;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAqCxB;;;;OAIG;IACH,OAAO,CAAC,gBAAgB;IAqBxB;;;;;;OAMG;IACH,OAAO,CAAC,gBAAgB;IA4BxB;;;;OAIG;IACH,OAAO,CAAC,UAAU;IAsClB;;;;OAIG;IACH,OAAO,CAAC,kBAAkB;IAc1B;;;OAGG;IACH,OAAO,CAAC,OAAO;CAclB"}
+{"version":3,"file":"CanvicoEditor.d.ts","sourceRoot":"","sources":["../src/CanvicoEditor.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAW,MAAM,YAAY,CAAC;AAiB/D,qBAAa,aAAa;IACtB,2DAA2D;IAC3D,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAa;IAEjC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAoB;IAC3C,OAAO,CAAC,QAAQ,CAAC,GAAG,CAA2B;IAE/C,qCAAqC;IACrC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAkC;IAExD,4DAA4D;IAC5D,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAmC;IAC3D,OAAO,CAAC,YAAY,CAAC,CAAe;IACpC,OAAO,CAAC,UAAU,CAAC,CAAa;IAChC,OAAO,CAAC,eAAe,CAAC,CAAkB;IAE1C,4DAA4D;IAC5D,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAe;IAE5C,yEAAyE;IACzE,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAsB;IAE7C,OAAO,CAAC,QAAQ,CAAC,cAAc,CAA2B;IAC1D,OAAO,CAAC,gBAAgB,CAA2B;IACnD,OAAO,CAAC,eAAe,CAAS;IAChC,OAAO,CAAC,gBAAgB,CAAyB;IACjD,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,qBAAqB,CAAK;IAElC;;;;OAIG;gBACS,MAAM,EAAE,mBAAmB;IAsBvC;;;;OAIG;IACH,OAAO,CAAC,iBAAiB;IAczB;;OAEG;IACI,OAAO,IAAI,IAAI;IAgBtB;;OAEG;IACH,OAAO,CAAC,WAAW;IAQnB;;OAEG;IACH,OAAO,CAAC,SAAS;IAmBjB;;OAEG;IACH,OAAO,CAAC,UAAU;IAsBlB;;OAEG;IACH,OAAO,CAAC,iBAAiB;IASzB;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAsCxB,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,oBAAoB;IAW5B,OAAO,CAAC,qBAAqB;IAW7B;;;OAGG;IACH,OAAO,CAAC,gBAAgB;IAexB;;;OAGG;IACH,OAAO,CAAC,gBAAgB;IAqCxB;;OAEG;IACH,OAAO,CAAC,0BAA0B;IAwBlC;;OAEG;IACH,OAAO,CAAC,UAAU;IA+DlB;;OAEG;IACH,OAAO,CAAC,kBAAkB;YAOZ,iBAAiB;IA4B/B,OAAO,CAAC,kBAAkB;IAwB1B,OAAO,CAAC,cAAc;IAyBtB,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,cAAc;IAmBtB;;OAEG;IACH,OAAO,CAAC,OAAO;IAef,OAAO,CAAC,eAAe;IAavB,OAAO,CAAC,yBAAyB;IAejC;;;OAGG;IACH,OAAO,CAAC,SAAS;IAwCjB,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,oBAAoB;IAK5B,OAAO,CAAC,6BAA6B;IAIrC,OAAO,CAAC,uBAAuB;IAI/B,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,aAAa;CAGxB"}

package/dist/CanvicoEditor.js

@@ -1,34 +1,48 @@
-import { ErrorHandler as h } from "./utils/error-handler.js";
-import { DOMManager as l } from "./utils/dom-manager.js";
-import { createFeatureNotSupportedError as c, createCanvasContextError as d, createImageSaveError as m, validateFile as u, createImageLoadError as n } from "./utils/validation.js";
-import { ResizeModule as g } from "./modules/ResizeModule.js";
-import { CropModule as v } from "./modules/CropModule.js";
-class M {
+import { ErrorHandler as E } from "./utils/error-handler.js";
+import { DOMManager as y } from "./utils/dom-manager.js";
+import { createFeatureNotSupportedError as A, createCanvasContextError as C, createImageSaveError as _, validateFile as I, createImageLoadError as m } from "./utils/validation.js";
+import { CanvasState as b } from "./state/CanvasState.js";
+import { ResizeModule as D } from "./modules/ResizeModule.js";
+import { CropModule as x } from "./modules/CropModule.js";
+import { TransformModule as z } from "./modules/TransformModule.js";
+class T {
   /** Manages all DOM element interactions and selections. */
   dom;
   canvas;
   ctx;
-  /** The original, unmodified image loaded by the user. */
-  initialImage;
-  /** The image currently being displayed and edited, including all modifications. */
-  currentImage;
+  /** Central shared document state. */
+  state = new b();
   /** A map holding all registered and initialized modules. */
   modules = /* @__PURE__ */ new Map();
+  resizeModule;
+  cropModule;
+  transformModule;
   /** Handles and logs errors that occur within the editor. */
   errorHandler;
   /** The configuration options passed to the editor upon instantiation. */
   config;
   DEFAULT_MODULE = null;
   activeModuleName = null;
+  renderScheduled = !1;
+  cleanupCallbacks = [];
+  isDestroyed = !1;
+  asyncOperationVersion = 0;
   /**
    * Creates an instance of CanvasImageEditor.
    * @param config - The configuration object for the editor.
    * @throws {Error} If a required feature like FileReader is not supported by the browser.
    */
   constructor(e) {
-    if (this.config = e, this.errorHandler = new h(), !window.FileReader)
-      throw c("FileReader API is not supported by this browser.");
-    this.dom = new l(e, this.errorHandler), [this.canvas, this.ctx] = this._initializeCanvas(), this._registerModules(), this._bindGlobalEvents();
+    if (this.config = e, this.errorHandler = new E({
+      onError: e.onError,
+      logToConsole: e.logErrorsToConsole
+    }), !globalThis.FileReader) {
+      const i = A("FileReader API is not supported by this browser.");
+      throw this.errorHandler.handle(i, { source: "validation", operation: "constructor:file-reader-check" }), i;
+    }
+    this.dom = new y(e, this.errorHandler), [this.canvas, this.ctx] = this._initializeCanvas(), this._registerModules(), this._bindGlobalEvents();
+    const t = this.state.subscribe((i) => this._onStateChange(i));
+    this.cleanupCallbacks.push(t);
   }
   /**
    * Creates the canvas element and its 2D rendering context.
@@ -38,7 +52,7 @@ class M {
   _initializeCanvas() {
     const e = document.createElement("canvas"), t = e.getContext("2d");
     if (!t)
-      throw d();
+      throw C();
     return this.dom.elements.container.appendChild(e), [e, t];
   }
   // --- Public API & User Actions ---
@@ -46,40 +60,42 @@ class M {
    * Cleans up all resources, event listeners, and modules to safely remove the editor instance.
    */
   destroy() {
-    this._setActiveModule(null), this.dom.elements.imageFileInput.replaceWith(this.dom.elements.imageFileInput.cloneNode(!0)), this.dom.elements.clearCanvasButton.replaceWith(this.dom.elements.clearCanvasButton.cloneNode(!0)), this.dom.elements.saveButton.replaceWith(this.dom.elements.saveButton.cloneNode(!0)), this.modules.forEach((e) => e.destroy()), this.modules.clear();
+    this.isDestroyed || (this.isDestroyed = !0, this._cancelPendingAsyncOperations(), this._setActiveModule(null, !1, !0), this.cleanupCallbacks.forEach((e) => e()), this.cleanupCallbacks = [], this.modules.forEach((e) => e.destroy()), this.modules.clear());
   }
   /**
    * Resets the current image to its original state, discarding all changes.
    */
   _resetImage() {
-    this.initialImage && (this.currentImage = this.initialImage, this._resetCanvasView(this.initialImage), this._setActiveModule(this.DEFAULT_MODULE));
+    this.state.getInitial() && (this.state.resetToInitial(), this._setActiveModule(this.DEFAULT_MODULE, !1, !0));
   }
   /**
    * Clears the canvas and resets the entire editor state, including loaded images and module states.
    */
   _cleanAll() {
-    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height), this.canvas.width = 0, this.canvas.height = 0, this.initialImage = void 0, this.currentImage = void 0, this.dom.resizeElements && (this.dom.resizeElements.widthInput.value = "", this.dom.resizeElements.heightInput.value = "", this.dom.resizeElements.lockAspectRatio && (this.dom.resizeElements.lockAspectRatio.checked = !1)), this.dom.elements.imageFileInput.value = "", this._setActiveModule(this.DEFAULT_MODULE);
+    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height), this.canvas.width = 0, this.canvas.height = 0, this.state.clear(), this.dom.resizeElements && (this.dom.resizeElements.widthInput.value = "", this.dom.resizeElements.heightInput.value = "", this.dom.resizeElements.lockAspectRatio && (this.dom.resizeElements.lockAspectRatio.checked = !1)), this.dom.elements.imageFileInput.value = "", this._setActiveModule(null, !1, !0);
   }
   /**
    * Triggers a download of the current canvas content as a PNG image.
    */
   _saveImage() {
-    if (!this.currentImage) {
-      this.errorHandler.handle(m());
+    if (!this.state.getCurrent()) {
+      this.errorHandler.handle(_(), { source: "editor", operation: "save-image:no-image" });
+      return;
+    }
+    const e = this._exportCurrentViewDataUrl();
+    if (!e) {
+      this.errorHandler.handle(_(), { source: "editor", operation: "save-image:export-failed" });
       return;
     }
-    const e = document.createElement("a"), t = this.dom.elements.imageFileInput.files?.[0], i = t ? t.name.replace(/\.[^/.]+$/, "") : "image";
-    e.download = `${i}-edited.png`, e.href = this.canvas.toDataURL("image/png"), e.click();
+    const t = document.createElement("a"), i = this.dom.elements.imageFileInput.files?.[0], s = i ? i.name.replace(/\.[^/.]+$/, "") : "image";
+    t.download = `${s}-edited.png`, t.href = e, t.click();
   }
   // --- Initialization Methods ---
   /**
    * Binds event listeners to the main control elements like file input, save, and reset buttons.
    */
   _bindGlobalEvents() {
-    this.dom.elements.imageFileInput.addEventListener("change", (e) => this._loadImage(e)), this.dom.cropElements && this.dom.cropElements.activateButton.addEventListener("click", () => this.currentImage && this._setActiveModule(
-      "crop"
-      /* CROP */
-    )), this.dom.elements.resetEditsButton.addEventListener("click", () => this._resetImage()), this.dom.elements.clearCanvasButton.addEventListener("click", () => this._cleanAll()), this.dom.elements.saveButton.addEventListener("click", () => this._saveImage());
+    this._addManagedListener(this.dom.elements.imageFileInput, "change", (e) => this._loadImage(e)), this._addManagedListener(this.dom.elements.resetEditsButton, "click", () => this._resetImage()), this._addManagedListener(this.dom.elements.clearCanvasButton, "click", () => this._cleanAll()), this._addManagedListener(this.dom.elements.saveButton, "click", () => this._saveImage());
   }
   // --- Core Drawing & State Logic ---
   /**
@@ -87,103 +103,262 @@ class M {
    */
   _registerModules() {
     if (this.dom.resizeElements) {
-      const e = new g(this.dom.resizeElements, {
-        container: this.dom.elements.container,
-        canvas: this.canvas,
-        ctx: this.ctx,
-        getCurrentImage: () => this.currentImage
+      const e = new D(this.dom.resizeElements, {
+        state: this.state,
+        errorHandler: this.errorHandler
       });
-      this.modules.set("resize", e), this.DEFAULT_MODULE = "resize";
+      this.modules.set("resize", e), this.resizeModule = e;
     }
     if (this.dom.cropElements && this.config.modules?.crop) {
-      const e = new v(this.dom.cropElements, {
+      const e = new x(this.dom.cropElements, {
         canvas: this.canvas,
         ctx: this.ctx,
         frameColor: this.config.modules.crop.frameColor,
         outsideOverlayColor: this.config.modules.crop.outsideOverlayColor,
-        requestRedraw: () => this._redraw(),
-        getCurrentImage: () => this.currentImage,
-        onCropApplied: (t) => this._handleCropApplied(t)
+        state: this.state,
+        onCropApplied: () => this._handleCropApplied()
       });
-      this.modules.set("crop", e);
+      this.modules.set("crop", e), this.cropModule = e, this._addManagedListener(this.dom.cropElements.activateButton, "click", () => this._enterCropMode());
     }
-    this.modules.forEach((e) => e.init()), console.log(this.modules), this._setActiveModule(this.DEFAULT_MODULE);
+    if (this.dom.transformElements) {
+      const e = new z(this.dom.transformElements, {
+        state: this.state
+      });
+      this.modules.set("transform", e), this.transformModule = e;
+    }
+    this.modules.forEach((e) => e.init()), this._setActiveModule(this.DEFAULT_MODULE, !1, !0);
+  }
+  _addManagedListener(e, t, i) {
+    e.addEventListener(t, i), this.cleanupCallbacks.push(() => e.removeEventListener(t, i));
+  }
+  _getOutputDimensions(e) {
+    const t = this.state.getResizeState(), i = t.width > 0 ? t.width : e.width, s = t.height > 0 ? t.height : e.height;
+    return {
+      width: Math.max(1, Math.round(i)),
+      height: Math.max(1, Math.round(s))
+    };
+  }
+  _getPreviewDimensions(e, t) {
+    const i = Math.max(this.dom.elements.container.clientWidth, 1), s = Math.max(this.dom.elements.container.clientHeight, 1), r = Math.min(i / e, s / t, 1);
+    return {
+      width: Math.max(1, Math.round(e * r)),
+      height: Math.max(1, Math.round(t * r))
+    };
   }
   /**
    * Resets the canvas to display the given image, scaled to fit the container.
-   * @param {HTMLImageElement} image - The image to display.
-   * @internal
+   * This should ONLY be called when loading a new image or explicitly resetting the view.
    */
   _resetCanvasView(e) {
-    this.currentImage = e;
-    const t = this.dom.elements.container.clientWidth, i = this.dom.elements.container.clientHeight, r = Math.min(t / e.width, i / e.height), a = e.width * r, s = e.height * r;
-    this.canvas.width = a, this.canvas.height = s, this._redraw(), this.dom.resizeElements && (this.dom.resizeElements.widthInput.value = Math.round(a).toString(), this.dom.resizeElements.heightInput.value = Math.round(s).toString());
+    const { width: t, height: i } = this._getOutputDimensions(e), { width: s, height: r } = this._getPreviewDimensions(t, i);
+    this.canvas.width = s, this.canvas.height = r, this.dom.resizeElements && (this.dom.resizeElements.widthInput.value = t.toString(), this.dom.resizeElements.heightInput.value = i.toString()), this._requestRender();
+  }
+  /**
+   * Sets which module is currently active.
+   * Crop mode disables interactions with the remaining modules until exited or applied.
+   */
+  _setActiveModule(e, t = !0, i = !1) {
+    let s = e;
+    if (t && this.activeModuleName === e && e !== this.DEFAULT_MODULE && (s = this.DEFAULT_MODULE), !i && this.activeModuleName === s)
+      return;
+    this.activeModuleName = s;
+    const r = !!this.state.getCurrent();
+    this.activeModuleName === "crop" && r ? (this.state.setMode("crop"), this.resizeModule?.deactivate(), this.transformModule?.deactivate(), this.cropModule?.activate(), this._toggleNonCropInteractions(!1)) : (this.state.setMode("edit"), this.cropModule?.deactivate(), this._toggleNonCropInteractions(!0), r ? (this.resizeModule?.activate(), this.transformModule?.activate()) : (this.resizeModule?.deactivate(), this.transformModule?.deactivate())), this._requestRender();
   }
   /**
-   * Sets which module is currently active, deactivating all others.
-   * If the same module is activated again (and it's not the default), it toggles it off,
-   * returning to the default module.
-   * @param {ModuleName | null} moduleName - The name of the module to activate, or null to deactivate all.
-   * @internal
+   * Disables or enables UI elements for Resize and Transform modules.
    */
-  _setActiveModule(e) {
-    let t = e;
-    this.activeModuleName === e && e !== this.DEFAULT_MODULE && (t = this.DEFAULT_MODULE), this.activeModuleName !== t && (this.activeModuleName = t, this.modules.forEach((i, r) => {
-      r === this.activeModuleName ? i.activate() : i.deactivate();
-    }), this._redraw());
+  _toggleNonCropInteractions(e) {
+    const t = !e;
+    if (this.dom.resizeElements && (this.dom.resizeElements.widthInput.disabled = t, this.dom.resizeElements.heightInput.disabled = t, this.dom.resizeElements.lockAspectRatio && (this.dom.resizeElements.lockAspectRatio.disabled = t)), this.dom.transformElements) {
+      const i = this.dom.transformElements;
+      i.rotateInput && (i.rotateInput.disabled = t), i.flipHorizontalButton && (i.flipHorizontalButton.disabled = t), i.flipVerticalButton && (i.flipVerticalButton.disabled = t);
+    }
+    this.dom.elements.clearCanvasButton.disabled = t, this.dom.elements.resetEditsButton.disabled = t;
   }
   // --- Event Handlers & Callbacks ---
   /**
    * Handles the file input change event to load, validate, and display an image.
-   * @param {Event} event - The file input change event.
-   * @internal
    */
   _loadImage(e) {
-    try {
-      const i = e.target.files?.[0];
-      if (!i)
-        return;
-      u(i, this.config.maxFileSizeMB || 5);
-      const r = new FileReader();
-      r.onload = (a) => {
-        const s = new Image();
-        s.onload = () => {
-          try {
-            this.currentImage = s, this.initialImage = s, this._resetCanvasView(s);
-          } catch (o) {
-            this.errorHandler.handle(o);
+    if (!this.isDestroyed)
+      try {
+        const i = e.target.files?.[0];
+        if (!i)
+          return;
+        I(i, this.config.maxFileSizeMB || 5);
+        const s = this._beginAsyncOperation(), r = new FileReader();
+        r.onload = (o) => {
+          if (!this._isAsyncOperationActive(s))
+            return;
+          const a = o.target?.result;
+          if (typeof a != "string") {
+            this.errorHandler.handle(m("Unexpected image format from FileReader."), {
+              source: "editor",
+              operation: "load-image:reader-result"
+            });
+            return;
           }
-        }, s.onerror = () => {
-          this.errorHandler.handle(n("Error reading image file."));
-        }, s.src = a.target.result;
-      }, r.onerror = () => {
-        this.errorHandler.handle(n("Error reading file with FileReader."));
-      }, r.readAsDataURL(i);
-    } catch (t) {
-      this.errorHandler.handle(t);
-    }
+          const n = new Image();
+          n.onload = () => {
+            if (this._isAsyncOperationActive(s))
+              try {
+                this.state.setInitial(n), this._setActiveModule(this.DEFAULT_MODULE, !1, !0);
+              } catch (l) {
+                this.errorHandler.handle(l, { source: "state", operation: "load-image:set-initial" });
+              }
+          }, n.onerror = () => {
+            this._isAsyncOperationActive(s) && this.errorHandler.handle(m("Error reading image file."), { source: "editor", operation: "load-image:image-read" });
+          }, n.src = a;
+        }, r.onerror = () => {
+          this._isAsyncOperationActive(s) && this.errorHandler.handle(m("Error reading file with FileReader."), { source: "editor", operation: "load-image:file-reader" });
+        }, r.readAsDataURL(i);
+      } catch (t) {
+        this.errorHandler.handle(t, { source: "validation", operation: "load-image:validate-file" });
+      }
   }
   /**
-   * Callback for the CropModule after a crop is applied. Updates the current image with the cropped version.
-   * @param {string} newImageDataUrl - The data URL of the newly cropped image.
-   * @internal
+   * Callback for the CropModule after a crop is applied.
    */
-  _handleCropApplied(e) {
-    const t = new Image();
-    t.onload = () => {
-      this.currentImage = t, this._setActiveModule(this.DEFAULT_MODULE), this._resetCanvasView(t);
-    }, t.src = e;
+  _handleCropApplied() {
+    const e = this._bakeCrop();
+    e && this._applyCropAndExit(e);
+  }
+  async _applyCropAndExit(e) {
+    try {
+      await this._applyImageDataUrl(e);
+    } catch (i) {
+      this._isAbortError(i) || this.errorHandler.handle(i, { source: "editor", operation: "apply-crop:apply-image" });
+      return;
+    }
+    if (this.isDestroyed)
+      return;
+    this._setActiveModule(this.DEFAULT_MODULE, !1, !0);
+    const t = this.state.getCurrent();
+    if (t) {
+      const { lockAspectRatio: i } = this.state.getResizeState();
+      this.state.setResizeState({
+        width: t.width,
+        height: t.height,
+        lockAspectRatio: i
+      });
+    }
+    this.state.setTransformState({ rotate: 0, flipH: !1, flipV: !1 }), this.transformModule?.activate();
+  }
+  _applyImageDataUrl(e) {
+    const t = this._beginAsyncOperation();
+    return new Promise((i, s) => {
+      const r = new Image();
+      r.onload = () => {
+        if (!this._isAsyncOperationActive(t)) {
+          s(this._createAbortError("Image apply operation was canceled."));
+          return;
+        }
+        this.state.setCurrent(r), i();
+      }, r.onerror = () => {
+        if (!this._isAsyncOperationActive(t)) {
+          s(this._createAbortError("Image apply operation was canceled."));
+          return;
+        }
+        s(m("Error applying image data to canvas."));
+      }, r.src = e;
+    });
+  }
+  _onStateChange(e) {
+    if (e === "clear") {
+      this.transformModule?.syncControlsWithState(), this._requestRender();
+      return;
+    }
+    const t = this.state.getCurrent();
+    if (!t) {
+      this.transformModule?.syncControlsWithState(), this._requestRender();
+      return;
+    }
+    if (e === "image" || e === "resize") {
+      e === "image" && this.transformModule?.syncControlsWithState(), this._resetCanvasView(t);
+      return;
+    }
+    this._requestRender();
+  }
+  _enterCropMode() {
+    this.state.getCurrent() && this._setActiveModule(
+      "crop"
+      /* CROP */
+    );
   }
   // --- Module Management ---
+  _requestRender() {
+    this.isDestroyed || this.renderScheduled || (this.renderScheduled = !0, globalThis.requestAnimationFrame(() => {
+      this.renderScheduled = !1, !this.isDestroyed && this._redraw();
+    }));
+  }
   /**
    * Clears the canvas, redraws the base image, and then draws the overlay for the currently active module.
-   * @internal
    */
   _redraw() {
-    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height), this.currentImage && (this.ctx.drawImage(this.currentImage, 0, 0, this.currentImage.width, this.currentImage.height, 0, 0, this.canvas.width, this.canvas.height), this.activeModuleName && this.modules.get(this.activeModuleName)?.drawOverlay?.());
+    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    const e = this.state.getCurrent();
+    e && (this._drawImageLayer(this.ctx, e, this.canvas.width, this.canvas.height), this.activeModuleName === "crop" && this.cropModule?.drawOverlay?.());
+  }
+  _drawImageLayer(e, t, i, s) {
+    const r = this.state.getTransformState(), o = i / 2, a = s / 2;
+    e.save(), e.translate(o, a), e.rotate(r.rotate * Math.PI / 180), e.scale(r.flipH ? -1 : 1, r.flipV ? -1 : 1), e.drawImage(t, -o, -a, i, s), e.restore();
+  }
+  _exportCurrentViewDataUrl() {
+    const e = this.state.getCurrent();
+    if (!e) return null;
+    const { width: t, height: i } = this._getOutputDimensions(e), s = document.createElement("canvas");
+    s.width = t, s.height = i;
+    const r = s.getContext("2d");
+    return r ? (this._drawImageLayer(r, e, s.width, s.height), s.toDataURL("image/png")) : null;
+  }
+  /**
+   * Creates a new image based on the current crop state.
+   * Crop rectangle is defined in preview space and remapped to output space.
+   */
+  _bakeCrop() {
+    const e = this.state.getCurrent(), t = this.state.getCropState();
+    if (!e || !t.active) return null;
+    const i = this._normalizeRect(t.rect), s = this.canvas.width, r = this.canvas.height;
+    if (s <= 0 || r <= 0) return null;
+    const { width: o, height: a } = this._getOutputDimensions(e), n = o / s, l = a / r, p = Math.max(0, Math.floor(i.x * n)), f = Math.max(0, Math.floor(i.y * l)), M = o - p, w = a - f, d = Math.min(Math.floor(i.w * n), Math.floor(M)), c = Math.min(Math.floor(i.h * l), Math.floor(w));
+    if (d <= 0 || c <= 0) return null;
+    const h = document.createElement("canvas");
+    h.width = o, h.height = a;
+    const g = h.getContext("2d");
+    if (!g) return null;
+    this._drawImageLayer(g, e, h.width, h.height);
+    const u = document.createElement("canvas");
+    u.width = d, u.height = c;
+    const v = u.getContext("2d");
+    return v ? (v.drawImage(h, p, f, d, c, 0, 0, d, c), u.toDataURL("image/png")) : null;
+  }
+  _normalizeRect(e) {
+    return {
+      x: e.w >= 0 ? e.x : e.x + e.w,
+      y: e.h >= 0 ? e.y : e.y + e.h,
+      w: Math.abs(e.w),
+      h: Math.abs(e.h)
+    };
+  }
+  _beginAsyncOperation() {
+    return this.asyncOperationVersion += 1, this.asyncOperationVersion;
+  }
+  _cancelPendingAsyncOperations() {
+    this.asyncOperationVersion += 1;
+  }
+  _isAsyncOperationActive(e) {
+    return !this.isDestroyed && e === this.asyncOperationVersion;
+  }
+  _createAbortError(e) {
+    const t = new Error(e);
+    return t.name = "AbortError", t;
+  }
+  _isAbortError(e) {
+    return e instanceof Error && e.name === "AbortError";
   }
 }
 export {
-  M as CanvicoEditor
+  T as CanvicoEditor
 };
 //# sourceMappingURL=CanvicoEditor.js.map