diff --git a/types/vue-cropperjs/index.d.ts b/types/vue-cropperjs/index.d.ts new file mode 100644 index 0000000000..367e9a354e --- /dev/null +++ b/types/vue-cropperjs/index.d.ts @@ -0,0 +1,435 @@ +// Type definitions for vue-cropperjs 4.1 +// Project: https://github.com/Agontuk/vue-cropperjs +// Definitions by: Dylan Kidd +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +import { VueConstructor } from 'vue'; + +export type previewPropType = string | string[] | Element | NodeList; + +export type DragMode = 'none' | 'crop' | 'move'; + +export interface CroppedCanvasOptions { + /** + * the destination width of the output canvas. + */ + width?: number; + /** + * the destination height of the output canvas. + */ + height?: number; + /** + * the minimum destination width of the output canvas, the default value is 0. + */ + minWidth?: number; + /** + * the minimum destination height of the output canvas, the default value is 0. + */ + minHeight?: number; + /** + * the maximum destination width of the output canvas, the default value is Infinity. + */ + maxWidth?: number; + /** + * the maximum destination height of the output canvas, the default value is Infinity. + */ + maxHeight?: number; + /** + * a color to fill any alpha values in the output canvas, the default value is transparent. + */ + fillColor?: string; + /** + * set to change if images are smoothed (true, default) or not (false). + */ + imageSmoothingEnabled?: boolean; + /** + * set the quality of image smoothing, one of "low" (default), "medium", or "high". + */ + imageSmoothingQuality?: 'low' | 'medium' | 'high'; +} + +export 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; +} + +export interface CanvasData { + /** + * the offset left of the canvas + */ + left: number; + /** + * the offset top of the canvas + */ + top: number; + /** + * the width of the canvas + */ + width: number; + /** + * the height of the canvas + */ + height: number; + /** + * the natural width of the canvas (read only) + */ + naturalWidth: number; + /** + * the natural height of the canvas (read only) + */ + naturalHeight: number; +} + +export 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; +} + +export interface ContainerData { + /** + * the current width of the container + */ + width: number; + /** + * the current height of the container + */ + height: number; +} + +export interface CropperData { + /** + * 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 interface VueCropperMethods { + /** + * Reset cropper to original state + */ + reset(): void; + /** + * Clear image from the cropper + */ + clear(): void; + /** + * Initialize the cropper + */ + initCrop(): void; + /** + * Replace the image's src and rebuild the cropper. + * @param url A new image url. + * @param hasSameSize Default false If the new image has the same size as the old one, + * then it will not rebuild the cropper and only update the URLs of all related images. This can be used for applying filters. + */ + replace(url: string, hasSameSize?: boolean): 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. + * @param ratio Zoom in: requires a positive number (ratio > 0) Zoom out: requires a negative number (ratio < 0) + * @param _originalEvent + */ + relativeZoom(ratio: number, _originalEvent?: Event): void; + /** + * Zoom the canvas (image wrapper) to an absolute ratio. + * @param ratio Requires a positive number (ratio > 0) + * @param _originalEvent + */ + zoomTo(ratio: number, _originalEvent?: Event): void; + /** + * Rotate the image with a relative degree. + * @param degree Rotate right: requires a positive number (degree > 0) Rotate left: requires a negative number (degree < 0) + */ + rotate(degree: number): void; + /** + * Rotate the image to an absolute degree. + * @param degree Amount to rotate image + */ + rotateTo(degree: number): void; + /** + * @param _scaleX The scaling factor to apply to the abscissa of the image. When equal to 1 it does nothing + */ + scaleX(_scaleX: number): void; + /** + * @param _scaleY The scaling factor to apply to the ordinate of the image. When equal to 1 it does nothing + */ + scaleY(_scaleY: number): void; + /** + * Scale the image. + * Requires CSS3 2D Transforms support (IE 9+). + * @param scaleX The scaling factor to apply to the abscissa of the image. When equal to 1 it does nothing + * @param scaleY The scaling factor to apply to the ordinate of the image. When equal to 1 it does nothing + */ + scale(scaleX: number, scaleY?: number): void; + /** + * Change the cropped area position and size with new data (base on the original image). + * Note: This method only available when the value of the viewMode option is greater than or equal to 1. + * @param data The cropper data to set with. You may need to round the data properties before passing them in. + */ + setData(data: CropperData): void; + /** + * Output the final cropped area position and size data (base on the natural size of the original image). + */ + getData(rounded?: boolean): CropperData; + /** + * 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; + /** + * Change the canvas (image wrapper) position and size with new data. + * @param data Canvas Data to be set + */ + setCanvasData(data: CanvasData): void; + /** + * Output the crop box position and size data. + */ + getCropBoxData(): CropBoxData; + /** + * Change the crop box position and size with new data. + * @param data Crop Box Data + */ + setCropBoxData(data: CropBoxData): void; + /** + * Get a canvas drawn the cropped image (lossy compression). If it is not cropped, then returns a canvas drawn the whole image. + * Avoid to get a blank (or black) output image, you might need to set the maxWidth and maxHeight properties to limited numbers, because of the size limits of a canvas element. + * Also, you should limit them maximum zoom ratio (in the zoom event) as the same reason. + * @param options + */ + getCroppedCanvas(options?: CroppedCanvasOptions): HTMLCanvasElement; + /** + * Change the aspect ratio of the crop box. + * @param aspectRatio + */ + setAspectRatio(aspectRatio: number): void; + /** + * Change the drag mode. + * Tips: You can toggle the "crop" and "move" mode by double click on the cropper. + * @param mode + */ + setDragMode(mode: DragMode): void; +} + +export interface VueCropperProps { + containerStyle: Record; + src: { + type: string; + default: ''; + }; + alt: string; + imgStyle: Record; + + viewMode: number; + dragMode: string; + initialAspectRatio: number; + aspectRatio: number; + data: Record; + preview: previewPropType; + responsive: { + type: boolean; + default: true; + }; + restore: { + type: boolean; + default: true; + }; + checkCrossOrigin: { + type: boolean; + default: true; + }; + checkOrientation: { + type: boolean; + default: true; + }; + modal: { + type: boolean; + default: true; + }; + guides: { + type: boolean; + default: true; + }; + center: { + type: boolean; + default: true; + }; + highlight: { + type: boolean; + default: true; + }; + background: { + type: boolean; + default: true; + }; + autoCrop: { + type: boolean; + default: true; + }; + autoCropArea: number; + movable: { + type: boolean; + default: true; + }; + rotatable: { + type: boolean; + default: true; + }; + scalable: { + type: boolean; + default: true; + }; + zoomable: { + type: boolean; + default: true; + }; + zoomOnTouch: { + type: boolean; + default: true; + }; + zoomOnWheel: { + type: boolean; + default: true; + }; + wheelZoomRatio: number; + cropBoxMovable: { + type: boolean; + default: true; + }; + cropBoxResizable: { + type: boolean; + default: true; + }; + toggleDragModeOnDblclick: { + type: boolean; + default: true; + }; + + minCanvasWidth: number; + minCanvasHeight: number; + minCropBoxWidth: number; + minCropBoxHeight: number; + minContainerWidth: number; + minContainerHeight: number; + + ready: () => void; + cropstart: () => void; + cropmove: () => void; + cropend: () => void; + crop: () => void; + zoom: () => void; +} +export interface VueCropperJsConstructor extends VueConstructor { + props: VueCropperProps; + methods: VueCropperMethods; + data: () => void; +} + +export const VueCropperJs: VueCropperJsConstructor; + +export default VueCropperJs; diff --git a/types/vue-cropperjs/package.json b/types/vue-cropperjs/package.json new file mode 100644 index 0000000000..faefc1b2f7 --- /dev/null +++ b/types/vue-cropperjs/package.json @@ -0,0 +1,6 @@ +{ + "private": true, + "dependencies": { + "vue": ">=2.0.0" + } +} diff --git a/types/vue-cropperjs/tsconfig.json b/types/vue-cropperjs/tsconfig.json new file mode 100644 index 0000000000..e7dc4c5d79 --- /dev/null +++ b/types/vue-cropperjs/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6", + "dom" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictFunctionTypes": true, + "strictNullChecks": true, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "vue-cropperjs-tests.ts" + ] +} diff --git a/types/vue-cropperjs/tslint.json b/types/vue-cropperjs/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/vue-cropperjs/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" } diff --git a/types/vue-cropperjs/vue-cropperjs-tests.ts b/types/vue-cropperjs/vue-cropperjs-tests.ts new file mode 100644 index 0000000000..e81a8507f8 --- /dev/null +++ b/types/vue-cropperjs/vue-cropperjs-tests.ts @@ -0,0 +1,21 @@ +import Vue from 'vue'; +import VueCropperJs from 'vue-cropperjs'; + +new Vue({ + el: '#app', + data: { + imgSrc: '', + }, + components: { + 'vue-cropperjs': VueCropperJs + }, + methods: { + zoom(option: any) { + }, + }, + template: ` + + +` +});