From 71940aee07b2363bf6a042c4cf22daf091d05fde Mon Sep 17 00:00:00 2001 From: Stepan Mikhaylyuk Date: Sun, 3 Apr 2016 00:57:03 +0300 Subject: [PATCH 01/14] added cropperjs definitions --- cropperjs/cropperjs.d.ts | 233 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 233 insertions(+) create mode 100644 cropperjs/cropperjs.d.ts diff --git a/cropperjs/cropperjs.d.ts b/cropperjs/cropperjs.d.ts new file mode 100644 index 000000000..dedadc1a9 --- /dev/null +++ b/cropperjs/cropperjs.d.ts @@ -0,0 +1,233 @@ +// Type definitions for cropperjs +// Project: https://github.com/fengyuanchen/cropperjs +// Definitions by: https://github.com/stepancar +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +declare module cropperjs { + export enum CropperViewMods { + CropBoxIsJustWithInTheContainer = 0, + CropBoxShouldBeWithInTheCanvas = 1, + CanvasShouldNotBeWithInTheContainer = 2, + ContainerSshouldBeWithInTheCanvas = 3 + } + export interface CropperOptions { + /** + * 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 + */ + dragMode?: string; + /** + * 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; + /** + * Add extra elements (containers) for previewing. + * Valid selector for Document.querySelectorAll + * @default '' + */ + preview?: string; + /** + * 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 + */ + checkCrossOrigin?: boolean; + /** + * 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 + */ + guides?: boolean; + /** + * 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 + */ + highlight?: boolean; + /** + * Show the grid background of the container. + * @default true + */ + background?: boolean; + /** + * 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) + */ + autoCropArea?: number; + /** + * Enable to move the image. + * @default true + */ + movable?: boolean; + /** + * Enable to rotate the image. + * @default true + */ + rotatable?: boolean; + /** + * Enable to scale the image. + * @default true + */ + scalable?: boolean; + /** + * Enable to zoom the image. + * @default true + */ + zoomable?: boolean; + /** + * Enable to zoom the image by dragging touch. + * @default true + */ + zoomOnTouch?: boolean; + /** + * 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 + */ + wheelZoomRatio?: number; + /** + * Enable to move the crop box. + * @default true + */ + cropBoxMovable?: boolean; + /** + * 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 + */ + toggleDragModeOnDblclick?: boolean; + /** + * The minimum width of the container + * @default 200 + */ + minContainerWidth?: number; + /** + * The minimum height of the container. + * @default 100 + */ + minContainerHeight?: number; + /** + * The minimum width of the canvas (image wrapper). + * @default 0 + */ + minCanvasWidth?: number; + /** + * The minimum height of the canvas (image wrapper). + * @default 0 + */ + minCanvasHeight?: number; + /** + * The minimum width of the crop box. + * @default 0 + */ + minCropBoxWidth?: number; + /** + * 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 has built completely. + * @default null + */ + built?: () => void; + } + export class Cropper { + constructor(element: HTMLImageElement, options: CropperOptions); + /** + * Show the crop box manually. + */ + crop(); + /** + * Clear the crop box. + */ + reset(); + /** + * Replace the image's src and rebuild the cropper. + * @param url A new image url + */ + replace(url: string); + /** + * Enable (unfreeze) the cropper. + */ + enable(); + /** + * Disable (freeze) the cropper + */ + disable(); + /** + * Destroy the cropper and remove the instance from the image. + */ + destroy(); + /** + * 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); + /** + * 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); + /** + * 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); + + } +} +declare var Cropper: typeof cropperjs.Cropper; +declare module "cropperjs" { + export = Cropper; +} From 9d69a75939c9c922faa6c887515663804a783cf8 Mon Sep 17 00:00:00 2001 From: Stepan Mikhaylyuk Date: Sun, 3 Apr 2016 01:01:49 +0300 Subject: [PATCH 02/14] added tests file --- cropperjs/cropperjs-tests.ts | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 cropperjs/cropperjs-tests.ts diff --git a/cropperjs/cropperjs-tests.ts b/cropperjs/cropperjs-tests.ts new file mode 100644 index 000000000..d328a12b4 --- /dev/null +++ b/cropperjs/cropperjs-tests.ts @@ -0,0 +1,2 @@ +/// +import * as Cropper from 'cropperjs'; From 27d93c4f10e7fecfd1f0d6b534a63dd73ae85495 Mon Sep 17 00:00:00 2001 From: Stepan Mikhaylyuk Date: Sun, 3 Apr 2016 01:09:13 +0300 Subject: [PATCH 03/14] minor fix --- cropperjs/cropperjs.d.ts | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/cropperjs/cropperjs.d.ts b/cropperjs/cropperjs.d.ts index dedadc1a9..641093773 100644 --- a/cropperjs/cropperjs.d.ts +++ b/cropperjs/cropperjs.d.ts @@ -182,48 +182,48 @@ declare module cropperjs { /** * Show the crop box manually. */ - crop(); + crop(): void; /** * Clear the crop box. */ - reset(); + reset(): void; /** * Replace the image's src and rebuild the cropper. * @param url A new image url */ - replace(url: string); + replace(url: string): void; /** * Enable (unfreeze) the cropper. */ - enable(); + enable(): void; /** * Disable (freeze) the cropper */ - disable(); + disable(): void; /** * Destroy the cropper and remove the instance from the image. */ - destroy(); + 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(offsetX: number, offsetY?: number); + 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. */ - moveTo(x: number, y?: number); + 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(ratio: number); + zoom(ratio: number): void; } } From b84efc26b4a84e16453b87007997e9c7ecdbb286 Mon Sep 17 00:00:00 2001 From: Stepan Mikhaylyuk Date: Sun, 3 Apr 2016 01:15:44 +0300 Subject: [PATCH 04/14] minor fix for header --- cropperjs/cropperjs.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cropperjs/cropperjs.d.ts b/cropperjs/cropperjs.d.ts index 641093773..f00c867f8 100644 --- a/cropperjs/cropperjs.d.ts +++ b/cropperjs/cropperjs.d.ts @@ -1,6 +1,6 @@ // Type definitions for cropperjs // Project: https://github.com/fengyuanchen/cropperjs -// Definitions by: https://github.com/stepancar +// Definitions by: Stepan Mikhaylyuk // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped declare module cropperjs { export enum CropperViewMods { From 9ce9c1b85ce3b36513876be392a6957b9745959d Mon Sep 17 00:00:00 2001 From: Stepan Mikhaylyuk Date: Sun, 3 Apr 2016 03:44:10 +0300 Subject: [PATCH 05/14] added react-cropper definitions --- react-cropper/react-cropper.d.ts | 138 +++++++++++++++++++++++++++++++ 1 file changed, 138 insertions(+) create mode 100644 react-cropper/react-cropper.d.ts diff --git a/react-cropper/react-cropper.d.ts b/react-cropper/react-cropper.d.ts new file mode 100644 index 000000000..af62939c4 --- /dev/null +++ b/react-cropper/react-cropper.d.ts @@ -0,0 +1,138 @@ +// Type definitions for react-cropper +// Project: https://github.com/roadmanfong/react-cropper +// Definitions by: Stepan Mikhaylyuk +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +/// +/// + +declare module 'react-cropper' { + const Cropper: typeof ReactCropper.ReactCropper; + export default Cropper; + export {Cropper}; +} + +declare namespace ReactCropper { + interface Data { + /** + * the offset left of the cropped area + */ + x: number; + /** + * the offset top of the cropped area + */ + y: number; + /** + * the width of the cropped area + */ + width: number; + /** + * the height of the cropped area + */ + height: number; + /** + * the rotated degrees of the image + */ + rotate: number; + /** + * the scaling factor to apply on the abscissa of the image + */ + scaleX: number; + /** + * the scaling factor to apply on the ordinate of the image + */ + scaleY: number; + } + export type Props = cropperjs.CropperOptions & __React.HTMLProps; + export class ReactCropper extends __React.Component { + /** + * Show the crop box manually. + */ + crop(): void; + /** + * Clear the crop box. + */ + reset(): void; + /** + * Replace the image's src and rebuild the cropper. + * @param url A new image url + */ + replace(url: string): void; + /** + * Enable (unfreeze) the cropper. + */ + enable(): void; + /** + * Disable (freeze) the cropper + */ + disable(): void; + /** + * 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(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. + */ + 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(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(degree: number): void; + + /** + * Clear the crop box. + */ + clear(): void; + + /** + * Output the cropped area position and size data (base on the original image). + */ + getData(rounded?: boolean): Data; + /** + * Change the cropped area position and size with new data (base on the original image). + */ + setData(data: Data): void; + /** + * + */ + getContainerData(): void; + + getImageData(): void; + + getCanvasData(): void; + + setCanvasData(data); + + getCropBoxData(): void; + + setCropBoxData(data): void; + + getCroppedCanvas(options?): void; + + setAspectRatio(aspectRatio): void; + + setDragMode(): void; + + on(eventname, callback): void; + } + +} From c41fbd4ccb33a3fdbfc08d85e40fadd782ab6d18 Mon Sep 17 00:00:00 2001 From: Stepan Mikhaylyuk Date: Sun, 3 Apr 2016 03:45:19 +0300 Subject: [PATCH 06/14] added react-croppper tests --- react-cropper/react-cropper-tests.tsx | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 react-cropper/react-cropper-tests.tsx diff --git a/react-cropper/react-cropper-tests.tsx b/react-cropper/react-cropper-tests.tsx new file mode 100644 index 000000000..05a11202c --- /dev/null +++ b/react-cropper/react-cropper-tests.tsx @@ -0,0 +1,25 @@ + +import * as React from 'react'; +import Cropper from 'react-cropper'; +// If you choose not to use import, you need to assign Cropper to default +// var Cropper = require('react-cropper').default + +class Demo extends React.Component<{}, {}> { + crop() { + // image in dataUrl + console.log((this.refs['cropper'] as any).getCroppedCanvas().toDataURL()); + } + + render() { + return ( + + ); + } +} From 0c69d72540de522af4a81a618bfbecc4b5b075db Mon Sep 17 00:00:00 2001 From: Stepan Mikhaylyuk Date: Sun, 3 Apr 2016 03:49:06 +0300 Subject: [PATCH 07/14] Update react-cropper-tests.tsx --- react-cropper/react-cropper-tests.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/react-cropper/react-cropper-tests.tsx b/react-cropper/react-cropper-tests.tsx index 05a11202c..4aef0fbef 100644 --- a/react-cropper/react-cropper-tests.tsx +++ b/react-cropper/react-cropper-tests.tsx @@ -1,3 +1,6 @@ +/// +/// + import * as React from 'react'; import Cropper from 'react-cropper'; From 08715f48a7891ac36293d3632b1ee95c1a76afba Mon Sep 17 00:00:00 2001 From: Stepan Mikhaylyuk Date: Sun, 3 Apr 2016 03:51:33 +0300 Subject: [PATCH 08/14] Update react-cropper.d.ts --- react-cropper/react-cropper.d.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/react-cropper/react-cropper.d.ts b/react-cropper/react-cropper.d.ts index af62939c4..a10b82e6d 100644 --- a/react-cropper/react-cropper.d.ts +++ b/react-cropper/react-cropper.d.ts @@ -120,19 +120,19 @@ declare namespace ReactCropper { getCanvasData(): void; - setCanvasData(data); + setCanvasData(data: any); getCropBoxData(): void; - setCropBoxData(data): void; + setCropBoxData(data: any): void; - getCroppedCanvas(options?): void; + getCroppedCanvas(options? any): void; - setAspectRatio(aspectRatio): void; + setAspectRatio(aspectRatio: number): void; setDragMode(): void; - on(eventname, callback): void; + on(eventname: string, callback: ()=> void): void; } } From dadc81ce91d8d9ebaf7660539b60def0e8f2546d Mon Sep 17 00:00:00 2001 From: Stepan Mikhaylyuk Date: Sun, 3 Apr 2016 03:55:30 +0300 Subject: [PATCH 09/14] Update react-cropper.d.ts --- react-cropper/react-cropper.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/react-cropper/react-cropper.d.ts b/react-cropper/react-cropper.d.ts index a10b82e6d..cc4b935ba 100644 --- a/react-cropper/react-cropper.d.ts +++ b/react-cropper/react-cropper.d.ts @@ -132,7 +132,7 @@ declare namespace ReactCropper { setDragMode(): void; - on(eventname: string, callback: ()=> void): void; + on(eventname: string, callback: (any?) => void): void; } } From 9b8a212bee798c2d9802f6f3ea72a6c2da0cf645 Mon Sep 17 00:00:00 2001 From: Stepan Mikhaylyuk Date: Sun, 3 Apr 2016 04:00:04 +0300 Subject: [PATCH 10/14] Update react-cropper.d.ts --- react-cropper/react-cropper.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/react-cropper/react-cropper.d.ts b/react-cropper/react-cropper.d.ts index cc4b935ba..58f7bd62f 100644 --- a/react-cropper/react-cropper.d.ts +++ b/react-cropper/react-cropper.d.ts @@ -126,7 +126,7 @@ declare namespace ReactCropper { setCropBoxData(data: any): void; - getCroppedCanvas(options? any): void; + getCroppedCanvas(options?: any): void; setAspectRatio(aspectRatio: number): void; From 2f80f951163b54a33ac4ecd4a97ce729fb098382 Mon Sep 17 00:00:00 2001 From: Stepan Mikhaylyuk Date: Sun, 3 Apr 2016 04:03:59 +0300 Subject: [PATCH 11/14] Update react-cropper.d.ts --- react-cropper/react-cropper.d.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/react-cropper/react-cropper.d.ts b/react-cropper/react-cropper.d.ts index 58f7bd62f..266794a2d 100644 --- a/react-cropper/react-cropper.d.ts +++ b/react-cropper/react-cropper.d.ts @@ -120,7 +120,7 @@ declare namespace ReactCropper { getCanvasData(): void; - setCanvasData(data: any); + setCanvasData(data: any): void; getCropBoxData(): void; @@ -132,7 +132,7 @@ declare namespace ReactCropper { setDragMode(): void; - on(eventname: string, callback: (any?) => void): void; + on(eventname: string, callback: () => void): void; } } From 782fd9be1d1f7f4b8671b2a160acf845fd2bda2a Mon Sep 17 00:00:00 2001 From: Stepan Mikhaylyuk Date: Sun, 3 Apr 2016 17:21:19 +0300 Subject: [PATCH 12/14] fixed inheritance structure --- react-cropper/react-cropper.d.ts | 109 ++++++++++++++++++------------- 1 file changed, 62 insertions(+), 47 deletions(-) diff --git a/react-cropper/react-cropper.d.ts b/react-cropper/react-cropper.d.ts index 266794a2d..11775d018 100644 --- a/react-cropper/react-cropper.d.ts +++ b/react-cropper/react-cropper.d.ts @@ -7,69 +7,47 @@ /// declare module 'react-cropper' { - const Cropper: typeof ReactCropper.ReactCropper; - export default Cropper; - export {Cropper}; -} + import Data = cropperjs.Data; + import ContainerData = cropperjs.ContainerData; + import ImageData = cropperjs.ImageData; + import CanvasData = cropperjs.CanvasData; + import CropBoxData = cropperjs.CropBoxData; + import CroppedCanvasOptions = cropperjs.CroppedCanvasOptions; + type ReactCropperProps = cropperjs.CropperOptions & __React.HTMLProps; + + class ReactCropper extends __React.Component implements cropperjs.Cropper { -declare namespace ReactCropper { - interface Data { - /** - * the offset left of the cropped area - */ - x: number; - /** - * the offset top of the cropped area - */ - y: number; - /** - * the width of the cropped area - */ - width: number; - /** - * the height of the cropped area - */ - height: number; - /** - * the rotated degrees of the image - */ - rotate: number; - /** - * the scaling factor to apply on the abscissa of the image - */ - scaleX: number; - /** - * the scaling factor to apply on the ordinate of the image - */ - scaleY: number; - } - export type Props = cropperjs.CropperOptions & __React.HTMLProps; - export class ReactCropper extends __React.Component { /** * Show the crop box manually. */ crop(): void; + /** * Clear the crop box. */ reset(): void; + /** * Replace the image's src and rebuild the cropper. * @param url A new image url */ replace(url: string): void; + /** * Enable (unfreeze) the cropper. */ enable(): void; + /** * Disable (freeze) the cropper */ disable(): void; + /** * 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. @@ -77,6 +55,7 @@ declare namespace ReactCropper { * 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 @@ -84,6 +63,7 @@ declare namespace ReactCropper { * 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) @@ -107,32 +87,67 @@ declare namespace ReactCropper { * Output the cropped area position and size data (base on the original image). */ getData(rounded?: boolean): Data; + /** * Change the cropped area position and size with new data (base on the original image). */ setData(data: Data): void; + /** - * + * Output the container size data. */ - getContainerData(): void; + getContainerData(): ContainerData; - getImageData(): void; + /** + * Output the image position, size and other related data. + */ + getImageData(): ImageData; - getCanvasData(): void; + /** + * Output the canvas (image wrapper) position and size data. + */ + getCanvasData(): CanvasData & { + /** + * the natural width of the canvas (read only) + */ + naturalWidth: number; + /** + * the natural height of the canvas (read only) + */ + naturalHeight: number; + }; - setCanvasData(data: any): void; + /** + * Change the canvas (image wrapper) position and size with new data. + */ + setCanvasData(data: CanvasData): void; - getCropBoxData(): void; + /** + * Output the crop box position and size data. + */ + getCropBoxData(): CropBoxData; - setCropBoxData(data: any): void; + /** + * Change the crop box position and size with new data. + */ + setCropBoxData(data: CropBoxData): void; - getCroppedCanvas(options?: any): void; + /** + * Get a canvas drawn the cropped image. + */ + getCroppedCanvas(options?: CroppedCanvasOptions): HTMLCanvasElement; + /** + * Change the aspect ratio of the crop box. + */ setAspectRatio(aspectRatio: number): void; - setDragMode(): void; + /** + * Change the drag mode. + */ + setDragMode(mode?: 'none' | 'crop' | 'move'): void; on(eventname: string, callback: () => void): void; } - + export default ReactCropper; } From 34496c7418accbfb6062e857cd0966bcd104b60a Mon Sep 17 00:00:00 2001 From: Stepan Mikhaylyuk Date: Sun, 3 Apr 2016 17:22:13 +0300 Subject: [PATCH 13/14] fixed inheritance structure --- cropperjs/cropperjs.d.ts | 227 +++++++++++++++++++++++++++++++++++++-- 1 file changed, 220 insertions(+), 7 deletions(-) diff --git a/cropperjs/cropperjs.d.ts b/cropperjs/cropperjs.d.ts index f00c867f8..2b8525c3d 100644 --- a/cropperjs/cropperjs.d.ts +++ b/cropperjs/cropperjs.d.ts @@ -1,7 +1,3 @@ -// Type definitions for cropperjs -// Project: https://github.com/fengyuanchen/cropperjs -// Definitions by: Stepan Mikhaylyuk -// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped declare module cropperjs { export enum CropperViewMods { CropBoxIsJustWithInTheContainer = 0, @@ -177,33 +173,171 @@ declare module cropperjs { */ built?: () => void; } + interface Data { + /** + * the offset left of the cropped area + */ + x: number; + /** + * the offset top of the cropped area + */ + y: number; + /** + * the width of the cropped area + */ + width: number; + /** + * the height of the cropped area + */ + height: number; + /** + * the rotated degrees of the image + */ + rotate: number; + /** + * the scaling factor to apply on the abscissa of the image + */ + scaleX: number; + /** + * the scaling factor to apply on the ordinate of the image + */ + scaleY: number; + } + interface ContainerData { + /** + * The current width of the container + */ + width: number; + /** + * The current height of the container + */ + height: number; + } + interface CropBoxData { + /** + * the offset left of the crop box + */ + left: number; + /** + * the offset top of the crop box + */ + top: number; + /** + * the width of the crop box + */ + width: number; + /** + * the height of the crop box + */ + height: number; + } + interface CanvasData { + /** + * offset left of the canvas + */ + left: number; + /** + * new offset top of the canvas + */ + top: number; + /** + * new width of the canvas + */ + width: number; + /** + * new height of the canvas + */ + height: number; + } + interface ImageData { + /** + * the offset left of the image + */ + left: number; + /** + * the offset top of the image + */ + top: number; + /** + * the width of the image + */ + width: number; + /** + * the height of the image + */ + height: number; + /** + * the natural width of the image + */ + naturalWidth: number; + /** + * the natural height of the image + */ + naturalHeight: number; + /** + * the aspect ratio of the image + */ + aspectRatio: number; + /** + * the rotated degrees of the image if rotated + */ + rotate: number; + /** + * 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 + */ + scaleY: number; + } + interface CroppedCanvasOptions { + /** + * the destination width of the output canvas + */ + width?: number; + /** + * the destination height of the output canvas + */ + height?: number; + /** + * a color to fill any alpha values in the output canvas + */ + fillColor?: string; + } export class Cropper { constructor(element: HTMLImageElement, options: CropperOptions); /** - * Show the crop box manually. - */ + * Show the crop box manually. + */ crop(): void; + /** * Clear the crop box. */ reset(): void; + /** * Replace the image's src and rebuild the cropper. * @param url A new image url */ replace(url: string): void; + /** * Enable (unfreeze) the cropper. */ enable(): void; + /** * Disable (freeze) the cropper */ disable(): void; + /** * 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. @@ -211,6 +345,7 @@ declare module cropperjs { * 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 @@ -218,6 +353,7 @@ declare module cropperjs { * 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) @@ -225,9 +361,86 @@ declare module cropperjs { */ zoom(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(degree: number): void; + + /** + * Clear the crop box. + */ + clear(): void; + + /** + * Output the cropped area position and size data (base on the original image). + */ + getData(rounded?: boolean): Data; + + /** + * Change the cropped area position and size with new data (base on the original image). + */ + setData(data: Data): void; + + /** + * Output the container size data. + */ + getContainerData(): ContainerData; + + /** + * Output the image position, size and other related data. + */ + getImageData(): ImageData; + + /** + * Output the canvas (image wrapper) position and size data. + */ + getCanvasData(): CanvasData & { + /** + * the natural width of the canvas (read only) + */ + naturalWidth: number; + /** + * the natural height of the canvas (read only) + */ + naturalHeight: number; + }; + + /** + * Change the canvas (image wrapper) position and size with new data. + */ + setCanvasData(data: CanvasData): void; + + /** + * Output the crop box position and size data. + */ + getCropBoxData(): CropBoxData; + + /** + * Change the crop box position and size with new data. + */ + setCropBoxData(data: CropBoxData): void; + + /** + * Get a canvas drawn the cropped image. + */ + getCroppedCanvas(options?: CroppedCanvasOptions): HTMLCanvasElement; + + /** + * Change the aspect ratio of the crop box. + */ + setAspectRatio(aspectRatio: number): void; + + /** + * Change the drag mode. + */ + setDragMode(mode?: 'none' | 'crop' | 'move'): void; + } } -declare var Cropper: typeof cropperjs.Cropper; + declare module "cropperjs" { + const Cropper: typeof cropperjs.Cropper; export = Cropper; } From 37789c1cc1d5cc5312853351bcf2c4bd18c00362 Mon Sep 17 00:00:00 2001 From: Stepan Mikhaylyuk Date: Sun, 3 Apr 2016 17:28:02 +0300 Subject: [PATCH 14/14] added header --- cropperjs/cropperjs.d.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/cropperjs/cropperjs.d.ts b/cropperjs/cropperjs.d.ts index 2b8525c3d..f2f8e861e 100644 --- a/cropperjs/cropperjs.d.ts +++ b/cropperjs/cropperjs.d.ts @@ -1,3 +1,9 @@ +// Type definitions for cropperjs +// Project: https://github.com/fengyuanchen/cropperjs +// Definitions by: Stepan Mikhaylyuk +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + + declare module cropperjs { export enum CropperViewMods { CropBoxIsJustWithInTheContainer = 0,