@streamscloud/kit 0.63.0 → 0.65.0

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

@@ -1,9 +1,5 @@
 import { Base64Helper } from '../../../core/files/base64-helper';
 import { default as mime } from 'mime';
-const COVERAGE_TOLERANCE = 0.5;
-const SHRINK_THRESHOLD = 0.5;
-// 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);
@@ -12,198 +8,47 @@ export const detectMimeFromUrl = (url) => {
         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;
+        const path = url.includes('://') ? new URL(url).pathname : url.split('?')[0].split('#')[0];
+        const dot = path.lastIndexOf('.');
+        return dot === -1 ? null : (mime.getType(path.slice(dot + 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) => {
-    return Math.sqrt(transform[0] ** 2 + transform[1] ** 2) || 1;
-};
-// Compute the natural-resolution output size for a displayed region.
-// Divides the display dimensions by the image's transform scale so that
-// the exported image matches the source pixel density.
-export const computeNaturalOutputSize = (params) => {
-    const { displayWidth, displayHeight, imageScale } = params;
-    return {
-        width: Math.round(displayWidth / imageScale),
-        height: Math.round(displayHeight / imageScale)
-    };
-};
-// Compute proposed bounding rect mathematically (no DOM style manipulation).
-// CSS default transform-origin is 50% 50%, so AABB of a w×h element under matrix(a,b,c,d,e,f):
-//   left  = e + w/2 - |a|·w/2 - |c|·h/2
-//   right = e + w/2 + |a|·w/2 + |c|·h/2   (and similarly for top/bottom with b,d,f)
-// We only need the DIFFERENCE between old and new AABB to predict the proposed viewport rect.
-export const computeLocalAABB = (params) => {
-    const { matrix, width, height } = params;
-    const halfWidth = width / 2;
-    const halfHeight = height / 2;
-    return {
-        left: matrix[4] + halfWidth - Math.abs(matrix[0]) * halfWidth - Math.abs(matrix[2]) * halfHeight,
-        top: matrix[5] + halfHeight - Math.abs(matrix[1]) * halfWidth - Math.abs(matrix[3]) * halfHeight,
-        right: matrix[4] + halfWidth + Math.abs(matrix[0]) * halfWidth + Math.abs(matrix[2]) * halfHeight,
-        bottom: matrix[5] + halfHeight + Math.abs(matrix[1]) * halfWidth + Math.abs(matrix[3]) * halfHeight
-    };
-};
-export const rectCoversRect = (inner, outer, tolerance = 1) => inner.left <= outer.left + tolerance &&
-    inner.top <= outer.top + tolerance &&
-    inner.right >= outer.right - tolerance &&
-    inner.bottom >= outer.bottom - tolerance;
-export const handleCoverCheck = (params) => {
-    const { event, image, canvas } = params;
-    const canvasRect = canvas.getBoundingClientRect();
-    const currentRect = image.getBoundingClientRect();
-    // Only restrict when image currently covers canvas.
-    // During internal ops ($resetTransform, $center, $rotate) it doesn't — handler skips.
-    if (!rectCoversRect(currentRect, canvasRect)) {
-        return;
-    }
-    const { matrix, oldMatrix } = event.detail;
-    // Allow rotations — always followed by $center() which restores coverage.
-    // Compare angles (atan2(b,a)) instead of raw b/c values because zoom also
-    // changes b and c when the image is already rotated.
-    const oldAngle = Math.atan2(oldMatrix[1], oldMatrix[0]);
-    const newAngle = Math.atan2(matrix[1], matrix[0]);
-    if (Math.abs(newAngle - oldAngle) > 0.001) {
-        return;
-    }
-    const imageWidth = image.offsetWidth;
-    const imageHeight = image.offsetHeight;
-    const oldAABB = computeLocalAABB({ matrix: oldMatrix, width: imageWidth, height: imageHeight });
-    const newAABB = computeLocalAABB({ matrix, width: imageWidth, height: imageHeight });
-    const proposedRect = {
-        left: currentRect.left + (newAABB.left - oldAABB.left),
-        top: currentRect.top + (newAABB.top - oldAABB.top),
-        right: currentRect.right + (newAABB.right - oldAABB.right),
-        bottom: currentRect.bottom + (newAABB.bottom - oldAABB.bottom)
-    };
-    // Sub-pixel tolerance: a stricter check re-enters on the clamped transform this handler issues itself.
-    if (rectCoversRect(proposedRect, canvasRect, COVERAGE_TOLERANCE)) {
-        return;
-    }
-    event.preventDefault();
-    const proposedWidth = proposedRect.right - proposedRect.left;
-    const proposedHeight = proposedRect.bottom - proposedRect.top;
-    const canvasWidth = canvasRect.right - canvasRect.left;
-    const canvasHeight = canvasRect.bottom - canvasRect.top;
-    const oldAABBWidth = oldAABB.right - oldAABB.left;
-    const oldAABBHeight = oldAABB.bottom - oldAABB.top;
-    const newAABBWidth = newAABB.right - newAABB.left;
-    const newAABBHeight = newAABB.bottom - newAABB.top;
-    const shrinksImage = newAABBWidth < oldAABBWidth - SHRINK_THRESHOLD || newAABBHeight < oldAABBHeight - SHRINK_THRESHOLD;
-    let [scaleX, skewY, skewX, scaleY] = matrix;
-    let clampedRect = proposedRect;
-    if (proposedWidth < canvasWidth - 0.5 || proposedHeight < canvasHeight - 0.5) {
-        // Rescaling anything but a shrink would turn a pan, whose proposal is the same size, into an upscale.
-        if (!shrinksImage) {
-            return;
-        }
-        const coverScale = Math.max(canvasWidth / proposedWidth, canvasHeight / proposedHeight);
-        if (!Number.isFinite(coverScale)) {
-            return;
-        }
-        scaleX *= coverScale;
-        skewY *= coverScale;
-        skewX *= coverScale;
-        scaleY *= coverScale;
-        const halfWidth = (proposedWidth * coverScale) / 2;
-        const halfHeight = (proposedHeight * coverScale) / 2;
-        const centerX = (proposedRect.left + proposedRect.right) / 2;
-        const centerY = (proposedRect.top + proposedRect.bottom) / 2;
-        clampedRect = { left: centerX - halfWidth, top: centerY - halfHeight, right: centerX + halfWidth, bottom: centerY + halfHeight };
-    }
-    let clampedTx = matrix[4];
-    let clampedTy = matrix[5];
-    if (clampedRect.left > canvasRect.left) {
-        clampedTx -= clampedRect.left - canvasRect.left;
-    }
-    else if (clampedRect.right < canvasRect.right) {
-        clampedTx += canvasRect.right - clampedRect.right;
-    }
-    if (clampedRect.top > canvasRect.top) {
-        clampedTy -= clampedRect.top - canvasRect.top;
-    }
-    else if (clampedRect.bottom < canvasRect.bottom) {
-        clampedTy += canvasRect.bottom - clampedRect.bottom;
-    }
-    image.$setTransform(scaleX, skewY, skewX, scaleY, 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 };
-};
-// Same limits cropper-canvas declares in its shadow style, where they clamp one axis at a time and break the canvas ratio.
-const MIN_CANVAS_WIDTH = 200;
-const MIN_CANVAS_HEIGHT = 100;
+const ALPHA_PROBE_PX = 512;
 /**
- * Applies the minimum canvas size by scaling the whole rect, bounded by `maxWidth` / `maxHeight`, and rounds to whole pixels.
- * The minimums are soft: a container smaller than them wins, and the returned canvas is smaller than `MIN_CANVAS_WIDTH` / `MIN_CANVAS_HEIGHT`.
+ * Whether the picture has any non-opaque pixel. Probed on a copy downscaled to `ALPHA_PROBE_PX` — downscaling averages
+ * alpha, so even thin transparent details still leave a sub-255 pixel, at a fraction of a full-resolution read.
  */
-export const resolveCanvasGeometry = (params) => {
-    const { aspectRatio, width, height, maxWidth, maxHeight } = params;
-    if (width <= 0 || height <= 0) {
-        return { aspectRatio, width: 0, height: 0 };
-    }
-    const ratio = width / height;
-    const floorScale = Math.max(MIN_CANVAS_WIDTH / width, MIN_CANVAS_HEIGHT / height, 1);
-    const boundedWidth = Math.min(width * floorScale, maxWidth, maxHeight * ratio);
-    // A zero side reads as "unset" in the template, which falls the canvas back to its CSS size and desyncs it from this geometry.
-    return { aspectRatio, width: Math.max(1, Math.round(boundedWidth)), height: Math.max(1, Math.round(boundedWidth / ratio)) };
-};
-export const handleSelectionBoundary = (params) => {
-    const { event, selection, canvas } = params;
-    const { x, y, width, height } = event.detail;
-    const { width: canvasWidth, height: canvasHeight } = canvas.getBoundingClientRect();
-    if (x >= 0 && y >= 0 && x + width <= canvasWidth && y + height <= canvasHeight) {
-        return;
-    }
-    event.preventDefault();
-    const isMove = Math.abs(width - selection.width) < 1 && Math.abs(height - selection.height) < 1;
-    if (isMove) {
-        selection.$change(Math.max(0, Math.min(x, canvasWidth - width)), Math.max(0, Math.min(y, canvasHeight - height)), width, height);
-        return;
-    }
-    if (selection.aspectRatio) {
-        return;
-    }
-    const overLeft = x < 0;
-    const overTop = y < 0;
-    const overRight = x + width > canvasWidth;
-    const overBottom = y + height > canvasHeight;
-    if (+overLeft + +overTop + +overRight + +overBottom !== 1) {
-        return;
-    }
-    let clampedX = x;
-    let clampedY = y;
-    let clampedWidth = width;
-    let clampedHeight = height;
-    if (overLeft) {
-        clampedX = 0;
-        clampedWidth = x + width;
-    }
-    else if (overTop) {
-        clampedY = 0;
-        clampedHeight = y + height;
-    }
-    else if (overRight) {
-        clampedWidth = canvasWidth - x;
-    }
-    else if (overBottom) {
-        clampedHeight = canvasHeight - y;
-    }
-    if (clampedWidth > 0 && clampedHeight > 0) {
-        selection.$change(clampedX, clampedY, clampedWidth, clampedHeight);
+export const detectAlpha = (image, mimeType) => {
+    if (mimeType === 'image/jpeg') {
+        return false;
+    }
+    const scale = Math.min(1, ALPHA_PROBE_PX / Math.max(image.naturalWidth, image.naturalHeight));
+    const width = Math.max(1, Math.round(image.naturalWidth * scale));
+    const height = Math.max(1, Math.round(image.naturalHeight * scale));
+    const canvas = document.createElement('canvas');
+    canvas.width = width;
+    canvas.height = height;
+    const context = canvas.getContext('2d');
+    if (!context) {
+        return false;
+    }
+    context.imageSmoothingQuality = 'high';
+    context.drawImage(image, 0, 0, width, height);
+    const { data } = context.getImageData(0, 0, width, height);
+    for (let i = 3; i < data.length; i += 4) {
+        if (data[i] < 255) {
+            return true;
+        }
     }
+    return false;
 };
+export const loadImage = (src) => new Promise((resolve, reject) => {
+    const image = new Image();
+    image.crossOrigin = 'anonymous';
+    image.onload = () => resolve(image);
+    image.onerror = () => reject(new Error(`ImgCropper: failed to load "${src}"`));
+    image.src = src;
+});

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

@@ -1,8 +1,6 @@
-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 { DragMode };
+import { type FrameFitMode, type Point, type Rect, type Size } from './frame-geometry';
+export type CropperMode = FrameFitMode;
+export type { Point, Rect };
 export type ImgCropperRatioOption = {
     label: string;
     value: number | null;
@@ -16,48 +14,115 @@ export type ImgCropperDynamicAspectRatio = {
     supported: number[];
     allowFreeCrop: true;
 };
-export type { ImgCropperResult };
-export type ImgCropperSaveResult = ImgCropperResult;
+export type ImgCropperMargin = {
+    block?: number;
+    inline?: number;
+};
 export type ImgCropperOptions = {
+    /** The placement rule the picture starts with and `reset()` returns to; Fill / Fit in the toolbar switch it. */
     mode: CropperMode;
     aspectRatio?: number | ImgCropperDynamicAspectRatio;
     fillColor?: string;
-    showImageShadow?: boolean;
+    /** Breathing room between the frame and the stage's own edges. @default `{ block: 64, inline: 64 }` */
+    margin?: ImgCropperMargin;
+};
+export type ImgCropperSaveResult = {
+    dataUrl: string;
+    width: number;
+    height: number;
+    mimeType: string;
 };
 export declare class ImgCropper {
+    readonly ratioOptions: ImgCropperRatioOption[] | null;
+    readonly margin: Required<ImgCropperMargin>;
     loading: boolean;
-    ready: boolean;
+    failed: boolean;
+    mode: CropperMode;
     fillColor: string;
-    readonly mode: CropperMode;
-    readonly ratioOptions: ImgCropperRatioOption[] | null;
-    readonly showImageShadow: boolean;
-    private _worker;
-    private _originalSrc;
-    private _defaultGeometry;
+    natural: Size | null;
+    rotation: 0 | 90 | 180 | 270;
+    /** The part of the source (turned by `rotation`) the picture is cut to, in natural pixels; `null` for the whole source. */
+    crop: Rect | null;
+    source: string;
+    free: boolean;
+    cropMode: boolean;
+    selection: Rect | null;
+    aspectRatio: number | null;
+    stage: Size;
+    box: Rect | null;
+    private readonly _initialMode;
+    private readonly _initialAspectRatio;
+    private _image;
+    private _blobUrl;
+    private _sourceMime;
+    private _sourceHasAlpha;
     constructor(options: ImgCropperOptions);
     get showFillColor(): boolean;
+    get hasSelection(): boolean;
+    /** Whether the picture has transparent pixels — the source's own, or empty space a crop took in past the source's edges. */
+    get hasAlpha(): boolean;
+    /** The current aspect ratio's label — a preset's own, or `1.78:1` for a custom one; `null` for Original. */
+    get ratioLabel(): string | null;
     get isTransparentFill(): boolean;
-    get canvasGeometry(): CanvasGeometry;
-    get aspectRatio(): number | null;
-    get cropBoxVisible(): boolean;
-    get dragMode(): DragMode;
-    init: (params: {
-        src: string;
-        cropperImage: CropperImage;
-        cropperSelection: CropperSelection;
-        cropperCanvas: CropperCanvas;
-        selectHandle: HTMLElement | null;
-    }) => Promise<void>;
+    /** The picture's natural size — the crop's, or the whole source's turned by `rotation`. */
+    get shownNatural(): Size | null;
+    /** The picture's own aspect ratio (post-rotation) — the shape `box` must always keep. */
+    get imageAspect(): number | null;
+    /** The frame's own aspect ratio — the chosen ratio, or the picture's own when none is chosen. */
+    get frameAspect(): number | null;
+    get frame(): Rect | null;
+    /** Zoom as shown to the user: 1 is the current mode's rest state — filling the frame in `cover`, fitting it in `contain`. */
+    get zoom(): number;
+    get minZoom(): number;
+    get maxZoom(): number;
+    /** The mode whose rest state the picture is in right now — filling the frame for `cover`, fitting it for `contain`; `null` once zoomed or free. */
+    get restingMode(): CropperMode | null;
+    get ready(): boolean;
+    private get _fullNatural();
+    private get _zoomBase();
+    init: (src: string) => Promise<void>;
     destroy: () => void;
-    rotate: () => Promise<void>;
+    setStage: (size: Size) => void;
+    layout: () => void;
+    changeAspectRatio: (ratio: number | null) => void;
+    setFree: (free: boolean) => void;
+    toggleFree: () => void;
+    setCropMode: (active: boolean) => void;
+    updateSelection: (anchor: Point, point: Point) => void;
+    /** Drops a freshly drawn selection that ended up below the minimum size. */
+    finishSelection: () => void;
+    moveSelection: (delta: Point) => void;
+    clearSelection: () => void;
+    /**
+     * Cuts the picture to the selection — whatever it covers, empty space past the picture included (that turns
+     * transparent). The cut piece becomes the picture: the rest of it is gone until `reset()`, and it's laid out afresh,
+     * filling the frame — with the Original aspect the frame takes the piece's shape, a fixed aspect already matches it.
+     */
+    applyCrop: () => void;
+    pan: (delta: Point) => void;
+    scaleAbout: (factor: number, anchor: Point) => void;
+    /** Sets the zoom in the shown units — see `zoom`. */
+    setZoom: (zoom: number) => void;
     zoomIn: () => void;
     zoomOut: () => void;
-    reset: () => Promise<void>;
-    changeAspectRatio: (ratio: number | null) => Promise<void>;
-    crop: () => Promise<ImgCropperSaveResult | null>;
+    /** Switches to `cover` (leaving free position) and fills the frame. */
+    fill: () => void;
+    /** Switches to `contain` (leaving free position) and fits the picture inside the frame, centered. */
+    fit: () => void;
+    align: (fx: number, fy: number) => void;
+    /** Turns the picture a quarter clockwise (`1`) or counter-clockwise (`-1`). With the Original aspect the frame turns
+     * along and keeps what's inside it; a fixed-aspect frame can't turn, so the picture is laid out afresh instead. */
+    rotate: (direction: 1 | -1) => void;
+    reset: () => void;
+    /** Renders the frame to an image, applying a pending selection first; `null` when there's nothing to render or the browser can't. */
     save: () => Promise<ImgCropperSaveResult | null>;
-    clearSelection: () => void;
-    enableCropMode: () => void;
-    enableMoveMode: () => void;
-    refit: () => void;
+    /**
+     * Where the whole turned source lands when the picture is drawn into `picture` — its center and its size on each axis,
+     * before `rotation` swaps them. The view and `save()` both place the source through this, so they can't drift apart.
+     */
+    sourcePlacement: (picture: Rect) => {
+        center: Point;
+        size: Size;
+    } | null;
+    private _update;
 }