diff --git a/types/cropperjs/cropperjs-tests.ts b/types/cropperjs/cropperjs-tests.ts index 2c57656b78..4895c3052c 100644 --- a/types/cropperjs/cropperjs-tests.ts +++ b/types/cropperjs/cropperjs-tests.ts @@ -1,9 +1,9 @@ import * as Cropper from 'cropperjs'; -var image = document.getElementById('image'); -var cropper = new Cropper(image, { +const image = document.getElementById('image'); +const cropper = new Cropper(image, { aspectRatio: 16 / 9, - crop: function(e) { + crop(e) { console.log(e.detail.x); console.log(e.detail.y); console.log(e.detail.width); diff --git a/types/cropperjs/index.d.ts b/types/cropperjs/index.d.ts index ca957ccc3f..e99dd88831 100644 --- a/types/cropperjs/index.d.ts +++ b/types/cropperjs/index.d.ts @@ -1,259 +1,260 @@ -// Type definitions for cropperjs +// Type definitions for cropperjs 1.1 // Project: https://github.com/fengyuanchen/cropperjs // Definitions by: Stepan Mikhaylyuk // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.2 declare namespace cropperjs { - export enum CropperViewMods { + enum CropperViewMods { CropBoxIsJustWithInTheContainer = 0, CropBoxShouldBeWithInTheCanvas = 1, CanvasShouldNotBeWithInTheContainer = 2, ContainerSshouldBeWithInTheCanvas = 3 } - export interface CropperReadyEvent extends CustomEvent { } - export interface CropperCropEvent extends CustomEvent { + type CropperReadyEvent = CustomEvent; + interface CropperCropEvent extends CustomEvent { detail: Data; } - export interface CropperCropStepEvent extends CustomEvent { + interface CropperCropStepEvent extends CustomEvent { detail: CropStepData; } - export interface CropperZoomEvent extends CustomEvent { + interface CropperZoomEvent extends CustomEvent { detail: ZoomData; } - export interface CropperOptions { + interface CropperOptions { /** - * Function called when crop box is ready - */ - ready?: (event: CropperReadyEvent) => void; + * Function called when crop box is ready + */ + ready?(event: CropperReadyEvent): void; /** - * Function called when crop box is moved or resized - */ - crop?: (event: CropperCropEvent) => void; + * Function called when crop box is moved or resized + */ + crop?(event: CropperCropEvent): void; /** - * Function called at start of crop box being moved or resized - */ - cropstart?: (event: CropperCropStepEvent) => void; + * Function called at start of crop box being moved or resized + */ + cropstart?(event: CropperCropStepEvent): void; /** - * Function called when crop box is moved - */ - cropmove?: (event: CropperCropStepEvent) => void; + * Function called when crop box is moved + */ + cropmove?(event: CropperCropStepEvent): void; /** - * Function called when crop box is finished being moved or resized - */ - cropend?: (event: CropperCropStepEvent) => void; + * Function called when crop box is finished being moved or resized + */ + cropend?(event: CropperCropStepEvent): void; /** * Function called when a cropper instance starts to zoom in or zoom out its canvas (image wrapper). */ - zoom?: (event: CropperZoomEvent) => void; + zoom?(event: CropperZoomEvent): void; /** - * Define the view mode of the cropper. - * @default 0 - */ + * Define the view mode of the cropper. + * @default 0 + */ viewMode?: CropperViewMods; /** - * Define the dragging mode of the cropper. - * 'crop': create a new crop box - * 'move': move the canvas - * 'none': do nothing - */ + * Define the dragging mode of the cropper. + * 'crop': create a new crop box + * 'move': move the canvas + * 'none': do nothing + */ dragMode?: string; /** - * Set the aspect ratio of the crop box. By default, the crop box is free ratio. - * @default Nan - */ + * Set the aspect ratio of the crop box. By default, the crop box is free ratio. + * @default Nan + */ aspectRatio?: number; /** - * The previous cropped data if you had stored, will be passed to setData method automatically. - * @default null - */ - data?: Object; + * The previous cropped data if you had stored, will be passed to setData method automatically. + * @default null + */ + data?: object; /** - * Add extra elements (containers) for previewing. - * Valid selector for Document.querySelectorAll - * @default '' - */ + * Add extra elements (containers) for previewing. + * Valid selector for Document.querySelectorAll + * @default '' + */ preview?: string; /** - * Rebuild the cropper when resize the window. - * @default true - */ + * Rebuild the cropper when resize the window. + * @default true + */ responsive?: boolean; /** - * By default, the plugin will check the image origin, and if it is a cross-origin image, - * a crossOrigin attribute will be added to the image element and a timestamp will be added to the image url to reload the image for "getCroppedCanvas". - * By adding crossOrigin attribute to image will stop adding timestamp to image url, and stop reload of image. - * @default true - */ + * By default, the plugin will check the image origin, and if it is a cross-origin image, + * a crossOrigin attribute will be added to the image element and a timestamp will be added to the image url to reload the image for "getCroppedCanvas". + * By adding crossOrigin attribute to image will stop adding timestamp to image url, and stop reload of image. + * @default true + */ checkCrossOrigin?: boolean; /** - * Check the current image's Exif Orientation information. - * More exactly, read the Orientation value for rotating or flipping the image, and then override the Orientation - * value with 1 (the default value) to avoid some issues (1, 2) on iOS devices. - * Requires to set both the rotatable and scalable options to true at the same time. - * Note: Don't trust this all the time as some JPG images have incorrect (not standard) Orientation values. - * @default true - */ + * Check the current image's Exif Orientation information. + * More exactly, read the Orientation value for rotating or flipping the image, and then override the Orientation + * value with 1 (the default value) to avoid some issues (1, 2) on iOS devices. + * Requires to set both the rotatable and scalable options to true at the same time. + * Note: Don't trust this all the time as some JPG images have incorrect (not standard) Orientation values. + * @default true + */ checkOrientation?: boolean; /** - * Show the black modal above the image and under the crop box. - * @default true - */ + * Show the black modal above the image and under the crop box. + * @default true + */ modal?: boolean; /** - * Show the dashed lines above the crop box. - * @default true - */ + * Show the dashed lines above the crop box. + * @default true + */ guides?: boolean; /** - * Show the center indicator above the crop box. - * @default true - */ + * Show the center indicator above the crop box. + * @default true + */ center?: boolean; /** - * Show the white modal above the crop box (highlight the crop box). - * @default true - */ + * Show the white modal above the crop box (highlight the crop box). + * @default true + */ highlight?: boolean; /** - * Show the grid background of the container. - * @default true - */ + * Show the grid background of the container. + * @default true + */ background?: boolean; /** - * Enable to crop the image automatically when initialize. - * @default true - */ + * Enable to crop the image automatically when initialize. + * @default true + */ autoCrop?: boolean; /** - * A number between 0 and 1. Define the automatic cropping area size (percentage). - * @default 0.8 (80% of the image) - */ + * A number between 0 and 1. Define the automatic cropping area size (percentage). + * @default 0.8 (80% of the image) + */ autoCropArea?: number; /** - * Enable to move the image. - * @default true - */ + * Enable to move the image. + * @default true + */ movable?: boolean; /** - * Enable to rotate the image. - * @default true - */ + * Enable to rotate the image. + * @default true + */ rotatable?: boolean; /** - * Enable to restore the cropped area after resizing the window. - * @default true - */ + * Enable to restore the cropped area after resizing the window. + * @default true + */ restore?: boolean; /** - * Enable to scale the image. - * @default true - */ + * Enable to scale the image. + * @default true + */ scalable?: boolean; /** - * Enable to zoom the image. - * @default true - */ + * Enable to zoom the image. + * @default true + */ zoomable?: boolean; /** - * Enable to zoom the image by dragging touch. - * @default true - */ + * Enable to zoom the image by dragging touch. + * @default true + */ zoomOnTouch?: boolean; /** - * Enable to zoom the image by wheeling mouse. - * @default true - */ + * Enable to zoom the image by wheeling mouse. + * @default true + */ zoomOnWheel?: boolean; /** - * Define zoom ratio when zoom the image by wheeling mouse. - * @default 0.1 - */ + * Define zoom ratio when zoom the image by wheeling mouse. + * @default 0.1 + */ wheelZoomRatio?: number; /** - * Enable to move the crop box. - * @default true - */ + * Enable to move the crop box. + * @default true + */ cropBoxMovable?: boolean; /** - * Enable to resize the crop box. - * @default true - */ + * Enable to resize the crop box. + * @default true + */ cropBoxResizable?: boolean; /** - * Enable to toggle drag mode between "crop" and "move" when click twice on the cropper. - * @default true - */ + * Enable to toggle drag mode between "crop" and "move" when click twice on the cropper. + * @default true + */ toggleDragModeOnDblclick?: boolean; /** - * The minimum width of the container - * @default 200 - */ + * The minimum width of the container + * @default 200 + */ minContainerWidth?: number; /** - * The minimum height of the container. - * @default 100 - */ + * The minimum height of the container. + * @default 100 + */ minContainerHeight?: number; /** - * The minimum width of the canvas (image wrapper). - * @default 0 - */ + * The minimum width of the canvas (image wrapper). + * @default 0 + */ minCanvasWidth?: number; /** - * The minimum height of the canvas (image wrapper). - * @default 0 - */ + * The minimum height of the canvas (image wrapper). + * @default 0 + */ minCanvasHeight?: number; /** - * The minimum width of the crop box. - * @default 0 - */ + * The minimum width of the crop box. + * @default 0 + */ minCropBoxWidth?: number; /** - * The minimum height of the crop box. - * @default 0 - */ + * The minimum height of the crop box. + * @default 0 + */ minCropBoxHeight?: number; /** - * This function will be called when a cropper instance starts to load an image. - * Return false to prevent to build - * @default null - */ - build?: () => boolean; + * This function will be called when a cropper instance starts to load an image. + * Return false to prevent to build + * @default null + */ + build?(): boolean; /** - * This function will be called when a cropper instance has built completely. - * @default null - */ - built?: () => void; + * This function will be called when a cropper instance has built completely. + * @default null + */ + built?(): void; } interface Data { /** - * the offset left of the cropped area - */ + * the offset left of the cropped area + */ x: number; /** - * the offset top of the cropped area - */ + * the offset top of the cropped area + */ y: number; /** - * the width of the cropped area - */ + * the width of the cropped area + */ width: number; /** - * the height of the cropped area - */ + * the height of the cropped area + */ height: number; /** - * the rotated degrees of the image - */ + * the rotated degrees of the image + */ rotate: number; /** - * the scaling factor to apply on the abscissa of the image - */ + * the scaling factor to apply on the abscissa of the image + */ scaleX: number; /** - * the scaling factor to apply on the ordinate of the image - */ + * the scaling factor to apply on the ordinate of the image + */ scaleY: number; } interface CropStepData { @@ -284,7 +285,7 @@ declare namespace cropperjs { } interface ZoomData { /** - * The original event that was triggered + * The original event that was triggered * Options: wheel, touchmove */ originalEvent: Event; @@ -299,104 +300,108 @@ declare namespace cropperjs { } interface ContainerData { /** - * The current width of the container - */ + * The current width of the container + */ width: number; /** - * The current height of the container - */ + * The current height of the container + */ height: number; } interface CropBoxData { /** - * the offset left of the crop box - */ - left: number; + * the offset left of the crop box + */ + left?: number; /** - * the offset top of the crop box - */ - top: number; + * the offset top of the crop box + */ + top?: number; /** - * the width of the crop box - */ - width: number; + * the width of the crop box + */ + width?: number; /** - * the height of the crop box - */ - height: number; + * the height of the crop box + */ + height?: number; } interface CanvasData { /** - * offset left of the canvas - */ + * offset left of the canvas + */ left: number; /** - * new offset top of the canvas - */ + * new offset top of the canvas + */ top: number; /** - * new width of the canvas - */ + * new width of the canvas + */ width: number; /** - * new height of the canvas - */ + * new height of the canvas + */ height: number; } interface ImageData { /** - * the offset left of the image - */ + * the offset left of the image + */ left: number; /** - * the offset top of the image - */ + * the offset top of the image + */ top: number; /** - * the width of the image - */ + * the width of the image + */ width: number; /** - * the height of the image - */ + * the height of the image + */ height: number; /** - * the natural width of the image - */ + * the natural width of the image + */ naturalWidth: number; /** - * the natural height of the image - */ + * the natural height of the image + */ naturalHeight: number; /** - * the aspect ratio of the image - */ + * the aspect ratio of the image + */ aspectRatio: number; /** - * the rotated degrees of the image if rotated - */ + * the rotated degrees of the image if rotated + */ rotate: number; /** - * the scaling factor to apply on the abscissa of the image if scaled - */ + * the scaling factor to apply on the abscissa of the image if scaled + */ scaleX: number; /** - * the scaling factor to apply on the ordinate of the image if scaled - */ + * the scaling factor to apply on the ordinate of the image if scaled + */ scaleY: number; } interface CroppedCanvasOptions { /** - * the destination width of the output canvas - */ + * the destination width of the output canvas + */ width?: number; + minWidth?: number; + maxWidth?: number; /** - * the destination height of the output canvas - */ + * the destination height of the output canvas + */ height?: number; + minHeight?: number; + maxHeight?: number; /** - * a color to fill any alpha values in the output canvas - */ + * a color to fill any alpha values in the output canvas + */ fillColor?: string; } } @@ -409,144 +414,143 @@ declare class cropperjs { crop(): void; /** - * Clear the crop box. - */ + * Clear the crop box. + */ reset(): void; /** - * Replace the image's src and rebuild the cropper. - * @param url A new image url - */ + * Replace the image's src and rebuild the cropper. + * @param url A new image url + */ replace(url: string): void; /** - * Enable (unfreeze) the cropper. - */ + * Enable (unfreeze) the cropper. + */ enable(): void; /** - * Disable (freeze) the cropper - */ + * Disable (freeze) the cropper + */ disable(): void; /** - * Destroy the cropper and remove the instance from the image. - */ + * Destroy the cropper and remove the instance from the image. + */ destroy(): void; /** - * Move the canvas (image wrapper) with relative offsets. - * @param offsetX Moving size (px) in the horizontal direction. - * @param offsetY Moving size (px) in the vertical direction. - * If not present, its default value is offsetX. - */ + * Move the canvas (image wrapper) with relative offsets. + * @param offsetX Moving size (px) in the horizontal direction. + * @param offsetY Moving size (px) in the vertical direction. + * If not present, its default value is offsetX. + */ move(offsetX: number, offsetY?: number): void; /** - * Move the canvas (image wrapper) to an absolute point. - * @param x The left value of the canvas - * @param y The top value of the canvas - * If not present, its default value is x. - */ + * Move the canvas (image wrapper) to an absolute point. + * @param x The left value of the canvas + * @param y The top value of the canvas + * If not present, its default value is x. + */ moveTo(x: number, y?: number): void; /** - * Zoom the canvas (image wrapper) with a relative ratio. - * Zoom in: requires a positive number (ratio > 0) - * Zoom out: requires a negative number (ratio < 0) - */ + * Zoom the canvas (image wrapper) with a relative ratio. + * Zoom in: requires a positive number (ratio > 0) + * Zoom out: requires a negative number (ratio < 0) + */ zoom(ratio: number): void; /** - * Zoom the canvas (image wrapper) to an absolute ratio. - * Zoom in: requires a positive number (ratio > 0) - * Zoom out: requires a negative number (ratio < 0) - */ + * Zoom the canvas (image wrapper) to an absolute ratio. + * Zoom in: requires a positive number (ratio > 0) + * Zoom out: requires a negative number (ratio < 0) + */ zoomTo(ratio: number): void; /** - * Rotate the canvas (image wrapper) with a relative degree. - * Rotate right: requires a positive number (degree > 0) - * Rotate left: requires a negative number (degree < 0) - */ + * Rotate the canvas (image wrapper) with a relative degree. + * Rotate right: requires a positive number (degree > 0) + * Rotate left: requires a negative number (degree < 0) + */ rotate(degree: number): void; /** - * Rotate the canvas (image wrapper) to an absolute degree. - * Rotate right: requires a positive number (degree > 0) - * Rotate left: requires a negative number (degree < 0) - */ + * Rotate the canvas (image wrapper) to an absolute degree. + * Rotate right: requires a positive number (degree > 0) + * Rotate left: requires a negative number (degree < 0) + */ rotateTo(degree: number): void; /** - * Clear the crop box. - */ + * Clear the crop box. + */ clear(): void; /** - * Output the cropped area position and size data (base on the original image). - */ + * Output the cropped area position and size data (base on the original image). + */ getData(rounded?: boolean): cropperjs.Data; /** - * Change the cropped area position and size with new data (base on the original image). - */ + * Change the cropped area position and size with new data (base on the original image). + */ setData(data: cropperjs.Data): void; /** - * Output the container size data. - */ + * Output the container size data. + */ getContainerData(): cropperjs.ContainerData; /** - * Output the image position, size and other related data. - */ + * Output the image position, size and other related data. + */ getImageData(): cropperjs.ImageData; /** - * Output the canvas (image wrapper) position and size data. - */ + * Output the canvas (image wrapper) position and size data. + */ getCanvasData(): cropperjs.CanvasData & { /** - * the natural width of the canvas (read only) - */ + * the natural width of the canvas (read only) + */ naturalWidth: number; /** - * the natural height of the canvas (read only) - */ + * the natural height of the canvas (read only) + */ naturalHeight: number; }; /** - * Change the canvas (image wrapper) position and size with new data. - */ + * Change the canvas (image wrapper) position and size with new data. + */ setCanvasData(data: cropperjs.CanvasData): void; /** - * Output the crop box position and size data. - */ + * Output the crop box position and size data. + */ getCropBoxData(): cropperjs.CropBoxData; /** - * Change the crop box position and size with new data. - */ + * Change the crop box position and size with new data. + */ setCropBoxData(data: cropperjs.CropBoxData): void; /** - * Get a canvas drawn the cropped image. - */ + * Get a canvas drawn the cropped image. + */ getCroppedCanvas(options?: cropperjs.CroppedCanvasOptions): HTMLCanvasElement; /** - * Change the aspect ratio of the crop box. - */ + * Change the aspect ratio of the crop box. + */ setAspectRatio(aspectRatio: number): void; /** - * Change the drag mode. - */ + * Change the drag mode. + */ setDragMode(mode?: 'none' | 'crop' | 'move'): void; - } export = cropperjs; diff --git a/types/cropperjs/tslint.json b/types/cropperjs/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/cropperjs/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" }