@streamscloud/kit 0.1.9 → 0.1.10

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

@@ -0,0 +1,159 @@
+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;
+    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();
+    }
+    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();
+        }
+        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;
+        }
+        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;
+            }
+        }
+        const canvasRect = this._canvas.getBoundingClientRect();
+        const fitsNaturally = visualW <= canvasRect.width && visualH <= canvasRect.height;
+        if (fitsNaturally) {
+            this._image.$center();
+        }
+        else {
+            this._image.$center('contain');
+        }
+    };
+}

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

@@ -0,0 +1,40 @@
+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;
+    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;
+}

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

@@ -0,0 +1,163 @@
+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;
+    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 });
+        };
+        // 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
+        // clamped transform endlessly, causing a stack overflow.
+        let prevMatrix = null;
+        const onCoverCheck = (e) => {
+            const { matrix } = e.detail;
+            if (prevMatrix && matrix.every((v, i) => Math.abs(v - prevMatrix[i]) < 0.01)) {
+                return;
+            }
+            prevMatrix = matrix;
+            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._image.removeEventListener('transform', onCoverCheck);
+            fn();
+            this._image.addEventListener('transform', onCoverCheck);
+        };
+        this.destroy = () => {
+            this._selection.removeEventListener('change', onSelectionChange);
+            this._selection.removeEventListener('change', onBoundaryCheck);
+            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);
+        }
+        const canvas = this.cropBoxVisible ? await this._selection.$toCanvas(toCanvasOptions) : await this._canvas.$toCanvas(toCanvasOptions);
+        if (needsCoverZoom) {
+            this._withCoverCheckSuspended(() => this._image.$zoom(-0.003));
+        }
+        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._withCoverCheckSuspended(() => {
+            this._image.$resetTransform();
+            this._image.$center('cover');
+        });
+    };
+}

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

@@ -0,0 +1,6 @@
+export declare class ImgCropperLocalization {
+    get apply(): string;
+    get cancel(): string;
+    get imageLoadError(): string;
+    get initCropperError(): string;
+}

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

@@ -0,0 +1,33 @@
+import { AppLocale } from '../../../core/locale';
+const loc = {
+    apply: {
+        en: 'Apply',
+        no: 'Bruk'
+    },
+    cancel: {
+        en: 'Cancel',
+        no: 'Avbryt'
+    },
+    imageLoadError: {
+        en: 'Failed to load image',
+        no: 'Kunne ikke laste bildet'
+    },
+    initCropperError: {
+        en: 'Failed to initialize cropper',
+        no: 'Kunne ikke initialisere cropper'
+    }
+};
+export class ImgCropperLocalization {
+    get apply() {
+        return loc.apply[AppLocale.current];
+    }
+    get cancel() {
+        return loc.cancel[AppLocale.current];
+    }
+    get imageLoadError() {
+        return loc.imageLoadError[AppLocale.current];
+    }
+    get initCropperError() {
+        return loc.initCropperError[AppLocale.current];
+    }
+}

package/dist/ui/cropper/img-cropper/img-cropper-toolbar-localization.d.ts

@@ -0,0 +1,11 @@
+export declare class ImgCropperToolbarLocalization {
+    get move(): string;
+    get crop(): string;
+    get zoomIn(): string;
+    get zoomOut(): string;
+    get rotate(): string;
+    get reset(): string;
+    get free(): string;
+    get ratio(): string;
+    get fill(): string;
+}

package/dist/ui/cropper/img-cropper/img-cropper-toolbar-localization.js

@@ -0,0 +1,68 @@
+import { AppLocale } from '../../../core/locale';
+const loc = {
+    move: {
+        en: 'Move',
+        no: 'Flytt'
+    },
+    crop: {
+        en: 'Crop',
+        no: 'Beskjær'
+    },
+    zoomIn: {
+        en: 'Zoom In',
+        no: 'Zoom inn'
+    },
+    zoomOut: {
+        en: 'Zoom Out',
+        no: 'Zoom ut'
+    },
+    rotate: {
+        en: 'Rotate',
+        no: 'Roter'
+    },
+    reset: {
+        en: 'Reset',
+        no: 'Tilbakestill'
+    },
+    free: {
+        en: 'Free',
+        no: 'Fri'
+    },
+    ratio: {
+        en: 'Ratio',
+        no: 'Forhold'
+    },
+    fill: {
+        en: 'Fill',
+        no: 'Fyll'
+    }
+};
+export class ImgCropperToolbarLocalization {
+    get move() {
+        return loc.move[AppLocale.current];
+    }
+    get crop() {
+        return loc.crop[AppLocale.current];
+    }
+    get zoomIn() {
+        return loc.zoomIn[AppLocale.current];
+    }
+    get zoomOut() {
+        return loc.zoomOut[AppLocale.current];
+    }
+    get rotate() {
+        return loc.rotate[AppLocale.current];
+    }
+    get reset() {
+        return loc.reset[AppLocale.current];
+    }
+    get free() {
+        return loc.free[AppLocale.current];
+    }
+    get ratio() {
+        return loc.ratio[AppLocale.current];
+    }
+    get fill() {
+        return loc.fill[AppLocale.current];
+    }
+}

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

@@ -0,0 +1,32 @@
+import type { CropperCanvas, CropperImage, CropperSelection } from 'cropperjs';
+export type Rect = {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+};
+export declare const computeImageScale: (transform: number[]) => number;
+export declare const computeNaturalOutputSize: (params: {
+    displayWidth: number;
+    displayHeight: number;
+    imageScale: number;
+}) => {
+    width: number;
+    height: number;
+};
+export declare const computeLocalAABB: (params: {
+    matrix: number[];
+    width: number;
+    height: number;
+}) => Rect;
+export declare const rectCoversRect: (inner: Rect, outer: Rect, tolerance?: number) => boolean;
+export declare const handleCoverCheck: (params: {
+    event: Event;
+    image: CropperImage;
+    canvas: CropperCanvas;
+}) => void;
+export declare const handleSelectionBoundary: (params: {
+    event: Event;
+    selection: CropperSelection;
+    canvas: CropperCanvas;
+}) => void;

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

@@ -0,0 +1,138 @@
+// 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)
+    };
+    // Strict check (tolerance 0) — any gap triggers clamping
+    if (rectCoversRect(proposedRect, canvasRect, 0)) {
+        return;
+    }
+    event.preventDefault();
+    // If the proposed image is still large enough to cover the canvas, clamp
+    // translation to maintain coverage. Otherwise block the transform entirely.
+    const proposedWidth = proposedRect.right - proposedRect.left;
+    const proposedHeight = proposedRect.bottom - proposedRect.top;
+    const canvasWidth = canvasRect.right - canvasRect.left;
+    const canvasHeight = canvasRect.bottom - canvasRect.top;
+    if (proposedWidth < canvasWidth - 0.5 || proposedHeight < canvasHeight - 0.5) {
+        return;
+    }
+    let clampedTx = matrix[4];
+    let clampedTy = matrix[5];
+    if (proposedRect.left > canvasRect.left) {
+        clampedTx -= proposedRect.left - canvasRect.left;
+    }
+    else if (proposedRect.right < canvasRect.right) {
+        clampedTx += canvasRect.right - proposedRect.right;
+    }
+    if (proposedRect.top > canvasRect.top) {
+        clampedTy -= proposedRect.top - canvasRect.top;
+    }
+    else if (proposedRect.bottom < canvasRect.bottom) {
+        clampedTy += canvasRect.bottom - proposedRect.bottom;
+    }
+    image.$setTransform(matrix[0], matrix[1], matrix[2], matrix[3], clampedTx, clampedTy);
+};
+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);
+    }
+};