Fix croppie type definitions

src/types/croppie.d.ts

@@ -15,19 +15,100 @@
  * along with Threema Web. If not, see <http://www.gnu.org/licenses/>.
  */
 
-declare namespace __Croppie {
-    interface Croppie {
-        bind(options: any): Promise<any>;
-        result(options: any): Promise<any>;
+declare namespace croppie {
+    type WheelZoomType = 'ctrl';
+
+    type ViewportType = 'square' | 'circle';
+
+    type ImageUrl = string;
+
+    // String representation as returned by Number.prototype.toFixed()
+    type Point = string | number;
+
+    // [topLeftX, topLeftY, bottomRightX, bottomRightY]
+    type Points = [Point, Point, Point, Point];
+
+    type Orientation = number;
+
+    type Type = 'canvas' | 'base64' | 'html' | 'blob' | 'rawcanvas';
+
+    type Size = 'viewport' | 'original' | { width: number, height: number };
+
+    type Format = 'jpeg' | 'png' | 'webp';
+
+    type Degrees = 90 | 180 | 270 | -90 | -180 | -270;
+
+    // Dispatched on element constructed on as 'update.croppie'
+    type UpdateEvent = CustomEvent<State>;
+
+    interface Viewport {
+        width?: number,
+        height?: number,
+        type?: ViewportType,
     }
 
-    interface Static {
-        new(element: any, cfg?: any): Croppie
+    interface Boundary {
+        width?: number,
+        height: number,
+    }
+
+    interface ResizeControls {
+        width?: boolean,
+        height?: boolean,
     }
-}
 
-declare var Croppie: __Croppie.Static;
+    interface CreateOptions {
+        viewport?: Viewport,
+        boundary?: Boundary,
+        resizeControls?: ResizeControls,
+        customClass?: string,
+        showZoomer?: boolean,
+        enableZoom?: boolean,
+        enableResize?: boolean,
+        mouseWheelZoom?: boolean | WheelZoomType,
+        enableExif?: boolean,
+        enforceBoundary?: boolean,
+        enableOrientation?: boolean,
+        enableKeyMovement?: boolean,
+        url?: ImageUrl,
+        points?: Points,
+        update?: (UpdateEvent) => void,
+    }
+
+    interface State {
+        points: Points;
+        zoom: number,
+        orientation?: Orientation,
+    }
+
+    interface BindOptions {
+        url?: ImageUrl,
+        points?: Points,
+        zoom?: number,
+        orientation?: Orientation,
+    }
+
+    interface ResultOptions {
+        type?: Type;
+        size?: Size;
+        format?: Format;
+        quality?: number; // Range: [0..1]
+        backgroundColor?: string,
+        circle?: boolean;
+    }
+}
 
-declare module "croppie" {
-    export = Croppie;
+declare class Croppie {
+    constructor(element: HTMLElement, options?: croppie.CreateOptions);
+    get(): croppie.State;
+    bind(options?: croppie.BindOptions | croppie.ImageUrl | croppie.Points): Promise<void>;
+    destroy(): void;
+    result(options: croppie.ResultOptions & { type: 'base64' | 'canvas' }): Promise<string>;
+    result(options: croppie.ResultOptions & { type: 'html' }): Promise<HTMLElement>;
+    result(options: croppie.ResultOptions & { type: 'blob' }): Promise<Blob>;
+    result(options: croppie.ResultOptions & { type: 'rawcanvas' }): Promise<HTMLCanvasElement>;
+    result(options?: croppie.ResultOptions): Promise<HTMLCanvasElement>;
+    rotate(degrees: croppie.Degrees): void;
+    setZoom(zoom: number): void;
+    destroy(): void;
 }