canvico-editor 1.0.2 → 2.0.0

package/dist/modules/ResizeModule.js

@@ -1,16 +1,10 @@
-import { ErrorHandler as v } from "../utils/error-handler.js";
-import { BaseModule as l } from "./BaseModule.js";
-class R extends l {
+import { BaseModule as n } from "./BaseModule.js";
+class o extends n {
   // --- PROPERTIES ---
   widthInput;
   heightInput;
   lockAspectRatio;
-  container;
-  canvas;
-  ctx;
-  getCurrentImage;
-  onRequestRedraw;
-  onCanvasResized;
+  state;
   errorHandler;
   isActive = !1;
   /**
@@ -18,8 +12,8 @@ class R extends l {
    * @param elements - The DOM elements used by the module.
    * @param options - Configuration and dependencies for the module.
    */
-  constructor(e, t) {
-    super("resize"), this.widthInput = e.widthInput, this.heightInput = e.heightInput, this.lockAspectRatio = e.lockAspectRatio, this.container = t.container, this.canvas = t.canvas, this.ctx = t.ctx, this.getCurrentImage = t.getCurrentImage, this.onRequestRedraw = t.onRequestRedraw, this.onCanvasResized = t.onCanvasResized, this.errorHandler = new v();
+  constructor(s, t) {
+    super("resize"), this.widthInput = s.widthInput, this.heightInput = s.heightInput, this.lockAspectRatio = s.lockAspectRatio, this.state = t.state, this.errorHandler = t.errorHandler;
   }
   /**
    * Initializes the module by attaching event listeners to the input elements.
@@ -32,6 +26,11 @@ class R extends l {
    */
   activate() {
     this.isActive = !0;
+    const s = this.state.getCurrent();
+    if (!s)
+      return;
+    const t = this.state.getResizeState(), i = t.width > 0 ? t.width : s.width, e = t.height > 0 ? t.height : s.height;
+    this.widthInput.value = i.toString(), this.heightInput.value = e.toString(), this.lockAspectRatio && (this.lockAspectRatio.checked = t.lockAspectRatio);
   }
   /**
    * Deactivates the resize functionality.
@@ -40,43 +39,36 @@ class R extends l {
     this.isActive = !1;
   }
   /**
-   * Central function to read inputs, calculate dimensions, and update the canvas.
+   * Central function to read inputs, calculate dimensions, and update output state.
    * @param changedDim - The dimension ('width' or 'height') that initiated the change. If undefined, it's assumed the change came from the aspect ratio toggle.
    */
-  _updateCanvasAndInputs(e) {
+  _updateCanvasAndInputs(s) {
     try {
       if (!this.isActive) return;
-      const t = this.getCurrentImage();
+      const t = this.state.getCurrent();
       if (!t)
         return;
-      let i = parseInt(this.widthInput.value, 10) || 0, a = parseInt(this.heightInput.value, 10) || 0;
+      let i = Number.parseInt(this.widthInput.value, 10) || 0, e = Number.parseInt(this.heightInput.value, 10) || 0;
       if (this.lockAspectRatio?.checked) {
-        const s = t.width / t.height;
-        (e || "width") === "width" ? (a = i > 0 ? Math.round(i / s) : 0, this.heightInput.value = a.toString()) : (i = a > 0 ? Math.round(a * s) : 0, this.widthInput.value = i.toString());
+        const h = t.width / t.height;
+        if (s === "width")
+          e = i > 0 ? Math.round(i / h) : 0, this.heightInput.value = e.toString();
+        else if (s === "height")
+          i = e > 0 ? Math.round(e * h) : 0, this.widthInput.value = i.toString();
+        else {
+          const a = e > 0 ? i / e : 0;
+          Math.abs(a - h) > 0.01 && (e = i > 0 ? Math.round(i / h) : 0, this.heightInput.value = e.toString());
+        }
       }
-      if (i <= 0 || a <= 0)
+      if (i <= 0 || e <= 0)
         return;
-      this._redrawCanvas(t, i, a);
+      this.state.setResizeState({ width: i, height: e, lockAspectRatio: !!this.lockAspectRatio?.checked });
     } catch (t) {
-      this.errorHandler.handle(t);
+      this.errorHandler.handle(t, { source: "resize", operation: "update-canvas-and-inputs" });
     }
   }
-  /**
-   * Handles the actual resizing and redrawing of the canvas.
-   * @param img - The image to be redrawn.
-   * @param newWidth - The target width for the image.
-   * @param newHeight - The target height for the image.
-   */
-  _redrawCanvas(e, t, i) {
-    const a = this.canvas.width, s = this.canvas.height, r = this.container.clientWidth, d = this.container.clientHeight, c = Math.min(r / t, d / i, 1), n = t * c, h = i * c;
-    if (this.canvas.width = n, this.canvas.height = h, a > 0 && s > 0 && this.onCanvasResized) {
-      const o = n / a, u = h / s;
-      this.onCanvasResized(o, u);
-    }
-    this.ctx.clearRect(0, 0, n, h), this.ctx.drawImage(e, 0, 0, e.width, e.height, 0, 0, n, h), this.onRequestRedraw?.();
-  }
 }
 export {
-  R as ResizeModule
+  o as ResizeModule
 };
 //# sourceMappingURL=ResizeModule.js.map

package/dist/modules/ResizeModule.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResizeModule.js","sources":["../../src/modules/ResizeModule.ts"],"sourcesContent":["import { ErrorHandler } from \"./../utils/error-handler.js\";\r\nimport type { ResizeDOMElements } from \"../utils/dom-manager.js\";\r\nimport { BaseModule } from \"./BaseModule.js\";\r\n\r\n/**\r\n * Configuration options for the ResizeModule.\r\n */\r\nexport interface ResizeModuleOptions {\r\n    container: HTMLElement;\r\n    canvas: HTMLCanvasElement;\r\n    ctx: CanvasRenderingContext2D;\r\n    getCurrentImage: () => HTMLImageElement | undefined;\r\n    onRequestRedraw?: () => void;\r\n    onCanvasResized?: (scaleX: number, scaleY: number) => void;\r\n}\r\n\r\n/**\r\n * A module responsible for handling image and canvas resizing based on user input.\r\n * It maintains aspect ratio if requested and ensures the canvas fits within its container.\r\n */\r\nexport class ResizeModule extends BaseModule {\r\n    // --- PROPERTIES ---\r\n\r\n    private widthInput: HTMLInputElement;\r\n    private heightInput: HTMLInputElement;\r\n    private lockAspectRatio?: HTMLInputElement;\r\n\r\n    private container: HTMLElement;\r\n    private canvas: HTMLCanvasElement;\r\n    private ctx: CanvasRenderingContext2D;\r\n    private getCurrentImage: () => HTMLImageElement | undefined;\r\n    private onRequestRedraw?: () => void;\r\n    private onCanvasResized?: (scaleX: number, scaleY: number) => void;\r\n\r\n    private errorHandler: ErrorHandler;\r\n    private isActive: boolean = false;\r\n\r\n    /**\r\n     * Creates an instance of the ResizeModule.\r\n     * @param elements - The DOM elements used by the module.\r\n     * @param options - Configuration and dependencies for the module.\r\n     */\r\n    constructor(elements: ResizeDOMElements, options: ResizeModuleOptions) {\r\n        super(\"resize\");\r\n        this.widthInput = elements.widthInput;\r\n        this.heightInput = elements.heightInput;\r\n        this.lockAspectRatio = elements.lockAspectRatio;\r\n\r\n        this.container = options.container;\r\n        this.canvas = options.canvas;\r\n        this.ctx = options.ctx;\r\n        this.getCurrentImage = options.getCurrentImage;\r\n        this.onRequestRedraw = options.onRequestRedraw;\r\n        this.onCanvasResized = options.onCanvasResized;\r\n\r\n        this.errorHandler = new ErrorHandler();\r\n    }\r\n\r\n    /**\r\n     * Initializes the module by attaching event listeners to the input elements.\r\n     */\r\n    public init(): void {\r\n        this.addEventListener(this.widthInput, \"input\", () => this._updateCanvasAndInputs(\"width\"));\r\n        this.addEventListener(this.heightInput, \"input\", () => this._updateCanvasAndInputs(\"height\"));\r\n        if (this.lockAspectRatio) {\r\n            this.addEventListener(this.lockAspectRatio, \"change\", () => this._updateCanvasAndInputs());\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Activates the resize functionality.\r\n     */\r\n    public activate(): void {\r\n        this.isActive = true;\r\n    }\r\n\r\n    /**\r\n     * Deactivates the resize functionality.\r\n     */\r\n    public deactivate(): void {\r\n        this.isActive = false;\r\n    }\r\n\r\n    /**\r\n     * Central function to read inputs, calculate dimensions, and update the canvas.\r\n     * @param changedDim - The dimension ('width' or 'height') that initiated the change. If undefined, it's assumed the change came from the aspect ratio toggle.\r\n     */\r\n    private _updateCanvasAndInputs(changedDim?: \"width\" | \"height\"): void {\r\n        try {\r\n            if (!this.isActive) return;\r\n\r\n            const img = this.getCurrentImage();\r\n            if (!img) {\r\n                return;\r\n            }\r\n\r\n            let w = parseInt(this.widthInput.value, 10) || 0;\r\n            let h = parseInt(this.heightInput.value, 10) || 0;\r\n\r\n            if (this.lockAspectRatio?.checked) {\r\n                const ratio = img.width / img.height;\r\n\r\n                /**\r\n                 * If not specified which dimension changed (e.g., from the aspect ratio toggle),\r\n                 * default to width as the source of truth.\r\n                 */\r\n                const sourceDim = changedDim || \"width\";\r\n\r\n                if (sourceDim === \"width\") {\r\n                    h = w > 0 ? Math.round(w / ratio) : 0;\r\n                    this.heightInput.value = h.toString();\r\n                } else {\r\n                    // sourceDim === \"height\"\r\n                    w = h > 0 ? Math.round(h * ratio) : 0;\r\n                    this.widthInput.value = w.toString();\r\n                }\r\n            }\r\n\r\n            if (w <= 0 || h <= 0) {\r\n                return;\r\n            }\r\n\r\n            this._redrawCanvas(img, w, h);\r\n        } catch (error) {\r\n            this.errorHandler.handle(error as Error);\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Handles the actual resizing and redrawing of the canvas.\r\n     * @param img - The image to be redrawn.\r\n     * @param newWidth - The target width for the image.\r\n     * @param newHeight - The target height for the image.\r\n     */\r\n    private _redrawCanvas(img: HTMLImageElement, newWidth: number, newHeight: number): void {\r\n        const oldCanvasWidth = this.canvas.width;\r\n        const oldCanvasHeight = this.canvas.height;\r\n\r\n        // Calculate the scale to fit the canvas to the container\r\n        const containerWidth = this.container.clientWidth;\r\n        const containerHeight = this.container.clientHeight;\r\n        const scaleToFitContainer = Math.min(containerWidth / newWidth, containerHeight / newHeight, 1);\r\n\r\n        const finalCanvasWidth = newWidth * scaleToFitContainer;\r\n        const finalCanvasHeight = newHeight * scaleToFitContainer;\r\n\r\n        // Set the new canvas size\r\n        this.canvas.width = finalCanvasWidth;\r\n        this.canvas.height = finalCanvasHeight;\r\n\r\n        // Notify other modules about the resize\r\n        if (oldCanvasWidth > 0 && oldCanvasHeight > 0 && this.onCanvasResized) {\r\n            const actualScaleX = finalCanvasWidth / oldCanvasWidth;\r\n            const actualScaleY = finalCanvasHeight / oldCanvasHeight;\r\n            this.onCanvasResized(actualScaleX, actualScaleY);\r\n        }\r\n\r\n        // Clear and redraw the image at the new size\r\n        this.ctx.clearRect(0, 0, finalCanvasWidth, finalCanvasHeight);\r\n        this.ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, finalCanvasWidth, finalCanvasHeight);\r\n\r\n        // Request a redraw of overlays (e.g., crop handles, text)\r\n        this.onRequestRedraw?.();\r\n    }\r\n}\r\n"],"names":["ResizeModule","BaseModule","elements","options","ErrorHandler","changedDim","img","w","h","ratio","error","newWidth","newHeight","oldCanvasWidth","oldCanvasHeight","containerWidth","containerHeight","scaleToFitContainer","finalCanvasWidth","finalCanvasHeight","actualScaleX","actualScaleY"],"mappings":"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"}
+{"version":3,"file":"ResizeModule.js","sources":["../../src/modules/ResizeModule.ts"],"sourcesContent":["import { ErrorHandler } from \"./../utils/error-handler.js\";\r\nimport type { ResizeDOMElements } from \"../utils/dom-manager.js\";\r\nimport { CanvasState } from \"../state/CanvasState.js\";\r\nimport { BaseModule } from \"./BaseModule.js\";\r\n\r\n/**\r\n * Configuration options for the ResizeModule.\r\n */\r\nexport interface ResizeModuleOptions {\r\n    state: CanvasState;\r\n    errorHandler: ErrorHandler;\r\n}\r\n\r\n/**\r\n * A module responsible for handling output image dimensions based on user input.\r\n * The editor computes preview canvas size separately from this module.\r\n */\r\nexport class ResizeModule extends BaseModule {\r\n    // --- PROPERTIES ---\r\n\r\n    private readonly widthInput: HTMLInputElement;\r\n    private readonly heightInput: HTMLInputElement;\r\n    private readonly lockAspectRatio?: HTMLInputElement;\r\n\r\n    private readonly state: CanvasState;\r\n\r\n    private readonly errorHandler: ErrorHandler;\r\n    private isActive = false;\r\n\r\n    /**\r\n     * Creates an instance of the ResizeModule.\r\n     * @param elements - The DOM elements used by the module.\r\n     * @param options - Configuration and dependencies for the module.\r\n     */\r\n    constructor(elements: ResizeDOMElements, options: ResizeModuleOptions) {\r\n        super(\"resize\");\r\n        this.widthInput = elements.widthInput;\r\n        this.heightInput = elements.heightInput;\r\n        this.lockAspectRatio = elements.lockAspectRatio;\r\n\r\n        this.state = options.state;\r\n        this.errorHandler = options.errorHandler;\r\n    }\r\n\r\n    /**\r\n     * Initializes the module by attaching event listeners to the input elements.\r\n     */\r\n    public init(): void {\r\n        this.addEventListener(this.widthInput, \"input\", () => this._updateCanvasAndInputs(\"width\"));\r\n        this.addEventListener(this.heightInput, \"input\", () => this._updateCanvasAndInputs(\"height\"));\r\n        if (this.lockAspectRatio) {\r\n            this.addEventListener(this.lockAspectRatio, \"change\", () => this._updateCanvasAndInputs());\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Activates the resize functionality.\r\n     */\r\n    public activate(): void {\r\n        this.isActive = true;\r\n\r\n        const img = this.state.getCurrent();\r\n        if (!img) {\r\n            return;\r\n        }\r\n\r\n        const resizeState = this.state.getResizeState();\r\n        const currentWidth = resizeState.width > 0 ? resizeState.width : img.width;\r\n        const currentHeight = resizeState.height > 0 ? resizeState.height : img.height;\r\n\r\n        this.widthInput.value = currentWidth.toString();\r\n        this.heightInput.value = currentHeight.toString();\r\n        if (this.lockAspectRatio) {\r\n            this.lockAspectRatio.checked = resizeState.lockAspectRatio;\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Deactivates the resize functionality.\r\n     */\r\n    public deactivate(): void {\r\n        this.isActive = false;\r\n    }\r\n\r\n    /**\r\n     * Central function to read inputs, calculate dimensions, and update output state.\r\n     * @param changedDim - The dimension ('width' or 'height') that initiated the change. If undefined, it's assumed the change came from the aspect ratio toggle.\r\n     */\r\n    private _updateCanvasAndInputs(changedDim?: \"width\" | \"height\"): void {\r\n        try {\r\n            if (!this.isActive) return;\r\n\r\n            const img = this.state.getCurrent();\r\n            if (!img) {\r\n                return;\r\n            }\r\n\r\n            let w = Number.parseInt(this.widthInput.value, 10) || 0;\r\n            let h = Number.parseInt(this.heightInput.value, 10) || 0;\r\n\r\n            if (this.lockAspectRatio?.checked) {\r\n                // Keep ratio in output/document space based on the current image dimensions.\r\n                // Preview canvas size may differ because it is fit to the container.\r\n                const ratio = img.width / img.height;\r\n\r\n                // If an input is being changed while the lock is on, that input is the source of truth.\r\n                if (changedDim === \"width\") {\r\n                    h = w > 0 ? Math.round(w / ratio) : 0;\r\n                    this.heightInput.value = h.toString();\r\n                } else if (changedDim === \"height\") {\r\n                    w = h > 0 ? Math.round(h * ratio) : 0;\r\n                    this.widthInput.value = w.toString();\r\n                } else {\r\n                    // This block is for when the checkbox is just checked.\r\n                    // We check if the current dimensions are proportional. If not, we enforce the ratio.\r\n                    // We use the current width as the source of truth and recalculate the height,\r\n                    // as requested in the user scenario.\r\n                    const currentRatio = h > 0 ? w / h : 0;\r\n                    // Using a small tolerance for floating point comparisons\r\n                    if (Math.abs(currentRatio - ratio) > 0.01) {\r\n                        h = w > 0 ? Math.round(w / ratio) : 0;\r\n                        this.heightInput.value = h.toString();\r\n                    }\r\n                }\r\n            }\r\n\r\n            if (w <= 0 || h <= 0) {\r\n                return;\r\n            }\r\n\r\n            this.state.setResizeState({ width: w, height: h, lockAspectRatio: !!this.lockAspectRatio?.checked });\r\n        } catch (error) {\r\n            this.errorHandler.handle(error, { source: \"resize\", operation: \"update-canvas-and-inputs\" });\r\n        }\r\n    }\r\n}\r\n"],"names":["ResizeModule","BaseModule","elements","options","img","resizeState","currentWidth","currentHeight","changedDim","w","h","ratio","currentRatio","error"],"mappings":";AAiBO,MAAMA,UAAqBC,EAAW;AAAA;AAAA,EAGxB;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EAEA;AAAA,EACT,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOnB,YAAYC,GAA6BC,GAA8B;AACnE,UAAM,QAAQ,GACd,KAAK,aAAaD,EAAS,YAC3B,KAAK,cAAcA,EAAS,aAC5B,KAAK,kBAAkBA,EAAS,iBAEhC,KAAK,QAAQC,EAAQ,OACrB,KAAK,eAAeA,EAAQ;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA,EAKO,OAAa;AAChB,SAAK,iBAAiB,KAAK,YAAY,SAAS,MAAM,KAAK,uBAAuB,OAAO,CAAC,GAC1F,KAAK,iBAAiB,KAAK,aAAa,SAAS,MAAM,KAAK,uBAAuB,QAAQ,CAAC,GACxF,KAAK,mBACL,KAAK,iBAAiB,KAAK,iBAAiB,UAAU,MAAM,KAAK,wBAAwB;AAAA,EAEjG;AAAA;AAAA;AAAA;AAAA,EAKO,WAAiB;AACpB,SAAK,WAAW;AAEhB,UAAMC,IAAM,KAAK,MAAM,WAAA;AACvB,QAAI,CAACA;AACD;AAGJ,UAAMC,IAAc,KAAK,MAAM,eAAA,GACzBC,IAAeD,EAAY,QAAQ,IAAIA,EAAY,QAAQD,EAAI,OAC/DG,IAAgBF,EAAY,SAAS,IAAIA,EAAY,SAASD,EAAI;AAExE,SAAK,WAAW,QAAQE,EAAa,SAAA,GACrC,KAAK,YAAY,QAAQC,EAAc,SAAA,GACnC,KAAK,oBACL,KAAK,gBAAgB,UAAUF,EAAY;AAAA,EAEnD;AAAA;AAAA;AAAA;AAAA,EAKO,aAAmB;AACtB,SAAK,WAAW;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMQ,uBAAuBG,GAAuC;AAClE,QAAI;AACA,UAAI,CAAC,KAAK,SAAU;AAEpB,YAAMJ,IAAM,KAAK,MAAM,WAAA;AACvB,UAAI,CAACA;AACD;AAGJ,UAAIK,IAAI,OAAO,SAAS,KAAK,WAAW,OAAO,EAAE,KAAK,GAClDC,IAAI,OAAO,SAAS,KAAK,YAAY,OAAO,EAAE,KAAK;AAEvD,UAAI,KAAK,iBAAiB,SAAS;AAG/B,cAAMC,IAAQP,EAAI,QAAQA,EAAI;AAG9B,YAAII,MAAe;AACf,UAAAE,IAAID,IAAI,IAAI,KAAK,MAAMA,IAAIE,CAAK,IAAI,GACpC,KAAK,YAAY,QAAQD,EAAE,SAAA;AAAA,iBACpBF,MAAe;AACtB,UAAAC,IAAIC,IAAI,IAAI,KAAK,MAAMA,IAAIC,CAAK,IAAI,GACpC,KAAK,WAAW,QAAQF,EAAE,SAAA;AAAA,aACvB;AAKH,gBAAMG,IAAeF,IAAI,IAAID,IAAIC,IAAI;AAErC,UAAI,KAAK,IAAIE,IAAeD,CAAK,IAAI,SACjCD,IAAID,IAAI,IAAI,KAAK,MAAMA,IAAIE,CAAK,IAAI,GACpC,KAAK,YAAY,QAAQD,EAAE,SAAA;AAAA,QAEnC;AAAA,MACJ;AAEA,UAAID,KAAK,KAAKC,KAAK;AACf;AAGJ,WAAK,MAAM,eAAe,EAAE,OAAOD,GAAG,QAAQC,GAAG,iBAAiB,CAAC,CAAC,KAAK,iBAAiB,SAAS;AAAA,IACvG,SAASG,GAAO;AACZ,WAAK,aAAa,OAAOA,GAAO,EAAE,QAAQ,UAAU,WAAW,4BAA4B;AAAA,IAC/F;AAAA,EACJ;AACJ;"}

package/dist/modules/TransformModule.d.ts

@@ -0,0 +1,38 @@
+import { TransformDOMElements } from '../utils/dom-manager.js';
+import { CanvasState } from '../state/CanvasState.js';
+import { BaseModule } from './BaseModule.js';
+/**
+ * Configuration options for the TransformModule.
+ */
+export interface TransformModuleOptions {
+    state: CanvasState;
+}
+/**
+ * A module for applying geometric transforms (rotate, flip)
+ * to the current image.
+ */
+export declare class TransformModule extends BaseModule {
+    private readonly rotateInput?;
+    private readonly flipHorizontalButton?;
+    private readonly flipVerticalButton?;
+    private readonly state;
+    private isActive;
+    constructor(elements: TransformDOMElements, options: TransformModuleOptions);
+    init(): void;
+    /**
+     * Activates the module. Captures the current image as the base for transformations.
+     */
+    activate(): void;
+    /**
+     * Deactivates the module.
+     */
+    deactivate(): void;
+    /**
+     * Synchronizes transform controls with the current store state.
+     * Useful when state changes happen outside direct module interactions.
+     */
+    syncControlsWithState(): void;
+    private _readNumber;
+    private _syncControlsWithState;
+}
+//# sourceMappingURL=TransformModule.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TransformModule.d.ts","sourceRoot":"","sources":["../../src/modules/TransformModule.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACnC,KAAK,EAAE,WAAW,CAAC;CACtB;AAED;;;GAGG;AACH,qBAAa,eAAgB,SAAQ,UAAU;IAC3C,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAmB;IAChD,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAAC,CAAoB;IAC1D,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAC,CAAoB;IAExD,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAc;IACpC,OAAO,CAAC,QAAQ,CAAS;gBAEb,QAAQ,EAAE,oBAAoB,EAAE,OAAO,EAAE,sBAAsB;IASpE,IAAI,IAAI,IAAI;IA4BnB;;OAEG;IACI,QAAQ,IAAI,IAAI;IAKvB;;OAEG;IACI,UAAU,IAAI,IAAI;IAIzB;;;OAGG;IACI,qBAAqB,IAAI,IAAI;IAIpC,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,sBAAsB;CAIjC"}

package/dist/modules/TransformModule.js

@@ -0,0 +1,55 @@
+import { BaseModule as e } from "./BaseModule.js";
+class a extends e {
+  rotateInput;
+  flipHorizontalButton;
+  flipVerticalButton;
+  state;
+  isActive = !1;
+  constructor(t, i) {
+    super("transform"), this.state = i.state, this.rotateInput = t.rotateInput, this.flipHorizontalButton = t.flipHorizontalButton, this.flipVerticalButton = t.flipVerticalButton;
+  }
+  init() {
+    this.rotateInput && this.addEventListener(this.rotateInput, "input", () => {
+      this.isActive && this.state.setTransformState({ rotate: this._readNumber(this.rotateInput) });
+    }), this.flipHorizontalButton && this.addEventListener(this.flipHorizontalButton, "click", () => {
+      if (!this.isActive) return;
+      const t = this.state.getTransformState();
+      this.state.setTransformState({ flipH: !t.flipH });
+    }), this.flipVerticalButton && this.addEventListener(this.flipVerticalButton, "click", () => {
+      if (!this.isActive) return;
+      const t = this.state.getTransformState();
+      this.state.setTransformState({ flipV: !t.flipV });
+    });
+  }
+  /**
+   * Activates the module. Captures the current image as the base for transformations.
+   */
+  activate() {
+    this.isActive = !0, this._syncControlsWithState();
+  }
+  /**
+   * Deactivates the module.
+   */
+  deactivate() {
+    this.isActive = !1;
+  }
+  /**
+   * Synchronizes transform controls with the current store state.
+   * Useful when state changes happen outside direct module interactions.
+   */
+  syncControlsWithState() {
+    this._syncControlsWithState();
+  }
+  _readNumber(t) {
+    const i = Number.parseFloat(t.value);
+    return Number.isFinite(i) ? i : 0;
+  }
+  _syncControlsWithState() {
+    const t = this.state.getTransformState();
+    this.rotateInput && (this.rotateInput.value = t.rotate.toString());
+  }
+}
+export {
+  a as TransformModule
+};
+//# sourceMappingURL=TransformModule.js.map

package/dist/modules/TransformModule.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransformModule.js","sources":["../../src/modules/TransformModule.ts"],"sourcesContent":["import type { TransformDOMElements } from \"../utils/dom-manager.js\";\r\nimport { CanvasState } from \"../state/CanvasState.js\";\r\nimport { BaseModule } from \"./BaseModule.js\";\r\n\r\n/**\r\n * Configuration options for the TransformModule.\r\n */\r\nexport interface TransformModuleOptions {\r\n    state: CanvasState;\r\n}\r\n\r\n/**\r\n * A module for applying geometric transforms (rotate, flip)\r\n * to the current image.\r\n */\r\nexport class TransformModule extends BaseModule {\r\n    private readonly rotateInput?: HTMLInputElement;\r\n    private readonly flipHorizontalButton?: HTMLButtonElement;\r\n    private readonly flipVerticalButton?: HTMLButtonElement;\r\n\r\n    private readonly state: CanvasState;\r\n    private isActive = false;\r\n\r\n    constructor(elements: TransformDOMElements, options: TransformModuleOptions) {\r\n        super(\"transform\");\r\n\r\n        this.state = options.state;\r\n        this.rotateInput = elements.rotateInput;\r\n        this.flipHorizontalButton = elements.flipHorizontalButton;\r\n        this.flipVerticalButton = elements.flipVerticalButton;\r\n    }\r\n\r\n    public init(): void {\r\n        // Rotate\r\n        if (this.rotateInput) {\r\n            this.addEventListener(this.rotateInput, \"input\", () => {\r\n                if (!this.isActive) return;\r\n                this.state.setTransformState({ rotate: this._readNumber(this.rotateInput!) });\r\n            });\r\n        }\r\n\r\n        // Flip Horizontal\r\n        if (this.flipHorizontalButton) {\r\n            this.addEventListener(this.flipHorizontalButton, \"click\", () => {\r\n                if (!this.isActive) return;\r\n                const current = this.state.getTransformState();\r\n                this.state.setTransformState({ flipH: !current.flipH });\r\n            });\r\n        }\r\n\r\n        // Flip Vertical\r\n        if (this.flipVerticalButton) {\r\n            this.addEventListener(this.flipVerticalButton, \"click\", () => {\r\n                if (!this.isActive) return;\r\n                const current = this.state.getTransformState();\r\n                this.state.setTransformState({ flipV: !current.flipV });\r\n            });\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Activates the module. Captures the current image as the base for transformations.\r\n     */\r\n    public activate(): void {\r\n        this.isActive = true;\r\n        this._syncControlsWithState();\r\n    }\r\n\r\n    /**\r\n     * Deactivates the module.\r\n     */\r\n    public deactivate(): void {\r\n        this.isActive = false;\r\n    }\r\n\r\n    /**\r\n     * Synchronizes transform controls with the current store state.\r\n     * Useful when state changes happen outside direct module interactions.\r\n     */\r\n    public syncControlsWithState(): void {\r\n        this._syncControlsWithState();\r\n    }\r\n\r\n    private _readNumber(input: HTMLInputElement): number {\r\n        const value = Number.parseFloat(input.value);\r\n        return Number.isFinite(value) ? value : 0;\r\n    }\r\n\r\n    private _syncControlsWithState(): void {\r\n        const current = this.state.getTransformState();\r\n        if (this.rotateInput) this.rotateInput.value = current.rotate.toString();\r\n    }\r\n}\r\n"],"names":["TransformModule","BaseModule","elements","options","current","input","value"],"mappings":";AAeO,MAAMA,UAAwBC,EAAW;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACT,WAAW;AAAA,EAEnB,YAAYC,GAAgCC,GAAiC;AACzE,UAAM,WAAW,GAEjB,KAAK,QAAQA,EAAQ,OACrB,KAAK,cAAcD,EAAS,aAC5B,KAAK,uBAAuBA,EAAS,sBACrC,KAAK,qBAAqBA,EAAS;AAAA,EACvC;AAAA,EAEO,OAAa;AAEhB,IAAI,KAAK,eACL,KAAK,iBAAiB,KAAK,aAAa,SAAS,MAAM;AACnD,MAAK,KAAK,YACV,KAAK,MAAM,kBAAkB,EAAE,QAAQ,KAAK,YAAY,KAAK,WAAY,GAAG;AAAA,IAChF,CAAC,GAID,KAAK,wBACL,KAAK,iBAAiB,KAAK,sBAAsB,SAAS,MAAM;AAC5D,UAAI,CAAC,KAAK,SAAU;AACpB,YAAME,IAAU,KAAK,MAAM,kBAAA;AAC3B,WAAK,MAAM,kBAAkB,EAAE,OAAO,CAACA,EAAQ,OAAO;AAAA,IAC1D,CAAC,GAID,KAAK,sBACL,KAAK,iBAAiB,KAAK,oBAAoB,SAAS,MAAM;AAC1D,UAAI,CAAC,KAAK,SAAU;AACpB,YAAMA,IAAU,KAAK,MAAM,kBAAA;AAC3B,WAAK,MAAM,kBAAkB,EAAE,OAAO,CAACA,EAAQ,OAAO;AAAA,IAC1D,CAAC;AAAA,EAET;AAAA;AAAA;AAAA;AAAA,EAKO,WAAiB;AACpB,SAAK,WAAW,IAChB,KAAK,uBAAA;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKO,aAAmB;AACtB,SAAK,WAAW;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMO,wBAA8B;AACjC,SAAK,uBAAA;AAAA,EACT;AAAA,EAEQ,YAAYC,GAAiC;AACjD,UAAMC,IAAQ,OAAO,WAAWD,EAAM,KAAK;AAC3C,WAAO,OAAO,SAASC,CAAK,IAAIA,IAAQ;AAAA,EAC5C;AAAA,EAEQ,yBAA+B;AACnC,UAAMF,IAAU,KAAK,MAAM,kBAAA;AAC3B,IAAI,KAAK,gBAAa,KAAK,YAAY,QAAQA,EAAQ,OAAO,SAAA;AAAA,EAClE;AACJ;"}

package/dist/state/CanvasState.d.ts

@@ -0,0 +1,34 @@
+import { CanvasAction, CanvasStateChange, CropRect, CropState, EditorMode, ResizeState, TransformState } from './EditorReducer.js';
+export type { CanvasAction, CanvasStateChange, CropHandle, CropRect, CropState, EditorMode, EditorSnapshot, ResizeState, TransformState } from './EditorReducer.js';
+export type ReadonlyResizeState = Readonly<ResizeState>;
+export type ReadonlyTransformState = Readonly<TransformState>;
+export type ReadonlyCropRect = Readonly<CropRect>;
+export type ReadonlyCropState = Readonly<Omit<CropState, "rect">> & {
+    readonly rect: ReadonlyCropRect;
+};
+/**
+ * Store wrapper around the pure reducer.
+ * It keeps listeners and exposes compatibility methods for modules.
+ */
+export declare class CanvasState {
+    private snapshot;
+    private listeners;
+    getInitial(): HTMLImageElement | undefined;
+    getCurrent(): HTMLImageElement | undefined;
+    getMode(): EditorMode;
+    getResizeState(): ReadonlyResizeState;
+    getTransformState(): ReadonlyTransformState;
+    getCropState(): ReadonlyCropState;
+    dispatch(action: CanvasAction): void;
+    setMode(mode: EditorMode): void;
+    setInitial(img: HTMLImageElement): void;
+    setCurrent(img: HTMLImageElement): void;
+    resetToInitial(): void;
+    clear(): void;
+    setResizeState(state: Partial<ResizeState>): void;
+    setTransformState(state: Partial<TransformState>): void;
+    setCropState(state: Partial<CropState>): void;
+    subscribe(listener: (change: CanvasStateChange) => void): () => void;
+    private _notifyListeners;
+}
+//# sourceMappingURL=CanvasState.d.ts.map

package/dist/state/CanvasState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CanvasState.d.ts","sourceRoot":"","sources":["../../src/state/CanvasState.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACR,YAAY,EACZ,iBAAiB,EACjB,QAAQ,EACR,SAAS,EACT,UAAU,EAEV,WAAW,EACX,cAAc,EACjB,MAAM,oBAAoB,CAAC;AAE5B,YAAY,EAAE,YAAY,EAAE,iBAAiB,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,cAAc,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpK,MAAM,MAAM,mBAAmB,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;AACxD,MAAM,MAAM,sBAAsB,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAC;AAC9D,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;AAClD,MAAM,MAAM,iBAAiB,GAAG,QAAQ,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,GAAG;IAAE,QAAQ,CAAC,IAAI,EAAE,gBAAgB,CAAA;CAAE,CAAC;AAExG;;;GAGG;AACH,qBAAa,WAAW;IACpB,OAAO,CAAC,QAAQ,CAAiD;IACjE,OAAO,CAAC,SAAS,CAAkD;IAE5D,UAAU,IAAI,gBAAgB,GAAG,SAAS;IAI1C,UAAU,IAAI,gBAAgB,GAAG,SAAS;IAI1C,OAAO,IAAI,UAAU;IAIrB,cAAc,IAAI,mBAAmB;IAIrC,iBAAiB,IAAI,sBAAsB;IAI3C,YAAY,IAAI,iBAAiB;IAQjC,QAAQ,CAAC,MAAM,EAAE,YAAY,GAAG,IAAI;IASpC,OAAO,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI;IAI/B,UAAU,CAAC,GAAG,EAAE,gBAAgB,GAAG,IAAI;IAIvC,UAAU,CAAC,GAAG,EAAE,gBAAgB,GAAG,IAAI;IAIvC,cAAc,IAAI,IAAI;IAItB,KAAK,IAAI,IAAI;IAIb,cAAc,CAAC,KAAK,EAAE,OAAO,CAAC,WAAW,CAAC,GAAG,IAAI;IAIjD,iBAAiB,CAAC,KAAK,EAAE,OAAO,CAAC,cAAc,CAAC,GAAG,IAAI;IAIvD,YAAY,CAAC,KAAK,EAAE,OAAO,CAAC,SAAS,CAAC,GAAG,IAAI;IAI7C,SAAS,CAAC,QAAQ,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,GAAG,MAAM,IAAI;IAO3E,OAAO,CAAC,gBAAgB;CAG3B"}

package/dist/state/CanvasState.js

@@ -0,0 +1,67 @@
+import { createInitialEditorSnapshot as s, reduceEditorState as i } from "./EditorReducer.js";
+class h {
+  snapshot = s();
+  listeners = [];
+  getInitial() {
+    return this.snapshot.initialImage;
+  }
+  getCurrent() {
+    return this.snapshot.currentImage;
+  }
+  getMode() {
+    return this.snapshot.mode;
+  }
+  getResizeState() {
+    return { ...this.snapshot.resizeState };
+  }
+  getTransformState() {
+    return { ...this.snapshot.transformState };
+  }
+  getCropState() {
+    const t = this.snapshot.cropState;
+    return {
+      ...t,
+      rect: { ...t.rect }
+    };
+  }
+  dispatch(t) {
+    const e = i(this.snapshot, t);
+    e.change && (this.snapshot = e.snapshot, this._notifyListeners(e.change));
+  }
+  setMode(t) {
+    this.dispatch({ type: "mode/set", mode: t });
+  }
+  setInitial(t) {
+    this.dispatch({ type: "image/setInitial", image: t });
+  }
+  setCurrent(t) {
+    this.dispatch({ type: "image/setCurrent", image: t });
+  }
+  resetToInitial() {
+    this.dispatch({ type: "image/resetToInitial" });
+  }
+  clear() {
+    this.dispatch({ type: "editor/clear" });
+  }
+  setResizeState(t) {
+    this.dispatch({ type: "resize/patch", patch: t });
+  }
+  setTransformState(t) {
+    this.dispatch({ type: "transform/patch", patch: t });
+  }
+  setCropState(t) {
+    this.dispatch({ type: "crop/patch", patch: t });
+  }
+  subscribe(t) {
+    return this.listeners.push(t), () => {
+      this.listeners = this.listeners.filter((e) => e !== t);
+    };
+  }
+  _notifyListeners(t) {
+    this.listeners.forEach((e) => e(t));
+  }
+}
+export {
+  h as CanvasState
+};
+//# sourceMappingURL=CanvasState.js.map

package/dist/state/CanvasState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CanvasState.js","sources":["../../src/state/CanvasState.ts"],"sourcesContent":["import { createInitialEditorSnapshot, reduceEditorState } from \"./EditorReducer.js\";\r\nimport type {\r\n    CanvasAction,\r\n    CanvasStateChange,\r\n    CropRect,\r\n    CropState,\r\n    EditorMode,\r\n    EditorSnapshot,\r\n    ResizeState,\r\n    TransformState,\r\n} from \"./EditorReducer.js\";\r\n\r\nexport type { CanvasAction, CanvasStateChange, CropHandle, CropRect, CropState, EditorMode, EditorSnapshot, ResizeState, TransformState } from \"./EditorReducer.js\";\r\nexport type ReadonlyResizeState = Readonly<ResizeState>;\r\nexport type ReadonlyTransformState = Readonly<TransformState>;\r\nexport type ReadonlyCropRect = Readonly<CropRect>;\r\nexport type ReadonlyCropState = Readonly<Omit<CropState, \"rect\">> & { readonly rect: ReadonlyCropRect };\r\n\r\n/**\r\n * Store wrapper around the pure reducer.\r\n * It keeps listeners and exposes compatibility methods for modules.\r\n */\r\nexport class CanvasState {\r\n    private snapshot: EditorSnapshot = createInitialEditorSnapshot();\r\n    private listeners: Array<(change: CanvasStateChange) => void> = [];\r\n\r\n    public getInitial(): HTMLImageElement | undefined {\r\n        return this.snapshot.initialImage;\r\n    }\r\n\r\n    public getCurrent(): HTMLImageElement | undefined {\r\n        return this.snapshot.currentImage;\r\n    }\r\n\r\n    public getMode(): EditorMode {\r\n        return this.snapshot.mode;\r\n    }\r\n\r\n    public getResizeState(): ReadonlyResizeState {\r\n        return { ...this.snapshot.resizeState };\r\n    }\r\n\r\n    public getTransformState(): ReadonlyTransformState {\r\n        return { ...this.snapshot.transformState };\r\n    }\r\n\r\n    public getCropState(): ReadonlyCropState {\r\n        const cropState = this.snapshot.cropState;\r\n        return {\r\n            ...cropState,\r\n            rect: { ...cropState.rect },\r\n        };\r\n    }\r\n\r\n    public dispatch(action: CanvasAction): void {\r\n        const result = reduceEditorState(this.snapshot, action);\r\n        if (!result.change) {\r\n            return;\r\n        }\r\n        this.snapshot = result.snapshot;\r\n        this._notifyListeners(result.change);\r\n    }\r\n\r\n    public setMode(mode: EditorMode): void {\r\n        this.dispatch({ type: \"mode/set\", mode });\r\n    }\r\n\r\n    public setInitial(img: HTMLImageElement): void {\r\n        this.dispatch({ type: \"image/setInitial\", image: img });\r\n    }\r\n\r\n    public setCurrent(img: HTMLImageElement): void {\r\n        this.dispatch({ type: \"image/setCurrent\", image: img });\r\n    }\r\n\r\n    public resetToInitial(): void {\r\n        this.dispatch({ type: \"image/resetToInitial\" });\r\n    }\r\n\r\n    public clear(): void {\r\n        this.dispatch({ type: \"editor/clear\" });\r\n    }\r\n\r\n    public setResizeState(state: Partial<ResizeState>): void {\r\n        this.dispatch({ type: \"resize/patch\", patch: state });\r\n    }\r\n\r\n    public setTransformState(state: Partial<TransformState>): void {\r\n        this.dispatch({ type: \"transform/patch\", patch: state });\r\n    }\r\n\r\n    public setCropState(state: Partial<CropState>): void {\r\n        this.dispatch({ type: \"crop/patch\", patch: state });\r\n    }\r\n\r\n    public subscribe(listener: (change: CanvasStateChange) => void): () => void {\r\n        this.listeners.push(listener);\r\n        return () => {\r\n            this.listeners = this.listeners.filter((registered) => registered !== listener);\r\n        };\r\n    }\r\n\r\n    private _notifyListeners(change: CanvasStateChange): void {\r\n        this.listeners.forEach((listener) => listener(change));\r\n    }\r\n}\r\n"],"names":["CanvasState","createInitialEditorSnapshot","cropState","action","result","reduceEditorState","mode","img","state","listener","registered","change"],"mappings":";AAsBO,MAAMA,EAAY;AAAA,EACb,WAA2BC,EAAA;AAAA,EAC3B,YAAwD,CAAA;AAAA,EAEzD,aAA2C;AAC9C,WAAO,KAAK,SAAS;AAAA,EACzB;AAAA,EAEO,aAA2C;AAC9C,WAAO,KAAK,SAAS;AAAA,EACzB;AAAA,EAEO,UAAsB;AACzB,WAAO,KAAK,SAAS;AAAA,EACzB;AAAA,EAEO,iBAAsC;AACzC,WAAO,EAAE,GAAG,KAAK,SAAS,YAAA;AAAA,EAC9B;AAAA,EAEO,oBAA4C;AAC/C,WAAO,EAAE,GAAG,KAAK,SAAS,eAAA;AAAA,EAC9B;AAAA,EAEO,eAAkC;AACrC,UAAMC,IAAY,KAAK,SAAS;AAChC,WAAO;AAAA,MACH,GAAGA;AAAA,MACH,MAAM,EAAE,GAAGA,EAAU,KAAA;AAAA,IAAK;AAAA,EAElC;AAAA,EAEO,SAASC,GAA4B;AACxC,UAAMC,IAASC,EAAkB,KAAK,UAAUF,CAAM;AACtD,IAAKC,EAAO,WAGZ,KAAK,WAAWA,EAAO,UACvB,KAAK,iBAAiBA,EAAO,MAAM;AAAA,EACvC;AAAA,EAEO,QAAQE,GAAwB;AACnC,SAAK,SAAS,EAAE,MAAM,YAAY,MAAAA,GAAM;AAAA,EAC5C;AAAA,EAEO,WAAWC,GAA6B;AAC3C,SAAK,SAAS,EAAE,MAAM,oBAAoB,OAAOA,GAAK;AAAA,EAC1D;AAAA,EAEO,WAAWA,GAA6B;AAC3C,SAAK,SAAS,EAAE,MAAM,oBAAoB,OAAOA,GAAK;AAAA,EAC1D;AAAA,EAEO,iBAAuB;AAC1B,SAAK,SAAS,EAAE,MAAM,uBAAA,CAAwB;AAAA,EAClD;AAAA,EAEO,QAAc;AACjB,SAAK,SAAS,EAAE,MAAM,eAAA,CAAgB;AAAA,EAC1C;AAAA,EAEO,eAAeC,GAAmC;AACrD,SAAK,SAAS,EAAE,MAAM,gBAAgB,OAAOA,GAAO;AAAA,EACxD;AAAA,EAEO,kBAAkBA,GAAsC;AAC3D,SAAK,SAAS,EAAE,MAAM,mBAAmB,OAAOA,GAAO;AAAA,EAC3D;AAAA,EAEO,aAAaA,GAAiC;AACjD,SAAK,SAAS,EAAE,MAAM,cAAc,OAAOA,GAAO;AAAA,EACtD;AAAA,EAEO,UAAUC,GAA2D;AACxE,gBAAK,UAAU,KAAKA,CAAQ,GACrB,MAAM;AACT,WAAK,YAAY,KAAK,UAAU,OAAO,CAACC,MAAeA,MAAeD,CAAQ;AAAA,IAClF;AAAA,EACJ;AAAA,EAEQ,iBAAiBE,GAAiC;AACtD,SAAK,UAAU,QAAQ,CAACF,MAAaA,EAASE,CAAM,CAAC;AAAA,EACzD;AACJ;"}

package/dist/state/EditorReducer.d.ts

@@ -0,0 +1,60 @@
+export type ResizeState = {
+    width: number;
+    height: number;
+    lockAspectRatio: boolean;
+};
+export type TransformState = {
+    rotate: number;
+    flipH: boolean;
+    flipV: boolean;
+};
+export type CropHandle = "nw" | "ne" | "sw" | "se" | "rect" | null;
+export type CropRect = {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+};
+export type CropState = {
+    active: boolean;
+    rect: CropRect;
+};
+export type EditorMode = "edit" | "crop";
+export type CanvasStateChange = "image" | "resize" | "transform" | "crop" | "mode" | "clear";
+export type CanvasAction = {
+    type: "mode/set";
+    mode: EditorMode;
+} | {
+    type: "image/setInitial";
+    image: HTMLImageElement;
+} | {
+    type: "image/setCurrent";
+    image: HTMLImageElement;
+} | {
+    type: "image/resetToInitial";
+} | {
+    type: "editor/clear";
+} | {
+    type: "resize/patch";
+    patch: Partial<ResizeState>;
+} | {
+    type: "transform/patch";
+    patch: Partial<TransformState>;
+} | {
+    type: "crop/patch";
+    patch: Partial<CropState>;
+};
+export type EditorSnapshot = {
+    initialImage?: HTMLImageElement;
+    currentImage?: HTMLImageElement;
+    mode: EditorMode;
+    resizeState: ResizeState;
+    transformState: TransformState;
+    cropState: CropState;
+};
+export declare function createInitialEditorSnapshot(): EditorSnapshot;
+export declare function reduceEditorState(snapshot: EditorSnapshot, action: CanvasAction): {
+    snapshot: EditorSnapshot;
+    change: CanvasStateChange | null;
+};
+//# sourceMappingURL=EditorReducer.d.ts.map

package/dist/state/EditorReducer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorReducer.d.ts","sourceRoot":"","sources":["../../src/state/EditorReducer.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAAC;AAEnE,MAAM,MAAM,QAAQ,GAAG;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,EAAE,QAAQ,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AAEzC,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,QAAQ,GAAG,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAE7F,MAAM,MAAM,YAAY,GAClB;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,IAAI,EAAE,UAAU,CAAA;CAAE,GACtC;IAAE,IAAI,EAAE,kBAAkB,CAAC;IAAC,KAAK,EAAE,gBAAgB,CAAA;CAAE,GACrD;IAAE,IAAI,EAAE,kBAAkB,CAAC;IAAC,KAAK,EAAE,gBAAgB,CAAA;CAAE,GACrD;IAAE,IAAI,EAAE,sBAAsB,CAAA;CAAE,GAChC;IAAE,IAAI,EAAE,cAAc,CAAA;CAAE,GACxB;IAAE,IAAI,EAAE,cAAc,CAAC;IAAC,KAAK,EAAE,OAAO,CAAC,WAAW,CAAC,CAAA;CAAE,GACrD;IAAE,IAAI,EAAE,iBAAiB,CAAC;IAAC,KAAK,EAAE,OAAO,CAAC,cAAc,CAAC,CAAA;CAAE,GAC3D;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,KAAK,EAAE,OAAO,CAAC,SAAS,CAAC,CAAA;CAAE,CAAC;AAExD,MAAM,MAAM,cAAc,GAAG;IACzB,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,IAAI,EAAE,UAAU,CAAC;IACjB,WAAW,EAAE,WAAW,CAAC;IACzB,cAAc,EAAE,cAAc,CAAC;IAC/B,SAAS,EAAE,SAAS,CAAC;CACxB,CAAC;AAEF,wBAAgB,2BAA2B,IAAI,cAAc,CAS5D;AAED,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,cAAc,EAAE,MAAM,EAAE,YAAY,GAAG;IAAE,QAAQ,EAAE,cAAc,CAAC;IAAC,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAAA;CAAE,CA6EhJ"}

package/dist/state/EditorReducer.js

@@ -0,0 +1,127 @@
+function n() {
+  return {
+    initialImage: void 0,
+    currentImage: void 0,
+    mode: "edit",
+    resizeState: a(),
+    transformState: i(),
+    cropState: c()
+  };
+}
+function p(e, t) {
+  switch (t.type) {
+    case "mode/set":
+      return e.mode === t.mode ? { snapshot: e, change: null } : {
+        snapshot: { ...e, mode: t.mode },
+        change: "mode"
+      };
+    case "image/setInitial":
+      return {
+        snapshot: {
+          ...e,
+          initialImage: t.image,
+          currentImage: t.image,
+          mode: "edit",
+          resizeState: a(t.image.width, t.image.height),
+          transformState: i(),
+          cropState: c()
+        },
+        change: "image"
+      };
+    case "image/setCurrent":
+      return e.currentImage === t.image ? { snapshot: e, change: null } : {
+        snapshot: {
+          ...e,
+          currentImage: t.image
+        },
+        change: "image"
+      };
+    case "image/resetToInitial":
+      return e.initialImage ? {
+        snapshot: {
+          ...e,
+          currentImage: e.initialImage,
+          mode: "edit",
+          resizeState: a(e.initialImage.width, e.initialImage.height),
+          transformState: i(),
+          cropState: c()
+        },
+        change: "image"
+      } : { snapshot: e, change: null };
+    case "editor/clear":
+      return {
+        snapshot: n(),
+        change: "clear"
+      };
+    case "resize/patch":
+      return u(e) ? m(e, t.patch) : { snapshot: e, change: null };
+    case "transform/patch":
+      return l(e) ? g(e, t.patch) : { snapshot: e, change: null };
+    case "crop/patch":
+      return f(e, t.patch) ? o(e, t.patch) : { snapshot: e, change: null };
+  }
+}
+function u(e) {
+  return e.mode !== "crop";
+}
+function l(e) {
+  return e.mode !== "crop";
+}
+function f(e, t) {
+  return e.mode === "crop" ? !0 : t.active === !1;
+}
+function m(e, t) {
+  const r = { ...e.resizeState, ...t };
+  return S(r, e.resizeState) ? { snapshot: e, change: null } : {
+    snapshot: { ...e, resizeState: r },
+    change: "resize"
+  };
+}
+function g(e, t) {
+  const r = { ...e.transformState, ...t };
+  return d(r, e.transformState) ? { snapshot: e, change: null } : {
+    snapshot: { ...e, transformState: r },
+    change: "transform"
+  };
+}
+function o(e, t) {
+  const r = { ...e.cropState, ...t };
+  return h(r, e.cropState) ? { snapshot: e, change: null } : {
+    snapshot: { ...e, cropState: r },
+    change: "crop"
+  };
+}
+function S(e, t) {
+  return e.width === t.width && e.height === t.height && e.lockAspectRatio === t.lockAspectRatio;
+}
+function d(e, t) {
+  return e.rotate === t.rotate && e.flipH === t.flipH && e.flipV === t.flipV;
+}
+function h(e, t) {
+  return e.active === t.active && e.rect.x === t.rect.x && e.rect.y === t.rect.y && e.rect.w === t.rect.w && e.rect.h === t.rect.h;
+}
+function a(e = 0, t = 0) {
+  return {
+    width: e,
+    height: t,
+    lockAspectRatio: !1
+  };
+}
+function i() {
+  return {
+    rotate: 0,
+    flipH: !1,
+    flipV: !1
+  };
+}
+function c() {
+  return {
+    active: !1,
+    rect: { x: 0, y: 0, w: 0, h: 0 }
+  };
+}
+export {
+  n as createInitialEditorSnapshot,
+  p as reduceEditorState
+};
+//# sourceMappingURL=EditorReducer.js.map

package/dist/state/EditorReducer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorReducer.js","sources":["../../src/state/EditorReducer.ts"],"sourcesContent":["export type ResizeState = {\r\n    width: number;\r\n    height: number;\r\n    lockAspectRatio: boolean;\r\n};\r\n\r\nexport type TransformState = {\r\n    rotate: number;\r\n    flipH: boolean;\r\n    flipV: boolean;\r\n};\r\n\r\nexport type CropHandle = \"nw\" | \"ne\" | \"sw\" | \"se\" | \"rect\" | null;\r\n\r\nexport type CropRect = {\r\n    x: number;\r\n    y: number;\r\n    w: number;\r\n    h: number;\r\n};\r\n\r\nexport type CropState = {\r\n    active: boolean;\r\n    rect: CropRect;\r\n};\r\n\r\nexport type EditorMode = \"edit\" | \"crop\";\r\n\r\nexport type CanvasStateChange = \"image\" | \"resize\" | \"transform\" | \"crop\" | \"mode\" | \"clear\";\r\n\r\nexport type CanvasAction =\r\n    | { type: \"mode/set\"; mode: EditorMode }\r\n    | { type: \"image/setInitial\"; image: HTMLImageElement }\r\n    | { type: \"image/setCurrent\"; image: HTMLImageElement }\r\n    | { type: \"image/resetToInitial\" }\r\n    | { type: \"editor/clear\" }\r\n    | { type: \"resize/patch\"; patch: Partial<ResizeState> }\r\n    | { type: \"transform/patch\"; patch: Partial<TransformState> }\r\n    | { type: \"crop/patch\"; patch: Partial<CropState> };\r\n\r\nexport type EditorSnapshot = {\r\n    initialImage?: HTMLImageElement;\r\n    currentImage?: HTMLImageElement;\r\n    mode: EditorMode;\r\n    resizeState: ResizeState;\r\n    transformState: TransformState;\r\n    cropState: CropState;\r\n};\r\n\r\nexport function createInitialEditorSnapshot(): EditorSnapshot {\r\n    return {\r\n        initialImage: undefined,\r\n        currentImage: undefined,\r\n        mode: \"edit\",\r\n        resizeState: createDefaultResizeState(),\r\n        transformState: createDefaultTransformState(),\r\n        cropState: createDefaultCropState(),\r\n    };\r\n}\r\n\r\nexport function reduceEditorState(snapshot: EditorSnapshot, action: CanvasAction): { snapshot: EditorSnapshot; change: CanvasStateChange | null } {\r\n    switch (action.type) {\r\n        case \"mode/set\":\r\n            if (snapshot.mode === action.mode) {\r\n                return { snapshot, change: null };\r\n            }\r\n            return {\r\n                snapshot: { ...snapshot, mode: action.mode },\r\n                change: \"mode\",\r\n            };\r\n\r\n        case \"image/setInitial\":\r\n            return {\r\n                snapshot: {\r\n                    ...snapshot,\r\n                    initialImage: action.image,\r\n                    currentImage: action.image,\r\n                    mode: \"edit\",\r\n                    resizeState: createDefaultResizeState(action.image.width, action.image.height),\r\n                    transformState: createDefaultTransformState(),\r\n                    cropState: createDefaultCropState(),\r\n                },\r\n                change: \"image\",\r\n            };\r\n\r\n        case \"image/setCurrent\":\r\n            if (snapshot.currentImage === action.image) {\r\n                return { snapshot, change: null };\r\n            }\r\n            return {\r\n                snapshot: {\r\n                    ...snapshot,\r\n                    currentImage: action.image,\r\n                },\r\n                change: \"image\",\r\n            };\r\n\r\n        case \"image/resetToInitial\":\r\n            if (!snapshot.initialImage) {\r\n                return { snapshot, change: null };\r\n            }\r\n            return {\r\n                snapshot: {\r\n                    ...snapshot,\r\n                    currentImage: snapshot.initialImage,\r\n                    mode: \"edit\",\r\n                    resizeState: createDefaultResizeState(snapshot.initialImage.width, snapshot.initialImage.height),\r\n                    transformState: createDefaultTransformState(),\r\n                    cropState: createDefaultCropState(),\r\n                },\r\n                change: \"image\",\r\n            };\r\n\r\n        case \"editor/clear\":\r\n            return {\r\n                snapshot: createInitialEditorSnapshot(),\r\n                change: \"clear\",\r\n            };\r\n\r\n        case \"resize/patch\":\r\n            if (!canApplyResizePatch(snapshot)) {\r\n                return { snapshot, change: null };\r\n            }\r\n            return applyResizePatch(snapshot, action.patch);\r\n\r\n        case \"transform/patch\":\r\n            if (!canApplyTransformPatch(snapshot)) {\r\n                return { snapshot, change: null };\r\n            }\r\n            return applyTransformPatch(snapshot, action.patch);\r\n\r\n        case \"crop/patch\":\r\n            if (!canApplyCropPatch(snapshot, action.patch)) {\r\n                return { snapshot, change: null };\r\n            }\r\n            return applyCropPatch(snapshot, action.patch);\r\n    }\r\n}\r\n\r\nfunction canApplyResizePatch(snapshot: EditorSnapshot): boolean {\r\n    return snapshot.mode !== \"crop\";\r\n}\r\n\r\nfunction canApplyTransformPatch(snapshot: EditorSnapshot): boolean {\r\n    return snapshot.mode !== \"crop\";\r\n}\r\n\r\nfunction canApplyCropPatch(snapshot: EditorSnapshot, patch: Partial<CropState>): boolean {\r\n    if (snapshot.mode === \"crop\") {\r\n        return true;\r\n    }\r\n\r\n    return patch.active === false;\r\n}\r\n\r\nfunction applyResizePatch(snapshot: EditorSnapshot, patch: Partial<ResizeState>): { snapshot: EditorSnapshot; change: CanvasStateChange | null } {\r\n    const nextResize = { ...snapshot.resizeState, ...patch };\r\n    if (isResizeStateEqual(nextResize, snapshot.resizeState)) {\r\n        return { snapshot, change: null };\r\n    }\r\n    return {\r\n        snapshot: { ...snapshot, resizeState: nextResize },\r\n        change: \"resize\",\r\n    };\r\n}\r\n\r\nfunction applyTransformPatch(snapshot: EditorSnapshot, patch: Partial<TransformState>): { snapshot: EditorSnapshot; change: CanvasStateChange | null } {\r\n    const nextTransform = { ...snapshot.transformState, ...patch };\r\n    if (isTransformStateEqual(nextTransform, snapshot.transformState)) {\r\n        return { snapshot, change: null };\r\n    }\r\n    return {\r\n        snapshot: { ...snapshot, transformState: nextTransform },\r\n        change: \"transform\",\r\n    };\r\n}\r\n\r\nfunction applyCropPatch(snapshot: EditorSnapshot, patch: Partial<CropState>): { snapshot: EditorSnapshot; change: CanvasStateChange | null } {\r\n    const nextCrop = { ...snapshot.cropState, ...patch };\r\n    if (isCropStateEqual(nextCrop, snapshot.cropState)) {\r\n        return { snapshot, change: null };\r\n    }\r\n    return {\r\n        snapshot: { ...snapshot, cropState: nextCrop },\r\n        change: \"crop\",\r\n    };\r\n}\r\n\r\nfunction isResizeStateEqual(a: ResizeState, b: ResizeState): boolean {\r\n    return a.width === b.width && a.height === b.height && a.lockAspectRatio === b.lockAspectRatio;\r\n}\r\n\r\nfunction isTransformStateEqual(a: TransformState, b: TransformState): boolean {\r\n    return a.rotate === b.rotate && a.flipH === b.flipH && a.flipV === b.flipV;\r\n}\r\n\r\nfunction isCropStateEqual(a: CropState, b: CropState): boolean {\r\n    return (\r\n        a.active === b.active &&\r\n        a.rect.x === b.rect.x &&\r\n        a.rect.y === b.rect.y &&\r\n        a.rect.w === b.rect.w &&\r\n        a.rect.h === b.rect.h\r\n    );\r\n}\r\n\r\nfunction createDefaultResizeState(width: number = 0, height: number = 0): ResizeState {\r\n    return {\r\n        width,\r\n        height,\r\n        lockAspectRatio: false,\r\n    };\r\n}\r\n\r\nfunction createDefaultTransformState(): TransformState {\r\n    return {\r\n        rotate: 0,\r\n        flipH: false,\r\n        flipV: false,\r\n    };\r\n}\r\n\r\nfunction createDefaultCropState(): CropState {\r\n    return {\r\n        active: false,\r\n        rect: { x: 0, y: 0, w: 0, h: 0 },\r\n    };\r\n}\r\n"],"names":["createInitialEditorSnapshot","createDefaultResizeState","createDefaultTransformState","createDefaultCropState","reduceEditorState","snapshot","action","canApplyResizePatch","applyResizePatch","canApplyTransformPatch","applyTransformPatch","canApplyCropPatch","applyCropPatch","patch","nextResize","isResizeStateEqual","nextTransform","isTransformStateEqual","nextCrop","isCropStateEqual","a","b","width","height"],"mappings":"AAiDO,SAASA,IAA8C;AAC1D,SAAO;AAAA,IACH,cAAc;AAAA,IACd,cAAc;AAAA,IACd,MAAM;AAAA,IACN,aAAaC,EAAA;AAAA,IACb,gBAAgBC,EAAA;AAAA,IAChB,WAAWC,EAAA;AAAA,EAAuB;AAE1C;AAEO,SAASC,EAAkBC,GAA0BC,GAAsF;AAC9I,UAAQA,EAAO,MAAA;AAAA,IACX,KAAK;AACD,aAAID,EAAS,SAASC,EAAO,OAClB,EAAE,UAAAD,GAAU,QAAQ,KAAA,IAExB;AAAA,QACH,UAAU,EAAE,GAAGA,GAAU,MAAMC,EAAO,KAAA;AAAA,QACtC,QAAQ;AAAA,MAAA;AAAA,IAGhB,KAAK;AACD,aAAO;AAAA,QACH,UAAU;AAAA,UACN,GAAGD;AAAA,UACH,cAAcC,EAAO;AAAA,UACrB,cAAcA,EAAO;AAAA,UACrB,MAAM;AAAA,UACN,aAAaL,EAAyBK,EAAO,MAAM,OAAOA,EAAO,MAAM,MAAM;AAAA,UAC7E,gBAAgBJ,EAAA;AAAA,UAChB,WAAWC,EAAA;AAAA,QAAuB;AAAA,QAEtC,QAAQ;AAAA,MAAA;AAAA,IAGhB,KAAK;AACD,aAAIE,EAAS,iBAAiBC,EAAO,QAC1B,EAAE,UAAAD,GAAU,QAAQ,KAAA,IAExB;AAAA,QACH,UAAU;AAAA,UACN,GAAGA;AAAA,UACH,cAAcC,EAAO;AAAA,QAAA;AAAA,QAEzB,QAAQ;AAAA,MAAA;AAAA,IAGhB,KAAK;AACD,aAAKD,EAAS,eAGP;AAAA,QACH,UAAU;AAAA,UACN,GAAGA;AAAA,UACH,cAAcA,EAAS;AAAA,UACvB,MAAM;AAAA,UACN,aAAaJ,EAAyBI,EAAS,aAAa,OAAOA,EAAS,aAAa,MAAM;AAAA,UAC/F,gBAAgBH,EAAA;AAAA,UAChB,WAAWC,EAAA;AAAA,QAAuB;AAAA,QAEtC,QAAQ;AAAA,MAAA,IAXD,EAAE,UAAAE,GAAU,QAAQ,KAAA;AAAA,IAcnC,KAAK;AACD,aAAO;AAAA,QACH,UAAUL,EAAA;AAAA,QACV,QAAQ;AAAA,MAAA;AAAA,IAGhB,KAAK;AACD,aAAKO,EAAoBF,CAAQ,IAG1BG,EAAiBH,GAAUC,EAAO,KAAK,IAFnC,EAAE,UAAAD,GAAU,QAAQ,KAAA;AAAA,IAInC,KAAK;AACD,aAAKI,EAAuBJ,CAAQ,IAG7BK,EAAoBL,GAAUC,EAAO,KAAK,IAFtC,EAAE,UAAAD,GAAU,QAAQ,KAAA;AAAA,IAInC,KAAK;AACD,aAAKM,EAAkBN,GAAUC,EAAO,KAAK,IAGtCM,EAAeP,GAAUC,EAAO,KAAK,IAFjC,EAAE,UAAAD,GAAU,QAAQ,KAAA;AAAA,EAEa;AAExD;AAEA,SAASE,EAAoBF,GAAmC;AAC5D,SAAOA,EAAS,SAAS;AAC7B;AAEA,SAASI,EAAuBJ,GAAmC;AAC/D,SAAOA,EAAS,SAAS;AAC7B;AAEA,SAASM,EAAkBN,GAA0BQ,GAAoC;AACrF,SAAIR,EAAS,SAAS,SACX,KAGJQ,EAAM,WAAW;AAC5B;AAEA,SAASL,EAAiBH,GAA0BQ,GAA6F;AAC7I,QAAMC,IAAa,EAAE,GAAGT,EAAS,aAAa,GAAGQ,EAAA;AACjD,SAAIE,EAAmBD,GAAYT,EAAS,WAAW,IAC5C,EAAE,UAAAA,GAAU,QAAQ,KAAA,IAExB;AAAA,IACH,UAAU,EAAE,GAAGA,GAAU,aAAaS,EAAA;AAAA,IACtC,QAAQ;AAAA,EAAA;AAEhB;AAEA,SAASJ,EAAoBL,GAA0BQ,GAAgG;AACnJ,QAAMG,IAAgB,EAAE,GAAGX,EAAS,gBAAgB,GAAGQ,EAAA;AACvD,SAAII,EAAsBD,GAAeX,EAAS,cAAc,IACrD,EAAE,UAAAA,GAAU,QAAQ,KAAA,IAExB;AAAA,IACH,UAAU,EAAE,GAAGA,GAAU,gBAAgBW,EAAA;AAAA,IACzC,QAAQ;AAAA,EAAA;AAEhB;AAEA,SAASJ,EAAeP,GAA0BQ,GAA2F;AACzI,QAAMK,IAAW,EAAE,GAAGb,EAAS,WAAW,GAAGQ,EAAA;AAC7C,SAAIM,EAAiBD,GAAUb,EAAS,SAAS,IACtC,EAAE,UAAAA,GAAU,QAAQ,KAAA,IAExB;AAAA,IACH,UAAU,EAAE,GAAGA,GAAU,WAAWa,EAAA;AAAA,IACpC,QAAQ;AAAA,EAAA;AAEhB;AAEA,SAASH,EAAmBK,GAAgBC,GAAyB;AACjE,SAAOD,EAAE,UAAUC,EAAE,SAASD,EAAE,WAAWC,EAAE,UAAUD,EAAE,oBAAoBC,EAAE;AACnF;AAEA,SAASJ,EAAsBG,GAAmBC,GAA4B;AAC1E,SAAOD,EAAE,WAAWC,EAAE,UAAUD,EAAE,UAAUC,EAAE,SAASD,EAAE,UAAUC,EAAE;AACzE;AAEA,SAASF,EAAiBC,GAAcC,GAAuB;AAC3D,SACID,EAAE,WAAWC,EAAE,UACfD,EAAE,KAAK,MAAMC,EAAE,KAAK,KACpBD,EAAE,KAAK,MAAMC,EAAE,KAAK,KACpBD,EAAE,KAAK,MAAMC,EAAE,KAAK,KACpBD,EAAE,KAAK,MAAMC,EAAE,KAAK;AAE5B;AAEA,SAASpB,EAAyBqB,IAAgB,GAAGC,IAAiB,GAAgB;AAClF,SAAO;AAAA,IACH,OAAAD;AAAA,IACA,QAAAC;AAAA,IACA,iBAAiB;AAAA,EAAA;AAEzB;AAEA,SAASrB,IAA8C;AACnD,SAAO;AAAA,IACH,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,OAAO;AAAA,EAAA;AAEf;AAEA,SAASC,IAAoC;AACzC,SAAO;AAAA,IACH,QAAQ;AAAA,IACR,MAAM,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,EAAA;AAAA,EAAE;AAEvC;"}