react-image-mask/dist/components/ImageMask/ImageMaskControls.d.ts

A React component for creating image masks with drawing tools

import { ToolMode, ControlsConfig } from "./types";
import "./ImageMaskControls.css";
/**
 * ImageMaskControls - UI controls component for the image mask editor
 *
 * This component provides a comprehensive control panel with tool selection,
 * settings adjustments, and action buttons. It includes dropdown menus for
 * color selection, brush sizes, zoom levels, and tool-specific options.
 * All controls are configurable and can be shown/hidden based on requirements.
 *
 * Features:
 * - Tool selection (move, freehand, box, polygon, eraser tools)
 * - Color picker with predefined colors and custom color input
 * - Brush size selection with visual preview
 * - Opacity slider for mask transparency
 * - Zoom controls with preset levels
 * - Undo/redo functionality
 * - Clear and download actions
 * - Fully configurable UI (show/hide sections)
 * - Responsive dropdown menus with click-outside-to-close
 *
 * @component
 * @example
 * ```tsx
 * <ImageMaskControls
 *   setToolMode={setToolMode}
 *   toolMode={toolMode}
 *   clearCanvas={clearCanvas}
 *   currentZoom={zoom}
 *   undo={undo}
 *   redo={redo}
 *   canUndo={canUndo}
 *   canRedo={canRedo}
 *   onDownloadMask={handleDownload}
 *   setMaskColor={setMaskColor}
 *   currentMaskColor={maskColor}
 *   setOpacity={setOpacity}
 *   currentOpacity={opacity}
 *   setBrushSize={setBrushSize}
 *   currentBrushSize={brushSize}
 *   setZoom={setZoom}
 *   controlsConfig={controlsConfig}
 * />
 * ```
 */
export declare const ImageMaskControls: ({ setToolMode, toolMode, clearCanvas, currentZoom, undo, redo, canUndo, canRedo, onDownloadMask, setMaskColor, currentMaskColor, setOpacity, currentOpacity, setBrushSize, currentBrushSize, setZoom, controlsConfig }: {
    /** Function to set the active tool mode */
    setToolMode: (toolMode: ToolMode) => void;
    /** Currently active tool mode */
    toolMode: ToolMode;
    /** Function to clear all mask data */
    clearCanvas?: (() => void) | undefined;
    /** Current zoom level as percentage */
    currentZoom?: number | undefined;
    /** Function to undo the last action */
    undo?: (() => void) | undefined;
    /** Function to redo the last undone action */
    redo?: (() => void) | undefined;
    /** Whether undo is currently available */
    canUndo?: boolean | undefined;
    /** Whether redo is currently available */
    canRedo?: boolean | undefined;
    /** Function to download the current mask */
    onDownloadMask?: (() => void) | undefined;
    /** Function to set the mask color */
    setMaskColor?: ((color: string) => void) | undefined;
    /** Current mask color in RGBA format */
    currentMaskColor?: string | undefined;
    /** Function to set the mask opacity */
    setOpacity?: ((opacity: number) => void) | undefined;
    /** Current mask opacity (0-1) */
    currentOpacity?: number | undefined;
    /** Function to set the brush size */
    setBrushSize?: ((size: number) => void) | undefined;
    /** Current brush size in pixels */
    currentBrushSize?: number | undefined;
    /** Function to set the zoom level */
    setZoom?: ((zoom: number) => void) | undefined;
    /** Configuration for which controls to display */
    controlsConfig?: ControlsConfig | undefined;
}) => import("react/jsx-runtime").JSX.Element;
export default ImageMaskControls;
//# sourceMappingURL=ImageMaskControls.d.ts.map