compote-ui 0.18.0 → 0.19.1

package/dist/components/image-cropper/image-cropper.svelte

@@ -74,22 +74,23 @@
 
 	<ImageCropper.RootProvider value={imageCropper}>
 		<ImageCropper.Viewport
-			class="relative overflow-hidden rounded-lg bg-surface-2"
+			class="relative overflow-hidden rounded-lg bg-surface-2 max-h-[60vh]"
 			style={imageAspectRatio ? `aspect-ratio: ${imageAspectRatio}` : 'aspect-ratio: 1'}
 		>
 			<ImageCropper.Image
 				{src}
 				{alt}
 				crossorigin="anonymous"
-				class="pointer-events-none absolute inset-0 h-full w-full object-fill select-none"
+				class="pointer-events-none absolute inset-0 h-full w-full object-contain select-none"
 			/>
 			<ImageCropper.Selection
 				class="cursor-move border-2 border-white/50 [box-shadow:0_0_0_9999px_rgb(0_0_0/0.5)] outline-none focus-visible:border-primary data-dragging:cursor-grabbing data-dragging:border-white/80"
 			>
 				{#each ImageCropper.handles as position (position)}
+					{@const isCorner = ['top-left', 'top-right', 'bottom-left', 'bottom-right'].includes(position)}
 					<ImageCropper.Handle
 						{position}
-						class="absolute flex touch-none items-center justify-center
+						class="group absolute flex size-5 touch-none items-center justify-center
               data-[position=bottom]:cursor-ns-resize
               data-[position=bottom-left]:cursor-nesw-resize
               data-[position=bottom-right]:cursor-nwse-resize
@@ -99,7 +100,20 @@
               data-[position=top-left]:cursor-nwse-resize
               data-[position=top-right]:cursor-nesw-resize"
 					>
-						<div class="size-2 rounded-full bg-white shadow-md"></div>
+						{#if isCorner}
+							<div
+								class="size-2 shadow-sm transition-transform group-hover:scale-110
+                  group-data-[position=top-left]:border-l-2 group-data-[position=top-left]:border-t-2
+                  group-data-[position=top-right]:border-r-2 group-data-[position=top-right]:border-t-2
+                  group-data-[position=bottom-right]:border-r-2 group-data-[position=bottom-right]:border-b-2
+                  group-data-[position=bottom-left]:border-l-2 group-data-[position=bottom-left]:border-b-2
+                  border-white"
+							></div>
+						{:else}
+							<div
+								class="size-1.5 rounded-full bg-white opacity-0 shadow-sm transition-opacity group-hover:opacity-100"
+							></div>
+						{/if}
 					</ImageCropper.Handle>
 				{/each}
 				<ImageCropper.Grid

package/dist/utils/image-processing.d.ts

@@ -7,6 +7,10 @@ export interface ProcessImageOptions {
     maxHeight?: number;
     quality?: number;
     format?: 'image/webp' | 'image/jpeg' | 'image/png';
+    /** Trim near-white/near-transparent edges before resizing (default: false) */
+    trim?: boolean;
+    /** 0–255 tolerance for what counts as "white" (default: 10) */
+    trimThreshold?: number;
 }
 export interface CropRegion {
     x: number;

package/dist/utils/image-processing.js

@@ -6,7 +6,9 @@ const defaults = {
     maxWidth: 1000,
     maxHeight: 1000,
     quality: 0.85,
-    format: 'image/webp'
+    format: 'image/webp',
+    trim: false,
+    trimThreshold: 10
 };
 function canvasToBlob(canvas, format, quality) {
     return new Promise((resolve, reject) => {
@@ -18,6 +20,80 @@ function canvasToBlob(canvas, format, quality) {
         }, format, quality);
     });
 }
+/** Returns the bounding box of non-white/non-transparent pixels */
+function getTrimBounds(ctx, width, height, threshold) {
+    const { data } = ctx.getImageData(0, 0, width, height);
+    function isBackground(i) {
+        const a = data[i + 3];
+        if (a < threshold)
+            return true; // transparent
+        const r = data[i];
+        const g = data[i + 1];
+        const b = data[i + 2];
+        return r >= 255 - threshold && g >= 255 - threshold && b >= 255 - threshold;
+    }
+    let top = 0;
+    outer: for (let y = 0; y < height; y++) {
+        for (let x = 0; x < width; x++) {
+            if (!isBackground((y * width + x) * 4)) {
+                top = y;
+                break outer;
+            }
+        }
+    }
+    let bottom = height - 1;
+    outer: for (let y = height - 1; y >= 0; y--) {
+        for (let x = 0; x < width; x++) {
+            if (!isBackground((y * width + x) * 4)) {
+                bottom = y;
+                break outer;
+            }
+        }
+    }
+    let left = 0;
+    outer: for (let x = 0; x < width; x++) {
+        for (let y = top; y <= bottom; y++) {
+            if (!isBackground((y * width + x) * 4)) {
+                left = x;
+                break outer;
+            }
+        }
+    }
+    let right = width - 1;
+    outer: for (let x = width - 1; x >= 0; x--) {
+        for (let y = top; y <= bottom; y++) {
+            if (!isBackground((y * width + x) * 4)) {
+                right = x;
+                break outer;
+            }
+        }
+    }
+    return { x: left, y: top, width: right - left + 1, height: bottom - top + 1 };
+}
+function applyTrim(sourceCanvas, threshold) {
+    const ctx = sourceCanvas.getContext('2d');
+    const { x, y, width, height } = getTrimBounds(ctx, sourceCanvas.width, sourceCanvas.height, threshold);
+    const trimmed = document.createElement('canvas');
+    trimmed.width = width;
+    trimmed.height = height;
+    trimmed.getContext('2d').drawImage(sourceCanvas, x, y, width, height, 0, 0, width, height);
+    return trimmed;
+}
+function scaleCanvas(src, maxWidth, maxHeight) {
+    let { width, height } = src;
+    if (width > maxWidth || height > maxHeight) {
+        const ratio = Math.min(maxWidth / width, maxHeight / height);
+        width = Math.round(width * ratio);
+        height = Math.round(height * ratio);
+    }
+    if (width === src.width && height === src.height)
+        return src;
+    const scaled = document.createElement('canvas');
+    scaled.width = width;
+    scaled.height = height;
+    scaled.getContext('2d').drawImage(src, 0, 0, width, height);
+    return scaled;
+}
 /** Load an image element from a src URL (data URL, blob URL, or regular URL) */
 export function loadImage(src) {
     return new Promise((resolve, reject) => {
@@ -42,35 +118,27 @@ export function fileToDataUrl(file) {
  * Use this instead of getCroppedImage() from Ark UI which outputs at CSS/display resolution.
  */
 export async function cropImage(src, crop, opts) {
-    const { maxWidth, maxHeight, quality, format } = { ...defaults, ...opts };
+    const { maxWidth, maxHeight, quality, format, trim, trimThreshold } = { ...defaults, ...opts };
     const img = await loadImage(src);
-    let { width, height } = crop;
-    if (width > maxWidth || height > maxHeight) {
-        const ratio = Math.min(maxWidth / width, maxHeight / height);
-        width = Math.round(width * ratio);
-        height = Math.round(height * ratio);
-    }
-    const canvas = document.createElement('canvas');
-    canvas.width = width;
-    canvas.height = height;
-    const ctx = canvas.getContext('2d');
-    ctx.drawImage(img, crop.x, crop.y, crop.width, crop.height, 0, 0, width, height);
+    let canvas = document.createElement('canvas');
+    canvas.width = crop.width;
+    canvas.height = crop.height;
+    canvas.getContext('2d').drawImage(img, crop.x, crop.y, crop.width, crop.height, 0, 0, crop.width, crop.height);
+    if (trim)
+        canvas = applyTrim(canvas, trimThreshold);
+    canvas = scaleCanvas(canvas, maxWidth, maxHeight);
     return canvasToBlob(canvas, format, quality);
 }
 /** Resize and convert an image without cropping, returns a Blob */
 export async function processImage(src, opts) {
-    const { maxWidth, maxHeight, quality, format } = { ...defaults, ...opts };
+    const { maxWidth, maxHeight, quality, format, trim, trimThreshold } = { ...defaults, ...opts };
     const img = await loadImage(src);
-    let { width, height } = img;
-    if (width > maxWidth || height > maxHeight) {
-        const ratio = Math.min(maxWidth / width, maxHeight / height);
-        width = Math.round(width * ratio);
-        height = Math.round(height * ratio);
-    }
-    const canvas = document.createElement('canvas');
-    canvas.width = width;
-    canvas.height = height;
-    const ctx = canvas.getContext('2d');
-    ctx.drawImage(img, 0, 0, width, height);
+    let canvas = document.createElement('canvas');
+    canvas.width = img.naturalWidth;
+    canvas.height = img.naturalHeight;
+    canvas.getContext('2d').drawImage(img, 0, 0);
+    if (trim)
+        canvas = applyTrim(canvas, trimThreshold);
+    canvas = scaleCanvas(canvas, maxWidth, maxHeight);
     return canvasToBlob(canvas, format, quality);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.18.0",
+	"version": "0.19.1",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev",