/** * Math for the origin crop plugin: zoom-from-origin flights from cropped * thumbnails. A grid tile cropped with `object-fit: cover` (or * `background-size: cover`) shows only a window of the image. The plugin * grows that window from the tile at a uniform scale while two boxes * around the slides crop the rest of the image, revealed as the flight * lands. Pure rect arithmetic: the plugin measures the DOM and passes * plain numbers in. The core flight (`origin.ts`) never imports this. */ import { type ImageSize, type RectLike } from './origin'; /** A region of an image as fractions of its width and height (0..1). */ export interface FractionRect { x: number; y: number; width: number; height: number; } /** The whole image: the window of an uncropped thumbnail. */ export declare const WHOLE_IMAGE: FractionRect; /** Whether a region covers the whole image (within rounding). */ export declare function isWholeImage(rect: FractionRect): boolean; /** * How a trigger paints its thumbnail file into its box: the CSS * `object-fit` of an ``, or the `background-size` keyword of an * element with a background image. */ export type ThumbFit = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'; /** * One axis of a CSS `object-position`/`background-position`: a share of * the free space (the box minus the painted image) plus a px offset. */ export interface CssPositionAxis { percent: number; px: number; } export interface CssPosition { x: CssPositionAxis; y: CssPositionAxis; } /** The CSS default, `50% 50%`. */ export declare const CSS_POSITION_CENTER: CssPosition; /** * Parse a computed `object-position` or `background-position` value * (`"50% 50%"`, `"10px 20px"`, `"calc(100% - 10px) 0%"`, keywords). * Unparseable values fall back to the centre. Only the first layer of a * multi-layer background is read. */ export declare function parseCssPosition(value: string | undefined): CssPosition; /** Parse a computed `object-fit` value; the CSS default is `fill`. */ export declare function parseObjectFit(value: string | undefined): ThumbFit; /** * Parse a computed `background-size` value into the fit it paints like: * `cover` and `contain` as themselves, `auto` as `none` (natural size), * `100% 100%` as `fill`. Explicit lengths cannot be modelled and return * undefined. Only the first layer of a multi-layer background is read. */ export declare function parseBackgroundFit(value: string | undefined): ThumbFit | undefined; /** The first URL of a computed `background-image` value, if any. */ export declare function parseCssUrl(value: string | undefined): string | undefined; export interface OriginWindowInput { /** Rendered box of the trigger (thumbnail img or background element), viewport px. */ box: RectLike; /** The full image; only its aspect ratio matters. */ imageSize: ImageSize; /** * Natural size of the thumbnail file when known (an ``'s * `naturalWidth`/`naturalHeight`). A file with a different aspect ratio * than the image is taken as a centred crop of it. Unknown (a background * image, an unloaded img) assumes the image's own aspect ratio. */ thumbSize?: ImageSize; /** How the file is painted into the box. Defaults to `fill`. */ fit?: ThumbFit; /** Where the painted file sits in the box. Defaults to the centre. */ position?: CssPosition; } export interface OriginWindow { /** * The part of the trigger box that shows thumbnail pixels, viewport px: * the box itself unless the file is letterboxed inside it. */ rect: RectLike; /** The part of the image visible in `rect`, as fractions of the image. */ window: FractionRect; /** * The part of the image the thumbnail file covers, as fractions: the * whole image unless the file is pre-cropped. Sizes the flight's * dummy, which shows the file, so its pixels land where they belong. */ region: FractionRect; } /** * Where a thumbnail's visible pixels sit in the full image. Models the CSS * fit and position of the file inside its box, and a pre-cropped file as a * centred crop of the image. */ export declare function getOriginWindow(input: OriginWindowInput): OriginWindow; export interface OriginCropFlightInput { /** * The part of the trigger showing thumbnail pixels * ({@link OriginWindow.rect}), viewport px. */ triggerRect: RectLike; /** Bounding rect of the gallery outer element, viewport coordinates. */ containerRect: RectLike; /** Media container top offset (toolbar height), px. */ top: number; /** Media container bottom offset (caption + thumb strip height), px. */ bottom: number; /** Final displayed image size (see `fitImageSize`). */ imageSize: ImageSize; /** The part of the image the trigger shows ({@link OriginWindow.window}). */ window: FractionRect; } export interface OriginCropFlight { /** * The slide's transform: the window lands on the trigger, at a uniform * scale, inside the translated stage boxes. */ transform: string; /** The outer stage box: its bottom-right corner on the trigger's. */ outer: string; /** The inner stage box: its top-left corner on the trigger's. */ inner: string; } /** * The start of a flight from a cropped thumbnail (and the end of the flight * back to it). Two stage-sized, overflow-hidden boxes wrap the slides: the * outer one translates so that its bottom-right corner sits on the * trigger's, the inner one so that its top-left corner sits on the * trigger's, and their intersection is exactly the trigger's box. As both * transition back to rest with the slide, the crop's edges move linearly on * screen out to the whole stage, and only transforms animate. */ export declare function getOriginCropFlight(input: OriginCropFlightInput): OriginCropFlight;