@peteai/presentation-editor 0.0.6 → 0.0.8

package/dist/components/{presentation-editor → editor}/layers/controls/rotate-control/rotate-control.svelte

@@ -1,16 +1,18 @@
 <script lang="ts">
-	import RotateIcon from 'lucide-svelte/icons/refresh-cw';
-	import { getPresentationEditorContext } from '../../../presentation-editor.svelte.js';
-	import {
-		calculateGroupRotatedBoundingBox,
-		calculateLayerTransform,
-		type Transform,
-	} from '../../utils.js';
+	import RotateIcon from '@lucide/svelte/icons/refresh-cw';
+	import { getEditorContext } from '../../../editor.svelte.js';
+	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 = getPresentationEditorContext();
+	const editor = getEditorContext();
 
 	let element: HTMLElement | null = $state(null);
 
@@ -46,13 +48,11 @@
 		initial = {
 			clientX: e.clientX,
 			clientY: e.clientY,
-			bbox:
+			bbox: $state.snapshot(
 				editor.activeLayers.length === 1
-					? calculateLayerTransform(editor.activeLayers[0])
-					: calculateGroupRotatedBoundingBox(
-							editor.activeLayers.map(calculateLayerTransform),
-							editor.activeGroupRotate,
-						),
+					? editor.activeLayers[0]
+					: calculateGroupRotatedBoundingBox(editor.activeLayers, editor.activeGroupRotate),
+			),
 			layers: editor.activeLayers.map((layer) => ({ ...layer, state: layer })),
 		};
 		editor.activeAction = { id: actionId, type, cursor: 'cursor-grabbing' };
@@ -70,41 +70,40 @@
 		editor.activeAction = null;
 		if (!initial || currentRotate === initial.bbox.rotate) return;
 
-		editor.historyPush({
-			type: 'layersGroup',
-			actions: initial.layers.map((layer) => {
+		editor.historyPush(
+			initial.layers.map((layer) => {
 				if (editor.isLayerOutOfBounds(layer.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, rotate: layer.rotate },
 						redo: { x: layer.state.x, y: layer.state.y, rotate: layer.state.rotate },
 					};
 				}
 			}),
-		});
+		);
 	};
 
 	const onMouseMove = (e: MouseEvent) => {
 		if (!initial || editor.activeAction?.id !== actionId || !element) return;
 
-		const slideClientRect = element.closest('[data-slide-container]')?.getBoundingClientRect();
-		if (!slideClientRect) return;
+		const pageRect = pageRef.getBoundingClientRect();
+		if (!pageRect) return;
 
-		const { x: slideX, y: slideY } = slideClientRect;
+		const { x: pageX, y: pageY } = pageRect;
 
-		const { width, height, x, y, rotate } = initial.bbox;
+		const { width, height, x, y, rotate, scale } = initial.bbox;
 
 		// Calculate the center of the layer
-		const clientX = slideX + x * editor.zoom + (width * editor.zoom) / 2;
-		const clientY = slideY + y * editor.zoom + (height * 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(
@@ -134,10 +133,10 @@
 			const centerY = y + height / 2;
 
 			initial.layers.forEach((layer) => {
-				const { width, height, x, y, rotate } = calculateLayerTransform(layer);
+				const { width, height, x, y, rotate, scale } = layer;
 				// Find center of layerect
-				const layerCenterX = x + width / 2;
-				const layerCenterY = y + height / 2;
+				const layerCenterX = x + (width * scale) / 2;
+				const layerCenterY = y + (height * scale) / 2;
 
 				// Translate to origin
 				const dx = layerCenterX - centerX;
@@ -152,8 +151,8 @@
 				const newCenterY = rotatedY + centerY;
 
 				// Compute new top-left corner
-				const newX = newCenterX - width / 2;
-				const newY = newCenterY - height / 2;
+				const newX = newCenterX - (width * scale) / 2;
+				const newY = newCenterY - (height * scale) / 2;
 
 				const newRotate = normalizeRotation(rotate + rotateDiff);
 

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

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

package/dist/components/{presentation-editor → editor}/layers/controls/side-resize-control/side-resize-control.svelte

@@ -48,13 +48,13 @@
 </script>
 
 <script lang="ts">
-	import { getPresentationEditorContext } from '../../../presentation-editor.svelte.js';
+	import { getEditorContext } from '../../../editor.svelte.js';
 	import { cn } from '../../../../../utils.js';
 	import { calculateNewPosition } from '../../utils.js';
 
 	let { origin, layer = $bindable() }: Props = $props();
 
-	const editor = getPresentationEditorContext();
+	const editor = getEditorContext();
 
 	const { base, handler, grip, cursor } = sideResizeControlVariants({ origin });
 
@@ -94,14 +94,14 @@
 
 		if (editor.isLayerOutOfBounds(layer)) {
 			editor.historyPush({
-				type: 'layersRemove',
-				slideId: editor.activeSlide.id,
-				layers: [initial.layer],
+				type: 'layerRemove',
+				pageId: editor.activePage.id,
+				layer: initial.layer,
 			});
 		} else {
 			editor.historyPush({
-				type: 'layer',
-				slideId: editor.activeSlide.id,
+				type: 'layerUpdate',
+				pageId: editor.activePage.id,
 				layer: { id: layer.id, type: layer.type },
 				undo: {
 					scale: initial.layer.scale,
@@ -130,11 +130,7 @@
 		if (!initial || editor.activeAction?.id !== actionId) return;
 
 		isChanged = true;
-		const { width, height, x, y, flipX, flipY } = initial.layer;
-		const scale = initial.layer.scale || 1;
-		const rotate = initial.layer.rotate || 0;
-		const offsetX = initial.layer.offsetX || 0;
-		const offsetY = initial.layer.offsetY || 0;
+		const { width, height, x, y, scale, rotate, offsetX, offsetY, flipX, flipY } = initial.layer;
 
 		const angle = (rotate * Math.PI) / 180;
 		const xDiff = (e.clientX - initial.clientX) / editor.zoom;
@@ -150,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);
@@ -166,37 +162,37 @@
 				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;
 			}
 		}
 
 		const { newX, newY } = calculateNewPosition(
 			origin,
-			{ x, y, width: width * scale, height: height * scale, rotate },
+			{ x, y, width, height, rotate, scale },
 			newWidth,
 			newHeight,
 		);

package/dist/components/{presentation-editor → editor}/layers/controls/side-scale-control/side-scale-control.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" module>
 	import { tv, type VariantProps } from 'tailwind-variants';
-	import type { HtmlLayer } from '../../../types.js';
+	import type { TextLayer } from '../../../types.js';
 
 	const sideScaleControlVariants = tv({
 		slots: {
@@ -28,21 +28,21 @@
 
 	export interface Props {
 		origin: NonNullable<Origin>;
-		layer: HtmlLayer;
+		layer: TextLayer;
 	}
 </script>
 
 <script lang="ts">
 	import { tick } from 'svelte';
-	import { getPresentationEditorContext } from '../../../presentation-editor.svelte.js';
+	import { getEditorContext } from '../../../editor.svelte.js';
 	import { cn } from '../../../../../utils.js';
 	import { calculateNewPosition } from '../../utils.js';
 
 	let { origin, layer = $bindable() }: Props = $props();
 
-	const editor = getPresentationEditorContext();
+	const editor = getEditorContext();
 
-	let initial: { clientX: number; clientY: number; layer: HtmlLayer } | null = null;
+	let initial: { clientX: number; clientY: number; layer: TextLayer } | null = null;
 	let isChanged = false;
 	const actionId = editor.generateId();
 
@@ -79,14 +79,14 @@
 
 		if (editor.isLayerOutOfBounds(layer)) {
 			editor.historyPush({
-				type: 'layersRemove',
-				slideId: editor.activeSlide.id,
-				layers: [initial.layer],
+				type: 'layerRemove',
+				pageId: editor.activePage.id,
+				layer: initial.layer,
 			});
 		} else {
 			editor.historyPush({
-				type: 'layer',
-				slideId: editor.activeSlide.id,
+				type: 'layerUpdate',
+				pageId: editor.activePage.id,
 				layer: { id: layer.id, type: layer.type },
 				undo: {
 					x: initial.layer.x,
@@ -103,9 +103,7 @@
 	const onMouseMove = async (e: MouseEvent) => {
 		if (!initial || editor.activeAction?.id !== actionId) return;
 
-		const { width, height, x, y } = initial.layer;
-		const scale = initial.layer.scale || 1;
-		const rotate = initial.layer.rotate || 0;
+		const { width, height, x, y, scale, rotate } = initial.layer;
 
 		const angle = (rotate * Math.PI) / 180;
 		const xDiff = (e.clientX - initial.clientX) / editor.zoom;
@@ -121,7 +119,7 @@
 		newWidth = Math.max(newWidth, 10);
 		isChanged = newWidth !== width * scale;
 
-		layer.width = newWidth / scale;
+		Object.assign(layer, { width: newWidth / scale });
 		await tick();
 
 		const layerContent = document.getElementById(`layer-content-${layer.id}`);
@@ -130,7 +128,7 @@
 
 		const { newX, newY } = calculateNewPosition(
 			`top-${origin}`,
-			{ x, y, width: width * scale, height: height * scale, rotate },
+			{ x, y, width, height, rotate, scale },
 			newWidth,
 			newHeight,
 		);

package/dist/components/{presentation-editor → editor}/layers/controls/side-scale-control/side-scale-control.svelte.d.ts

@@ -1,5 +1,5 @@
 import { type VariantProps } from 'tailwind-variants';
-import type { HtmlLayer } from '../../../types.js';
+import type { TextLayer } from '../../../types.js';
 declare const sideScaleControlVariants: import("tailwind-variants").TVReturnType<{
     origin: {
         right: {
@@ -55,7 +55,7 @@ declare const sideScaleControlVariants: import("tailwind-variants").TVReturnType
 type Origin = VariantProps<typeof sideScaleControlVariants>['origin'];
 export interface Props {
     origin: NonNullable<Origin>;
-    layer: HtmlLayer;
+    layer: TextLayer;
 }
 declare const SideScaleControl: import("svelte").Component<Props, {}, "layer">;
 type SideScaleControl = ReturnType<typeof SideScaleControl>;

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

@@ -0,0 +1,10 @@
+import LayerButton from './layer-button.svelte';
+import LayerThumbWrapper from './layer-thumb-wrapper.svelte';
+import LayerWrapper from './layer-wrapper.svelte';
+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, 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, ImageLayerCrop, GroupLayer, GroupLayerContent, ActiveBackgroundBorder, ActiveLayerBorder, };

package/dist/components/{presentation-editor → editor}/layers/index.js

@@ -4,8 +4,9 @@ import LayerWrapper from './layer-wrapper.svelte';
 import ActiveBackgroundBorder from './active-background-border.svelte';
 import ActiveLayerBorder from './active-layer-border.svelte';
 import { BackgroundLayer, BackgroundLayerContent, BackgroundLayerButtons, } from './types/background/index.js';
-import { HtmlLayer, HtmlLayerContent, HtmlContent, HtmlLayerEdit } from './types/html/index.js';
-import { ImageLayer, ImageLayerContent } from './types/image/index.js';
+import { TextLayer, TextLayerContent, HtmlContent, TextLayerEdit } from './types/text/index.js';
+import { ImageLayer, ImageLayerContent, ImageLayerCrop } from './types/image/index.js';
+import { GroupLayer, GroupLayerContent } from './types/group/index.js';
 export { 
 // layer buttons
 LayerButton, LayerThumbWrapper, 
@@ -13,9 +14,11 @@ LayerButton, LayerThumbWrapper,
 LayerWrapper, 
 // background layer
 BackgroundLayer, BackgroundLayerContent, BackgroundLayerButtons, 
-// html layer
-HtmlLayer, HtmlLayerContent, HtmlContent, HtmlLayerEdit, 
+// text layer
+TextLayer, TextLayerContent, HtmlContent, TextLayerEdit, 
 //image layer
-ImageLayer, ImageLayerContent, 
+ImageLayer, ImageLayerContent, ImageLayerCrop, 
+// group layer
+GroupLayer, GroupLayerContent, 
 // layers state
 ActiveBackgroundBorder, ActiveLayerBorder, };

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

@@ -1,9 +1,10 @@
 <script lang="ts">
-	import GripVerticalIcon from 'lucide-svelte/icons/grip-vertical';
-	import LockedIcon from 'lucide-svelte/icons/lock-keyhole';
+	import GripVerticalIcon from '@lucide/svelte/icons/grip-vertical';
+	import LockedIcon from '@lucide/svelte/icons/lock-keyhole';
+	import GroupIcon from '@lucide/svelte/icons/group';
 	import { cn } from '../../../utils.js';
 	import type { Layer } from '../types.js';
-	import { getPresentationEditorContext } from '../presentation-editor.svelte.js';
+	import { getEditorContext } from '../editor.svelte.js';
 
 	interface Props {
 		layer?: Layer;
@@ -12,12 +13,13 @@
 
 	let { layer, children }: Props = $props();
 
-	const editor = getPresentationEditorContext();
+	const editor = getEditorContext();
 
 	const onclick = (e: MouseEvent) => {
 		if (layer) {
 			if (e.metaKey) {
-				editor.setActiveLayers(layer.id, editor.activeLayerIds.has(layer.id) ? 'delete' : 'add');
+				const action = editor.activeLayers.find((l) => l.id === layer.id) ? 'delete' : 'add';
+				editor.setActiveLayers(layer.id, action);
 			} else {
 				editor.setActiveLayers(layer.id);
 			}
@@ -33,13 +35,15 @@
 		class={cn(
 			'bg-muted flex w-full items-center justify-between rounded-md border-2 border-transparent p-2 outline-none',
 			{
-				'border-blue-500': layer ? editor.activeLayerIds.has(layer.id) : editor.activeBackground,
+				'border-blue-500': layer
+					? editor.activeLayers.find((l) => l.id === layer.id)
+					: editor.activeSelection.type === 'background',
 			},
 		)}
 	>
 		<div class="h-6 w-6">
 			{#if layer}
-				{#if !editor.activeSlide.locked && !layer.locked}
+				{#if !editor.activePage.locked && !layer.locked}
 					<GripVerticalIcon class="size-6" />
 				{/if}
 			{/if}
@@ -48,8 +52,10 @@
 			{@render children?.()}
 		</div>
 		<div class="h-6 w-6">
-			{#if editor.activeSlide.locked || (layer ? layer.locked : editor.activeSlide.backgroundLocked)}
+			{#if editor.activePage.locked || (layer ? layer.locked : editor.activePage.backgroundLocked)}
 				<LockedIcon class="size-6" />
+			{:else if layer?.type === 'group'}
+				<GroupIcon class="size-6" />
 			{/if}
 		</div>
 	</button>

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

@@ -16,21 +16,20 @@
 		const cos = Math.abs(Math.cos(radians));
 		const sin = Math.abs(Math.sin(radians));
 
-		const width = layer.width * scale * cos + layer.height * scale * sin;
-		const height = layer.width * scale * sin + layer.height * scale * cos;
+		const width = layer.width * layer.scale * cos + layer.height * layer.scale * sin;
+		const height = layer.width * layer.scale * sin + layer.height * layer.scale * cos;
 
 		return Math.min(thumb.width / width, thumb.height / height);
 	};
 
-	let scale = $derived(layer.scale || 1);
 	let thumbScale = $derived(typeof thumb === 'object' ? getThumbScale(layer, thumb) : thumb);
 </script>
 
 <div
 	class="pointer-events-none absolute"
-	style:width="{layer.width * scale * thumbScale}px"
-	style:height="{layer.height * scale * thumbScale}px"
-	style:transform={`${typeof thumb !== 'object' ? `translate(${layer.x * thumbScale}px, ${layer.y * thumbScale}px)` : ''} rotate(${layer.rotate || 0}deg)`}
+	style:width="{layer.width * layer.scale * thumbScale}px"
+	style:height="{layer.height * layer.scale * thumbScale}px"
+	style:transform={`${typeof thumb !== 'object' ? `translate(${layer.x * thumbScale}px, ${layer.y * thumbScale}px)` : ''} rotate(${layer.rotate}deg)`}
 >
 	{@render children?.({ thumbScale })}
 </div>