Image Manipulation

/**
 * Image element with transformation capabilities
 * Extends CropperElement with image-specific functionality
 */
class CropperImage extends CropperElement {
  /**
   * Enable/disable image rotation
   * @default true
   */
  rotatable: boolean;
  
  /**
   * Enable/disable image scaling
   * @default true
   */
  scalable: boolean;
  
  /**
   * Enable/disable image skewing
   * @default true
   */
  skewable: boolean;
  
  /**
   * Enable/disable image translation (movement)
   * @default true
   */
  translatable: boolean;
  
  /**
   * Initial centering behavior ('contain' or 'cover')
   * @default 'contain'
   */
  initialCenterSize: string;
  
  // Native image attributes
  alt: string;
  crossorigin: string;
  decoding: string;
  elementtiming: string;
  fetchpriority: string;
  loading: string;
  referrerpolicy: string;
  sizes: string;
  src: string;
  srcset: string;
}

/**
 * Wait for the image to load and become ready for manipulation
 * @param callback - Optional callback function called when ready
 * @returns Promise that resolves with the loaded image element
 */
$ready(callback?: (image: HTMLImageElement) => unknown): Promise<HTMLImageElement>;

const image = cropper.getCropperImage();

// Wait for image to load
await image.$ready();
console.log('Image is ready for manipulation');

// With callback
await image.$ready((img) => {
  console.log('Image dimensions:', img.naturalWidth, 'x', img.naturalHeight);
});

// Chain operations after ready
await image.$ready();
image.$center().$zoom(1.5).$rotate(45);

/**
 * Move the image by a relative offset
 * @param x - Horizontal offset in pixels
 * @param y - Vertical offset in pixels (defaults to x if not provided)
 * @returns This instance for method chaining
 */
$move(x: number, y?: number): this;

/**
 * Move the image to an absolute position
 * @param x - Horizontal position in pixels
 * @param y - Vertical position in pixels (defaults to x if not provided)
 * @returns This instance for method chaining
 */
$moveTo(x: number, y?: number): this;

/**
 * Center the image in the container
 * @param size - Centering mode ('contain' or 'cover')
 * @returns This instance for method chaining
 */
$center(size?: string): this;

const image = cropper.getCropperImage();

// Move by offset
image.$move(50, 30); // Move right 50px, down 30px
image.$move(25);     // Move right and down 25px

// Move to absolute position
image.$moveTo(100, 50); // Position at (100, 50)
image.$moveTo(200);     // Position at (200, 200)

// Center image
image.$center();           // Default contain centering
image.$center('contain');  // Fit entire image within container
image.$center('cover');    // Fill container, may crop image

/**
 * Rotate the image by an angle
 * @param angle - Rotation angle (number in radians, string with unit)
 * @param x - Center X coordinate for rotation (defaults to image center)
 * @param y - Center Y coordinate for rotation (defaults to image center)
 * @returns This instance for method chaining
 */
$rotate(angle: number | string, x?: number, y?: number): this;

const image = cropper.getCropperImage();

// Rotate by degrees (string)
image.$rotate('45deg');    // Rotate 45 degrees
image.$rotate('90deg');    // Rotate 90 degrees
image.$rotate('-30deg');   // Rotate -30 degrees

// Rotate by radians (number)
image.$rotate(Math.PI / 4);     // 45 degrees in radians
image.$rotate(Math.PI / 2);     // 90 degrees in radians

// Rotate around specific point
image.$rotate('45deg', 100, 100); // Rotate around point (100, 100)

// Other angle units
image.$rotate('0.5turn');  // Half turn (180 degrees)
image.$rotate('100grad');  // 100 gradians

/**
 * Zoom the image by a scale factor
 * @param scale - Scale factor (1.0 = no change, 2.0 = double size)
 * @param x - Center X coordinate for scaling (defaults to image center)
 * @param y - Center Y coordinate for scaling (defaults to image center)
 * @returns This instance for method chaining
 */
$zoom(scale: number, x?: number, y?: number): this;

/**
 * Scale the image with separate X and Y factors
 * @param x - Horizontal scale factor
 * @param y - Vertical scale factor (defaults to x if not provided)
 * @returns This instance for method chaining
 */
$scale(x: number, y?: number): this;

const image = cropper.getCropperImage();

// Zoom uniformly
image.$zoom(1.5);       // Zoom to 150%
image.$zoom(0.8);       // Zoom to 80%
image.$zoom(2.0);       // Double size

// Zoom around specific point
image.$zoom(1.5, 200, 150); // Zoom 150% around point (200, 150)

// Scale with different X/Y factors
image.$scale(1.2, 0.8);  // Stretch horizontally, compress vertically
image.$scale(2.0);       // Scale both axes by 2.0
image.$scale(0.5, 1.5);  // Compress horizontally, stretch vertically

/**
 * Skew the image
 * @param x - Horizontal skew angle (number in radians, string with unit)
 * @param y - Vertical skew angle (defaults to 0 if not provided)
 * @returns This instance for method chaining
 */
$skew(x: number | string, y?: number | string): this;

/**
 * Translate (move) the image
 * @param x - Horizontal translation in pixels
 * @param y - Vertical translation in pixels (defaults to 0 if not provided)
 * @returns This instance for method chaining
 */
$translate(x: number, y?: number): this;

/**
 * Apply a 2D transformation matrix
 * @param a - Horizontal scaling
 * @param b - Horizontal skewing
 * @param c - Vertical skewing
 * @param d - Vertical scaling
 * @param e - Horizontal translation
 * @param f - Vertical translation
 * @returns This instance for method chaining
 */
$transform(a: number, b: number, c: number, d: number, e: number, f: number): this;

const image = cropper.getCropperImage();

// Skew operations
image.$skew('15deg');        // Horizontal skew
image.$skew('10deg', '5deg'); // Both horizontal and vertical skew
image.$skew(0.2, 0.1);       // Skew in radians

// Translation
image.$translate(50, 30);    // Move by offset
image.$translate(100);       // Move horizontally only

// Custom transform matrix
image.$transform(
  1.2,   // Horizontal scale
  0.1,   // Horizontal skew
  0.05,  // Vertical skew
  1.1,   // Vertical scale
  50,    // Horizontal translation
  25     // Vertical translation
);

/**
 * Set the complete transformation matrix
 * @param a - Matrix values (can be array or individual parameters)
 * @param b - Matrix parameter (when a is number)
 * @param c - Matrix parameter (when a is number)
 * @param d - Matrix parameter (when a is number)
 * @param e - Matrix parameter (when a is number)
 * @param f - Matrix parameter (when a is number)
 * @returns This instance for method chaining
 */
$setTransform(a: number | number[], b?: number, c?: number, d?: number, e?: number, f?: number): this;

/**
 * Get the current transformation matrix
 * @returns Array of 6 numbers representing the transform matrix [a, b, c, d, e, f]
 */
$getTransform(): number[];

/**
 * Reset all transformations to identity matrix
 * @returns This instance for method chaining
 */
$resetTransform(): this;

const image = cropper.getCropperImage();

// Get current transform
const matrix = image.$getTransform();
console.log('Current transform:', matrix); // [a, b, c, d, e, f]

// Set transform from array
image.$setTransform([1.5, 0, 0, 1.5, 100, 50]);

// Set transform with individual parameters
image.$setTransform(1.2, 0.1, 0.05, 1.1, 25, 10);

// Reset to identity
image.$resetTransform(); // Back to original state

// Save and restore transforms
const savedTransform = image.$getTransform();
image.$rotate('45deg').$zoom(1.5);
// ... do other operations
image.$setTransform(savedTransform); // Restore saved state

const image = cropper.getCropperImage();

// Ensure image is ready first
await image.$ready();

// Complex transformation sequence
image
  .$center('contain')           // Center the image
  .$rotate('15deg')            // Slight rotation
  .$zoom(1.2)                  // Zoom in slightly
  .$translate(20, -10);        // Fine-tune position

// Create a "presentation" view
async function setupPresentationView() {
  const image = cropper.getCropperImage();
  await image.$ready();
  
  return image
    .$resetTransform()           // Start fresh
    .$center('cover')            // Fill the canvas
    .$zoom(0.9)                  // Slight zoom out for padding
    .$rotate('2deg');            // Subtle angle for style
}

// Fit image perfectly within bounds
async function fitToBounds(maxWidth, maxHeight) {
  const image = cropper.getCropperImage();
  const img = await image.$ready();
  
  const scaleX = maxWidth / img.naturalWidth;
  const scaleY = maxHeight / img.naturalHeight;
  const scale = Math.min(scaleX, scaleY);
  
  return image
    .$resetTransform()
    .$center()
    .$zoom(scale);
}

// Initial centering uses string literals:
// 'contain' - Scale image to fit within container dimensions
// 'cover' - Scale image to cover container dimensions

const image = cropper.getCropperImage();

try {
  await image.$ready();
  image.$zoom(1.5);
} catch (error) {
  console.error('Image operation failed:', error.message);
}

// Check transformation capabilities
if (image.rotatable) {
  image.$rotate('45deg');
} else {
  console.log('Rotation is disabled');
}

if (image.scalable) {
  image.$zoom(1.5);
} else {
  console.log('Scaling is disabled');
}