@peteai/presentation-editor 0.0.6 → 0.0.8

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

@@ -1,13 +1,8 @@
 <script lang="ts">
 	import * as ContextMenu from '../../ui/context-menu/index.js';
 	import type { ActiveLayerGuide, BoxLayerGuide, Layer, LineLayerGuide } from '../types.js';
-	import { getPresentationEditorContext } from '../presentation-editor.svelte.js';
-	import {
-		calculateBoundingBox,
-		calculateGroupRotatedBoundingBox,
-		calculateLayerTransform,
-		type Transform,
-	} from './utils.js';
+	import { getEditorContext } from '../editor.svelte.js';
+	import { calculateBoundingBox, calculateGroupRotatedBoundingBox } from './utils.js';
 	import { generateId } from '../../../utils.js';
 	import LayerMenuContent from '../menu/layer-menu-content.svelte';
 
@@ -25,18 +20,21 @@
 		children,
 	}: Props = $props();
 
-	const editor = getPresentationEditorContext();
+	const editor = getEditorContext();
 
 	let initial: {
 		clientX: number;
 		clientY: number;
-		bbox: Transform;
+		bbox: { x: number; y: number; width: number; height: number };
 		layers: (Layer & { state: Layer })[];
 	} | null = null;
 	const actionId = editor.generateId();
 
-	let scale = $derived(layer.scale || 1);
-	let rotate = $derived(layer.rotate || 0);
+	const onClick = (e: MouseEvent) => {
+		console.log('click', layer.id, e);
+		if (e.shiftKey) return;
+		editor.setActiveLayers(layer.id);
+	};
 
 	const tryToDeselect = () => {
 		removeEventListener('mouseup', tryToDeselect);
@@ -46,31 +44,21 @@
 
 	const onMouseDown = (e: MouseEvent) => {
 		console.log('mousedown', layer.id, e);
-		if (!editor.activeLayerIds.has(layer.id)) {
+		if (editor.activeAction) return;
+		if (!editor.activeLayers.find((l) => l.id === layer.id)) {
 			editor.setActiveLayers(layer.id, e.shiftKey ? 'add' : undefined);
 		} else if (e.shiftKey) {
 			addEventListener('mouseup', tryToDeselect);
 		}
-		if (
-			!editor.activeSlide.locked &&
-			!editor.activeLayers.some((l) => l.locked) &&
-			!editor.activeAction &&
-			e.button === 0
-		) {
+		if (!editor.activePage.locked && !editor.activeLayers.some((l) => l.locked) && e.button === 0) {
 			initial = {
 				clientX: e.clientX,
 				clientY: e.clientY,
-				bbox: {
-					...calculateBoundingBox(
-						editor.activeLayers.length === 1
-							? calculateLayerTransform(editor.activeLayers[0])
-							: calculateGroupRotatedBoundingBox(
-									editor.activeLayers.map(calculateLayerTransform),
-									editor.activeGroupRotate,
-								),
-					),
-					rotate: 0,
-				},
+				bbox: calculateBoundingBox(
+					editor.activeLayers.length === 1
+						? editor.activeLayers[0]
+						: calculateGroupRotatedBoundingBox(editor.activeLayers, editor.activeGroupRotate),
+				),
 				layers: editor.activeLayers.map((layer) => ({ ...layer, state: layer })),
 			};
 			addEventListener('mousemove', onMouseMove);
@@ -88,27 +76,26 @@
 		editor.activeAction = null;
 		if (!initial || (initial.clientX === e.clientX && initial.clientY === e.clientY)) return;
 
-		editor.historyPush({
-			type: 'layersGroup',
-			actions: initial.layers.map((layerWithState) => {
+		editor.historyPush(
+			initial.layers.map((layerWithState) => {
 				const { state, ...layer } = layerWithState;
 				if (editor.isLayerOutOfBounds(state)) {
 					return {
-						type: 'layersRemove',
-						slideId: editor.activeSlide.id,
-						layers: [layer],
+						type: 'layerRemove',
+						pageId: editor.activePage.id,
+						layer,
 					};
 				} else {
 					return {
-						type: 'layer',
-						slideId: editor.activeSlide.id,
+						type: 'layerUpdate',
+						pageId: editor.activePage.id,
 						layer: { id: layer.id, type: layer.type },
 						undo: { x: layer.x, y: layer.y },
 						redo: { x: state.x, y: state.y },
 					};
 				}
 			}),
-		});
+		);
 		initial = null;
 	};
 
@@ -147,9 +134,9 @@
 
 	let snappingGrid: LineLayerGuide[][] = [];
 	const buildSnappingGrid = () =>
-		editor.activeSlide.layers
-			.filter((l) => !editor.activeLayerIds.has(l.id))
-			.map((l) => calculateBoundingBox(calculateLayerTransform(l)))
+		editor.rootLayers
+			.filter((layer) => !editor.activeLayers.find((l) => l.id === layer.id))
+			.map((layer) => calculateBoundingBox(layer))
 			.map(({ x, y, width, height }) => {
 				const verticalPositions = [x, x + width / 2, x + width];
 				const horizontalPositions = [y, y + height / 2, y + height];
@@ -187,11 +174,11 @@
 
 		if (!initial || editor.activeAction?.id !== actionId) return;
 
-		let xDiff = (e.clientX - initial.clientX) / editor.zoom;
-		let yDiff = (e.clientY - initial.clientY) / editor.zoom;
-		let x = initial.bbox.x + xDiff;
-		let y = initial.bbox.y + yDiff;
-		const { width, height } = initial.bbox;
+		const { clientX, clientY, bbox } = initial;
+		let xDiff = (e.clientX - clientX) / editor.zoom;
+		let yDiff = (e.clientY - clientY) / editor.zoom;
+		let x = bbox.x + xDiff;
+		let y = bbox.y + yDiff;
 
 		const guides: {
 			xDiff?: number;
@@ -205,7 +192,7 @@
 		let minYDiff: number = Infinity;
 		const xSnappingCheck = (coords: number[]) => {
 			for (let i = 0; i < coords.length; i++) {
-				const coordsForCheck = [coords[i], coords[i] - width / 2, coords[i] - width];
+				const coordsForCheck = [coords[i], coords[i] - bbox.width / 2, coords[i] - bbox.width];
 				for (let j = 0; j < coordsForCheck.length; j++) {
 					const xDiff = x - coordsForCheck[j];
 					const xDiffAbs = Math.abs(xDiff);
@@ -221,7 +208,7 @@
 		};
 		const ySnappingCheck = (coords: number[]) => {
 			for (let i = 0; i < coords.length; i++) {
-				const coordsForCheck = [coords[i], coords[i] - height / 2, coords[i] - height];
+				const coordsForCheck = [coords[i], coords[i] - bbox.height / 2, coords[i] - bbox.height];
 				for (let j = 0; j < coordsForCheck.length; j++) {
 					const yDiff = y - coordsForCheck[j];
 					const yDiffAbs = Math.abs(yDiff);
@@ -256,13 +243,13 @@
 			}
 		};
 
-		// slide padding
+		// page padding
 		checkBoxSnapping(paddingGuide);
 
-		// slide edges
+		// page edges
 		edgeGuides.forEach(checkLineSnapping);
 
-		// rest of the slides
+		// rest of the pages
 		snappingGrid.forEach((layerGuides) => {
 			layerGuides.forEach(checkLineSnapping);
 		});
@@ -281,11 +268,11 @@
 			.map(({ guide }) => {
 				if (guide.type === 'horizontal') {
 					const minX = Math.min(x, guide.x);
-					const length = Math.max(x + width, guide.x + guide.length) - minX;
+					const length = Math.max(x + bbox.width, guide.x + guide.length) - minX;
 					return { ...guide, x: minX, length };
 				} else if (guide.type === 'vertical') {
 					const minY = Math.min(y, guide.y);
-					const length = Math.max(y + height, guide.y + guide.length) - minY;
+					const length = Math.max(y + bbox.height, guide.y + guide.length) - minY;
 					return { ...guide, y: minY, length };
 				}
 
@@ -316,14 +303,16 @@
 
 <ContextMenu.Root>
 	<ContextMenu.Trigger>
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
 		<!-- svelte-ignore a11y_mouse_events_have_key_events -->
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div
 			class="absolute select-none"
-			style:width="{layer.width * scale}px"
-			style:height="{layer.height * scale}px"
-			style:transform={`translate(${layer.x}px, ${layer.y}px) rotate(${rotate}deg)`}
-			style:opacity={layer.opacity ?? null}
+			style:width="{layer.width * layer.scale}px"
+			style:height="{layer.height * layer.scale}px"
+			style:transform={`translate(${layer.x}px, ${layer.y}px) rotate(${layer.rotate}deg)`}
+			style:opacity={layer.opacity}
+			onclick={onClick}
 			onmousedown={onMouseDown}
 			onmouseover={onMouseOver}
 			onmouseleave={onMouseLeave}

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

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import type { BackgroundImage } from '../../../types.js';
+
+	interface Props {
+		backgroundImage: BackgroundImage;
+		thumbScale?: number;
+	}
+
+	let { backgroundImage, thumbScale = 1 }: Props = $props();
+
+	let scale = $derived(backgroundImage.scale * thumbScale);
+
+	let flipTransform = $derived(
+		backgroundImage.flipX || backgroundImage.flipY
+			? `scale(${backgroundImage.flipX ? -1 : 1}, ${backgroundImage.flipY ? -1 : 1})`
+			: '',
+	);
+</script>
+
+<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/{presentation-editor → editor}/layers/types/background/background-layer-buttons.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
 	import { Separator } from '../../../../ui/separator/index.js';
 	import { Button } from '../../../../ui/button/index.js';
-	import { getPresentationEditorContext } from '../../../presentation-editor.svelte.js';
+	import { getEditorContext } from '../../../editor.svelte.js';
 	import { ColorIndicator } from '../../../color-indicator/index.js';
 	import { ColorPickerAlphaGrid } from '../../../../ui/color-picker/index.js';
 	import { FlipButton } from '../../buttons/flip-button/index.js';
 	import { OpacityButton } from '../../buttons/opacity-button/index.js';
 
-	const editor = getPresentationEditorContext();
+	const editor = getEditorContext();
 
-	let backgroundColor = $derived(editor.activeSlide.backgroundColor || '#ffffff');
+	let backgroundColor = $derived(editor.activePage.backgroundColor || '#ffffff');
 </script>
 
 <Separator orientation="vertical" />
@@ -27,9 +27,9 @@
 		</ColorPickerAlphaGrid>
 	</div>
 </Button>
-{#if editor.activeSlide.backgroundImage}
+{#if editor.activePage.backgroundImage}
 	<Separator orientation="vertical" />
-	<FlipButton bind:layers={editor.activeSlide.backgroundImage} />
+	<FlipButton bind:layers={editor.activePage.backgroundImage} />
 	<Separator orientation="vertical" />
-	<OpacityButton bind:layers={editor.activeSlide.backgroundImage} />
+	<OpacityButton bind:layers={editor.activePage.backgroundImage} />
 {/if}

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

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { Page } from '../../../types.js';
+	import { ColorIndicator } from '../../../color-indicator/index.js';
+	import BackgroundContentImage from './background-content-image.svelte';
+
+	interface Props {
+		page: Page;
+		thumbScale?: number;
+	}
+
+	let { page, thumbScale }: Props = $props();
+
+	let backgroundColor = $derived(page.backgroundColor || '#ffffff');
+</script>
+
+<div class="h-full w-full">
+	<ColorIndicator color={backgroundColor} />
+	{#if page.backgroundImage}
+		<BackgroundContentImage backgroundImage={page.backgroundImage} {thumbScale} />
+	{/if}
+</div>

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

@@ -1,6 +1,6 @@
-import type { Slide } from '../../../types.js';
+import type { Page } from '../../../types.js';
 interface Props {
-    slide: Slide;
+    page: Page;
     thumbScale?: number;
 }
 declare const BackgroundLayerContent: import("svelte").Component<Props, {}, "">;

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import * as ContextMenu from '../../../../ui/context-menu/index.js';
-	import { getPresentationEditorContext } from '../../../presentation-editor.svelte.js';
+	import { getEditorContext } from '../../../editor.svelte.js';
 	import BackgroundMenuContent from '../../../menu/background-menu-content.svelte';
 	import { BackgroundLayerContent } from './index.js';
 	import { calculateImageCover } from '../../utils.js';
@@ -13,7 +13,7 @@
 
 	let ref: HTMLDivElement;
 
-	const editor = getPresentationEditorContext();
+	const editor = getEditorContext();
 
 	const onMouseDown = (e: MouseEvent) => {
 		console.log('mousedown', 'background', e);
@@ -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 };
@@ -75,7 +75,7 @@
 					...calculateImageCover(dragged.image, { width: editor.width, height: editor.height }),
 					image: dragged.image,
 				});
-				editor.addLayers(editor.activeSlide.id, layer, 0);
+				editor.addLayers(editor.activePage.id, layer, 0);
 			} else {
 				const rect = ref.getBoundingClientRect();
 				const x = (e.clientX - rect.left - dragged.offsetX) / editor.zoom;
@@ -100,12 +100,10 @@
 			ondragover={onDragOver}
 			ondrop={onDrop}
 		>
-			<div class="h-full w-full">
-				<BackgroundLayerContent slide={editor.activeSlide} />
-			</div>
+			<BackgroundLayerContent page={editor.activePage} />
 		</div>
 	</ContextMenu.Trigger>
 	<ContextMenu.Content class="w-80">
-		<BackgroundMenuContent {editor} slide={editor.activeSlide} />
+		<BackgroundMenuContent {editor} page={editor.activePage} />
 	</ContextMenu.Content>
 </ContextMenu.Root>

package/dist/components/editor/layers/types/group/group-child-wrapper.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { getEditorContext } from '../../../editor.svelte.js';
+	import type { GroupLayer, SimpleLayer } from '../../../types.js';
+
+	interface Props {
+		groupLayer: GroupLayer;
+		layer: SimpleLayer;
+		children?: import('svelte').Snippet;
+	}
+
+	let { groupLayer, layer = $bindable(), children }: Props = $props();
+
+	const editor = getEditorContext();
+
+	const onClick = (e: MouseEvent) => {
+		console.log('click', layer.id, e);
+		if (editor.activeAction) return;
+		if (e.shiftKey) return;
+		e.stopPropagation();
+		editor.setActiveGroupChild(layer.id);
+	};
+
+	const onMouseDown = (e: MouseEvent) => {
+		console.log('mousedown', layer.id, e);
+		if (editor.activeAction) return;
+		if (editor.activeLayers.find((l) => l.id === groupLayer.id)) return;
+		if (e.shiftKey) return;
+		editor.setActiveGroupChild(layer.id);
+	};
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	class="absolute select-none"
+	style:width="{layer.width * layer.scale}px"
+	style:height="{layer.height * layer.scale}px"
+	style:transform={`translate(${layer.x}px, ${layer.y}px) rotate(${layer.rotate}deg)`}
+	style:opacity={layer.opacity}
+	onclick={onClick}
+	onmousedown={onMouseDown}
+>
+	{@render children?.()}
+</div>

package/dist/components/editor/layers/types/group/group-child-wrapper.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { GroupLayer, SimpleLayer } from '../../../types.js';
+interface Props {
+    groupLayer: GroupLayer;
+    layer: SimpleLayer;
+    children?: import('svelte').Snippet;
+}
+declare const GroupChildWrapper: import("svelte").Component<Props, {}, "layer">;
+type GroupChildWrapper = ReturnType<typeof GroupChildWrapper>;
+export default GroupChildWrapper;

package/dist/components/editor/layers/types/group/group-layer-content.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import type { Page, GroupLayer } from '../../../types.js';
+	import { TextLayerContent } from '../text/index.js';
+	import { ImageLayerContent } from '../image/index.js';
+
+	interface Props {
+		page: Page;
+		layer: GroupLayer;
+		thumbScale?: number;
+	}
+
+	let { page, layer: groupLayer, thumbScale = 1 }: Props = $props();
+
+	let children = $derived(
+		page.layers
+			.filter((l) => l.type !== 'group')
+			.filter((l) => l.groupId === groupLayer.id)
+			.toSorted((a, b) => a.sortOrder - b.sortOrder),
+	);
+
+	let scale = $derived(groupLayer.scale * thumbScale);
+</script>
+
+<div
+	class="origin-top-left"
+	style:width="{groupLayer.width / groupLayer.scale}px"
+	style:height="{groupLayer.height / groupLayer.scale}px"
+	style:transform={scale !== 1 ? `scale(${scale})` : null}
+>
+	{#each children as layer (layer.id)}
+		<div
+			class="absolute select-none"
+			style:width="{layer.width * layer.scale}px"
+			style:height="{layer.height * layer.scale}px"
+			style:transform={`translate(${layer.x}px, ${layer.y}px) rotate(${layer.rotate}deg)`}
+			style:opacity={layer.opacity}
+		>
+			{#if layer.type === 'text'}
+				<TextLayerContent {layer} />
+			{:else if layer.type === 'image'}
+				<ImageLayerContent {layer} />
+			{/if}
+		</div>
+	{/each}
+</div>

package/dist/components/editor/layers/types/group/group-layer-content.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Page, GroupLayer } from '../../../types.js';
+interface Props {
+    page: Page;
+    layer: GroupLayer;
+    thumbScale?: number;
+}
+declare const GroupLayerContent: import("svelte").Component<Props, {}, "">;
+type GroupLayerContent = ReturnType<typeof GroupLayerContent>;
+export default GroupLayerContent;

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

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { getEditorContext } from '../../../editor.svelte.js';
+	import type { Page, GroupLayer } from '../../../types.js';
+	import GroupChildWrapper from './group-child-wrapper.svelte';
+	import { ImageLayer } from '../image/index.js';
+	import { TextLayer } from '../text/index.js';
+
+	interface Props {
+		page: Page;
+		layer: GroupLayer;
+	}
+
+	let { page, layer: groupLayer }: Props = $props();
+
+	const editor = getEditorContext();
+</script>
+
+<div
+	class="origin-top-left"
+	style:width="{groupLayer.width / groupLayer.scale}px"
+	style:height="{groupLayer.height / groupLayer.scale}px"
+	style:transform={groupLayer.scale !== 1 ? `scale(${groupLayer.scale})` : null}
+>
+	{#each editor.findGroupChildren(page, groupLayer.id) as layer (layer.id)}
+		<GroupChildWrapper {groupLayer} {layer}>
+			{#if layer.type === 'text'}
+				<TextLayer {layer} />
+			{:else if layer.type === 'image'}
+				<ImageLayer {layer} />
+			{/if}
+		</GroupChildWrapper>
+	{/each}
+</div>

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

@@ -0,0 +1,8 @@
+import type { Page, GroupLayer } from '../../../types.js';
+interface Props {
+    page: Page;
+    layer: GroupLayer;
+}
+declare const GroupLayer: import("svelte").Component<Props, {}, "">;
+type GroupLayer = ReturnType<typeof GroupLayer>;
+export default GroupLayer;

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

@@ -0,0 +1,3 @@
+import Root from './group-layer.svelte';
+import GroupLayerContent from './group-layer-content.svelte';
+export { Root, Root as GroupLayer, GroupLayerContent };

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

@@ -0,0 +1,3 @@
+import Root from './group-layer.svelte';
+import GroupLayerContent from './group-layer-content.svelte';
+export { Root, Root as GroupLayer, GroupLayerContent };

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

@@ -0,0 +1,120 @@
+<script lang="ts">
+	import RotateIcon from '@lucide/svelte/icons/refresh-cw';
+	import { getEditorContext } from '../../../../../editor.svelte.js';
+	import {
+		calculateImageLayerPropsForImageRotate,
+		degToRad,
+		rotatePoint,
+	} from '../../../../utils.js';
+	import type { ImageLayer } from '../../../../../types.js';
+
+	interface Props {
+		pageRef: HTMLDivElement;
+		layer: ImageLayer;
+	}
+
+	const { pageRef, layer }: Props = $props();
+
+	const type = 'rotate';
+
+	const editor = getEditorContext();
+
+	let initial: {
+		clientX: number;
+		clientY: number;
+		layer: ImageLayer;
+	} | null = null;
+
+	/**
+	 * Normalize the rotation angle to be between -180 and 180 degrees.
+	 *
+	 * @param rotate - The rotation angle in degrees.
+	 * @returns The normalized rotation angle.
+	 */
+	const normalizeRotation = (rotate: number) => {
+		// Adjust the rotation to be within the range of 0 to 360 degrees
+		const adjustedRotate = (rotate + 360) % 360;
+		// If the adjusted rotation is greater than or equal to 180, subtract 360 to bring it within the range of -180 to 180
+		return adjustedRotate >= 180 ? adjustedRotate - 360 : adjustedRotate;
+	};
+
+	const onMouseDown = (e: MouseEvent) => {
+		if (e.button !== 0) return;
+		e.preventDefault();
+		e.stopPropagation();
+		console.log(type, 'mousedown', e);
+
+		initial = {
+			clientX: e.clientX,
+			clientY: e.clientY,
+			layer: $state.snapshot(layer),
+		};
+		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 pageRect = pageRef.getBoundingClientRect();
+		if (!pageRect) return;
+
+		const { x: pageX, y: pageY } = pageRect;
+
+		const { x, y, width, height, scale, rotate, image, offsetX, offsetY } = initial.layer;
+
+		const relativeImageCenter = rotatePoint(degToRad(rotate), {
+			x: image.width / 2 + offsetX - width / 2,
+			y: image.height / 2 + offsetY - height / 2,
+		});
+
+		// Calculate the center of the layer image
+		const clientX = pageX + (x + (width / 2 + relativeImageCenter.x) * scale) * editor.zoom;
+		const clientY = pageY + (y + (height / 2 + relativeImageCenter.y) * scale) * editor.zoom;
+
+		// Calculate the current angle based on the current mouse position relative to the center of the layer
+		const currentAngle = Math.atan2(
+			(e.clientY - clientY) / editor.zoom,
+			(e.clientX - clientX) / editor.zoom,
+		);
+
+		// Convert the current angle from radians to degrees and adjust to make 0 degrees the initial position
+		let currentRotate = (currentAngle * 180) / Math.PI - 90 - rotate;
+
+		// Add snapping
+		const snapThreshold = 1;
+		const remainder = Math.abs(currentRotate) % 45;
+		if (remainder < snapThreshold || remainder > 45 - snapThreshold) {
+			currentRotate = Math.round(currentRotate / 45) * 45;
+		}
+
+		currentRotate = normalizeRotation(currentRotate);
+
+		const props = calculateImageLayerPropsForImageRotate(initial.layer, currentRotate);
+		Object.assign(layer, props);
+	};
+</script>
+
+<!-- <div class="absolute top-full flex p-6"> -->
+<!-- <div class="group pointer-events-none relative m-1 flex h-8 w-8 items-center justify-center"> -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	class="group pointer-events-none absolute -bottom-9 left-1/2 -m-2 h-6 w-6 cursor-grab rounded-full bg-white"
+	onmousedown={onMouseDown}
+>
+	<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 after:pointer-events-auto after:absolute after:inset-0 after:rounded-full"
+		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" />
+	</div>
+</div>
+<!-- </div> -->
+<!-- </div> -->

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

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

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

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