GrImageCrop

const grImageCropConfig: import("@feugene/granum/contract").GranumComponentDescriptor<"GrImageCrop">;

interface GrImageCropConfigurableProps {
    size?: GrImageCropSize;
}

interface GrCropSize {
    width: number;
    height: number;
}

interface GrCropOffset {
    x: number;
    y: number;
}

interface GrCropRect {
    sx: number;
    sy: number;
    sw: number;
    sh: number;
}

function coverScale(image: GrCropSize, viewport: GrCropSize): number;

function displaySize(image: GrCropSize, viewport: GrCropSize, zoom: number): GrCropSize;

function offsetBounds(image: GrCropSize, viewport: GrCropSize, zoom: number): GrCropOffset;

function clampOffset(offset: GrCropOffset, image: GrCropSize, viewport: GrCropSize, zoom: number): GrCropOffset;

function cropRect(image: GrCropSize, viewport: GrCropSize, zoom: number, offset: GrCropOffset): GrCropRect;

function viewportFor(width: number, aspectRatio: number): GrCropSize;

type GrImageCropSize = 'xs' | 'sm' | 'md' | 'lg';

type GrImageCropShape = 'rect' | 'circle';

const grImageCropSafelist: string[];

interface GrImageCropOutput {
    /** Ширина результата. По умолчанию — ширина захваченной области исходника. */
    width?: number;
    /** Высота результата. Вместе с `width` — габарит, в который кадр вписывается. */
    height?: number;
    /** MIME результата: `image/png` (по умолчанию), `image/jpeg`, `image/webp`. */
    type?: string;
    /** Качество сжатия от `0` до `1` для JPEG и WebP. */
    quality?: number;
}

interface GrImageCropProps {
    /** Файл из `GrFileUpload`, blob из камеры или готовый адрес. */
    src?: string | File | Blob | null;
    /** Отношение ширины кадра к высоте: `1` — аватар, `16 / 9` — обложка. */
    aspectRatio?: number;
    /**
     * Форма рамки: `rect` или `circle` — круглая маска для аватара. Маска только
     * показывает, что останется на виду; результат всё равно прямоугольный.
     */
    shape?: GrImageCropShape;
    /**
     * Увеличение относительно вписанного кадра, не меньше единицы.
     *
     * Проп необязателен: без `v-model:zoom` компонент ведёт увеличение сам —
     * иначе встроенный слайдер оказывался бы мёртвым у всех, кто модель не
     * подключил, а это самый частый случай.
     */
    zoom?: number;
    /** Наибольшее увеличение относительно вписанного кадра. По умолчанию `4`. */
    maxZoom?: number;
    /**
     * Размер и формат результата. Одна сторона — вторая считается из пропорций
     * кадра; обе — габарит, в который кадр вписывается, не искажаясь. Не задан —
     * захваченная область в пикселях исходника, PNG.
     */
    output?: GrImageCropOutput;
    /**
     * Ступень размера: элементы управления и кегль подписей. По умолчанию `md`;
     * берётся из `GrConfigProvider`.
     */
    size?: GrImageCropSize;
    /** Кадрирование заперто: картинка не двигается и не увеличивается, рамка вне порядка Tab. */
    disabled?: boolean;
    /** Имя группы с рамкой и слайдером. Не задано — из локали («Image crop»). */
    ariaLabel?: string;
}

interface GrImageCropEmits {
    /** Увеличение сменилось (`v-model:zoom`): слайдером, колесом или клавишами. */
    (e: 'update:zoom', value: number): void;
    /** Кадр изменился: сдвиг, увеличение или новая картинка. */
    (e: 'change', rect: GrCropRect): void;
    /** Картинка загрузилась — её собственный размер в пикселях. */
    (e: 'load', size: {
        width: number;
        height: number;
    }): void;
    /** Картинка не загрузилась или холст не отдал результат (чужой домен без CORS). */
    (e: 'error', error: unknown): void;
}