@peteai/presentation-editor 0.0.6 → 0.0.8

package/dist/components/editor/layers/types/image/controls/image-rotate-control/index.js

@@ -0,0 +1,4 @@
+import Root from './image-rotate-control.svelte';
+export { Root, 
+//
+Root as ImageRotateControl, };

package/dist/components/editor/layers/types/image/controls/image-scale-control/image-scale-control.svelte

@@ -0,0 +1,154 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from 'tailwind-variants';
+	import type { ImageLayer } from '../../../../../types.js';
+
+	const cornerScaleControlVariants = tv({
+		slots: {
+			base: 'group absolute w-8 h-8 flex items-center justify-center pointer-events-none',
+			handler: 'absolute w-4 h-4 pointer-events-auto',
+			cursor: '',
+		},
+		variants: {
+			origin: {
+				'bottom-right': {
+					base: '-top-4 -left-4',
+					handler: '-translate-x-0.5 -translate-y-0.5 rounded-tl-full',
+					cursor: 'cursor-nwse-resize',
+				},
+				'bottom-left': {
+					base: '-top-4 -right-4',
+					handler: 'translate-x-0.5 -translate-y-0.5 rounded-tr-full',
+					cursor: 'cursor-nesw-resize',
+				},
+				'top-right': {
+					base: '-bottom-4 -left-4',
+					handler: '-translate-x-0.5 translate-y-0.5 rounded-bl-full',
+					cursor: 'cursor-nesw-resize',
+				},
+				'top-left': {
+					base: '-bottom-4 -right-4',
+					handler: 'translate-x-0.5 translate-y-0.5 rounded-br-full',
+					cursor: 'cursor-nwse-resize',
+				},
+			},
+		},
+	});
+
+	type Variants = VariantProps<typeof cornerScaleControlVariants>;
+
+	interface Props extends Omit<Variants, 'origin'>, Required<Pick<Variants, 'origin'>> {
+		layer: ImageLayer;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from '../../../../../../../utils.js';
+	import {
+		getImageLayerBboxRelativeToImageCenter,
+		calculateNewPosition,
+		degToRad,
+		rotatePoint,
+	} from '../../../../utils.js';
+	import { getEditorContext } from '../../../../../editor.svelte.js';
+
+	let { origin, layer }: Props = $props();
+
+	const type = `${origin}-origin-scale`;
+
+	const editor = getEditorContext();
+
+	let initial: {
+		clientX: number;
+		clientY: number;
+		layer: ImageLayer;
+		minScaleFactor: number;
+	} | null = null;
+
+	const { base, handler, cursor } = cornerScaleControlVariants({ origin });
+
+	const onMouseDown = (e: MouseEvent) => {
+		if (e.button !== 0) return;
+		e.preventDefault();
+		e.stopPropagation();
+		console.log(type, 'mousedown', e);
+
+		const { minX, minY, maxX, maxY } = getImageLayerBboxRelativeToImageCenter(layer);
+
+		const minScaleFactor = Math.max(
+			~origin.indexOf('left') ? 0.5 + maxX / layer.image.width : 0.5 - minX / layer.image.width,
+			~origin.indexOf('top') ? 0.5 + maxY / layer.image.height : 0.5 - minY / layer.image.height,
+		);
+
+		initial = {
+			clientX: e.clientX,
+			clientY: e.clientY,
+			layer: $state.snapshot(layer),
+			minScaleFactor,
+		};
+		addEventListener('mousemove', onMouseMove);
+		addEventListener('mouseup', onMouseUp);
+	};
+
+	const onMouseUp = (e: MouseEvent) => {
+		console.log(type, 'mouseup', e);
+		removeEventListener('mousemove', onMouseMove);
+		removeEventListener('mouseup', onMouseUp);
+		initial = null;
+	};
+
+	const onMouseMove = (e: MouseEvent) => {
+		if (!initial) return;
+
+		const { x, y, width, height, scale, rotate, image, imageRotate, offsetX, offsetY } =
+			initial.layer;
+		const imageX = x + offsetX * scale;
+		const imageY = y + offsetY * scale;
+		const rad = degToRad(rotate + imageRotate);
+		const xDiff = (e.clientX - initial.clientX) / editor.zoom;
+		const yDiff = (e.clientY - initial.clientY) / editor.zoom;
+		const adjustedXDiff = xDiff * Math.cos(rad) + yDiff * Math.sin(rad);
+		const adjustedYDiff = -xDiff * Math.sin(rad) + yDiff * Math.cos(rad);
+
+		// Define the new x2 and y2 coordinates based on the variant (corner being dragged)
+		const x2 = imageX + image.width * scale + adjustedXDiff * (~origin.indexOf('left') ? 1 : -1);
+		const y2 = imageY + image.height * scale + adjustedYDiff * (~origin.indexOf('top') ? 1 : -1);
+
+		// Calculate the slope of the rectangle
+		const slope = image.height / image.width;
+
+		// Calculate the x-coordinate of the intersection point
+		const xIntersect = (y2 + x2 / slope - imageY + imageX * slope) / (slope + 1 / slope);
+
+		let scaleFactor = Math.max(
+			(xIntersect - imageX) / (image.width * scale),
+			initial.minScaleFactor,
+		);
+
+		if (scaleFactor > 0) {
+			const { newX, newY } = calculateNewPosition(
+				origin,
+				{ ...image, x: offsetX, y: offsetY, rotate: imageRotate, scale: 1 },
+				image.width * scaleFactor,
+				image.height * scaleFactor,
+			);
+
+			const newProps = {
+				scale: scale * scaleFactor,
+				width: width / scaleFactor,
+				height: height / scaleFactor,
+				offsetX: newX / scaleFactor,
+				offsetY: newY / scaleFactor,
+			};
+			Object.assign(layer, newProps);
+		}
+	};
+</script>
+
+<div class={base()}>
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div class={cn(handler(), cursor())} onmousedown={onMouseDown}></div>
+	<div
+		class="group-hover:bg-primary group-active:bg-primary h-3 w-3 rounded-full bg-white transition-colors"
+		style:box-shadow="0 0 4px 1px rgba(57,76,96,.15), 0 0 0 1px rgba(43,59,74,.3)"
+	></div>
+</div>

package/dist/components/editor/layers/types/image/controls/image-scale-control/image-scale-control.svelte.d.ts

@@ -0,0 +1,91 @@
+import { type VariantProps } from 'tailwind-variants';
+import type { ImageLayer } from '../../../../../types.js';
+declare const cornerScaleControlVariants: import("tailwind-variants").TVReturnType<{
+    origin: {
+        'bottom-right': {
+            base: string;
+            handler: string;
+            cursor: string;
+        };
+        'bottom-left': {
+            base: string;
+            handler: string;
+            cursor: string;
+        };
+        'top-right': {
+            base: string;
+            handler: string;
+            cursor: string;
+        };
+        'top-left': {
+            base: string;
+            handler: string;
+            cursor: string;
+        };
+    };
+}, {
+    base: string;
+    handler: string;
+    cursor: string;
+}, undefined, {
+    origin: {
+        'bottom-right': {
+            base: string;
+            handler: string;
+            cursor: string;
+        };
+        'bottom-left': {
+            base: string;
+            handler: string;
+            cursor: string;
+        };
+        'top-right': {
+            base: string;
+            handler: string;
+            cursor: string;
+        };
+        'top-left': {
+            base: string;
+            handler: string;
+            cursor: string;
+        };
+    };
+}, {
+    base: string;
+    handler: string;
+    cursor: string;
+}, import("tailwind-variants").TVReturnType<{
+    origin: {
+        'bottom-right': {
+            base: string;
+            handler: string;
+            cursor: string;
+        };
+        'bottom-left': {
+            base: string;
+            handler: string;
+            cursor: string;
+        };
+        'top-right': {
+            base: string;
+            handler: string;
+            cursor: string;
+        };
+        'top-left': {
+            base: string;
+            handler: string;
+            cursor: string;
+        };
+    };
+}, {
+    base: string;
+    handler: string;
+    cursor: string;
+}, undefined, unknown, unknown, undefined>>;
+type Variants = VariantProps<typeof cornerScaleControlVariants>;
+interface Props extends Omit<Variants, 'origin'>, Required<Pick<Variants, 'origin'>> {
+    layer: ImageLayer;
+}
+declare const ImageScaleControl: import("svelte").Component<Props, {}, "">;
+type ImageScaleControl = ReturnType<typeof ImageScaleControl>;
+export default ImageScaleControl;

package/dist/components/editor/layers/types/image/controls/image-scale-control/index.d.ts

@@ -0,0 +1,2 @@
+import Root from './image-scale-control.svelte';
+export { Root, Root as ImageScaleControl, };

package/dist/components/editor/layers/types/image/controls/image-scale-control/index.js

@@ -0,0 +1,4 @@
+import Root from './image-scale-control.svelte';
+export { Root, 
+//
+Root as ImageScaleControl, };

package/dist/components/{presentation-editor → editor}/layers/types/image/image-layer-active.svelte

@@ -3,7 +3,7 @@
 	import { SideResizeControl } from '../../controls/side-resize-control/index.js';
 	import { CornerScaleControl } from '../../controls/corner-scale-control/index.js';
 	import { RotateControl } from '../../controls/rotate-control/index.js';
-	import { getPresentationEditorContext } from '../../../presentation-editor.svelte.js';
+	import { getEditorContext } from '../../../editor.svelte.js';
 
 	interface Props {
 		layer: ImageLayer;
@@ -11,17 +11,14 @@
 
 	let { layer = $bindable() }: Props = $props();
 
-	const editor = getPresentationEditorContext();
-
-	let scale = $derived(layer.scale || 1);
-	let rotate = $derived(layer.rotate || 0);
+	const editor = getEditorContext();
 </script>
 
 <div
 	class="pointer-events-none absolute left-0 top-0 h-full w-full"
-	style:width={`${layer.width * scale * editor.zoom}px`}
-	style:height={`${layer.height * scale * editor.zoom}px`}
-	style:transform={`translate(${layer.x * editor.zoom}px, ${layer.y * editor.zoom}px) rotate(${rotate}deg)`}
+	style:width={`${layer.width * layer.scale * editor.zoom}px`}
+	style:height={`${layer.height * layer.scale * editor.zoom}px`}
+	style:transform={`translate(${layer.x * editor.zoom}px, ${layer.y * editor.zoom}px) rotate(${layer.rotate}deg)`}
 >
 	<div class="h-full w-full outline-none transition-opacity duration-300">
 		<div class="flex h-full w-full items-center justify-center">
@@ -29,11 +26,11 @@
 			<SideResizeControl origin="right" bind:layer />
 			<SideResizeControl origin="top" bind:layer />
 			<SideResizeControl origin="bottom" bind:layer />
-			<CornerScaleControl origin="bottom-right" bind:layer />
-			<CornerScaleControl origin="bottom-left" bind:layer />
-			<CornerScaleControl origin="top-right" bind:layer />
-			<CornerScaleControl origin="top-left" bind:layer />
-			<RotateControl bind:layer />
+			<CornerScaleControl origin="bottom-right" />
+			<CornerScaleControl origin="bottom-left" />
+			<CornerScaleControl origin="top-right" />
+			<CornerScaleControl origin="top-left" />
+			<RotateControl />
 		</div>
 	</div>
 </div>

package/dist/components/{presentation-editor → editor}/layers/types/image/image-layer-content.svelte

@@ -2,6 +2,7 @@
 	import type { ImageLayer } from '../../../types.js';
 	import ColorIndicatorGradientDef from '../../../color-indicator/color-indicator-gradient-def.svelte';
 	import { generateId } from '../../../../../utils.js';
+	import { onMount } from 'svelte';
 
 	interface Props {
 		layer: ImageLayer;
@@ -11,10 +12,12 @@
 	let { layer, thumbScale = 1 }: Props = $props();
 
 	let imageLoaded = $state(false);
-	const image = new Image();
-	image.crossOrigin = 'anonymous';
-	image.src = layer.image.src;
-	image.onload = () => (imageLoaded = true);
+	onMount(() => {
+		const image = new Image();
+		image.crossOrigin = 'anonymous';
+		image.src = layer.image.src;
+		image.onload = () => (imageLoaded = true);
+	});
 
 	const layerBorderId = generateId();
 	const gradientId = generateId();
@@ -22,14 +25,14 @@
 	let borderColor = $derived(layer.borderColor || '#000000');
 	let isGradient = $derived(~borderColor.indexOf(':'));
 
-	let scale = $derived(layer.scale || 1);
-	let width = $derived(layer.width * scale * thumbScale);
-	let height = $derived(layer.height * scale * thumbScale);
+	let scale = $derived(layer.scale * thumbScale);
+	let width = $derived(layer.width * scale);
+	let height = $derived(layer.height * scale);
 	let flipTransform = $derived(
 		layer.flipX || layer.flipY ? `scale(${layer.flipX ? -1 : 1}, ${layer.flipY ? -1 : 1})` : null,
 	);
 
-	let cornderRadius = $derived((layer.cornerRadius || 0) * thumbScale);
+	let cornderRadius = $derived(Math.min(layer.cornerRadius * thumbScale, width / 2, height / 2));
 
 	const bezier = 0.447715;
 	let roundedClipPath = $derived(
@@ -46,9 +49,9 @@
 	<div class="h-full w-full transition-transform" style:transform={flipTransform}>
 		<div
 			class="relative"
-			style:width="{layer.image.width * scale * thumbScale}px"
-			style:height="{layer.image.height * scale * thumbScale}px"
-			style:transform={`translate(${-(layer.offsetX || 0) * scale * thumbScale}px, ${-(layer.offsetY || 0) * scale * thumbScale}px)`}
+			style:width="{layer.image.width * scale}px"
+			style:height="{layer.image.height * scale}px"
+			style:transform={`translate(${layer.offsetX * scale}px, ${layer.offsetY * scale}px) rotate(${layer.imageRotate}deg)`}
 		>
 			{#if imageLoaded}
 				<img
@@ -82,7 +85,7 @@
 						<ColorIndicatorGradientDef id={gradientId} color={borderColor} {width} {height} />
 					{/if}
 					<clipPath id={layerBorderId}>
-						<path d={path}></path>
+						<path d={roundedClipPath || path}></path>
 					</clipPath>
 				</defs>
 				<path

package/dist/components/editor/layers/types/image/image-layer-crop.svelte

@@ -0,0 +1,182 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import type { ImageLayer } from '../../../types.js';
+	import { getEditorContext } from '../../../editor.svelte.js';
+	import ImageLayerContent from './image-layer-content.svelte';
+	import { ImageScaleControl } from './controls/image-scale-control/index.js';
+	import { ImageRotateControl } from './controls/image-rotate-control/index.js';
+	import { getImageLayerBboxRelativeToImageCenter, degToRad, rotatePoint } from '../../utils.js';
+
+	interface Props {
+		layer: ImageLayer;
+		viewportRef: HTMLDivElement;
+		wrapperRef: HTMLDivElement;
+		pageRef: HTMLDivElement;
+	}
+
+	const { layer, viewportRef, wrapperRef, pageRef }: Props = $props();
+
+	const editor = getEditorContext();
+
+	let overlayRef: HTMLDivElement | null = $state(null);
+
+	let imageTransform = $derived.by(() => {
+		const rad = degToRad(layer.rotate);
+
+		const layerCenter = {
+			x: layer.x + (layer.width * layer.scale) / 2,
+			y: layer.y + (layer.height * layer.scale) / 2,
+		};
+
+		const relativeCenter = {
+			x: layer.x + (layer.offsetX + layer.image.width / 2) * layer.scale,
+			y: layer.y + (layer.offsetY + layer.image.height / 2) * layer.scale,
+		};
+
+		const center = rotatePoint(rad, relativeCenter, layerCenter);
+
+		return {
+			x: center.x - (layer.image.width * layer.scale) / 2,
+			y: center.y - (layer.image.height * layer.scale) / 2,
+			width: layer.image.width,
+			height: layer.image.height,
+			rotate: layer.imageRotate + layer.rotate,
+			scale: layer.scale,
+		};
+	});
+
+	const updateOverlay = () => {
+		if (overlayRef) {
+			const viewportRect = viewportRef.getBoundingClientRect();
+			const wrapperRect = wrapperRef.getBoundingClientRect();
+			const pageRect = pageRef.getBoundingClientRect();
+
+			overlayRef.style.left = `${viewportRect.left - viewportRef.scrollLeft - pageRect.left}px`;
+			overlayRef.style.top = `${viewportRect.top - viewportRef.scrollTop - pageRect.top}px`;
+			overlayRef.style.width = `${wrapperRect.width > viewportRect.width ? wrapperRect.width : viewportRect.width}px`;
+			overlayRef.style.height = `${wrapperRect.height > viewportRect.height ? wrapperRect.height : viewportRect.height}px`;
+		}
+	};
+
+	$effect(() => {
+		editor.zoom;
+		updateOverlay();
+	});
+
+	onMount(() => {
+		const observer = new ResizeObserver(updateOverlay);
+
+		if (viewportRef) observer.observe(viewportRef);
+
+		return () => observer.disconnect();
+	});
+
+	let initial: {
+		clientX: number;
+		clientY: number;
+		layer: ImageLayer;
+		minImageXDiff: number;
+		minImageYDiff: number;
+		maxImageXDiff: number;
+		maxImageYDiff: number;
+	} | null = null;
+
+	const onMouseDown = (e: MouseEvent) => {
+		e.preventDefault();
+		e.stopPropagation();
+
+		const { minX, minY, maxX, maxY } = getImageLayerBboxRelativeToImageCenter(layer);
+
+		initial = {
+			clientX: e.clientX,
+			clientY: e.clientY,
+			layer: $state.snapshot(layer),
+			minImageXDiff: maxX - layer.image.width / 2,
+			minImageYDiff: maxY - layer.image.height / 2,
+			maxImageXDiff: layer.image.width / 2 + minX,
+			maxImageYDiff: layer.image.height / 2 + minY,
+		};
+		addEventListener('mousemove', onMouseMove);
+		addEventListener('mouseup', onMouseUp);
+	};
+
+	const onMouseUp = (e: MouseEvent) => {
+		removeEventListener('mousemove', onMouseMove);
+		removeEventListener('mouseup', onMouseUp);
+		initial = null;
+	};
+
+	const onMouseMove = (e: MouseEvent) => {
+		if (!initial) return;
+		const { scale, rotate, imageRotate, offsetX, offsetY } = initial.layer;
+
+		const xDiff = (e.clientX - initial.clientX) / scale / editor.zoom;
+		const yDiff = (e.clientY - initial.clientY) / scale / editor.zoom;
+
+		const imageRad = degToRad(rotate + imageRotate);
+
+		const imageXDiff2 = Math.min(
+			Math.max(xDiff * Math.cos(imageRad) + yDiff * Math.sin(imageRad), initial.minImageXDiff),
+			initial.maxImageXDiff,
+		);
+		const imageYDiff2 = Math.min(
+			Math.max(-xDiff * Math.sin(imageRad) + yDiff * Math.cos(imageRad), initial.minImageYDiff),
+			initial.maxImageYDiff,
+		);
+
+		const rad = degToRad(-imageRotate);
+
+		const adjustedXDiff = imageXDiff2 * Math.cos(rad) + imageYDiff2 * Math.sin(rad);
+		const adjustedYDiff = -imageXDiff2 * Math.sin(rad) + imageYDiff2 * Math.cos(rad);
+
+		Object.assign(layer, {
+			offsetX: offsetX + adjustedXDiff,
+			offsetY: offsetY + adjustedYDiff,
+		});
+	};
+</script>
+
+<div class="select-none">
+	<div bind:this={overlayRef} class="absolute bg-slate-500/50"></div>
+	<div
+		class="absolute opacity-50"
+		style:width={`${layer.image.width * layer.scale * editor.zoom}px`}
+		style:height={`${layer.image.height * layer.scale * editor.zoom}px`}
+		style:transform={`translate(${imageTransform.x * editor.zoom}px, ${imageTransform.y * editor.zoom}px) rotate(${imageTransform.rotate}deg)`}
+	>
+		<img class="pointer-events-none h-full w-full" src={layer.image.src} alt="" />
+	</div>
+	<div
+		class="absolute overflow-hidden"
+		style:width={`${layer.width * layer.scale * editor.zoom}px`}
+		style:height={`${layer.height * layer.scale * editor.zoom}px`}
+		style:transform={`translate(${layer.x * editor.zoom}px, ${layer.y * editor.zoom}px) rotate(${layer.rotate}deg)`}
+	>
+		<ImageLayerContent {layer} thumbScale={editor.zoom} />
+	</div>
+	<div class="pointer-events-auto">
+		<div
+			class="shadow-inner-1 outline-primary/50 pointer-events-none absolute outline outline-2"
+			style:width={`${layer.image.width * layer.scale * editor.zoom}px`}
+			style:height={`${layer.image.height * layer.scale * editor.zoom}px`}
+			style:transform={`translate(${imageTransform.x * editor.zoom}px, ${imageTransform.y * editor.zoom}px) rotate(${imageTransform.rotate}deg)`}
+		>
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<div
+				class="pointer-events-auto absolute -inset-3 cursor-move"
+				onmousedown={onMouseDown}
+			></div>
+			<ImageScaleControl origin="bottom-right" {layer} />
+			<ImageScaleControl origin="bottom-left" {layer} />
+			<ImageScaleControl origin="top-right" {layer} />
+			<ImageScaleControl origin="top-left" {layer} />
+			<ImageRotateControl {pageRef} {layer} />
+		</div>
+		<div
+			class="outline-primary pointer-events-none absolute outline outline-2"
+			style:width={`${layer.width * layer.scale * editor.zoom}px`}
+			style:height={`${layer.height * layer.scale * editor.zoom}px`}
+			style:transform={`translate(${layer.x * editor.zoom}px, ${layer.y * editor.zoom}px) rotate(${layer.rotate}deg)`}
+		></div>
+	</div>
+</div>

package/dist/components/editor/layers/types/image/image-layer-crop.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { ImageLayer } from '../../../types.js';
+interface Props {
+    layer: ImageLayer;
+    viewportRef: HTMLDivElement;
+    wrapperRef: HTMLDivElement;
+    pageRef: HTMLDivElement;
+}
+declare const ImageLayerCrop: import("svelte").Component<Props, {}, "">;
+type ImageLayerCrop = ReturnType<typeof ImageLayerCrop>;
+export default ImageLayerCrop;

package/dist/components/{presentation-editor → editor}/layers/types/image/image-layer.svelte

@@ -1,12 +1,8 @@
 <script lang="ts">
 	import type { Image, ImageLayer } from '../../../types.js';
-	import { getPresentationEditorContext } from '../../../presentation-editor.svelte.js';
+	import { getEditorContext } from '../../../editor.svelte.js';
 	import ImageLayerContent from './image-layer-content.svelte';
-	import {
-		calculateBoundingBox,
-		calculateImageCover,
-		calculateLayerTransform,
-	} from '../../utils.js';
+	import { calculateBoundingBox, calculateImageCover } from '../../utils.js';
 
 	interface Props {
 		layer: ImageLayer;
@@ -14,20 +10,21 @@
 
 	let { layer = $bindable() }: Props = $props();
 
-	const editor = getPresentationEditorContext();
+	const editor = getEditorContext();
+
+	let isCropping = $derived(editor.imageCropLayer?.id === layer.id);
 
 	let layerSubstitute: ImageLayer | null = $state(null);
 
 	let ref: HTMLDivElement;
 
 	const buildImageDropChanges = (image: Image) => {
-		const scale = layer.scale || 1;
-
 		return {
 			image,
+			imageRotate: 0,
 			...calculateImageCover(image, {
-				width: layer.width * scale,
-				height: layer.height * scale,
+				width: layer.width * layer.scale,
+				height: layer.height * layer.scale,
 			}),
 		};
 	};
@@ -79,14 +76,14 @@
 				);
 				Object.assign(layer, redo);
 				editor.historyPush({
-					type: 'layer',
-					slideId: editor.activeSlide.id,
+					type: 'layerUpdate',
+					pageId: editor.activePage.id,
 					layer: { id: layer.id, type: layer.type },
 					undo,
 					redo,
 				});
 			} else {
-				const bbox = calculateBoundingBox(calculateLayerTransform(layer));
+				const bbox = calculateBoundingBox(layer);
 				const rect = ref.getBoundingClientRect();
 				const x = (e.clientX - rect.left - dragged.offsetX) / editor.zoom + bbox.x;
 				const y = (e.clientY - rect.top - dragged.offsetY) / editor.zoom + bbox.y;
@@ -95,12 +92,25 @@
 		}
 		layerSubstitute = null;
 	};
+
+	const onDoubleClick = () => {
+		if (editor.activeLayers.length > 1) return;
+		editor.imageCropLayer = $state.snapshot(
+			editor.activeGroupAndChild
+				? (editor.getAbsoluteGroupLayers(editor.activeGroupAndChild.groupLayer, [
+						layer,
+					])[0] as ImageLayer)
+				: layer,
+		);
+	};
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	bind:this={ref}
 	class="h-full w-full"
+	style:opacity={isCropping ? 0 : null}
+	ondblclick={onDoubleClick}
 	ondragenter={onDragEnter}
 	ondragover={onDragOver}
 	ondragleave={onDragLeave}

package/dist/components/editor/layers/types/image/index.d.ts

@@ -0,0 +1,4 @@
+import Root from './image-layer.svelte';
+import ImageLayerContent from './image-layer-content.svelte';
+import ImageLayerCrop from './image-layer-crop.svelte';
+export { Root, Root as ImageLayer, ImageLayerContent, ImageLayerCrop };

package/dist/components/editor/layers/types/image/index.js

@@ -0,0 +1,4 @@
+import Root from './image-layer.svelte';
+import ImageLayerContent from './image-layer-content.svelte';
+import ImageLayerCrop from './image-layer-crop.svelte';
+export { Root, Root as ImageLayer, ImageLayerContent, ImageLayerCrop };