@streamscloud/kit 0.1.10 → 0.1.12-1772032209109

package/dist/ui/cropper/img-cropper/img-cropper-contain-worker.svelte.js

@@ -1,159 +1,39 @@
-import { ColorHelper } from '../../../core/utils';
-import { computeImageScale, computeNaturalOutputSize, handleSelectionBoundary } from './img-cropper-utils';
-import { tick } from 'svelte';
-export class ImgCropperContainWorker {
-    cropBoxVisible = $state(false);
-    dragMode = $state('move');
-    naturalWidth = $state(0);
-    naturalHeight = $state(0);
-    canvasRatio = $state(null);
-    destroy;
-    _image;
-    _selection;
-    _canvas;
-    _selectHandle;
-    _originalSrc;
+import { ImgCropperBaseWorker } from './img-cropper-base-worker.svelte';
+import { fitInContainer } from './img-cropper-utils';
+export class ImgCropperContainWorker extends ImgCropperBaseWorker {
+    _centerMode = 'contain';
     constructor(params) {
-        this._originalSrc = params.originalSrc;
-        this._image = params.image;
-        this._selection = params.selection;
-        this._canvas = params.canvas;
-        this._selectHandle = params.selectHandle;
-        const onSelectionChange = (e) => {
-            const { width, height } = e.detail;
-            this.cropBoxVisible = width > 0 && height > 0;
-        };
-        const onBoundaryCheck = (e) => {
-            handleSelectionBoundary({ event: e, selection: this._selection, canvas: this._canvas });
-        };
-        this._selection.addEventListener('change', onSelectionChange);
-        this._selection.addEventListener('change', onBoundaryCheck);
-        this.destroy = () => {
-            this._selection.removeEventListener('change', onSelectionChange);
-            this._selection.removeEventListener('change', onBoundaryCheck);
-        };
-        this._applyMoveMode();
+        super(params);
     }
-    ready = async () => {
-        this._image.src = this._originalSrc;
-        await this._fitImage();
-        this._selection.$clear();
-    };
-    rotate = async () => {
-        if (this.canvasRatio !== null) {
-            this.canvasRatio = 1 / this.canvasRatio;
-            const prevW = this.naturalWidth;
-            this.naturalWidth = this.naturalHeight;
-            this.naturalHeight = prevW;
-            await tick();
+    _computeCanvasSize = () => {
+        const container = this._canvas.parentElement;
+        if (!container) {
+            return;
         }
-        this._image.$rotate('90deg');
-        this._centerForCurrentRotation();
-    };
-    zoomIn = () => {
-        this._image.$zoom(0.1);
-    };
-    zoomOut = () => {
-        this._image.$zoom(-0.1);
-    };
-    reset = async () => {
-        this._selection.$clear();
-        this._applyMoveMode();
-        this.canvasRatio = null;
-        this._image.src = this._originalSrc;
-        await this._fitImage();
-    };
-    crop = async (options) => {
-        const fillColor = options?.fillColor;
-        const selectionRatio = this._selection.width / this._selection.height;
-        const imageScale = computeImageScale(this._image.$getTransform());
-        const outputSize = computeNaturalOutputSize({ displayWidth: this._selection.width, displayHeight: this._selection.height, imageScale });
-        const canvas = await this._selection.$toCanvas({
-            width: outputSize.width,
-            height: outputSize.height,
-            beforeDraw: (ctx, cvs) => {
-                if (fillColor && !ColorHelper.isTransparent(fillColor)) {
-                    ctx.fillStyle = fillColor;
-                    ctx.fillRect(0, 0, cvs.width, cvs.height);
-                }
-            }
-        });
-        const dataUrl = canvas.toDataURL('image/png', 0.9);
-        this._applyMoveMode();
-        if (options?.freeRatio) {
-            this.canvasRatio = selectionRatio;
+        const containerWidth = container.clientWidth;
+        const containerHeight = container.clientHeight;
+        const visualWidth = this._visualWidth;
+        const visualHeight = this._visualHeight;
+        const aspectRatio = this.canvasGeometry.aspectRatio;
+        if (containerWidth <= 0 || containerHeight <= 0 || visualWidth <= 0 || visualHeight <= 0) {
+            this.canvasGeometry = { aspectRatio, width: 0, height: 0 };
+            return;
         }
-        this._image.src = dataUrl;
-        await this._fitImage();
-        this._selection.$clear();
-        return { dataUrl, width: canvas.width, height: canvas.height };
-    };
-    save = async (options) => {
-        const fillColor = options?.fillColor;
-        const beforeDraw = (ctx, cvs) => {
-            if (fillColor && !ColorHelper.isTransparent(fillColor)) {
-                ctx.fillStyle = fillColor;
-                ctx.fillRect(0, 0, cvs.width, cvs.height);
-            }
-        };
-        const imageScale = computeImageScale(this._image.$getTransform());
-        const displayWidth = this.cropBoxVisible ? this._selection.width : this._canvas.offsetWidth;
-        const displayHeight = this.cropBoxVisible ? this._selection.height : this._canvas.offsetHeight;
-        const outputSize = computeNaturalOutputSize({ displayWidth, displayHeight, imageScale });
-        const toCanvasOptions = { width: outputSize.width, height: outputSize.height, beforeDraw };
-        const canvas = this.cropBoxVisible ? await this._selection.$toCanvas(toCanvasOptions) : await this._canvas.$toCanvas(toCanvasOptions);
-        const dataUrl = canvas.toDataURL('image/png', 0.9);
-        return { dataUrl, width: canvas.width, height: canvas.height };
-    };
-    clearSelection = () => {
-        this._selection.$clear();
-        this._applyMoveMode();
-    };
-    enableCropMode = () => {
-        this._image.translatable = false;
-        if (this._selectHandle) {
-            this._selectHandle.setAttribute('action', 'select');
-        }
-        this.dragMode = 'crop';
-    };
-    _applyMoveMode = () => {
-        this._image.translatable = true;
-        if (this._selectHandle) {
-            this._selectHandle.setAttribute('action', 'move');
-        }
-        this.dragMode = 'move';
-        this.cropBoxVisible = false;
-    };
-    _fitImage = async () => {
-        const img = await this._image.$ready();
-        this.naturalWidth = img.naturalWidth;
-        this.naturalHeight = img.naturalHeight;
-        await tick();
-        this._image.$resetTransform();
-        this._centerForCurrentRotation();
-    };
-    // Choose $center() (natural size) or $center('contain') (scale-to-fit) based on
-    // whether the image's visual bounds fit inside the canvas at the current rotation.
-    // When canvasRatio is active, naturalWidth/Height are already swapped to match
-    // the visual orientation. Otherwise, derive visual dims from the rotation angle.
-    _centerForCurrentRotation = () => {
-        let visualW = this.naturalWidth;
-        let visualH = this.naturalHeight;
-        if (this.canvasRatio === null) {
-            const matrix = this._image.$getTransform();
-            const isSwapped = Math.abs(Math.sin(Math.atan2(matrix[1], matrix[0]))) > 0.5;
-            if (isSwapped) {
-                visualW = this.naturalHeight;
-                visualH = this.naturalWidth;
-            }
+        if (aspectRatio !== null) {
+            // Fixed ratio: fit in container, cap at natural image bounds
+            const fitted = fitInContainer({ ratio: aspectRatio, containerWidth, containerHeight });
+            const maxWidth = Math.max(visualWidth, visualHeight * aspectRatio);
+            const width = Math.min(fitted.width, maxWidth);
+            this.canvasGeometry = { aspectRatio, width, height: width / aspectRatio };
         }
-        const canvasRect = this._canvas.getBoundingClientRect();
-        const fitsNaturally = visualW <= canvasRect.width && visualH <= canvasRect.height;
-        if (fitsNaturally) {
-            this._image.$center();
+        else if (visualWidth <= containerWidth && visualHeight <= containerHeight) {
+            // Free ratio, image fits naturally — no upscale
+            this.canvasGeometry = { aspectRatio, width: visualWidth, height: visualHeight };
         }
         else {
-            this._image.$center('contain');
+            // Free ratio, image too large — scale down to fit
+            const fitted = fitInContainer({ ratio: visualWidth / visualHeight, containerWidth, containerHeight });
+            this.canvasGeometry = { aspectRatio, width: fitted.width, height: fitted.height };
         }
     };
 }

package/dist/ui/cropper/img-cropper/img-cropper-cover-worker.svelte.d.ts

@@ -1,40 +1,7 @@
-import type { DragMode, ImgCropperWorker, ImgCropperWorkerParams } from './img-cropper-worker.svelte';
-export declare class ImgCropperCoverWorker implements ImgCropperWorker {
-    cropBoxVisible: boolean;
-    dragMode: DragMode;
-    naturalWidth: number;
-    naturalHeight: number;
-    canvasRatio: number | null;
-    destroy: () => void;
-    private _image;
-    private _selection;
-    private _canvas;
-    private _selectHandle;
-    private _originalSrc;
-    private _withCoverCheckSuspended;
+import { ImgCropperBaseWorker } from './img-cropper-base-worker.svelte';
+import type { ImgCropperWorkerParams } from './img-cropper-worker.svelte';
+export declare class ImgCropperCoverWorker extends ImgCropperBaseWorker {
+    protected readonly _centerMode: "cover";
     constructor(params: ImgCropperWorkerParams);
-    ready: () => Promise<void>;
-    rotate: () => void;
-    zoomIn: () => void;
-    zoomOut: () => void;
-    reset: () => Promise<void>;
-    crop: (options?: {
-        fillColor?: string;
-        freeRatio?: boolean;
-    }) => Promise<{
-        dataUrl: string;
-        width: number;
-        height: number;
-    }>;
-    save: (options?: {
-        fillColor?: string;
-    }) => Promise<{
-        dataUrl: string;
-        width: number;
-        height: number;
-    }>;
-    clearSelection: () => void;
-    enableCropMode: () => void;
-    private _applyMoveMode;
-    private _fitImage;
+    protected _computeCanvasSize: () => void;
 }

package/dist/ui/cropper/img-cropper/img-cropper-cover-worker.svelte.js

@@ -1,32 +1,9 @@
-import { ColorHelper } from '../../../core/utils';
-import { computeImageScale, computeNaturalOutputSize, handleCoverCheck, handleSelectionBoundary } from './img-cropper-utils';
-import { tick } from 'svelte';
-export class ImgCropperCoverWorker {
-    cropBoxVisible = $state(false);
-    dragMode = $state('move');
-    naturalWidth = $state(0);
-    naturalHeight = $state(0);
-    canvasRatio = $state(null);
-    destroy;
-    _image;
-    _selection;
-    _canvas;
-    _selectHandle;
-    _originalSrc;
-    _withCoverCheckSuspended;
+import { ImgCropperBaseWorker } from './img-cropper-base-worker.svelte';
+import { fitInContainer, handleCoverCheck } from './img-cropper-utils';
+export class ImgCropperCoverWorker extends ImgCropperBaseWorker {
+    _centerMode = 'cover';
     constructor(params) {
-        this._originalSrc = params.originalSrc;
-        this._image = params.image;
-        this._selection = params.selection;
-        this._canvas = params.canvas;
-        this._selectHandle = params.selectHandle;
-        const onSelectionChange = (e) => {
-            const { width, height } = e.detail;
-            this.cropBoxVisible = width > 0 && height > 0;
-        };
-        const onBoundaryCheck = (e) => {
-            handleSelectionBoundary({ event: e, selection: this._selection, canvas: this._canvas });
-        };
+        super(params);
         // Dedup: handleCoverCheck calls $setTransform(clamped) which synchronously
         // fires another transform event with a matrix that differs by ~0.0001px
         // due to floating point. Without this guard CropperJS re-fires the same
@@ -41,123 +18,48 @@ export class ImgCropperCoverWorker {
             handleCoverCheck({ event: e, image: this._image, canvas: this._canvas });
             prevMatrix = null;
         };
-        this._selection.addEventListener('change', onSelectionChange);
-        this._selection.addEventListener('change', onBoundaryCheck);
         this._image.addEventListener('transform', onCoverCheck);
-        this._withCoverCheckSuspended = (fn) => {
+        this._wrapTransformOp = (fn) => {
             this._image.removeEventListener('transform', onCoverCheck);
-            fn();
-            this._image.addEventListener('transform', onCoverCheck);
+            try {
+                fn();
+            }
+            finally {
+                this._image.addEventListener('transform', onCoverCheck);
+            }
         };
+        const baseDestroy = this.destroy;
         this.destroy = () => {
-            this._selection.removeEventListener('change', onSelectionChange);
-            this._selection.removeEventListener('change', onBoundaryCheck);
+            baseDestroy();
             this._image.removeEventListener('transform', onCoverCheck);
         };
-        this._applyMoveMode();
     }
-    ready = async () => {
-        this._image.src = this._originalSrc;
-        await this._fitImage();
-        this._selection.$clear();
-    };
-    rotate = () => {
-        this._withCoverCheckSuspended(() => {
-            this._image.$rotate('90deg');
-            this._image.$center('cover');
-        });
-    };
-    zoomIn = () => {
-        this._image.$zoom(0.1);
-    };
-    zoomOut = () => {
-        this._image.$zoom(-0.1);
-    };
-    reset = async () => {
-        this._selection.$clear();
-        this._applyMoveMode();
-        this._image.src = this._originalSrc;
-        await this._fitImage();
-    };
-    crop = async (options) => {
-        const fillColor = options?.fillColor;
-        const imageScale = computeImageScale(this._image.$getTransform());
-        const outputSize = computeNaturalOutputSize({ displayWidth: this._selection.width, displayHeight: this._selection.height, imageScale });
-        const canvas = await this._selection.$toCanvas({
-            width: outputSize.width,
-            height: outputSize.height,
-            beforeDraw: (ctx, cvs) => {
-                if (fillColor && !ColorHelper.isTransparent(fillColor)) {
-                    ctx.fillStyle = fillColor;
-                    ctx.fillRect(0, 0, cvs.width, cvs.height);
-                }
-            }
-        });
-        const dataUrl = canvas.toDataURL('image/png', 0.9);
-        this._applyMoveMode();
-        this._image.src = dataUrl;
-        await this._fitImage();
-        this._selection.$clear();
-        return { dataUrl, width: canvas.width, height: canvas.height };
-    };
-    save = async (options) => {
-        const fillColor = options?.fillColor;
-        const beforeDraw = (ctx, cvs) => {
-            if (fillColor && !ColorHelper.isTransparent(fillColor)) {
-                ctx.fillStyle = fillColor;
-                ctx.fillRect(0, 0, cvs.width, cvs.height);
-            }
-        };
-        // Compute natural output dimensions before any micro-zoom so the
-        // output matches the source pixel density, not the display size.
-        const imageScale = computeImageScale(this._image.$getTransform());
-        const displayWidth = this.cropBoxVisible ? this._selection.width : this._canvas.offsetWidth;
-        const displayHeight = this.cropBoxVisible ? this._selection.height : this._canvas.offsetHeight;
-        const outputSize = computeNaturalOutputSize({ displayWidth, displayHeight, imageScale });
-        const toCanvasOptions = { width: outputSize.width, height: outputSize.height, beforeDraw };
-        // CropperJS $toCanvas exports only the visible portion of the canvas.
-        // In cover mode the image exactly covers the canvas, so sub-pixel rounding
-        // can leave a 1px transparent edge. A micro-zoom nudges the image slightly
-        // past the canvas boundary so the export captures the full area; the zoom
-        // is reversed immediately after.
-        const needsCoverZoom = !this.cropBoxVisible;
-        if (needsCoverZoom) {
-            this._image.$zoom(0.003);
+    _computeCanvasSize = () => {
+        const container = this._canvas.parentElement;
+        if (!container) {
+            return;
         }
-        const canvas = this.cropBoxVisible ? await this._selection.$toCanvas(toCanvasOptions) : await this._canvas.$toCanvas(toCanvasOptions);
-        if (needsCoverZoom) {
-            this._withCoverCheckSuspended(() => this._image.$zoom(-0.003));
+        const containerWidth = container.clientWidth;
+        const containerHeight = container.clientHeight;
+        const visualWidth = this._visualWidth;
+        const visualHeight = this._visualHeight;
+        const aspectRatio = this.canvasGeometry.aspectRatio;
+        if (containerWidth <= 0 || containerHeight <= 0) {
+            this.canvasGeometry = { aspectRatio, width: 0, height: 0 };
+            return;
         }
-        const dataUrl = canvas.toDataURL('image/png', 0.9);
-        return { dataUrl, width: canvas.width, height: canvas.height };
-    };
-    clearSelection = () => {
-        this._selection.$clear();
-        this._applyMoveMode();
-    };
-    enableCropMode = () => {
-        this._image.translatable = false;
-        if (this._selectHandle) {
-            this._selectHandle.setAttribute('action', 'select');
+        if (aspectRatio !== null) {
+            const fitted = fitInContainer({ ratio: aspectRatio, containerWidth, containerHeight });
+            // Cap so the image can cover the canvas without upscaling
+            const maxWidth = visualWidth > 0 && visualHeight > 0 ? Math.min(visualWidth, visualHeight * aspectRatio) : fitted.width;
+            const width = Math.min(fitted.width, maxWidth);
+            this.canvasGeometry = { aspectRatio, width, height: width / aspectRatio };
         }
-        this.dragMode = 'crop';
-    };
-    _applyMoveMode = () => {
-        this._image.translatable = true;
-        if (this._selectHandle) {
-            this._selectHandle.setAttribute('action', 'move');
+        else {
+            // Cap each dimension at visual size to avoid upscaling small images
+            const width = visualWidth > 0 ? Math.min(containerWidth, visualWidth) : containerWidth;
+            const height = visualHeight > 0 ? Math.min(containerHeight, visualHeight) : containerHeight;
+            this.canvasGeometry = { aspectRatio, width, height };
         }
-        this.dragMode = 'move';
-        this.cropBoxVisible = false;
-    };
-    _fitImage = async () => {
-        const img = await this._image.$ready();
-        this.naturalWidth = img.naturalWidth;
-        this.naturalHeight = img.naturalHeight;
-        await tick();
-        this._withCoverCheckSuspended(() => {
-            this._image.$resetTransform();
-            this._image.$center('cover');
-        });
     };
 }

package/dist/ui/cropper/img-cropper/img-cropper-utils.d.ts

@@ -1,10 +1,11 @@
 import type { CropperCanvas, CropperImage, CropperSelection } from 'cropperjs';
-export type Rect = {
+type Rect = {
     left: number;
     top: number;
     right: number;
     bottom: number;
 };
+export declare const detectMimeFromUrl: (url: string) => string | null;
 export declare const computeImageScale: (transform: number[]) => number;
 export declare const computeNaturalOutputSize: (params: {
     displayWidth: number;
@@ -25,8 +26,17 @@ export declare const handleCoverCheck: (params: {
     image: CropperImage;
     canvas: CropperCanvas;
 }) => void;
+export declare const fitInContainer: (params: {
+    ratio: number;
+    containerWidth: number;
+    containerHeight: number;
+}) => {
+    width: number;
+    height: number;
+};
 export declare const handleSelectionBoundary: (params: {
     event: Event;
     selection: CropperSelection;
     canvas: CropperCanvas;
 }) => void;
+export {};

package/dist/ui/cropper/img-cropper/img-cropper-utils.js

@@ -1,3 +1,26 @@
+import { Base64Helper } from '../../../core/files/base64-helper';
+import { default as mime } from 'mime';
+// Detect MIME type from a URL without fetching the resource.
+// Returns a MIME string for data: URLs, extension-based URLs, or null for blob: / unknown URLs.
+export const detectMimeFromUrl = (url) => {
+    if (url.startsWith('data:')) {
+        return Base64Helper.getMimeType(url);
+    }
+    if (url.startsWith('blob:')) {
+        return null;
+    }
+    try {
+        const pathname = url.includes('://') ? new URL(url).pathname : url.split('?')[0].split('#')[0];
+        const lastDot = pathname.lastIndexOf('.');
+        if (lastDot === -1) {
+            return null;
+        }
+        return mime.getType(pathname.slice(lastDot + 1).toLowerCase()) ?? null;
+    }
+    catch {
+        return null;
+    }
+};
 // Extract the uniform scale factor from a CSS transform matrix [a, b, c, d, e, f].
 // Works for any combination of scale + rotation: scale = sqrt(a² + b²).
 export const computeImageScale = (transform) => {
@@ -91,6 +114,13 @@ export const handleCoverCheck = (params) => {
     }
     image.$setTransform(matrix[0], matrix[1], matrix[2], matrix[3], clampedTx, clampedTy);
 };
+export const fitInContainer = (params) => {
+    const { ratio, containerWidth, containerHeight } = params;
+    if (ratio > containerWidth / containerHeight) {
+        return { width: containerWidth, height: containerWidth / ratio };
+    }
+    return { width: containerHeight * ratio, height: containerHeight };
+};
 export const handleSelectionBoundary = (params) => {
     const { event, selection, canvas } = params;
     const { x, y, width, height } = event.detail;

package/dist/ui/cropper/img-cropper/img-cropper-worker.svelte.d.ts

@@ -1,18 +1,29 @@
 import type { CropperCanvas, CropperImage, CropperSelection } from 'cropperjs';
 export type DragMode = 'move' | 'crop';
+export type CanvasGeometry = {
+    aspectRatio: number | null;
+    width: number;
+    height: number;
+};
 export type ImgCropperWorkerParams = {
     originalSrc: string;
+    sourceMime: string | null;
     image: CropperImage;
     selection: CropperSelection;
     canvas: CropperCanvas;
     selectHandle: HTMLElement | null;
+    aspectRatio: number | null;
+};
+export type ImgCropperResult = {
+    dataUrl: string;
+    width: number;
+    height: number;
+    mimeType: string;
 };
 export interface ImgCropperWorker {
     cropBoxVisible: boolean;
     dragMode: DragMode;
-    naturalWidth: number;
-    naturalHeight: number;
-    canvasRatio: number | null;
+    canvasGeometry: CanvasGeometry;
     destroy: () => void;
     ready: () => Promise<void>;
     rotate: () => void | Promise<void>;
@@ -21,19 +32,11 @@ export interface ImgCropperWorker {
     reset: () => Promise<void>;
     crop: (options?: {
         fillColor?: string;
-        freeRatio?: boolean;
-    }) => Promise<{
-        dataUrl: string;
-        width: number;
-        height: number;
-    }>;
+    }) => Promise<ImgCropperResult>;
     save: (options?: {
         fillColor?: string;
-    }) => Promise<{
-        dataUrl: string;
-        width: number;
-        height: number;
-    }>;
+    }) => Promise<ImgCropperResult>;
     clearSelection: () => void;
     enableCropMode: () => void;
+    refit: () => void | Promise<void>;
 }

package/dist/ui/cropper/img-cropper/img-cropper.svelte.d.ts

@@ -1,17 +1,13 @@
-import type { DragMode } from './img-cropper-worker.svelte';
+import type { CanvasGeometry, DragMode, ImgCropperResult } from './img-cropper-worker.svelte';
 import type { CropperCanvas, CropperImage, CropperSelection } from 'cropperjs';
+export type { CanvasGeometry };
 export type CropperMode = 'contain' | 'cover';
-export type CorsMode = 'native' | 'fetch';
 export type { DragMode };
 export type ImgCropperRatioOption = {
     label: string;
     value: number | null;
 };
-export type ImgCropperCoverAspectRatio = {
-    initial: number;
-    supported: number[];
-};
-export type ImgCropperContainAspectRatio = {
+export type ImgCropperDynamicAspectRatio = {
     initial: number;
     supported: number[];
     allowFreeCrop?: false;
@@ -20,40 +16,29 @@ export type ImgCropperContainAspectRatio = {
     supported: number[];
     allowFreeCrop: true;
 };
-export type ImgCropperSaveResult = {
-    dataUrl: string;
-    width: number;
-    height: number;
-};
-type ImgCropperOptionsBase = {
-    corsMode?: CorsMode;
+export type { ImgCropperResult };
+export type ImgCropperSaveResult = ImgCropperResult;
+export type ImgCropperOptions = {
+    mode: CropperMode;
+    aspectRatio?: number | ImgCropperDynamicAspectRatio;
     fillColor?: string;
     showImageShadow?: boolean;
 };
-export type ImgCropperOptions = (ImgCropperOptionsBase & {
-    mode: 'cover';
-    aspectRatio?: number | ImgCropperCoverAspectRatio;
-}) | (ImgCropperOptionsBase & {
-    mode: 'contain';
-    aspectRatio?: number | ImgCropperContainAspectRatio;
-});
 export declare class ImgCropper {
     loading: boolean;
     ready: boolean;
     fillColor: string;
-    aspectRatio: number | null;
     readonly mode: CropperMode;
-    readonly corsMode: CorsMode;
     readonly ratioOptions: ImgCropperRatioOption[] | null;
     readonly showImageShadow: boolean;
     private _worker;
     private _originalSrc;
+    private _defaultGeometry;
     constructor(options: ImgCropperOptions);
     get showFillColor(): boolean;
     get isTransparentFill(): boolean;
-    get effectiveCanvasRatio(): number | null;
-    get naturalWidth(): number;
-    get naturalHeight(): number;
+    get canvasGeometry(): CanvasGeometry;
+    get aspectRatio(): number | null;
     get cropBoxVisible(): boolean;
     get dragMode(): DragMode;
     init: (params: {
@@ -69,13 +54,10 @@ export declare class ImgCropper {
     zoomOut: () => void;
     reset: () => Promise<void>;
     changeAspectRatio: (ratio: number | null) => Promise<void>;
-    crop: () => Promise<{
-        dataUrl: string;
-        width: number;
-        height: number;
-    } | null>;
+    crop: () => Promise<ImgCropperSaveResult | null>;
     save: () => Promise<ImgCropperSaveResult | null>;
     clearSelection: () => void;
     enableCropMode: () => void;
     enableMoveMode: () => void;
+    refit: () => void;
 }