canvico-editor 1.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2025 [Your Name or GitHub username]
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,72 @@
+# Canvico Editor
+
+[![NPM Version](https://img.shields.io/npm/v/canvico-editor.svg)](https://www.npmjs.com/package/canvico-editor)
+
+A simple and extensible image editor built with TypeScript and the Canvas API. Designed with modularity and developer experience in mind, it separates DOM logic from business logic, provides strong typing, and includes robust error handling. Easily integrable into web projects and a showcase of advanced TypeScript patterns.
+
+## Features
+
+-   **Image Loading**: Load images from a local file input, URL, or `File` object.
+-   **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.
+
+## Installation
+
+Install the package using npm:
+
+```bash
+npm install canvico-editor
+```
+
+## Quick Start
+
+```javascript
+import { CanvicoEditor } from "canvico-editor";
+
+const canvico = new CanvicoEditor({
+    containerSelector: `.canvico-containerr`,
+    imageFileInputSelector: ".input-upload-file",
+    resetEditsButtonSelector: "#resetEdit",
+    clearCanvasButtonSelector: "#cleanAll",
+    saveButtonSelector: "#saveBtn",
+    modules: {
+        resize: {
+            widthInputSelector: "#widthInput",
+            heightInputSelector: "#heightInput",
+            lockAspectRatioSelector: "#keepAspectRatio",
+        },
+        crop: {
+            activateButtonSelector: "#cropBtn",
+            applyButtonSelector: "#applyBtn",
+            frameColor: "#d84cb9",
+            outsideOverlayColor: "rgba(0,0,0,0.2)",
+        },
+    },
+});
+```
+
+## Documentation
+
+For the full API documentation, including all available options, methods, and modules, please visit the [documentation page](https://galacticbyte.github.io/canvico-editor/).
+
+## Browser Support
+
+| Chrome | Firefox | Safari | Edge |
+| :----: | :-----: | :----: | :--: |
+|  Yes   |   Yes   |  Yes   | Yes  |
+
+## Contributing
+
+First off, thank you for considering contributing to Canvico Editor! It's people like you that make the open-source community such a great place.
+
+Canvico Editor is an open-source project with a modular architecture, and we welcome any form of contribution. All help, from reporting bugs to adding new features (like custom modules), is highly appreciated.
+
+If you have an idea for an improvement or have found a bug, the best way to contribute is by opening an "issue" or creating a "pull request". For detailed information on how you can help, please see the contribution guide: [CONTRIBUTING.md](https://galacticbyte.github.io/canvico-editor/docs/CONTRIBUTING/).
+
+## License
+
+This project is available under the MIT license.

package/dist/CanvicoEditor.d.ts

@@ -0,0 +1,87 @@
+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?;
+    /** A map holding all registered and initialized modules. */
+    private modules;
+    /** Handles and logs errors that occur within the editor. */
+    private errorHandler;
+    /** The configuration options passed to the editor upon instantiation. */
+    private config;
+    private DEFAULT_MODULE;
+    private activeModuleName;
+    /**
+     * 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(config: CanvicoEditorConfig);
+    /**
+     * Creates the canvas element and its 2D rendering context.
+     * @returns A tuple containing the canvas and its context.
+     * @throws {Error} If the 2D context cannot be created.
+     */
+    private _initializeCanvas;
+    /**
+     * Cleans up all resources, event listeners, and modules to safely remove the editor instance.
+     */
+    destroy(): void;
+    /**
+     * Resets the current image to its original state, discarding all changes.
+     */
+    private _resetImage;
+    /**
+     * Clears the canvas and resets the entire editor state, including loaded images and module states.
+     */
+    private _cleanAll;
+    /**
+     * Triggers a download of the current canvas content as a PNG image.
+     */
+    private _saveImage;
+    /**
+     * Binds event listeners to the main control elements like file input, save, and reset buttons.
+     */
+    private _bindGlobalEvents;
+    /**
+     * Initializes and registers all available modules based on the provided options.
+     */
+    private _registerModules;
+    /**
+     * Resets the canvas to display the given image, scaled to fit the container.
+     * @param {HTMLImageElement} image - The image to display.
+     * @internal
+     */
+    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
+     */
+    private _setActiveModule;
+    /**
+     * 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
+     */
+    private _handleCropApplied;
+    /**
+     * Clears the canvas, redraws the base image, and then draws the overlay for the currently active module.
+     * @internal
+     */
+    private _redraw;
+}
+//# sourceMappingURL=CanvicoEditor.d.ts.map

package/dist/CanvicoEditor.d.ts.map

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

package/dist/CanvicoEditor.js

@@ -0,0 +1,189 @@
+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 {
+  /** 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;
+  /** A map holding all registered and initialized modules. */
+  modules = /* @__PURE__ */ new Map();
+  /** 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;
+  /**
+   * 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();
+  }
+  /**
+   * Creates the canvas element and its 2D rendering context.
+   * @returns A tuple containing the canvas and its context.
+   * @throws {Error} If the 2D context cannot be created.
+   */
+  _initializeCanvas() {
+    const e = document.createElement("canvas"), t = e.getContext("2d");
+    if (!t)
+      throw d();
+    return this.dom.elements.container.appendChild(e), [e, t];
+  }
+  // --- Public API & User Actions ---
+  /**
+   * 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();
+  }
+  /**
+   * 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));
+  }
+  /**
+   * 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);
+  }
+  /**
+   * Triggers a download of the current canvas content as a PNG image.
+   */
+  _saveImage() {
+    if (!this.currentImage) {
+      this.errorHandler.handle(m());
+      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();
+  }
+  // --- 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());
+  }
+  // --- Core Drawing & State Logic ---
+  /**
+   * Initializes and registers all available modules based on the provided options.
+   */
+  _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
+      });
+      this.modules.set("resize", e), this.DEFAULT_MODULE = "resize";
+    }
+    if (this.dom.cropElements && this.config.modules?.crop) {
+      const e = new v(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)
+      });
+      this.modules.set("crop", e);
+    }
+    this.modules.forEach((e) => e.init()), console.log(this.modules), this._setActiveModule(this.DEFAULT_MODULE);
+  }
+  /**
+   * Resets the canvas to display the given image, scaled to fit the container.
+   * @param {HTMLImageElement} image - The image to display.
+   * @internal
+   */
+  _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());
+  }
+  /**
+   * 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
+   */
+  _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());
+  }
+  // --- 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);
+          }
+        }, 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);
+    }
+  }
+  /**
+   * 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
+   */
+  _handleCropApplied(e) {
+    const t = new Image();
+    t.onload = () => {
+      this.currentImage = t, this._setActiveModule(this.DEFAULT_MODULE), this._resetCanvasView(t);
+    }, t.src = e;
+  }
+  // --- Module Management ---
+  /**
+   * 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?.());
+  }
+}
+export {
+  M as CanvicoEditor
+};
+//# sourceMappingURL=CanvicoEditor.js.map

package/dist/CanvicoEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CanvicoEditor.js","sources":["../src/CanvicoEditor.ts"],"sourcesContent":["import type { CanvicoEditorConfig, IModule } from \"./types.js\";\r\nimport { ErrorHandler } from \"./utils/error-handler.js\";\r\nimport { DOMManager } from \"./utils/dom-manager.js\";\r\nimport { validateFile, createCanvasContextError, createImageLoadError, createImageSaveError, createFeatureNotSupportedError } from \"./utils/validation.js\";\r\n\r\n// Modules\r\nimport { ResizeModule } from \"./modules/ResizeModule.js\";\r\nimport { CropModule } from \"./modules/CropModule.js\";\r\n\r\nenum ModuleName {\r\n    RESIZE = \"resize\",\r\n    CROP = \"crop\",\r\n}\r\n\r\nexport class CanvicoEditor {\r\n    /** Manages all DOM element interactions and selections. */\r\n    private dom: DOMManager;\r\n\r\n    private canvas: HTMLCanvasElement;\r\n    private ctx: CanvasRenderingContext2D;\r\n\r\n    /** The original, unmodified image loaded by the user. */\r\n    private initialImage?: HTMLImageElement;\r\n    /** The image currently being displayed and edited, including all modifications. */\r\n    private currentImage?: HTMLImageElement;\r\n\r\n    /** A map holding all registered and initialized modules. */\r\n    private modules: Map<string, IModule> = new Map();\r\n\r\n    /** Handles and logs errors that occur within the editor. */\r\n    private errorHandler: ErrorHandler;\r\n\r\n    /** The configuration options passed to the editor upon instantiation. */\r\n    private config: CanvicoEditorConfig;\r\n\r\n    private DEFAULT_MODULE: ModuleName | null = null;\r\n    private activeModuleName: ModuleName | null = null;\r\n\r\n    /**\r\n     * Creates an instance of CanvasImageEditor.\r\n     * @param config - The configuration object for the editor.\r\n     * @throws {Error} If a required feature like FileReader is not supported by the browser.\r\n     */\r\n    constructor(config: CanvicoEditorConfig) {\r\n        // Assign properties first, so they are available in case of an early error\r\n        this.config = config;\r\n        this.errorHandler = new ErrorHandler();\r\n\r\n        if (!window.FileReader) {\r\n            throw createFeatureNotSupportedError(\"FileReader API is not supported by this browser.\");\r\n        }\r\n\r\n        // All initializations\r\n        this.dom = new DOMManager(config, this.errorHandler); // Initialize and validate DOM elements\r\n        [this.canvas, this.ctx] = this._initializeCanvas(); // Create canvas and get context 2d\r\n        this._registerModules();\r\n        this._bindGlobalEvents();\r\n    }\r\n\r\n    /**\r\n     * Creates the canvas element and its 2D rendering context.\r\n     * @returns A tuple containing the canvas and its context.\r\n     * @throws {Error} If the 2D context cannot be created.\r\n     */\r\n    private _initializeCanvas(): [HTMLCanvasElement, CanvasRenderingContext2D] {\r\n        const canvas = document.createElement(\"canvas\");\r\n        const ctx = canvas.getContext(\"2d\");\r\n\r\n        if (!ctx) {\r\n            throw createCanvasContextError();\r\n        }\r\n        this.dom.elements.container.appendChild(canvas);\r\n\r\n        return [canvas, ctx];\r\n    }\r\n\r\n    // --- Public API & User Actions ---\r\n\r\n    /**\r\n     * Cleans up all resources, event listeners, and modules to safely remove the editor instance.\r\n     */\r\n    public destroy(): void {\r\n        // Deactivate any active module\r\n        this._setActiveModule(null);\r\n\r\n        // A simple way to remove all listeners is to replace the nodes.\r\n        this.dom.elements.imageFileInput.replaceWith(this.dom.elements.imageFileInput.cloneNode(true));\r\n        this.dom.elements.clearCanvasButton.replaceWith(this.dom.elements.clearCanvasButton.cloneNode(true));\r\n        this.dom.elements.saveButton.replaceWith(this.dom.elements.saveButton.cloneNode(true));\r\n\r\n        this.modules.forEach((module) => module.destroy());\r\n        this.modules.clear();\r\n    }\r\n\r\n    /**\r\n     * Resets the current image to its original state, discarding all changes.\r\n     */\r\n    private _resetImage(): void {\r\n        if (this.initialImage) {\r\n            this.currentImage = this.initialImage;\r\n            this._resetCanvasView(this.initialImage);\r\n            this._setActiveModule(this.DEFAULT_MODULE);\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Clears the canvas and resets the entire editor state, including loaded images and module states.\r\n     */\r\n    private _cleanAll(): void {\r\n        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);\r\n        this.canvas.width = 0;\r\n        this.canvas.height = 0;\r\n\r\n        this.initialImage = undefined;\r\n        this.currentImage = undefined;\r\n\r\n        // Reset input fields\r\n        if (this.dom.resizeElements) {\r\n            this.dom.resizeElements.widthInput.value = \"\";\r\n            this.dom.resizeElements.heightInput.value = \"\";\r\n            if (this.dom.resizeElements.lockAspectRatio) this.dom.resizeElements.lockAspectRatio.checked = false;\r\n        }\r\n\r\n        this.dom.elements.imageFileInput.value = \"\";\r\n\r\n        this._setActiveModule(this.DEFAULT_MODULE);\r\n    }\r\n\r\n    /**\r\n     * Triggers a download of the current canvas content as a PNG image.\r\n     */\r\n    private _saveImage(): void {\r\n        if (!this.currentImage) {\r\n            this.errorHandler.handle(createImageSaveError());\r\n            return;\r\n        }\r\n        const link = document.createElement(\"a\");\r\n        const originalFile = this.dom.elements.imageFileInput.files?.[0];\r\n        const baseName = originalFile ? originalFile.name.replace(/\\.[^/.]+$/, \"\") : \"image\";\r\n        link.download = `${baseName}-edited.png`;\r\n        link.href = this.canvas.toDataURL(\"image/png\");\r\n        link.click();\r\n    }\r\n\r\n    // --- Initialization Methods ---\r\n\r\n    /**\r\n     * Binds event listeners to the main control elements like file input, save, and reset buttons.\r\n     */\r\n    private _bindGlobalEvents(): void {\r\n        this.dom.elements.imageFileInput.addEventListener(\"change\", (e: Event) => this._loadImage(e));\r\n\r\n        // Bind module buttons\r\n        if (this.dom.cropElements) {\r\n            this.dom.cropElements.activateButton.addEventListener(\"click\", () => this.currentImage && this._setActiveModule(ModuleName.CROP));\r\n        }\r\n\r\n        this.dom.elements.resetEditsButton.addEventListener(\"click\", () => this._resetImage());\r\n        this.dom.elements.clearCanvasButton.addEventListener(\"click\", () => this._cleanAll());\r\n        this.dom.elements.saveButton.addEventListener(\"click\", () => this._saveImage());\r\n    }\r\n\r\n    // --- Core Drawing & State Logic ---\r\n\r\n    /**\r\n     * Initializes and registers all available modules based on the provided options.\r\n     */\r\n    private _registerModules(): void {\r\n        // Register ResizeModule only if its essential inputs are provided\r\n        if (this.dom.resizeElements) {\r\n            const resizeModule = new ResizeModule(this.dom.resizeElements, {\r\n                container: this.dom.elements.container,\r\n                canvas: this.canvas,\r\n                ctx: this.ctx,\r\n\r\n                getCurrentImage: () => this.currentImage,\r\n            });\r\n            this.modules.set(ModuleName.RESIZE, resizeModule);\r\n            this.DEFAULT_MODULE = ModuleName.RESIZE;\r\n        }\r\n\r\n        // Register CropModule only if its essential button is provided\r\n        if (this.dom.cropElements && this.config.modules?.crop) {\r\n            const cropModule = new CropModule(this.dom.cropElements, {\r\n                canvas: this.canvas,\r\n                ctx: this.ctx,\r\n                frameColor: this.config.modules.crop.frameColor,\r\n                outsideOverlayColor: this.config.modules.crop.outsideOverlayColor,\r\n                requestRedraw: () => this._redraw(),\r\n                getCurrentImage: () => this.currentImage,\r\n                onCropApplied: (newImageDataUrl: string) => this._handleCropApplied(newImageDataUrl),\r\n            });\r\n\r\n            this.modules.set(ModuleName.CROP, cropModule);\r\n        }\r\n\r\n        // Initialize all registered modules\r\n        this.modules.forEach((module) => module.init());\r\n        console.log(this.modules);\r\n\r\n        // Set the Resize module as active by default\r\n        this._setActiveModule(this.DEFAULT_MODULE);\r\n    }\r\n\r\n    /**\r\n     * Resets the canvas to display the given image, scaled to fit the container.\r\n     * @param {HTMLImageElement} image - The image to display.\r\n     * @internal\r\n     */\r\n    private _resetCanvasView(image: HTMLImageElement): void {\r\n        this.currentImage = image;\r\n\r\n        const containerWidth = this.dom.elements.container.clientWidth;\r\n        const containerHeight = this.dom.elements.container.clientHeight;\r\n        const scale = Math.min(containerWidth / image.width, containerHeight / image.height);\r\n\r\n        const drawW = image.width * scale;\r\n        const drawH = image.height * scale;\r\n\r\n        this.canvas.width = drawW;\r\n        this.canvas.height = drawH;\r\n\r\n        this._redraw();\r\n\r\n        if (this.dom.resizeElements) {\r\n            this.dom.resizeElements.widthInput.value = Math.round(drawW).toString();\r\n            this.dom.resizeElements.heightInput.value = Math.round(drawH).toString();\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Sets which module is currently active, deactivating all others.\r\n     * If the same module is activated again (and it's not the default), it toggles it off,\r\n     * returning to the default module.\r\n     * @param {ModuleName | null} moduleName - The name of the module to activate, or null to deactivate all.\r\n     * @internal\r\n     */\r\n    private _setActiveModule(moduleName: ModuleName | null): void {\r\n        let newActiveModuleName = moduleName;\r\n\r\n        // If we try to activate a module that is already active (and it's not the default module),\r\n        // we switch back to the default module. This creates a 'toggle' effect.\r\n        if (this.activeModuleName === moduleName && moduleName !== this.DEFAULT_MODULE) {\r\n            newActiveModuleName = this.DEFAULT_MODULE;\r\n        }\r\n\r\n        //  If the state doesn't change, do nothing.\r\n        if (this.activeModuleName === newActiveModuleName) {\r\n            return;\r\n        }\r\n\r\n        this.activeModuleName = newActiveModuleName;\r\n\r\n        this.modules.forEach((module, name) => {\r\n            if (name === this.activeModuleName) {\r\n                module.activate();\r\n            } else {\r\n                module.deactivate();\r\n            }\r\n        });\r\n        this._redraw();\r\n    }\r\n\r\n    // --- Event Handlers & Callbacks ---\r\n\r\n    /**\r\n     * Handles the file input change event to load, validate, and display an image.\r\n     * @param {Event} event - The file input change event.\r\n     * @internal\r\n     */\r\n    private _loadImage(event: Event): void {\r\n        // If no file input element is available, do nothing\r\n        try {\r\n            const target = event.target as HTMLInputElement;\r\n            const file = target.files?.[0];\r\n            if (!file) {\r\n                return;\r\n            }\r\n\r\n            validateFile(file, this.config.maxFileSizeMB || 5);\r\n\r\n            const reader = new FileReader();\r\n            reader.onload = (e) => {\r\n                const img = new Image();\r\n                img.onload = () => {\r\n                    try {\r\n                        this.currentImage = img;\r\n                        this.initialImage = img;\r\n\r\n                        this._resetCanvasView(img);\r\n                    } catch (error) {\r\n                        this.errorHandler.handle(error as Error);\r\n                    }\r\n                };\r\n                img.onerror = () => {\r\n                    this.errorHandler.handle(createImageLoadError(\"Error reading image file.\"));\r\n                };\r\n                img.src = e.target!.result as string;\r\n            };\r\n            reader.onerror = () => {\r\n                this.errorHandler.handle(createImageLoadError(\"Error reading file with FileReader.\"));\r\n            };\r\n            reader.readAsDataURL(file);\r\n        } catch (error) {\r\n            this.errorHandler.handle(error as Error);\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Callback for the CropModule after a crop is applied. Updates the current image with the cropped version.\r\n     * @param {string} newImageDataUrl - The data URL of the newly cropped image.\r\n     * @internal\r\n     */\r\n    private _handleCropApplied(newImageDataUrl: string): void {\r\n        const newImg = new Image();\r\n        newImg.onload = () => {\r\n            this.currentImage = newImg;\r\n\r\n            this._setActiveModule(this.DEFAULT_MODULE);\r\n\r\n            this._resetCanvasView(newImg);\r\n        };\r\n        newImg.src = newImageDataUrl;\r\n    }\r\n\r\n    // --- Module Management ---\r\n\r\n    /**\r\n     * Clears the canvas, redraws the base image, and then draws the overlay for the currently active module.\r\n     * @internal\r\n     */\r\n    private _redraw(): void {\r\n        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);\r\n\r\n        if (!this.currentImage) {\r\n            return;\r\n        }\r\n        this.ctx.drawImage(this.currentImage, 0, 0, this.currentImage.width, this.currentImage.height, 0, 0, this.canvas.width, this.canvas.height);\r\n\r\n        if (this.activeModuleName) {\r\n            const activeModule = this.modules.get(this.activeModuleName);\r\n            // The 'drawOverlay' method is optional, so we check for its existence before calling.\r\n            activeModule?.drawOverlay?.();\r\n        }\r\n    }\r\n}\r\n"],"names":["CanvicoEditor","config","ErrorHandler","createFeatureNotSupportedError","DOMManager","canvas","ctx","createCanvasContextError","module","createImageSaveError","link","originalFile","baseName","resizeModule","ResizeModule","cropModule","CropModule","newImageDataUrl","image","containerWidth","containerHeight","scale","drawW","drawH","moduleName","newActiveModuleName","name","event","file","validateFile","reader","e","img","error","createImageLoadError","newImg"],"mappings":";;;;;AAcO,MAAMA,EAAc;AAAA;AAAA,EAEf;AAAA,EAEA;AAAA,EACA;AAAA;AAAA,EAGA;AAAA;AAAA,EAEA;AAAA;AAAA,EAGA,8BAAoC,IAAA;AAAA;AAAA,EAGpC;AAAA;AAAA,EAGA;AAAA,EAEA,iBAAoC;AAAA,EACpC,mBAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAO9C,YAAYC,GAA6B;AAKrC,QAHA,KAAK,SAASA,GACd,KAAK,eAAe,IAAIC,EAAA,GAEpB,CAAC,OAAO;AACR,YAAMC,EAA+B,kDAAkD;AAI3F,SAAK,MAAM,IAAIC,EAAWH,GAAQ,KAAK,YAAY,GACnD,CAAC,KAAK,QAAQ,KAAK,GAAG,IAAI,KAAK,kBAAA,GAC/B,KAAK,iBAAA,GACL,KAAK,kBAAA;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOQ,oBAAmE;AACvE,UAAMI,IAAS,SAAS,cAAc,QAAQ,GACxCC,IAAMD,EAAO,WAAW,IAAI;AAElC,QAAI,CAACC;AACD,YAAMC,EAAA;AAEV,gBAAK,IAAI,SAAS,UAAU,YAAYF,CAAM,GAEvC,CAACA,GAAQC,CAAG;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA;AAAA,EAOO,UAAgB;AAEnB,SAAK,iBAAiB,IAAI,GAG1B,KAAK,IAAI,SAAS,eAAe,YAAY,KAAK,IAAI,SAAS,eAAe,UAAU,EAAI,CAAC,GAC7F,KAAK,IAAI,SAAS,kBAAkB,YAAY,KAAK,IAAI,SAAS,kBAAkB,UAAU,EAAI,CAAC,GACnG,KAAK,IAAI,SAAS,WAAW,YAAY,KAAK,IAAI,SAAS,WAAW,UAAU,EAAI,CAAC,GAErF,KAAK,QAAQ,QAAQ,CAACE,MAAWA,EAAO,SAAS,GACjD,KAAK,QAAQ,MAAA;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA,EAKQ,cAAoB;AACxB,IAAI,KAAK,iBACL,KAAK,eAAe,KAAK,cACzB,KAAK,iBAAiB,KAAK,YAAY,GACvC,KAAK,iBAAiB,KAAK,cAAc;AAAA,EAEjD;AAAA;AAAA;AAAA;AAAA,EAKQ,YAAkB;AACtB,SAAK,IAAI,UAAU,GAAG,GAAG,KAAK,OAAO,OAAO,KAAK,OAAO,MAAM,GAC9D,KAAK,OAAO,QAAQ,GACpB,KAAK,OAAO,SAAS,GAErB,KAAK,eAAe,QACpB,KAAK,eAAe,QAGhB,KAAK,IAAI,mBACT,KAAK,IAAI,eAAe,WAAW,QAAQ,IAC3C,KAAK,IAAI,eAAe,YAAY,QAAQ,IACxC,KAAK,IAAI,eAAe,yBAAsB,IAAI,eAAe,gBAAgB,UAAU,MAGnG,KAAK,IAAI,SAAS,eAAe,QAAQ,IAEzC,KAAK,iBAAiB,KAAK,cAAc;AAAA,EAC7C;AAAA;AAAA;AAAA;AAAA,EAKQ,aAAmB;AACvB,QAAI,CAAC,KAAK,cAAc;AACpB,WAAK,aAAa,OAAOC,GAAsB;AAC/C;AAAA,IACJ;AACA,UAAMC,IAAO,SAAS,cAAc,GAAG,GACjCC,IAAe,KAAK,IAAI,SAAS,eAAe,QAAQ,CAAC,GACzDC,IAAWD,IAAeA,EAAa,KAAK,QAAQ,aAAa,EAAE,IAAI;AAC7E,IAAAD,EAAK,WAAW,GAAGE,CAAQ,eAC3BF,EAAK,OAAO,KAAK,OAAO,UAAU,WAAW,GAC7CA,EAAK,MAAA;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA,EAOQ,oBAA0B;AAC9B,SAAK,IAAI,SAAS,eAAe,iBAAiB,UAAU,CAAC,MAAa,KAAK,WAAW,CAAC,CAAC,GAGxF,KAAK,IAAI,gBACT,KAAK,IAAI,aAAa,eAAe,iBAAiB,SAAS,MAAM,KAAK,gBAAgB,KAAK;AAAA,MAAiB;AAAA;AAAA,IAAA,CAAgB,GAGpI,KAAK,IAAI,SAAS,iBAAiB,iBAAiB,SAAS,MAAM,KAAK,aAAa,GACrF,KAAK,IAAI,SAAS,kBAAkB,iBAAiB,SAAS,MAAM,KAAK,WAAW,GACpF,KAAK,IAAI,SAAS,WAAW,iBAAiB,SAAS,MAAM,KAAK,YAAY;AAAA,EAClF;AAAA;AAAA;AAAA;AAAA;AAAA,EAOQ,mBAAyB;AAE7B,QAAI,KAAK,IAAI,gBAAgB;AACzB,YAAMG,IAAe,IAAIC,EAAa,KAAK,IAAI,gBAAgB;AAAA,QAC3D,WAAW,KAAK,IAAI,SAAS;AAAA,QAC7B,QAAQ,KAAK;AAAA,QACb,KAAK,KAAK;AAAA,QAEV,iBAAiB,MAAM,KAAK;AAAA,MAAA,CAC/B;AACD,WAAK,QAAQ,IAAI,UAAmBD,CAAY,GAChD,KAAK,iBAAiB;AAAA,IAC1B;AAGA,QAAI,KAAK,IAAI,gBAAgB,KAAK,OAAO,SAAS,MAAM;AACpD,YAAME,IAAa,IAAIC,EAAW,KAAK,IAAI,cAAc;AAAA,QACrD,QAAQ,KAAK;AAAA,QACb,KAAK,KAAK;AAAA,QACV,YAAY,KAAK,OAAO,QAAQ,KAAK;AAAA,QACrC,qBAAqB,KAAK,OAAO,QAAQ,KAAK;AAAA,QAC9C,eAAe,MAAM,KAAK,QAAA;AAAA,QAC1B,iBAAiB,MAAM,KAAK;AAAA,QAC5B,eAAe,CAACC,MAA4B,KAAK,mBAAmBA,CAAe;AAAA,MAAA,CACtF;AAED,WAAK,QAAQ,IAAI,QAAiBF,CAAU;AAAA,IAChD;AAGA,SAAK,QAAQ,QAAQ,CAACP,MAAWA,EAAO,MAAM,GAC9C,QAAQ,IAAI,KAAK,OAAO,GAGxB,KAAK,iBAAiB,KAAK,cAAc;AAAA,EAC7C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOQ,iBAAiBU,GAA+B;AACpD,SAAK,eAAeA;AAEpB,UAAMC,IAAiB,KAAK,IAAI,SAAS,UAAU,aAC7CC,IAAkB,KAAK,IAAI,SAAS,UAAU,cAC9CC,IAAQ,KAAK,IAAIF,IAAiBD,EAAM,OAAOE,IAAkBF,EAAM,MAAM,GAE7EI,IAAQJ,EAAM,QAAQG,GACtBE,IAAQL,EAAM,SAASG;AAE7B,SAAK,OAAO,QAAQC,GACpB,KAAK,OAAO,SAASC,GAErB,KAAK,QAAA,GAED,KAAK,IAAI,mBACT,KAAK,IAAI,eAAe,WAAW,QAAQ,KAAK,MAAMD,CAAK,EAAE,SAAA,GAC7D,KAAK,IAAI,eAAe,YAAY,QAAQ,KAAK,MAAMC,CAAK,EAAE,SAAA;AAAA,EAEtE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASQ,iBAAiBC,GAAqC;AAC1D,QAAIC,IAAsBD;AAS1B,IALI,KAAK,qBAAqBA,KAAcA,MAAe,KAAK,mBAC5DC,IAAsB,KAAK,iBAI3B,KAAK,qBAAqBA,MAI9B,KAAK,mBAAmBA,GAExB,KAAK,QAAQ,QAAQ,CAACjB,GAAQkB,MAAS;AACnC,MAAIA,MAAS,KAAK,mBACdlB,EAAO,SAAA,IAEPA,EAAO,WAAA;AAAA,IAEf,CAAC,GACD,KAAK,QAAA;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASQ,WAAWmB,GAAoB;AAEnC,QAAI;AAEA,YAAMC,IADSD,EAAM,OACD,QAAQ,CAAC;AAC7B,UAAI,CAACC;AACD;AAGJ,MAAAC,EAAaD,GAAM,KAAK,OAAO,iBAAiB,CAAC;AAEjD,YAAME,IAAS,IAAI,WAAA;AACnB,MAAAA,EAAO,SAAS,CAACC,MAAM;AACnB,cAAMC,IAAM,IAAI,MAAA;AAChB,QAAAA,EAAI,SAAS,MAAM;AACf,cAAI;AACA,iBAAK,eAAeA,GACpB,KAAK,eAAeA,GAEpB,KAAK,iBAAiBA,CAAG;AAAA,UAC7B,SAASC,GAAO;AACZ,iBAAK,aAAa,OAAOA,CAAc;AAAA,UAC3C;AAAA,QACJ,GACAD,EAAI,UAAU,MAAM;AAChB,eAAK,aAAa,OAAOE,EAAqB,2BAA2B,CAAC;AAAA,QAC9E,GACAF,EAAI,MAAMD,EAAE,OAAQ;AAAA,MACxB,GACAD,EAAO,UAAU,MAAM;AACnB,aAAK,aAAa,OAAOI,EAAqB,qCAAqC,CAAC;AAAA,MACxF,GACAJ,EAAO,cAAcF,CAAI;AAAA,IAC7B,SAASK,GAAO;AACZ,WAAK,aAAa,OAAOA,CAAc;AAAA,IAC3C;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOQ,mBAAmBhB,GAA+B;AACtD,UAAMkB,IAAS,IAAI,MAAA;AACnB,IAAAA,EAAO,SAAS,MAAM;AAClB,WAAK,eAAeA,GAEpB,KAAK,iBAAiB,KAAK,cAAc,GAEzC,KAAK,iBAAiBA,CAAM;AAAA,IAChC,GACAA,EAAO,MAAMlB;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQQ,UAAgB;AAGpB,IAFA,KAAK,IAAI,UAAU,GAAG,GAAG,KAAK,OAAO,OAAO,KAAK,OAAO,MAAM,GAEzD,KAAK,iBAGV,KAAK,IAAI,UAAU,KAAK,cAAc,GAAG,GAAG,KAAK,aAAa,OAAO,KAAK,aAAa,QAAQ,GAAG,GAAG,KAAK,OAAO,OAAO,KAAK,OAAO,MAAM,GAEtI,KAAK,oBACgB,KAAK,QAAQ,IAAI,KAAK,gBAAgB,GAE7C,cAAA;AAAA,EAEtB;AACJ;"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { CanvicoEditor } from './CanvicoEditor.js';
+export * from './types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,cAAc,YAAY,CAAC"}

package/dist/index.js

@@ -0,0 +1,5 @@
+import { CanvicoEditor as i } from "./CanvicoEditor.js";
+export {
+  i as CanvicoEditor
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/modules/BaseModule.d.ts

@@ -0,0 +1,56 @@
+import { IModule, ModuleEventHandler } from '../types.js';
+/**
+ * Base class for all editor modules. It provides a centralized way to manage
+ * event listeners, ensuring they are properly cleaned up when a module is destroyed.
+ */
+export declare abstract class BaseModule implements IModule {
+    /** The unique name of the module (e.g., 'crop', 'resize'). */
+    private readonly name;
+    /**
+     * Stores all registered event listeners for this module.
+     * Each entry contains the element, event type, and the handler function,
+     * allowing for easy removal in the `destroy` method.
+     */
+    protected eventHandlers: Array<{
+        element: HTMLElement;
+        type: string;
+        handler: ModuleEventHandler;
+    }>;
+    /**
+     * @param name - The unique name for the module.
+     */
+    constructor(name: string);
+    /**
+     * Initializes the module. Each module must implement this method
+     * to register its necessary event listeners using the `addEventListener` helper.
+     */
+    abstract init(): void;
+    /**
+     * Activates the module, enabling its specific functionality.
+     * Each module must implement this method.
+     */
+    abstract activate(): void;
+    /**
+     * Deactivates the module, disabling its functionality and cleaning up its active state.
+     * Each module must implement this method.
+     */
+    abstract deactivate(): void;
+    /**
+     * Returns the unique name of the module.
+     * @returns The name of the module.
+     */
+    getName(): string;
+    /**
+     * Cleans up all resources used by the module.
+     * This method iterates over all registered event listeners and removes them.
+     */
+    destroy(): void;
+    /**
+     * A helper method to attach an event listener to an element and track it for later removal.
+     * @param el The element to attach the listener to (e.g., HTMLElement, HTMLInputElement).
+     * @param type The event name (e.g., "click", "mousedown", "input").
+     * @param handler The event handler function.
+     */
+    protected addEventListener(el: HTMLElement, type: string, handler: ModuleEventHandler): void;
+}
+//# sourceMappingURL=BaseModule.d.ts.map

package/dist/modules/BaseModule.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseModule.d.ts","sourceRoot":"","sources":["../../src/modules/BaseModule.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAE/D;;;GAGG;AACH,8BAAsB,UAAW,YAAW,OAAO;IAC/C,8DAA8D;IAC9D,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAS;IAC9B;;;;OAIG;IACH,SAAS,CAAC,aAAa,EAAE,KAAK,CAAC;QAC3B,OAAO,EAAE,WAAW,CAAC;QACrB,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,EAAE,kBAAkB,CAAC;KAC/B,CAAC,CAAM;IAER;;OAEG;gBACS,IAAI,EAAE,MAAM;IAIxB;;;OAGG;aACa,IAAI,IAAI,IAAI;IAE5B;;;OAGG;aACa,QAAQ,IAAI,IAAI;IAEhC;;;OAGG;aACa,UAAU,IAAI,IAAI;IAElC;;;OAGG;IACI,OAAO,IAAI,MAAM;IAIxB;;;OAGG;IACI,OAAO,IAAI,IAAI;IAOtB;;;;;OAKG;IACH,SAAS,CAAC,gBAAgB,CAAC,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,kBAAkB,GAAG,IAAI;CAI/F"}

package/dist/modules/BaseModule.js

@@ -0,0 +1,45 @@
+class r {
+  /** The unique name of the module (e.g., 'crop', 'resize'). */
+  name;
+  /**
+   * Stores all registered event listeners for this module.
+   * Each entry contains the element, event type, and the handler function,
+   * allowing for easy removal in the `destroy` method.
+   */
+  eventHandlers = [];
+  /**
+   * @param name - The unique name for the module.
+   */
+  constructor(e) {
+    this.name = e;
+  }
+  /**
+   * Returns the unique name of the module.
+   * @returns The name of the module.
+   */
+  getName() {
+    return this.name;
+  }
+  /**
+   * Cleans up all resources used by the module.
+   * This method iterates over all registered event listeners and removes them.
+   */
+  destroy() {
+    this.eventHandlers.forEach(({ element: e, type: t, handler: n }) => {
+      e.removeEventListener(t, n);
+    }), this.eventHandlers = [];
+  }
+  /**
+   * A helper method to attach an event listener to an element and track it for later removal.
+   * @param el The element to attach the listener to (e.g., HTMLElement, HTMLInputElement).
+   * @param type The event name (e.g., "click", "mousedown", "input").
+   * @param handler The event handler function.
+   */
+  addEventListener(e, t, n) {
+    e.addEventListener(t, n), this.eventHandlers.push({ element: e, type: t, handler: n });
+  }
+}
+export {
+  r as BaseModule
+};
+//# sourceMappingURL=BaseModule.js.map

package/dist/modules/BaseModule.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseModule.js","sources":["../../src/modules/BaseModule.ts"],"sourcesContent":["import type { IModule, ModuleEventHandler } from \"../types.js\";\r\n\r\n/**\r\n * Base class for all editor modules. It provides a centralized way to manage\r\n * event listeners, ensuring they are properly cleaned up when a module is destroyed.\r\n */\r\nexport abstract class BaseModule implements IModule {\r\n    /** The unique name of the module (e.g., 'crop', 'resize'). */\r\n    private readonly name: string;\r\n    /**\r\n     * Stores all registered event listeners for this module.\r\n     * Each entry contains the element, event type, and the handler function,\r\n     * allowing for easy removal in the `destroy` method.\r\n     */\r\n    protected eventHandlers: Array<{\r\n        element: HTMLElement;\r\n        type: string;\r\n        handler: ModuleEventHandler;\r\n    }> = [];\r\n\r\n    /**\r\n     * @param name - The unique name for the module.\r\n     */\r\n    constructor(name: string) {\r\n        this.name = name;\r\n    }\r\n\r\n    /**\r\n     * Initializes the module. Each module must implement this method\r\n     * to register its necessary event listeners using the `addEventListener` helper.\r\n     */\r\n    public abstract init(): void;\r\n\r\n    /**\r\n     * Activates the module, enabling its specific functionality.\r\n     * Each module must implement this method.\r\n     */\r\n    public abstract activate(): void;\r\n\r\n    /**\r\n     * Deactivates the module, disabling its functionality and cleaning up its active state.\r\n     * Each module must implement this method.\r\n     */\r\n    public abstract deactivate(): void;\r\n\r\n    /**\r\n     * Returns the unique name of the module.\r\n     * @returns The name of the module.\r\n     */\r\n    public getName(): string {\r\n        return this.name;\r\n    }\r\n\r\n    /**\r\n     * Cleans up all resources used by the module.\r\n     * This method iterates over all registered event listeners and removes them.\r\n     */\r\n    public destroy(): void {\r\n        this.eventHandlers.forEach(({ element, type, handler }) => {\r\n            element.removeEventListener(type, handler);\r\n        });\r\n        this.eventHandlers = [];\r\n    }\r\n\r\n    /**\r\n     * A helper method to attach an event listener to an element and track it for later removal.\r\n     * @param el The element to attach the listener to (e.g., HTMLElement, HTMLInputElement).\r\n     * @param type The event name (e.g., \"click\", \"mousedown\", \"input\").\r\n     * @param handler The event handler function.\r\n     */\r\n    protected addEventListener(el: HTMLElement, type: string, handler: ModuleEventHandler): void {\r\n        el.addEventListener(type, handler);\r\n        this.eventHandlers.push({ element: el, type, handler });\r\n    }\r\n}\r\n"],"names":["BaseModule","name","element","type","handler","el"],"mappings":"AAMO,MAAeA,EAA8B;AAAA;AAAA,EAE/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMP,gBAIL,CAAA;AAAA;AAAA;AAAA;AAAA,EAKL,YAAYC,GAAc;AACtB,SAAK,OAAOA;AAAA,EAChB;AAAA;AAAA;AAAA;AAAA;AAAA,EAwBO,UAAkB;AACrB,WAAO,KAAK;AAAA,EAChB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMO,UAAgB;AACnB,SAAK,cAAc,QAAQ,CAAC,EAAE,SAAAC,GAAS,MAAAC,GAAM,SAAAC,QAAc;AACvD,MAAAF,EAAQ,oBAAoBC,GAAMC,CAAO;AAAA,IAC7C,CAAC,GACD,KAAK,gBAAgB,CAAA;AAAA,EACzB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQU,iBAAiBC,GAAiBF,GAAcC,GAAmC;AACzF,IAAAC,EAAG,iBAAiBF,GAAMC,CAAO,GACjC,KAAK,cAAc,KAAK,EAAE,SAASC,GAAI,MAAAF,GAAM,SAAAC,GAAS;AAAA,EAC1D;AACJ;"}