@peteai/presentation-editor 0.0.7 → 0.0.9

package/dist/components/editor/active-layers.svelte

@@ -10,12 +10,19 @@
 	import { GroupResizeControl } from './layers/controls/group-resize-control/index.js';
 	import { CornerScaleControl } from './layers/controls/corner-scale-control/index.js';
 	import { RotateControl } from './layers/controls/rotate-control/index.js';
-	import { TextLayerEdit } from './layers/index.js';
-	import type { GroupLayer, Layer, TextLayer } from './types.js';
+	import { ImageLayerCrop, TextLayerEdit } from './layers/index.js';
+	import type { GroupLayer, ImageLayer, Layer, TextLayer } from './types.js';
+
+	interface Props {
+		viewportRef: HTMLDivElement;
+		wrapperRef: HTMLDivElement;
+		pageRef: HTMLDivElement;
+	}
+	const { viewportRef, wrapperRef, pageRef }: Props = $props();
 
 	const editor = getEditorContext();
 
-	let textLayerEditing: { layer: TextLayer; groupLayer?: GroupLayer } | undefined = $derived.by(
+	let textLayerEditData: { layer: TextLayer; groupLayer?: GroupLayer } | undefined = $derived.by(
 		() => {
 			if (editor.activeAction?.type === 'edit') {
 				if (editor.activeSelection.type === 'root-layers') {
@@ -37,6 +44,12 @@
 		},
 	);
 
+	let imageLayerCropData: { layer: ImageLayer } | undefined = $derived.by(() => {
+		if (editor.imageCropLayer) {
+			return { layer: editor.imageCropLayer };
+		}
+	});
+
 	const group = $derived.by(() => {
 		if (editor.activeSelection.type === 'background') {
 			return {
@@ -119,11 +132,13 @@
 	};
 </script>
 
-{#if textLayerEditing}
-	<TextLayerEdit {...textLayerEditing} />
+{#if textLayerEditData}
+	<TextLayerEdit {...textLayerEditData} />
 {/if}
 
-{#if group}
+{#if imageLayerCropData}
+	<ImageLayerCrop {...imageLayerCropData} {viewportRef} {wrapperRef} {pageRef} />
+{:else if group}
 	<div
 		class="pointer-events-none absolute left-0 top-0 h-full w-full"
 		style:width={`${group.bbox.width * group.bbox.scale * editor.zoom + group.padding * 2}px`}
@@ -132,14 +147,14 @@
 	>
 		{#if !group.items.length}
 			<div
-				class="border-primary absolute -inset-px border-2"
+				class="absolute -inset-px border-2 border-primary"
 				style:box-shadow="0 0 0 1px hsla(0, 0%, 100%, .07), inset 0 0 0 1px hsla(0, 0%, 100%, .07)"
 			></div>
 		{:else}
 			<div class="group-border absolute -inset-px"></div>
 			{#each group.items as item}
 				<div
-					class="border-primary absolute -left-px -top-px border-2"
+					class="absolute -left-px -top-px border-2 border-primary"
 					style:box-shadow="0 0 0 1px hsla(0, 0%, 100%, .07), inset 0 0 0 1px hsla(0, 0%, 100%, .07)"
 					style:width={`${item.width * item.scale * editor.zoom + 2}px`}
 					style:height={`${item.height * item.scale * editor.zoom + 2}px`}
@@ -179,7 +194,7 @@
 					<CornerScaleControl origin="bottom-left" />
 					<CornerScaleControl origin="top-right" />
 					<CornerScaleControl origin="top-left" />
-					<RotateControl />
+					<RotateControl {pageRef} />
 				</div>
 			</div>
 		{/if}

package/dist/components/editor/active-layers.svelte.d.ts

@@ -1,3 +1,8 @@
-declare const ActiveLayers: import("svelte").Component<Record<string, never>, {}, "">;
+interface Props {
+    viewportRef: HTMLDivElement;
+    wrapperRef: HTMLDivElement;
+    pageRef: HTMLDivElement;
+}
+declare const ActiveLayers: import("svelte").Component<Props, {}, "">;
 type ActiveLayers = ReturnType<typeof ActiveLayers>;
 export default ActiveLayers;

package/dist/components/editor/editor.svelte

@@ -118,24 +118,8 @@
 		}
 	};
 
-	const onResize = () => {
-		tick().then(() => {
-			if (editor.zoomSnapping === 'fit') {
-				fitToScreen();
-			} else if (editor.zoomSnapping === 'fill') {
-				fillScreen();
-			}
-		});
-	};
-
-	$effect(() => {
-		editor.activeSidebarPopup;
-		editor.activeSidebarTab;
-		onResize();
-	});
-
 	const onDragOver = (e: DragEvent) => {
-		// console.log('dragover windown', e);
+		// console.log('dragover editor', e);
 		e.preventDefault();
 		if (e.dataTransfer?.items.length) {
 			editor.fileDragged = true;
@@ -201,10 +185,24 @@
 		}
 	};
 
+	const onResize = () => {
+		if (editor.zoomSnapping === 'fit') {
+			tick().then(fitToScreen);
+		} else if (editor.zoomSnapping === 'fill') {
+			tick().then(fillScreen);
+		}
+	};
+
 	onMount(() => {
 		tick().then(() => {
 			fitToScreen();
 		});
+
+		const observer = new ResizeObserver(onResize);
+
+		if (viewportRef) observer.observe(viewportRef);
+
+		return () => observer.disconnect();
 	});
 
 	onDestroy(() => {

package/dist/components/editor/editor.svelte.js

@@ -42,6 +42,7 @@ export class Editor {
     onUpdate;
     activeSidebarTab = $state(null);
     activeSidebarPopup = $state(null);
+    imageCropLayer = $state(null);
     toggleActiveSidebarTab(tab) {
         this.activeSidebarTab = !this.activeSidebarPopup && this.activeSidebarTab === tab ? null : tab;
         if (this.activeSidebarTab) {
@@ -360,6 +361,7 @@ export class Editor {
             rotate: 0,
             opacity: 1,
             scale: 1,
+            imageRotate: 0,
             offsetX: 0,
             offsetY: 0,
             cornerRadius: 0,
@@ -458,7 +460,7 @@ export class Editor {
         tryToDuplicate();
     }
     getAbsoluteGroupLayers(groupLayer, children) {
-        const theta = degToRad(groupLayer.rotate);
+        const rad = degToRad(groupLayer.rotate);
         const groupCenter = {
             x: groupLayer.x + (groupLayer.width * groupLayer.scale) / 2,
             y: groupLayer.y + (groupLayer.height * groupLayer.scale) / 2,
@@ -468,7 +470,7 @@ export class Editor {
                 x: groupLayer.x + (l.x + (l.width * l.scale) / 2) * groupLayer.scale,
                 y: groupLayer.y + (l.y + (l.height * l.scale) / 2) * groupLayer.scale,
             };
-            const center = rotatePoint(relativeCenter, groupCenter, theta);
+            const center = rotatePoint(rad, relativeCenter, groupCenter);
             return {
                 ...l,
                 x: center.x - (l.width * l.scale * groupLayer.scale) / 2,
@@ -773,14 +775,14 @@ export class Editor {
             return false;
         if (layer.type !== 'image')
             return false;
-        const { width, height, rotate, image, opacity, flipX, flipY, offsetX, offsetY } = layer;
-        const cover = calculateImageCover({ width, height, rotate }, { width: this.width, height: this.height });
+        const { width, height, rotate, image, opacity, flipX, flipY, imageRotate, offsetX, offsetY } = $state.snapshot(layer);
+        const cover = calculateImageCover({ width, height, rotate, imageRotate }, { width: this.width, height: this.height });
         const backgroundImage = {
-            image: { ...image },
+            image,
             scale: cover.scale,
-            offsetX: (offsetX || 0) + cover.offsetX,
-            offsetY: (offsetY || 0) + cover.offsetY,
-            rotate,
+            offsetX: offsetX + cover.offsetX,
+            offsetY: offsetY + cover.offsetY,
+            imageRotate: rotate + imageRotate,
             opacity,
             flipX,
             flipY,

package/dist/components/editor/header.svelte

@@ -12,15 +12,17 @@
 	}
 
 	const { editor }: Props = $props();
+
+	let disabled = $derived(!!editor.imageCropLayer);
 </script>
 
-<div class="bg-background h-12 w-full border-b border-gray-200 px-2">
+<div class="h-12 w-full border-b border-gray-200 bg-background px-2">
 	<div class="flex h-full items-center justify-between">
 		<div class="grid grid-flow-col items-center gap-2">
 			<Button
 				variant="ghost"
 				size="icon-xs"
-				disabled={editor.historyIndex === -1}
+				disabled={editor.historyIndex === -1 || disabled}
 				onclick={() => editor.historyUndo()}
 			>
 				<UndoIcon class="h-6 w-6" />
@@ -28,31 +30,33 @@
 			<Button
 				variant="ghost"
 				size="icon-xs"
-				disabled={editor.historyIndex === editor.historyActions.length - 1}
+				disabled={editor.historyIndex === editor.historyActions.length - 1 || disabled}
 				onclick={() => editor.historyRedo()}
 			>
 				<RedoIcon class="h-6 w-6" />
 			</Button>
-			<div class="grid grid-flow-col items-center gap-2 overflow-x-auto">
-				{#if !editor.activePage.locked}
-					{#if editor.activeSelection.type === 'background'}
-						{#if !editor.activePage.backgroundLocked}
-							<BackgroundLayerButtons />
+			{#if !disabled}
+				<div class="grid grid-flow-col items-center gap-2 overflow-x-auto">
+					{#if !editor.activePage.locked}
+						{#if editor.activeSelection.type === 'background'}
+							{#if !editor.activePage.backgroundLocked}
+								<BackgroundLayerButtons />
+							{/if}
+						{:else if editor.activeLayers.length}
+							<ActiveLayersButtons />
 						{/if}
-					{:else if editor.activeLayers.length}
-						<ActiveLayersButtons />
 					{/if}
-				{/if}
-			</div>
-			<Separator orientation="vertical" />
-			<Button
-				variant="ghost"
-				size="xs"
-				active={editor.activeSidebarPopup === 'position'}
-				onclick={() => editor.toggleActiveSidebarPopup('position')}
-			>
-				Position
-			</Button>
+				</div>
+				<Separator orientation="vertical" />
+				<Button
+					variant="ghost"
+					size="xs"
+					active={editor.activeSidebarPopup === 'position'}
+					onclick={() => editor.toggleActiveSidebarPopup('position')}
+				>
+					Position
+				</Button>
+			{/if}
 		</div>
 	</div>
 </div>

package/dist/components/editor/hotkeys.svelte

@@ -12,6 +12,13 @@
 		)
 			return;
 
+		if (editor.imageCropLayer) {
+			if (e.code === 'Escape') {
+				editor.imageCropLayer = null;
+			}
+			return;
+		}
+
 		if (e.code === 'Escape') {
 			if (editor.activeAction) {
 				editor.activeAction = null;

package/dist/components/editor/layers/active-layer-border.svelte

@@ -18,7 +18,7 @@
 	style:transform={`translate(${layer.x * editor.zoom}px, ${layer.y * editor.zoom}px) rotate(${layer.rotate}deg)`}
 >
 	<div
-		class="border-primary absolute -inset-px border-2"
+		class="absolute -inset-px border-2 border-primary"
 		style:box-shadow="0 0 0 1px hsla(0, 0%, 100%, .07), inset 0 0 0 1px hsla(0, 0%, 100%, .07)"
 	></div>
 </div>

package/dist/components/editor/layers/buttons/border-button/border-button-colors.svelte

@@ -50,7 +50,7 @@
 				{/each}
 			</svg>
 			<span
-				class="bg-background absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full"
+				class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-background"
 				style:width="{width / 2}px"
 				style:height="{height / 2}px"
 			></span>

package/dist/components/editor/layers/buttons/opacity-button/opacity-button.svelte

@@ -86,11 +86,6 @@
 			initial = null;
 		}
 	};
-
-	const onChange = (e: Event) => {
-		const target = e.target as HTMLInputElement;
-		setTransparency(target.value);
-	};
 </script>
 
 <Popover.Root>
@@ -121,7 +116,7 @@
 						inputmode="decimal"
 						placeholder="--"
 						value={trasparency}
-						onchange={onChange}
+						onchange={(e) => setTransparency(e.currentTarget.value)}
 					/>
 				</div>
 			</div>

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

@@ -198,7 +198,7 @@
 	<!-- 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"
+		class="h-3 w-3 rounded-full bg-white transition-colors group-hover:bg-primary group-active:bg-primary"
 		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/controls/group-resize-control/group-resize-control.svelte

@@ -236,13 +236,13 @@
 		};
 		const groupNewCenter = { x: groupNewX + groupNewWidth / 2, y: groupNewY + groupNewHeight / 2 };
 		// calculate rotated points relative to new group center
-		const groupCenterRotated = rotatePoint(groupCenter, groupNewCenter, -groupAngle);
+		const groupCenterRotated = rotatePoint(-groupAngle, groupCenter, groupNewCenter);
 
 		const buildLayerDiffs = async ({ layer, state }: LayerStateWithoutGroup) => {
 			// do calculation with absolute values, but update state with relative values
 			const { width, height, x, y, rotate, scale } = layer;
 			const center = { x: x + (width * scale) / 2, y: y + (height * scale) / 2 };
-			const centerRotated = rotatePoint(center, groupNewCenter, -groupAngle);
+			const centerRotated = rotatePoint(-groupAngle, center, groupNewCenter);
 			const newCenterRotated = {
 				x: groupNewCenter.x + (centerRotated.x - groupCenterRotated.x) * widthScale,
 				y: groupNewCenter.y + (centerRotated.y - groupCenterRotated.y) * heightScale,
@@ -300,7 +300,7 @@
 						: Math.min(Math.max(newCenterRotated.y, minY), maxY);
 			}
 
-			let newCenter = rotatePoint(newCenterRotated, groupNewCenter, degToRad(bbox.rotate));
+			let newCenter = rotatePoint(degToRad(bbox.rotate), newCenterRotated, groupNewCenter);
 
 			if (layer.type === 'image') {
 				const { offsetX, offsetY, image } = layer;
@@ -309,24 +309,24 @@
 				let newOffsetY = offsetY;
 
 				if (newSize.scaled === 'width') {
-					const maxOffsetDiff = Math.min(offsetX, image.width - offsetX - width);
+					const maxOffsetDiff = Math.min(offsetX, image.width + offsetX - width);
 					const maxWidth = (width + Math.max(maxOffsetDiff, 0) * 2) * scale;
 					if (newWidth > maxWidth) {
 						newScale *= newWidth / maxWidth;
-						newOffsetX = offsetX - maxOffsetDiff;
-						newOffsetY += ((layer.image.height / 2 - offsetY) * (newScale - scale)) / newScale;
+						newOffsetX = offsetX + maxOffsetDiff;
+						newOffsetY -= ((layer.image.height / 2 + offsetY) * (newScale - scale)) / newScale;
 					} else {
-						newOffsetX += (width - newWidth / newScale) / 2;
+						newOffsetX += (newWidth / newScale - width) / 2;
 					}
 				} else {
-					const maxOffsetDiff = Math.min(offsetY, image.height - offsetY - height);
+					const maxOffsetDiff = Math.min(offsetY, image.height + offsetY - height);
 					const maxHeight = (height + Math.max(maxOffsetDiff, 0) * 2) * scale;
 					if (newHeight > maxHeight) {
 						newScale *= newHeight / maxHeight;
-						newOffsetY = offsetY - maxOffsetDiff;
-						newOffsetX += ((layer.image.width / 2 - offsetX) * (newScale - scale)) / newScale;
+						newOffsetY = offsetY + maxOffsetDiff;
+						newOffsetX -= ((layer.image.width / 2 + offsetX) * (newScale - scale)) / newScale;
 					} else {
-						newOffsetY += (height - newHeight / newScale) / 2;
+						newOffsetY += (newHeight / newScale - height) / 2;
 					}
 				}
 

package/dist/components/editor/layers/controls/rotate-control/rotate-control.svelte

@@ -4,6 +4,12 @@
 	import { calculateGroupRotatedBoundingBox, type Transform } from '../../utils.js';
 	import type { Layer } from '../../../types.js';
 
+	interface Props {
+		pageRef: HTMLDivElement;
+	}
+
+	const { pageRef }: Props = $props();
+
 	const type = 'rotate';
 
 	const editor = getEditorContext();
@@ -88,16 +94,16 @@
 	const onMouseMove = (e: MouseEvent) => {
 		if (!initial || editor.activeAction?.id !== actionId || !element) return;
 
-		const pageClientRect = element.closest('[data-page-container]')?.getBoundingClientRect();
-		if (!pageClientRect) return;
+		const pageRect = pageRef.getBoundingClientRect();
+		if (!pageRect) return;
 
-		const { x: pageX, y: pageY } = pageClientRect;
+		const { x: pageX, y: pageY } = pageRect;
 
 		const { width, height, x, y, rotate, scale } = initial.bbox;
 
 		// Calculate the center of the layer
-		const clientX = pageX + x * editor.zoom + (width * scale * editor.zoom) / 2;
-		const clientY = pageY + y * editor.zoom + (height * scale * editor.zoom) / 2;
+		const clientX = pageX + (x + (width * scale) / 2) * editor.zoom;
+		const clientY = pageY + (y + (height * scale) / 2) * editor.zoom;
 
 		// Calculate the current angle based on the current mouse position relative to the center of the layer
 		const currentAngle = Math.atan2(
@@ -174,7 +180,7 @@
 			onmousedown={onMouseDown}
 		></div>
 		<div
-			class="group-hover:bg-primary group-active:bg-primary group-hover:text-primary-foreground group-active:text-primary-foreground flex h-6 w-6 items-center justify-center rounded-full bg-white transition-colors"
+			class="flex h-6 w-6 items-center justify-center rounded-full bg-white transition-colors group-hover:bg-primary group-hover:text-primary-foreground group-active:bg-primary group-active:text-primary-foreground"
 			style:box-shadow="0 0 4px 1px rgba(57,76,96,.15), 0 0 0 1px rgba(43,59,74,.3)"
 		>
 			<RotateIcon class="h-4 w-4" />

package/dist/components/editor/layers/controls/rotate-control/rotate-control.svelte.d.ts

@@ -1,3 +1,6 @@
-declare const RotateControl: import("svelte").Component<Record<string, never>, {}, "">;
+interface Props {
+    pageRef: HTMLDivElement;
+}
+declare const RotateControl: import("svelte").Component<Props, {}, "">;
 type RotateControl = ReturnType<typeof RotateControl>;
 export default RotateControl;

package/dist/components/editor/layers/controls/side-resize-control/side-resize-control.svelte

@@ -146,13 +146,13 @@
 		const snapping = 10;
 		if ((origin === 'left' && !flipX) || (origin === 'right' && flipX)) {
 			newWidth = Math.max(newWidth + adjustedXDiff, 10);
-			const maxWidth = layer.image.width - offsetX;
+			const maxWidth = layer.image.width + offsetX;
 			const maxWidthDiff = maxWidth * scale - newWidth;
 			if (Math.abs(maxWidthDiff) < snapping) {
 				newWidth = maxWidth * scale;
 			} else if (maxWidthDiff < 0) {
 				newScale = newWidth / maxWidth;
-				newOffsetY += ((layer.image.height / 2 - offsetY) * (newScale - scale)) / newScale;
+				newOffsetY -= ((layer.image.height / 2 + offsetY) * (newScale - scale)) / newScale;
 			}
 		} else if ((origin === 'top' && !flipY) || (origin === 'bottom' && flipY)) {
 			newHeight = Math.max(newHeight + adjustedYDiff, 10);
@@ -162,31 +162,31 @@
 				newHeight = maxHeight * scale;
 			} else if (maxHeightDiff < 0) {
 				newScale = newHeight / maxHeight;
-				newOffsetX += ((layer.image.width / 2 - offsetX) * (newScale - scale)) / newScale;
+				newOffsetX -= ((layer.image.width / 2 + offsetX) * (newScale - scale)) / newScale;
 			}
 		} else if ((origin === 'right' && !flipX) || (origin === 'left' && flipX)) {
 			const adjustedDiff = Math.min(adjustedXDiff, newWidth - 10);
 			newWidth -= adjustedDiff;
-			newOffsetX += adjustedDiff / scale;
+			newOffsetX -= adjustedDiff / scale;
 			if (Math.abs(newOffsetX * scale) < snapping) {
 				newOffsetX = 0;
-				newWidth = (width + offsetX) * scale;
-			} else if (newOffsetX < 0) {
+				newWidth = (width - offsetX) * scale;
+			} else if (newOffsetX > 0) {
 				newOffsetX = 0;
-				newScale = newWidth / (width + offsetX);
-				newOffsetY += ((layer.image.height / 2 - offsetY) * (newScale - scale)) / newScale;
+				newScale = newWidth / (width - offsetX);
+				newOffsetY -= ((layer.image.height / 2 + offsetY) * (newScale - scale)) / newScale;
 			}
 		} else if ((origin === 'bottom' && !flipY) || (origin === 'top' && flipY)) {
 			const adjustedDiff = Math.min(adjustedYDiff, newHeight - 10);
 			newHeight -= adjustedDiff;
-			newOffsetY += adjustedDiff / scale;
+			newOffsetY -= adjustedDiff / scale;
 			if (Math.abs(newOffsetY * scale) < snapping) {
 				newOffsetY = 0;
-				newHeight = (height + offsetY) * scale;
-			} else if (newOffsetY < 0) {
+				newHeight = (height - offsetY) * scale;
+			} else if (newOffsetY > 0) {
 				newOffsetY = 0;
-				newScale = newHeight / (height + offsetY);
-				newOffsetX += ((layer.image.width / 2 - offsetX) * (newScale - scale)) / newScale;
+				newScale = newHeight / (height - offsetY);
+				newOffsetX -= ((layer.image.width / 2 + offsetX) * (newScale - scale)) / newScale;
 			}
 		}
 

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

@@ -146,7 +146,7 @@
 	<!-- 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-4 w-1.5 rounded-sm bg-white transition-colors"
+		class="h-4 w-1.5 rounded-sm bg-white transition-colors group-hover:bg-primary group-active:bg-primary"
 		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/index.d.ts

@@ -5,6 +5,6 @@ import ActiveBackgroundBorder from './active-background-border.svelte';
 import ActiveLayerBorder from './active-layer-border.svelte';
 import { BackgroundLayer, BackgroundLayerContent, BackgroundLayerButtons } from './types/background/index.js';
 import { TextLayer, TextLayerContent, HtmlContent, TextLayerEdit } from './types/text/index.js';
-import { ImageLayer, ImageLayerContent } from './types/image/index.js';
+import { ImageLayer, ImageLayerContent, ImageLayerCrop } from './types/image/index.js';
 import { GroupLayer, GroupLayerContent } from './types/group/index.js';
-export { LayerButton, LayerThumbWrapper, LayerWrapper, BackgroundLayer, BackgroundLayerContent, BackgroundLayerButtons, TextLayer, TextLayerContent, HtmlContent, TextLayerEdit, ImageLayer, ImageLayerContent, GroupLayer, GroupLayerContent, ActiveBackgroundBorder, ActiveLayerBorder, };
+export { LayerButton, LayerThumbWrapper, LayerWrapper, BackgroundLayer, BackgroundLayerContent, BackgroundLayerButtons, TextLayer, TextLayerContent, HtmlContent, TextLayerEdit, ImageLayer, ImageLayerContent, ImageLayerCrop, GroupLayer, GroupLayerContent, ActiveBackgroundBorder, ActiveLayerBorder, };

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

@@ -5,7 +5,7 @@ import ActiveBackgroundBorder from './active-background-border.svelte';
 import ActiveLayerBorder from './active-layer-border.svelte';
 import { BackgroundLayer, BackgroundLayerContent, BackgroundLayerButtons, } from './types/background/index.js';
 import { TextLayer, TextLayerContent, HtmlContent, TextLayerEdit } from './types/text/index.js';
-import { ImageLayer, ImageLayerContent } from './types/image/index.js';
+import { ImageLayer, ImageLayerContent, ImageLayerCrop } from './types/image/index.js';
 import { GroupLayer, GroupLayerContent } from './types/group/index.js';
 export { 
 // layer buttons
@@ -17,7 +17,7 @@ BackgroundLayer, BackgroundLayerContent, BackgroundLayerButtons,
 // text layer
 TextLayer, TextLayerContent, HtmlContent, TextLayerEdit, 
 //image layer
-ImageLayer, ImageLayerContent, 
+ImageLayer, ImageLayerContent, ImageLayerCrop, 
 // group layer
 GroupLayer, GroupLayerContent, 
 // layers state

package/dist/components/editor/layers/layer-button.svelte

@@ -33,7 +33,7 @@
 	<button
 		{onclick}
 		class={cn(
-			'bg-muted flex w-full items-center justify-between rounded-md border-2 border-transparent p-2 outline-none',
+			'flex w-full items-center justify-between rounded-md border-2 border-transparent bg-muted p-2 outline-none',
 			{
 				'border-blue-500': layer
 					? editor.activeLayers.find((l) => l.id === layer.id)

package/dist/components/editor/layers/types/background/background-content-image.svelte

@@ -17,25 +17,20 @@
 	);
 </script>
 
-<div
-	class="h-full w-full"
-	style:transform={backgroundImage.rotate ? `rotate(${backgroundImage.rotate}deg)` : null}
-	style:opacity={backgroundImage.opacity}
->
-	<div class="h-full w-full transition-transform" style:transform={flipTransform}>
-		<div
-			class="relative"
-			style:width="{backgroundImage.image.width * scale}px"
-			style:height="{backgroundImage.image.height * scale}px"
-			style:transform={`translate(${-backgroundImage.offsetX * scale}px, ${-backgroundImage.offsetY * scale}px)`}
-		>
-			<img
-				src={backgroundImage.image.src}
-				alt=""
-				crossorigin="anonymous"
-				class="pointer-events-none absolute h-full w-full object-fill"
-				draggable={false}
-			/>
-		</div>
+<div class="h-full w-full transition-transform" style:transform={flipTransform}>
+	<div
+		class="relative"
+		style:width="{backgroundImage.image.width * scale}px"
+		style:height="{backgroundImage.image.height * scale}px"
+		style:transform={`translate(${backgroundImage.offsetX * scale}px, ${backgroundImage.offsetY * scale}px) rotate(${backgroundImage.imageRotate}deg)`}
+		style:opacity={backgroundImage.opacity}
+	>
+		<img
+			src={backgroundImage.image.src}
+			alt=""
+			crossorigin="anonymous"
+			class="pointer-events-none absolute h-full w-full object-fill"
+			draggable={false}
+		/>
 	</div>
 </div>

package/dist/components/editor/layers/types/background/background-layer-buttons.svelte

@@ -20,7 +20,7 @@
 	active={editor.activeSidebarPopup === 'backgroundColor'}
 >
 	<div
-		class="after:shadow-inner-1 relative h-6 w-6 overflow-hidden rounded-full after:absolute after:inset-0 after:rounded-full"
+		class="relative h-6 w-6 overflow-hidden rounded-full after:absolute after:inset-0 after:rounded-full after:shadow-inner-1"
 	>
 		<ColorPickerAlphaGrid size={12}>
 			<ColorIndicator color={backgroundColor} />

package/dist/components/editor/layers/types/background/background-layer.svelte

@@ -44,8 +44,8 @@
 					hidden: false,
 					customScale: scale,
 					sticky: false,
-					x: rect.left + editor.dragged.offsetX - offsetX * scale,
-					y: rect.top + editor.dragged.offsetY - offsetY * scale,
+					x: rect.left + editor.dragged.offsetX + offsetX * scale,
+					y: rect.top + editor.dragged.offsetY + offsetY * scale,
 				};
 			} else {
 				editor.dragged = { ...editor.dragged, inside: true };