@alyle/ui/image-cropper/_image-cropper-base.d.ts

Minimal Design, a set of components for Angular

import { ElementRef, ChangeDetectorRef, EventEmitter, Renderer2, OnDestroy, NgZone, OnInit, AfterViewInit } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { ViewportRuler } from '@angular/cdk/scrolling';
import * as i0 from "@angular/core";
/** Image Cropper Config */
export declare class ImgCropperConfig {
    /** Cropper area width */
    width: number;
    /** Cropper area height */
    height: number;
    minWidth?: number;
    minHeight?: number;
    /** If this is not defined, the new image will be automatically defined. */
    type?: string;
    /** Background color( default: null), if is null in png is transparent but not in jpg. */
    fill?: string | null;
    /**
     * Set anti-aliased (default: true)
     * @deprecated this is not necessary as the cropper will automatically resize the image
     * to the best quality
     */
    antiAliased?: boolean;
    autoCrop?: boolean;
    output?: ImgOutput | ImgResolution;
    /**
     * Zoom out until the entire image fits into the cropping area.
     * default: false
     */
    extraZoomOut?: boolean;
    /**
     * Zoom in until the entire image fits into the cropping area.
     * default: false
     */
    extraZoomIn?: boolean;
    /**
     * Emit event `error` if the file size in bytes for the limit.
     * Note: It only works when the image is received from the `<input>` event.
     */
    maxFileSize?: number | null;
    /**
     * Whether the cropper area will be round.
     * This implies that the cropper area will maintain its aspect ratio.
     * default: false
     */
    round?: boolean;
    /**
     * Whether the cropper area is resizable.
     * default: false
     */
    resizableArea?: boolean;
    /**
     * Keep the width and height of the growing area the same according
     * to `ImgCropperConfig.width` and `ImgCropperConfig.height`
     * default: false
     */
    keepAspectRatio?: boolean;
    /**
     * Whether the cropper area is responsive.
     * By default, the width and height of the cropper area is fixed,
     * so can use when the cropper area is larger than its container,
     * otherwise this will bring problems when cropping.
     */
    responsiveArea?: boolean;
    /**
     * Pinch zoom gestures
     * Default: true
     */
    hasTouchEvents?: boolean;
}
/**
 * The output image
 * With this option you can resize the output image.
 * If `width` or `height` are 0, this will be set automatically.
 * Both cannot be 0.
 */
export interface ImgOutput {
    /**
     * The cropped image will be resized to this `width`.
     */
    width: number;
    /**
     * Cropped image will be resized to this `height`.
     */
    height: number;
}
/** Image output */
export declare enum ImgResolution {
    /**
     * The output image will be equal to the initial size of the cropper area.
     */
    Default = 0,
    /** Just crop the image without resizing */
    OriginalImage = 1
}
export declare enum PointerChange {
    Down = 0,
    Up = 1
}
/** Image output */
export declare enum ImgCropperError {
    /** The loaded image exceeds the size limit set. */
    Size = 0,
    /** The file loaded is not image. */
    Type = 1,
    /** When the image has not been loaded. */
    Other = 2
}
export interface ImgCropperEvent {
    /** Cropped image data URL */
    dataURL?: string;
    name: string | null;
    /** Filetype */
    type?: string;
    /** Cropped area width */
    areaWidth: number;
    /** Cropped area height */
    areaHeight: number;
    /** Cropped image width */
    width: number;
    /** Cropped image height */
    height: number;
    /** Original Image data URL */
    originalDataURL?: string;
    scale: number;
    /** Current rotation in degrees */
    rotation: number;
    /** Size of the image in bytes */
    size: number;
    /** Scaled offset from the left edge of the image */
    left: number;
    /** Scaled offset from the top edge of the image */
    top: number;
    /**
     * Scaled offset from the left edge of the image to center of area
     * Can be used to set image position
     */
    xOrigin: number;
    /**
     * Scaled offset from the top edge of the image to center of area
     * Can be used to set image position
     */
    yOrigin: number;
    /** @deprecated Use `xOrigin & yOrigin` instead. */
    position?: {
        x: number;
        y: number;
    };
}
export interface ImgCropperErrorEvent {
    name?: string;
    /** Size of the image in bytes */
    size: number;
    /** Filetype */
    type: string;
    /** Type of error */
    error: ImgCropperError;
    errorMsg?: string;
}
export interface ImgCropperLoaderConfig {
    name?: string | null;
    /** Filetype */
    type?: string;
    /** Cropped area width */
    areaWidth?: number;
    /** Cropped area height */
    areaHeight?: number;
    /** Cropped image width */
    width?: number;
    /** Cropped image height */
    height?: number;
    /** Original Image data URL */
    originalDataURL?: string;
    /** Accept File or Blob */
    file?: File;
    scale?: number;
    /** Current rotation in degrees */
    rotation?: number;
    /** Size of the image in bytes */
    size?: number;
    /** Offset from the left edge of the image to center of area */
    xOrigin?: number;
    /** Offset from the top edge of the image to center of area */
    yOrigin?: number;
}
export declare class _LyImageCropperBase implements OnInit, AfterViewInit, OnDestroy {
    private _renderer;
    readonly _elementRef: ElementRef<HTMLElement>;
    private cd;
    private _ngZone;
    static readonly и = "LyImageCropper";
    private _currentLoadConfig?;
    /** Original image */
    private _img;
    private startTransform?;
    private _scale?;
    private _scal3Fix?;
    private _minScale?;
    private _maxScale?;
    /** Initial config */
    private _initialConfig;
    private _config;
    private _imgRect;
    private _rotation;
    private _isSliding;
    private _isMultiTouching;
    private _startCenter;
    private _startDistance;
    /** Keeps track of the last pointer event that was captured by the crop area. */
    private _lastPointerEvent;
    private _startPointerEvent;
    _initialAreaWidth: number;
    _initialAreaHeight: number;
    _areaWidthResized: number | null;
    _areaHeightResized: number | null;
    _absoluteScale: number;
    /**
     * When is loaded image
     * @internal
     */
    _isLoadedImg: boolean;
    _urlsToRevoke: string[];
    /** When is loaded image & ready for crop */
    isLoaded: boolean;
    /** When the cropper is ready to be interacted  */
    isReady: boolean;
    isCropped: boolean;
    private _events;
    /** @private */
    readonly _isPointerUp: BehaviorSubject<boolean>;
    _cropperContainer: ElementRef;
    _imgContainer: ElementRef;
    _areaRef: ElementRef;
    _imgCanvas: ElementRef<HTMLCanvasElement>;
    get config(): ImgCropperConfig;
    set config(val: ImgCropperConfig);
    /** Set scale */
    get scale(): number | undefined;
    set scale(val: number | undefined);
    /**
     * Emit event `error` if the file size for the limit.
     * Note: It only works when the image is received from the `<input>` event.
     */
    maxFileSize: number;
    /** Get min scale */
    get minScale(): number | undefined;
    readonly scaleChange: EventEmitter<number>;
    /** Emits minimum supported image scale */
    readonly minScaleChange: EventEmitter<number>;
    /** Emits maximum supported image scale */
    readonly maxScaleChange: EventEmitter<number>;
    /** @deprecated Emits when the image is loaded, instead use `ready` */
    readonly loaded: EventEmitter<ImgCropperEvent>;
    /** Emits when the image is loaded */
    readonly imageLoaded: EventEmitter<ImgCropperEvent>;
    /** Emits when the cropper is ready to be interacted */
    readonly ready: EventEmitter<ImgCropperEvent>;
    /** On crop new image */
    readonly cropped: EventEmitter<ImgCropperEvent>;
    /** Emits when the cropper is cleaned */
    readonly cleaned: EventEmitter<void>;
    /** Emit an error when the loaded image is not valid */
    readonly error: EventEmitter<ImgCropperErrorEvent>;
    private _currentInputElement?;
    /** Emits whenever the component is destroyed. */
    private readonly _destroy;
    /** Used to subscribe to global move and end events */
    protected _document: Document;
    private _rotateTimeOut;
    private _pendingRotation;
    protected areaGridActiveCssClass: string;
    constructor(_renderer: Renderer2, _elementRef: ElementRef<HTMLElement>, cd: ChangeDetectorRef, _ngZone: NgZone, _document: any, viewPortRuler: ViewportRuler);
    ngOnInit(): void;
    ngAfterViewInit(): void;
    ngOnDestroy(): void;
    /** Load image with canvas */
    /** Load image with canvas */
    private _loadImageToCanvas;
    private _setStylesForContImg;
    /**
     * Update area and image position only if needed,
     * this is used when window resize
     */
    updateCropperPosition(): void;
    /** Load Image from input event */
    selectInputEvent(img: Event): void;
    /** Set the size of the image, the values can be 0 between 1, where 1 is the original size */
    setScale(size?: number, noAutoCrop?: boolean): void;
    private _getCenterPoints;
    /**
     * Fit to screen
     */
    fitToScreen(): void;
    fit(): void;
    private _pointerDown;
    /**
     * Simulate pointerMove with clientX = 0 and clientY = 0,
     * this is used by `setScale` and `rotate`
     */
    private _simulatePointerMove;
    _markForCheck(): void;
    /**
     * Called when the user has moved their pointer after
     * starting to drag.
     */
    private _pointerMove;
    updatePosition(): void;
    updatePosition(xOrigin: number, yOrigin: number): void;
    _slideEnd(): void;
    private _cropIfAutoCrop;
    /** + */
    zoomIn(): void;
    private _calcScalePercent;
    /** Clean the img cropper */
    clean(): void;
    /** - */
    zoomOut(): void;
    center(): void;
    /**
     * load an image from a given configuration,
     * or from the result of a cropped image
     */
    loadImage(config: ImgCropperLoaderConfig | string, fn?: () => void): void;
    private _updateAreaIfNeeded;
    /**
     * @private
     */
    _updateAbsoluteScale(): void;
    /**
     * Load Image from URL
     * @deprecated Use `loadImage` instead of `setImageUrl`
     * @param src URL
     * @param fn function that will be called before emit the event loaded
     */
    setImageUrl(src: string, fn?: () => void): void;
    private _positionImg;
    rotate2(degrees: number): void;
    rotate(degrees: number): void;
    private _rotateWithAnimation;
    private _rotateCanvas;
    _updateMinScale(canvas?: HTMLCanvasElement | HTMLImageElement): void;
    /**
     * @private
     */
    _updateMaxScale(): void;
    /**
     * Resize & crop image
     */
    crop(config?: ImgCropperConfig): ImgCropperEvent;
    /**
     * @docs-private
     */
    private _imgCrop;
    _cropperContainerRect(): DOMRect;
    _areaCropperRect(): DOMRect;
    _canvasRect(): DOMRect;
    /** Called when the user has lifted their pointer. */
    private _pointerUp;
    /** Called when the window has lost focus. */
    private _windowBlur;
    private _bindGlobalEvents;
    /** Removes any global event listeners that we may have added. */
    private _removeGlobalEvents;
    private _addEventsToScaleWithScroll;
    private _removeEventsToScaleWithScroll;
    private _onWheel;
    /** Use defaultView of injected document if available or fallback to global window reference */
    private _getWindow;
    static ɵfac: i0.ɵɵFactoryDeclaration<_LyImageCropperBase, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<_LyImageCropperBase, never, never, { "config": { "alias": "config"; "required": false; }; "scale": { "alias": "scale"; "required": false; }; "maxFileSize": { "alias": "maxFileSize"; "required": false; }; }, { "scaleChange": "scaleChange"; "minScaleChange": "minScale"; "maxScaleChange": "maxScale"; "loaded": "loaded"; "imageLoaded": "imageLoaded"; "ready": "ready"; "cropped": "cropped"; "cleaned": "cleaned"; "error": "error"; }, never, never, true, never>;
}
/**
 * @dynamic
 */
export declare class _LyCropperAreaBase implements OnDestroy {
    readonly _elementRef: ElementRef;
    private _ngZone;
    readonly _cropper: _LyImageCropperBase;
    private _isSliding;
    /** Keeps track of the last pointer event that was captured by the crop area. */
    private _lastPointerEvent;
    private _startPointerEvent;
    private _currentWidth;
    private _currentHeight;
    private _startAreaRect;
    private _startImgRect;
    /** Used to subscribe to global move and end events */
    protected _document: Document;
    readonly _resizer?: ElementRef;
    set resizableArea(val: boolean);
    get resizableArea(): boolean;
    private _resizableArea;
    keepAspectRatio: boolean;
    round: boolean;
    constructor(_elementRef: ElementRef, _ngZone: NgZone, _cropper: _LyImageCropperBase, _document: any);
    ngOnDestroy(): void;
    private _addResizableArea;
    private _removeResizableArea;
    private _pointerDown;
    private _pointerMove;
    /** Called when the user has lifted their pointer. */
    private _pointerUp;
    /** Called when the window has lost focus. */
    private _windowBlur;
    private _bindGlobalEvents;
    /** Removes any global event listeners that we may have added. */
    private _removeGlobalEvents;
    /** Use defaultView of injected document if available or fallback to global window reference */
    private _getWindow;
    static ɵfac: i0.ɵɵFactoryDeclaration<_LyCropperAreaBase, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<_LyCropperAreaBase, never, never, { "resizableArea": { "alias": "resizableArea"; "required": false; }; "keepAspectRatio": { "alias": "keepAspectRatio"; "required": false; }; "round": { "alias": "round"; "required": false; }; }, {}, never, never, true, never>;
}
/**
 * Normalize degrees for cropper rotation
 * @docs-private
 */
export declare function _normalizeDegrees(n: number): number;