@codingfactory/mediables-vue 2.11.0 → 2.13.0

package/dist/vanilla-editor/index.d.ts

@@ -0,0 +1,342 @@
+/**
+ * Vanilla Image Editor Type Declarations
+ */
+
+import { EventEmitter } from './core/EventEmitter';
+
+export interface VanillaImageEditorOptions {
+  theme?: 'light' | 'dark' | 'auto';
+  initialMode?: 'filters' | 'crop' | 'adjust';
+  cropShape?: 'free' | 'circle' | 'square';
+  initialAspectRatio?: string;
+  backgroundRemoval?: {
+    enabled?: boolean;
+    endpoint?: string;
+    optionsEndpoint?: string;
+    savedEndpoint?: string;
+    fallbackEndpoint?: string | null;
+    defaultTier?: 'fast' | 'balanced' | 'best';
+    maxMegapixels?: number;
+  };
+  backgroundReplacement?: BackgroundReplacementConfig | null;
+}
+
+export interface BackgroundReplacementConfig {
+  assetEndpoint?: string | null;
+  materializeEndpoint?: string | null;
+  targetMediaUuid?: string | null;
+  mediaChoices?: Array<{
+    id?: string;
+    label?: string;
+    source: ImageEditorLayerSource;
+    fit?: 'cover' | 'contain' | 'stretch' | 'tile';
+  }>;
+}
+
+export interface FilterRegistry {
+  getAllFilters: () => FilterDefinition[];
+  getFilter: (id: string) => FilterDefinition | undefined;
+  getFiltersByCategory: (category: string) => FilterDefinition[];
+}
+
+export interface ControlDefinition {
+  id: string;
+  type: 'slider' | 'toggle' | 'color' | 'select' | 'range' | 'button' | 'text';
+  label: string;
+  property?: string;
+  action?: string;
+  min?: number;
+  max?: number;
+  step?: number;
+  default?: number | boolean | string;
+  options?: Array<{ label: string; value: string | number }>;
+  tooltip?: string;
+}
+
+export interface FilterDefinition {
+  id: string;
+  name: string;
+  category: string;
+  description?: string;
+  thumbnail?: string;
+  createFilter: (params: Record<string, unknown>) => unknown;
+  defaultParams: Record<string, unknown>;
+  controls: ControlDefinition[];
+}
+
+export interface SaveEventPayload {
+  blob: Blob;
+  mimeType: string;
+  dimensions: { width: number; height: number };
+  state: ImageEditorSessionState;
+  document?: ImageEditorDocument | null;
+  documentId?: string | null;
+  documentRevisionId?: string | null;
+  documentRevisionNumber?: number | null;
+}
+
+export interface ErrorEventPayload {
+  error: Error;
+}
+
+/** Canonical serializable editor session state (v3.0.0+) */
+export interface ImageEditorSessionState {
+  version: 1;
+  crop: {
+    rect: { x: number; y: number; width: number; height: number } | null;
+    aspectRatio: string;
+    shape: 'free' | 'square' | 'circle';
+  };
+  transform?: {
+    rotation: number;
+  };
+  filters: Array<{
+    id: string;
+    enabled: boolean;
+    values: Record<string, string | number | boolean>;
+  }>;
+}
+
+export type ImageEditorLayerSource =
+  | { kind: 'media'; mediaUuid: string; originalWidth: number; originalHeight: number; sourceHash: string; url?: string; previewUrl?: string; sourceUrl?: string }
+  | { kind: 'edit-asset'; assetId: string; originalWidth: number; originalHeight: number; sourceHash: string; url?: string; previewUrl?: string; sourceUrl?: string }
+  | { kind: 'runtime'; runtimeRef: string; originalWidth: number; originalHeight: number; sourceHash: string | null; url?: string; previewUrl?: string; sourceUrl?: string }
+  | { kind: 'color'; color: string };
+
+export type ImageEditorBackgroundFill =
+  | { kind: 'transparent' }
+  | { kind: 'color'; value: string; fit?: 'cover' | 'contain' | 'stretch' | 'tile' }
+  | { kind: 'gradient'; gradientType: 'linear' | 'radial'; angle: number; stops: Array<{ offset: number; color: string }>; fit: 'cover' | 'contain' | 'stretch' | 'tile' }
+  | { kind: 'media'; source: ImageEditorLayerSource; fit: 'cover' | 'contain' | 'stretch' | 'tile' };
+
+export interface ImageEditorTextStyle {
+  fontFamily: string;
+  fontSize: number;
+  fontWeight: number;
+  fontStyle: 'normal' | 'italic';
+  fill: string;
+  align: 'left' | 'center' | 'right';
+  lineHeight: number;
+  letterSpacing: number;
+}
+
+export interface ImageEditorTextEffects {
+  stroke: { enabled: boolean; color: string; width: number };
+  shadow: { enabled: boolean; color: string; alpha: number; blur: number; distance: number; angle: number };
+  glow: { enabled: boolean; color: string; alpha: number; blur: number };
+  backdrop: { enabled: boolean; color: string; opacity: number; padding: number; radius: number; blur: number };
+}
+
+export interface ImageEditorTextBox {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export interface ImageEditorTextPayload {
+  content: string;
+  box: ImageEditorTextBox;
+  style: ImageEditorTextStyle;
+  effects: ImageEditorTextEffects;
+}
+
+export interface ImageEditorTextLayerPatch {
+  content?: string;
+  box?: Partial<ImageEditorTextBox>;
+  style?: Partial<ImageEditorTextStyle> & Record<string, unknown>;
+  effects?: Partial<{
+    stroke: Partial<ImageEditorTextEffects['stroke']>;
+    shadow: Partial<ImageEditorTextEffects['shadow']>;
+    glow: Partial<ImageEditorTextEffects['glow']>;
+    backdrop: Partial<ImageEditorTextEffects['backdrop']>;
+  }>;
+  transform?: Partial<{ x: number; y: number; scaleX: number; scaleY: number; rotation: number }>;
+  text?: Partial<ImageEditorTextPayload>;
+  opacity?: number;
+  blendMode?: ImageEditorLayer['blendMode'];
+}
+
+export interface ImageEditorLayer {
+  id: string;
+  type: 'background' | 'image' | 'text';
+  role: 'background' | 'subject' | 'overlay' | 'text';
+  name: string;
+  visible: boolean;
+  locked: boolean;
+  opacity: number;
+  blendMode: 'normal' | 'multiply' | 'screen' | 'overlay';
+  transform: { x: number; y: number; scaleX: number; scaleY: number; rotation: number };
+  effects: unknown[];
+  metadata: Record<string, unknown>;
+  source?: ImageEditorLayerSource;
+  fill?: ImageEditorBackgroundFill;
+  text?: ImageEditorTextPayload;
+  crop: { x: number; y: number; width: number; height: number } | null;
+  filters: ImageEditorSessionState['filters'];
+}
+
+export interface ImageEditorDocument {
+  version: 2;
+  id: string;
+  sourceMediaUuid: string | null;
+  canvas: { width: number; height: number; backgroundPreviewColor: string | null };
+  revision: number;
+  layers: ImageEditorLayer[];
+  activeLayerId: string | null;
+  export: {
+    mimeType: 'image/png' | 'image/jpeg' | 'image/webp';
+    quality: number | null;
+    preserveTransparency: boolean;
+    matteColor: string | null;
+    trimTransparentBounds: boolean;
+  };
+  createdAt?: string;
+  updatedAt?: string;
+}
+
+export interface EditorExportOptions {
+  maxEdge?: number;
+  maxPixels?: number;
+  dontUpscale?: boolean;
+}
+
+export interface EditorBlobExportResult {
+  blob: Blob;
+  width: number;
+  height: number;
+}
+
+export class VanillaImageEditor extends EventEmitter {
+  constructor(container: HTMLElement, options?: VanillaImageEditorOptions);
+
+  loadImage(
+    imageSource: string | Blob | File,
+    options?: { state?: ImageEditorSessionState | null; document?: ImageEditorDocument | null; documentId?: string | null; documentRevisionId?: string | null; documentRevisionNumber?: number | null; sessionKey?: string | number }
+  ): Promise<void>;
+  exportImage(format?: 'png' | 'jpeg', quality?: number, options?: EditorExportOptions): string | null;
+  exportBlob(format?: 'png' | 'jpeg', quality?: number, options?: EditorExportOptions): Promise<EditorBlobExportResult | null>;
+  save(): void | Promise<void>;
+  reset(): void;
+  rotateBy(degrees: number): boolean;
+  setRotationAngle(angle: number): boolean;
+  resetRotation(): boolean;
+  setTheme(theme: 'light' | 'dark' | 'auto'): void;
+  setMode(mode: 'filters' | 'crop'): void;
+  setFilterRegistry(registry: FilterRegistry): void;
+  removeBackground(options?: { tier?: 'fast' | 'balanced' | 'best'; operationId?: string; sessionKey?: string; sourceHash?: string; model?: string; alpha_matting?: boolean; max_megapixels?: number }): Promise<Record<string, unknown>>;
+  canRemoveBackground(): boolean;
+  isBackgroundRemovalAvailable(): Promise<boolean>;
+  getState(): Record<string, unknown>;
+  getSerializableState(): ImageEditorSessionState;
+  getSerializableDocument?(): ImageEditorDocument | null;
+  getEditorDocumentBinding?(): { documentId: string | null; documentRevisionId: string | null; documentRevisionNumber: number | null } | null;
+  setBackgroundColor?(color: string): Promise<string | null>;
+  setBackgroundGradient?(gradient: Partial<Extract<ImageEditorBackgroundFill, { kind: 'gradient' }>>): Promise<string | null>;
+  setBackgroundMediaSource?(source: ImageEditorLayerSource, options?: { fit?: 'cover' | 'contain' | 'stretch' | 'tile' }): Promise<string | null>;
+  setBackgroundImageFromFile?(file: Blob, options?: { fit?: 'cover' | 'contain' | 'stretch' | 'tile' }): Promise<string | null>;
+  setBackgroundFit?(fit: 'cover' | 'contain' | 'stretch' | 'tile'): Promise<boolean>;
+  setBackgroundBlur?(amount: number): Promise<boolean>;
+  removeBackgroundLayer?(): Promise<boolean>;
+  selectLayer?(layerId: string): Promise<boolean>;
+  renameLayer?(layerId: string, name: string): Promise<boolean>;
+  duplicateLayer?(layerId: string): Promise<string | null>;
+  deleteLayer?(layerId: string): Promise<boolean>;
+  moveLayer?(layerId: string, direction: 'up' | 'down' | 'front' | 'back' | 'bring-forward' | 'send-backward' | 'bring-to-front' | 'send-to-back'): Promise<boolean>;
+  setLayerVisibility?(layerId: string, visible: boolean): Promise<boolean>;
+  setLayerLocked?(layerId: string, locked: boolean): Promise<boolean>;
+  addTextLayer?(payload?: ImageEditorTextLayerPatch): Promise<string | null>;
+  updateTextLayer?(layerId: string, patch?: ImageEditorTextLayerPatch): Promise<boolean>;
+  destroy(): void;
+
+  on(event: 'save', callback: (payload: SaveEventPayload) => void): void;
+  on(event: 'cancel', callback: () => void): void;
+  on(event: 'error', callback: (payload: ErrorEventPayload) => void): void;
+  on(event: string, callback: (...args: unknown[]) => void): void;
+}
+
+/**
+ * v2 editor with persistent inspector panel layout.
+ * Mirrors VanillaImageEditor's public API so the Vue wrapper can swap between them.
+ */
+export class VanillaImageEditorV2 extends EventEmitter {
+  constructor(container: HTMLElement, options?: VanillaImageEditorOptions & { layout?: 'split-panel' });
+
+  loadImage(
+    imageSource: string | Blob | File,
+    options?: { state?: ImageEditorSessionState | null; document?: ImageEditorDocument | null; documentId?: string | null; documentRevisionId?: string | null; documentRevisionNumber?: number | null; sessionKey?: string | number }
+  ): Promise<void>;
+  exportImage(format?: 'png' | 'jpeg', quality?: number, options?: EditorExportOptions): string | null;
+  exportBlob(format?: 'png' | 'jpeg', quality?: number, options?: EditorExportOptions): Promise<EditorBlobExportResult | null>;
+  save(): void | Promise<void>;
+  resetAll(expectedLayerId?: string | null): void;
+  rotateBy(degrees: number): boolean;
+  setRotationAngle(angle: number): boolean;
+  resetRotation(): boolean;
+  setTheme(theme: 'light' | 'dark' | 'auto'): void;
+  setMode(mode: 'filters' | 'crop'): void;
+  setFilterRegistry(registry: FilterRegistry): void;
+  removeBackground(options?: { tier?: 'fast' | 'balanced' | 'best'; operationId?: string; sessionKey?: string; sourceHash?: string; model?: string; alpha_matting?: boolean; max_megapixels?: number }): Promise<Record<string, unknown>>;
+  canRemoveBackground(): boolean;
+  isBackgroundRemovalAvailable(): Promise<boolean>;
+  getState(): Record<string, unknown>;
+  getSerializableState(): ImageEditorSessionState;
+  getSerializableDocument(): ImageEditorDocument | null;
+  getEditorDocumentBinding(): { documentId: string | null; documentRevisionId: string | null; documentRevisionNumber: number | null } | null;
+  setBackgroundColor(color: string): Promise<string | null>;
+  setBackgroundGradient(gradient: Partial<Extract<ImageEditorBackgroundFill, { kind: 'gradient' }>>): Promise<string | null>;
+  setBackgroundMediaSource(source: ImageEditorLayerSource, options?: { fit?: 'cover' | 'contain' | 'stretch' | 'tile' }): Promise<string | null>;
+  setBackgroundImageFromFile(file: Blob, options?: { fit?: 'cover' | 'contain' | 'stretch' | 'tile' }): Promise<string | null>;
+  setBackgroundFit(fit: 'cover' | 'contain' | 'stretch' | 'tile'): Promise<boolean>;
+  setBackgroundBlur(amount: number): Promise<boolean>;
+  removeBackgroundLayer(): Promise<boolean>;
+  selectLayer(layerId: string): Promise<boolean>;
+  renameLayer(layerId: string, name: string): Promise<boolean>;
+  duplicateLayer(layerId: string): Promise<string | null>;
+  deleteLayer(layerId: string): Promise<boolean>;
+  moveLayer(layerId: string, direction: 'up' | 'down' | 'front' | 'back' | 'bring-forward' | 'send-backward' | 'bring-to-front' | 'send-to-back'): Promise<boolean>;
+  setLayerVisibility(layerId: string, visible: boolean): Promise<boolean>;
+  setLayerLocked(layerId: string, locked: boolean): Promise<boolean>;
+  addTextLayer(payload?: ImageEditorTextLayerPatch): Promise<string | null>;
+  updateTextLayer(layerId: string, patch?: ImageEditorTextLayerPatch): Promise<boolean>;
+  destroy(): void;
+
+  on(event: 'save', callback: (payload: SaveEventPayload) => void): void;
+  on(event: 'cancel', callback: () => void): void;
+  on(event: 'error', callback: (payload: ErrorEventPayload) => void): void;
+  on(event: string, callback: (...args: unknown[]) => void): void;
+}
+
+// Core utilities
+export { EventEmitter } from './core/EventEmitter';
+export { State, createState, getState } from './core/State';
+
+// Renderer classes
+export { PixiRenderer } from './renderer/PixiRenderer';
+export { FilterManager } from './renderer/FilterManager';
+export { CropManager } from './renderer/CropManager';
+
+// UI components
+export { Toolbar } from './ui/Toolbar';
+export { CategoryCarousel } from './ui/CategoryCarousel';
+export { FilterCarousel } from './ui/FilterCarousel';
+export { FilterAdjustments } from './ui/FilterAdjustments';
+export { CropControls } from './ui/CropControls';
+export { ActiveFiltersPanel } from './ui/ActiveFiltersPanel';
+
+// UI Builder utilities
+export {
+  el,
+  createSlider,
+  createToggle,
+  createColorPicker,
+  createSelect,
+  createButton,
+  createIconButton,
+  createChip,
+  createCard,
+  createScrollContainer
+} from './ui/UIBuilder';
+
+// Icons
+export * as icons from './icons/icons';

package/dist/vanilla-editor/presets/index.d.ts

@@ -0,0 +1,114 @@
+/**
+ * Resolve a preset by name or return a custom preset object as-is.
+ * Falls back to the 'free' preset if the name is not recognized.
+ *
+ * @param {string|EditorPreset} preset - Preset name or custom preset object
+ * @returns {EditorPreset} Resolved preset
+ */
+export function getPreset(preset: string | EditorPreset): EditorPreset;
+/**
+ * Merge a preset with explicit option overrides.
+ * Options take precedence over preset values.
+ *
+ * @param {EditorPreset} preset - Base preset
+ * @param {Partial<EditorPreset>} overrides - Explicit overrides
+ * @returns {EditorPreset} Merged result
+ */
+export function mergePresetWithOverrides(preset: EditorPreset, overrides: Partial<EditorPreset>): EditorPreset;
+/**
+ * Parse an aspect ratio string into a numeric value.
+ * Handles standard ratios ('1:1', '16:9', etc.) and custom strings ('3:1', '21:9').
+ * Returns null for 'free' or invalid values.
+ *
+ * @param {string} ratio - Aspect ratio string
+ * @returns {number|null} Numeric ratio (width / height), or null for 'free'
+ */
+export function parseAspectRatio(ratio: string): number | null;
+/**
+ * Built-in presets.
+ * @type {Record<string, EditorPreset>}
+ */
+export const PRESETS: Record<string, EditorPreset>;
+export type EditorPreset = {
+    /**
+     * - Preset identifier (e.g., 'avatar', 'banner', 'product')
+     */
+    name: string;
+    /**
+     * - Which tool is active when editor opens
+     */
+    initialMode: "crop" | "filters";
+    /**
+     * - Default crop shape
+     */
+    cropShape: "free" | "square" | "circle";
+    /**
+     * - Aspect ratio: 'free', '1:1', '4:3', '16:9', '3:2', '2:3', or custom like '3:1'
+     */
+    aspectRatio: string;
+    /**
+     * - Smart zoom-out when crop exceeds image bounds
+     */
+    autoZoomOnCropOverflow: boolean;
+    /**
+     * - Prevent user from changing crop shape
+     */
+    lockCropShape: boolean;
+    /**
+     * - Prevent user from changing aspect ratio
+     */
+    lockAspectRatio: boolean;
+    /**
+     * - Whether filter panel is available
+     */
+    showFilters: boolean;
+    /**
+     * - Whether crop controls are available
+     */
+    showCropControls: boolean;
+    /**
+     * - Optional max output width in pixels
+     */
+    maxExportWidth?: number | undefined;
+    /**
+     * - Optional max output height in pixels
+     */
+    maxExportHeight?: number | undefined;
+};
+/**
+ * Editor Preset System
+ *
+ * Presets configure the image editor for specific use cases (avatars, banners, etc.).
+ * Each preset defines initial tool state, crop shape, aspect ratio, and control visibility.
+ *
+ * @example
+ * import { getPreset, PRESETS } from './presets/index.js'
+ *
+ * // Get a built-in preset by name
+ * const avatarPreset = getPreset('avatar')
+ *
+ * // Use directly
+ * const editor = new VanillaImageEditor(container, { preset: avatarPreset })
+ *
+ * // Or pass by name (resolved later)
+ * const editor = new VanillaImageEditor(container, { preset: 'avatar' })
+ */
+/**
+ * @typedef {Object} EditorPreset
+ * @property {string} name - Preset identifier (e.g., 'avatar', 'banner', 'product')
+ * @property {'crop'|'filters'} initialMode - Which tool is active when editor opens
+ * @property {'free'|'square'|'circle'} cropShape - Default crop shape
+ * @property {string} aspectRatio - Aspect ratio: 'free', '1:1', '4:3', '16:9', '3:2', '2:3', or custom like '3:1'
+ * @property {boolean} autoZoomOnCropOverflow - Smart zoom-out when crop exceeds image bounds
+ * @property {boolean} lockCropShape - Prevent user from changing crop shape
+ * @property {boolean} lockAspectRatio - Prevent user from changing aspect ratio
+ * @property {boolean} showFilters - Whether filter panel is available
+ * @property {boolean} showCropControls - Whether crop controls are available
+ * @property {number} [maxExportWidth] - Optional max output width in pixels
+ * @property {number} [maxExportHeight] - Optional max output height in pixels
+ */
+/**
+ * Default values for an EditorPreset. Used as the base when merging.
+ * @type {EditorPreset}
+ */
+export const DEFAULT_PRESET: EditorPreset;

package/dist/vanilla-editor/renderer/CropManager.d.ts

@@ -0,0 +1,140 @@
+export class CropManager extends EventEmitter {
+    /**
+     * Padding factor for auto-zoom: image will be ~91% of crop size (1/1.1).
+     * Higher values = more aggressive zoom-out, more padding around image.
+     */
+    static AUTO_ZOOM_PADDING: number;
+    /**
+     * Minimum interval (ms) between auto-zoom adjustments during drag.
+     */
+    static AUTO_ZOOM_THROTTLE_MS: number;
+    /**
+     * Calculate the target zoom level for auto-zoom when crop exceeds image bounds.
+     * Pure function — returns the new zoom level, or null if no adjustment is needed.
+     *
+     * @param {{ width: number, height: number }} cropRect - Current crop dimensions
+     * @param {number} spriteWidth - Current sprite width on screen
+     * @param {number} spriteHeight - Current sprite height on screen
+     * @param {number} texWidth - Original texture width (pixels)
+     * @param {number} texHeight - Original texture height (pixels)
+     * @param {number} fitScale - Current fit-to-screen scale
+     * @param {number} currentZoom - Current zoom level
+     * @returns {number|null} Target zoom level, or null if no zoom needed
+     */
+    static calcAutoZoom(cropRect: {
+        width: number;
+        height: number;
+    }, spriteWidth: number, spriteHeight: number, texWidth: number, texHeight: number, fitScale: number, currentZoom: number): number | null;
+    constructor(state: any, pixiRenderer: any);
+    state: any;
+    renderer: any;
+    _overlayCanvas: HTMLCanvasElement | null;
+    _isDragging: boolean;
+    _dragStart: {
+        x: any;
+        y: any;
+    } | null;
+    _dragMode: string | null;
+    _startRect: any;
+    _hoverMode: string | null;
+    _lastAutoZoomCheck: number;
+    HANDLE_SIZE: number;
+    EDGE_HIT_PAD: number;
+    _onPointerDown: (event: any) => void;
+    _onPointerMove: (event: any) => void;
+    _onPointerUp: () => void;
+    /**
+     * Set the overlay canvas element
+     * @param {HTMLCanvasElement} canvas
+     */
+    setOverlayCanvas(canvas: HTMLCanvasElement): void;
+    /**
+     * Get aspect ratio value from string
+     * @param {string} aspect
+     * @returns {number|null}
+     */
+    _getAspectRatio(aspect: string): number | null;
+    /**
+     * Apply aspect ratio constraint to crop rect
+     */
+    applyAspectRatio(): void;
+    /**
+     * Constrain crop rect to bounds
+     */
+    constrainCropRect(): void;
+    /**
+     * Check if auto-zoom is needed and apply it (throttled).
+     * Called during crop resize drags when autoZoomOnCropOverflow is enabled.
+     */
+    _checkAutoZoom(): void;
+    /**
+     * Draw crop overlay on canvas
+     */
+    drawOverlay(): void;
+    /**
+     * Hit test for handles
+     * @param {number} px
+     * @param {number} py
+     * @returns {string|null}
+     */
+    _hitHandle(px: number, py: number): string | null;
+    /**
+     * Handle pointer down event
+     */
+    _handlePointerDown(event: any): void;
+    /**
+     * Handle pointer move event
+     */
+    _handlePointerMove(event: any): void;
+    /**
+     * Handle pointer up event
+     */
+    _handlePointerUp(): void;
+    /**
+     * Enable crop mode
+     */
+    enable(): void;
+    /**
+     * Disable crop mode
+     */
+    disable(): void;
+    /**
+     * Apply the crop
+     * @returns {{ texture: PIXI.Texture, preservedZoom: number }|null}
+     */
+    apply(): {
+        texture: PIXI.Texture;
+        preservedZoom: number;
+    } | null;
+    /**
+     * Apply a crop from saved texture-pixel coordinates (for state rehydration).
+     * Unlike apply(), this does not read from crop.rect or require the interactive overlay.
+     * @param {{ x: number, y: number, width: number, height: number }} pixelRect
+     * @param {'free'|'circle'} shape
+     * @returns {{ texture: Object, preservedZoom: number }|null}
+     */
+    applyFromPixelRect(pixelRect: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }, shape?: "free" | "circle"): {
+        texture: Object;
+        preservedZoom: number;
+    } | null;
+    /**
+     * Cancel crop
+     */
+    cancel(): void;
+    /**
+     * Set crop shape
+     * @param {'free'|'square'|'circle'} shape
+     */
+    setShape(shape: "free" | "square" | "circle"): void;
+    /**
+     * Set aspect ratio
+     * @param {'free'|'1:1'|'4:3'|'16:9'|'3:2'|'2:3'|string} aspect
+     */
+    setAspect(aspect: "free" | "1:1" | "4:3" | "16:9" | "3:2" | "2:3" | string): void;
+}
+import { EventEmitter } from '../core/EventEmitter.js';