Canvas Operations

/**
 * Interactive canvas container for cropping operations
 * Extends CropperElement with interaction handling capabilities
 */
class CropperCanvas extends CropperElement {
  /**
   * Whether to show background behind the image
   * @default false
   */
  background: boolean;
  
  /**
   * Whether interactions are disabled
   * @default false
   */
  disabled: boolean;
  
  /**
   * Scale step for wheel-based zooming
   * @default 0.1
   */
  scaleStep: number;
  
  /**
   * Theme color for canvas elements
   * @default '#39f'
   */
  themeColor: string;
  
  /**
   * Set the current action being performed
   * @param action - Action type (move, scale, rotate, etc.)
   * @returns This instance for method chaining
   */
  $setAction(action: string): this;
  
  /**
   * Generate a canvas element with the current cropper state
   * @param options - Canvas generation options
   * @returns Promise resolving to the generated canvas
   */
  $toCanvas(options?: CanvasOptions): Promise<HTMLCanvasElement>;
}

/**
 * Options for canvas generation
 */
interface CanvasOptions {
  /**
   * Width of the generated canvas
   * If not specified, uses the natural width of the cropper canvas
   */
  width?: number;
  
  /**
   * Height of the generated canvas  
   * If not specified, uses the natural height of the cropper canvas
   */
  height?: number;
  
  /**
   * Callback function called before drawing the image
   * Useful for adding custom backgrounds or overlays
   */
  beforeDraw?: (context: CanvasRenderingContext2D, canvas: HTMLCanvasElement) => void;
}

/**
 * Generate a canvas with the current image and transformations
 * @param options - Canvas generation options
 * @returns Promise that resolves to the generated canvas element
 */
$toCanvas(options?: CanvasOptions): Promise<HTMLCanvasElement>;

// Basic canvas generation
const canvas = cropper.getCropperCanvas();
const generatedCanvas = await canvas.$toCanvas();
document.body.appendChild(generatedCanvas);

// Custom size canvas
const smallCanvas = await canvas.$toCanvas({
  width: 300,
  height: 200
});

// Custom background
const canvasWithBackground = await canvas.$toCanvas({
  beforeDraw: (context, canvas) => {
    // Add white background
    context.fillStyle = 'white';
    context.fillRect(0, 0, canvas.width, canvas.height);
  }
});

// High resolution export
const highResCanvas = await canvas.$toCanvas({
  width: 1920,
  height: 1080,
  beforeDraw: (context, canvas) => {
    // Add watermark
    context.font = '24px Arial';
    context.fillStyle = 'rgba(255, 255, 255, 0.5)';
    context.fillText('© My Company', 20, canvas.height - 30);
  }
});

/**
 * Set the current action being performed
 * Actions control how user interactions are interpreted
 */
$setAction(action: string): this;

const canvas = cropper.getCropperCanvas();

// Disable all interactions
canvas.disabled = true;

// Enable interactions with custom zoom sensitivity
canvas.disabled = false;
canvas.scaleStep = 0.05; // More precise zooming

// Set background visibility
canvas.background = true; // Show background pattern

// Customize theme color
canvas.themeColor = '#ff4444'; // Red theme

// Control current action
canvas.$setAction('move'); // Set to move mode
canvas.$setAction('scale'); // Set to scale mode
canvas.$setAction('none'); // Disable current action

const canvas = cropper.getCropperCanvas();

// Listen for action start
canvas.addEventListener('actionstart', (event) => {
  console.log('Action started:', event.detail.action);
});

// Listen for action progress
canvas.addEventListener('action', (event) => {
  const { action, scale, rotate, startX, startY, endX, endY } = event.detail;
  console.log('Action:', action, { scale, rotate, startX, startY, endX, endY });
});

// Listen for action end
canvas.addEventListener('actionend', (event) => {
  console.log('Action ended:', event.detail.action);
});

// Export current view as image
async function exportAsImage() {
  const canvas = cropper.getCropperCanvas();
  const exportCanvas = await canvas.$toCanvas();
  
  // Convert to blob
  return new Promise(resolve => {
    exportCanvas.toBlob(resolve, 'image/png');
  });
}

// Export with specific dimensions
async function exportWithSize(width, height) {
  const canvas = cropper.getCropperCanvas();
  return await canvas.$toCanvas({ width, height });
}

// Export for printing (high DPI)
async function exportForPrint() {
  const canvas = cropper.getCropperCanvas();
  const printCanvas = await canvas.$toCanvas({
    width: 2100, // A4 width at 300 DPI
    height: 2970, // A4 height at 300 DPI
    beforeDraw: (context, canvas) => {
      // Set high-quality rendering
      context.imageSmoothingEnabled = true;
      context.imageSmoothingQuality = 'high';
    }
  });
  
  return printCanvas;
}

// Available action types
const ACTION_NONE: string;      // No action
const ACTION_MOVE: string;      // Move/pan action  
const ACTION_SCALE: string;     // Scale/zoom action
const ACTION_ROTATE: string;    // Rotation action
const ACTION_TRANSFORM: string; // Combined transform action
const ACTION_SELECT: string;    // Selection action

try {
  const canvas = await cropper.getCropperCanvas().$toCanvas();
} catch (error) {
  if (error.message.includes('not connected to the DOM')) {
    console.error('Canvas must be in the DOM to generate output');
  }
}