@mescius/dsimageviewer
Version:
Document Solutions Image Viewer
130 lines (129 loc) • 4.59 kB
TypeScript
/**
* A point representing a location in (x, y) coordinate space.
**/
export interface PointLocation {
/**
* X position.
**/
x: number;
/**
* Y position.
**/
y: number;
}
/**
* Size of the rectangle.
**/
export interface Size {
/**
* Width.
**/
width: number;
/**
* Height.
**/
height: number;
}
/**
* Data structure with top-left coordinates (x, y) and size (width, height) of the rectangle.
**/
export interface Bounds extends PointLocation, Size {
rotationAngle?: number;
}
export interface IGcSelectionBox {
/**
* If `true`, allows the selection to extend beyond the canvas bounds.
*
* Default is `false`, which restricts the selection to stay fully within the canvas.
*/
allowOverflow?: boolean;
cursorStyle: "crosshair" | "text";
moveOnly: boolean;
get selectionBounds(): Bounds;
set selectionBounds(bounds: Bounds);
get previewImageUrl(): string | undefined;
set previewImageUrl(dataUrl: string | undefined);
get keepAspectRatio(): boolean;
set keepAspectRatio(keepAspectRatio: boolean);
disable(): any;
show(initialBounds?: Bounds, selectionType?: GcSelectionBoxUsageType, keepAspectRatio?: boolean): any;
hide(): any;
showPointIndicator(coords: PointLocation, size: number, type: PointIndicatorType): void;
clearPointIndicator(type: PointIndicatorType): void;
clearPointIndicators(): void;
addListener(uniqueKey: string, selectionBoxHandler: GcSelectionBoxHandler): any;
removeListener(uniqueKey: string): any;
invalidate(): any;
bindOnce(eventName: string, handler: any): any;
handleInteractionStart(event: PointerEvent): any;
onPointerDown(event: PointerEvent): any;
onPointerMove(event: PointerEvent): any;
onPointerUp(event: PointerEvent): any;
onDocumentPointerDown(event: PointerEvent): any;
}
export declare type PointIndicatorType = "clone-stamp-src" | "clone-stamp-dest";
/**
* Represents draggable edges and handles of a selection box in the UI.
* Used to determine resize, move, and rotate operations on selected objects.
*
* @typedef {"s"|"e"|"n"|"w"|"ne"|"nw"|"sw"|"se"|"center"|"rotate"} GcSelectionEdge
*
* @property {"n"} n - North edge (top-center)
* @property {"e"} e - East edge (right-center)
* @property {"s"} s - South edge (bottom-center)
* @property {"w"} w - West edge (left-center)
* @property {"ne"} ne - Northeast corner
* @property {"nw"} nw - Northwest corner
* @property {"sw"} sw - Southwest corner
* @property {"se"} se - Southeast corner
* @property {"center"} center - Center area (move operation)
* @property {"rotate"} rotate - Rotation handle
*
* @example
* // Getting edge from DOM element
* const handle = document.querySelector('[data-edge="ne"]');
* const edge = handle.getAttribute('data-edge') as GcSelectionEdge;
*
* @example
* // Default to center if no edge specified
* if (!edge) {
* edge = 'center'; // Fallback for move operations
* }
*/
export declare type GcSelectionEdge = "s" | "e" | "n" | "w" | "ne" | "nw" | "sw" | "se" | "center" | "rotate";
/**
* Additional parameters for onSelectionBoundsChanged callback.
**/
export declare type SelectionBoundsChangedParams = {
isDirty: boolean;
trigger: "start" | "move" | "end";
};
/**
* Selection box event handler
**/
export interface GcSelectionBoxHandler {
/**
* This method will be called by the selection box object when the user selection changes.
**/
onSelectionBoundsChanged(selection: Bounds, params: SelectionBoundsChangedParams): any;
}
export interface GcSelectionBoxHandler2 extends GcSelectionBoxHandler {
onKeyDown: (e: KeyboardEvent, params: {
alt: boolean;
space: boolean;
shift: boolean;
}) => any;
onSelectionDownOutside: (e: PointerEvent, params: {}) => any;
onSelectionDownInside: (e: PointerEvent, params: {}) => any;
onSelectionDblOutside: (e: PointerEvent, params: {}) => any;
onSelectionDblInside: (e: PointerEvent, params: {}) => any;
}
/**
* Selection box usage type.
* Available usage types:
* crop - show selection to crop part of the image,
* resize - show selection to resize the image,
* image-preview - show the inage preview inside selection,
* object - show selection over any object.
**/
export declare type GcSelectionBoxUsageType = "crop" | "resize" | "pencil" | "image-preview" | "object" | "default";