@peteai/presentation-editor 0.0.2 → 0.0.4

package/dist/components/presentation-editor/layers/buttons/corner-radius-button/corner-radius-button.svelte

@@ -1,25 +1,33 @@
 <script lang="ts">
 	import CornerRadiusIcon from 'svelte-radix/CornerTopLeft.svelte';
-	import type {
-		ImageLayer,
-		LayerChangesAction,
-	} from '../../../types.js';
+	import type { ImageLayer, HistoryAction } from '../../../types.js';
 	import { getPresentationEditorContext } from '../../../presentation-editor.svelte.js';
 	import * as Popover from '../../../../ui/popover/index.js';
 	import { Button } from '../../../../ui/button/index.js';
 	import { Slider } from '../../../../ui/slider/index.js';
+	import { Input } from '../../../../ui/input/index.js';
 	import { createDebouncedCallback } from '../../../../../utils.js';
 
 	interface Props {
-		layer: ImageLayer;
+		layers: ImageLayer[];
 	}
 
-	let { layer = $bindable() }: Props = $props();
+	let { layers = $bindable() }: Props = $props();
 
 	const editor = getPresentationEditorContext();
 
+	const cornerRadius = $derived.by(() => {
+		if (!layers.length) return;
+
+		const firstLayerCornerRadius = layers[0].cornerRadius;
+		const allSame = layers.every((layer) => layer.cornerRadius === firstLayerCornerRadius);
+
+		return allSame ? firstLayerCornerRadius || 0 : undefined;
+	});
+
+	let initial: (ImageLayer & { state: ImageLayer })[] | null = null;
 	let undo: { cornerRadius: number | null } | null = null;
-	const debouncedHistoryPush = createDebouncedCallback((action: LayerChangesAction) => {
+	const debouncedHistoryPush = createDebouncedCallback((action: HistoryAction) => {
 		editor.historyPush(action);
 		undo = null;
 	}, 500);
@@ -27,21 +35,30 @@
 	let min = 0;
 	let max = 100;
 	const setCornerRadius = (value: string | number, debounce = false) => {
-		let cornerRadius = parseInt(value.toString());
-		if (cornerRadius > max) {
-			cornerRadius = max;
-		} else if (cornerRadius < min) {
-			cornerRadius = min;
+		value = parseInt(value.toString());
+		if (value > max) {
+			value = max;
+		} else if (value < min) {
+			value = min;
 		}
-		if (!undo) {
-			undo = { cornerRadius: layer.cornerRadius };
+		if (!initial) {
+			initial = layers.map((layer) => ({ ...layer, state: layer }));
 		}
-		const redo = { cornerRadius: cornerRadius || null };
-		const action: LayerChangesAction = {
-			type: 'layer',
-			layer: { id: layer.id, type: layer.type },
-			undo,
-			redo,
+		const action: HistoryAction = {
+			type: 'layersGroup',
+			actions: initial.map((layerWithState) => {
+				const { state, ...layer } = layerWithState;
+				const undo = { cornerRadius: layer.cornerRadius };
+				const redo = { cornerRadius: value || null };
+				Object.assign(state, redo);
+				return {
+					type: 'layer',
+					slideId: editor.activeSlide.id,
+					layer: { id: layer.id, type: layer.type },
+					undo,
+					redo,
+				};
+			}),
 		};
 		if (debounce) {
 			debouncedHistoryPush(action);
@@ -64,21 +81,23 @@
 		<div class="flex flex-col gap-2">
 			<div class="flex flex-col">
 				<div class="text-sm font-medium text-gray-500">Corner rounding</div>
-				<div class="flex gap-4">
-					<Slider
-						type="single"
-						value={layer.cornerRadius || 0}
-						{min}
-						{max}
-						step={1}
-						onValueChange={(value) => setCornerRadius(value, true)}
-					/>
-					<input
-						class="border-input m-0 h-10 w-10 rounded-md bg-transparent p-0 pb-1 text-center text-sm font-semibold leading-none focus:ring-0 [&::-webkit-inner-spin-button]:appearance-none"
+				<div class="flex items-center gap-2">
+					<div class="grow">
+						<Slider
+							type="single"
+							value={cornerRadius || 0}
+							{min}
+							{max}
+							step={1}
+							onValueChange={(value) => setCornerRadius(value, true)}
+						/>
+					</div>
+					<Input
+						class="w-10 bg-transparent p-0 text-center font-semibold leading-none [&::-webkit-inner-spin-button]:appearance-none"
 						type="text"
 						inputmode="decimal"
 						placeholder="--"
-						value={layer.cornerRadius || 0}
+						value={cornerRadius}
 						onchange={(e) => setCornerRadius(e.target.value)}
 					/>
 				</div>

package/dist/components/presentation-editor/layers/buttons/corner-radius-button/corner-radius-button.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { ImageLayer } from '../../../types.js';
 interface Props {
-    layer: ImageLayer;
+    layers: ImageLayer[];
 }
-declare const CornerRadiusButton: import("svelte").Component<Props, {}, "layer">;
+declare const CornerRadiusButton: import("svelte").Component<Props, {}, "layers">;
 type CornerRadiusButton = ReturnType<typeof CornerRadiusButton>;
 export default CornerRadiusButton;

package/dist/components/presentation-editor/layers/buttons/flip-button/flip-button.svelte

@@ -1,24 +1,47 @@
 <script lang="ts">
 	import FlipHorizontalIcon from 'lucide-svelte/icons/flip-horizontal';
 	import FlipVerticalIcon from 'lucide-svelte/icons/flip-vertical';
-	import type { ImageLayer } from '../../../types.js';
+	import type { ImageLayer, BackgroundImage } from '../../../types.js';
 	import { getPresentationEditorContext } from '../../../presentation-editor.svelte.js';
 	import * as DropdownMenu from '../../../../ui/dropdown-menu/index.js';
 	import { buttonVariants } from '../../../../ui/button/index.js';
 
 	interface Props {
-		layer: ImageLayer;
+		layers: ImageLayer[] | BackgroundImage;
 	}
 
-	let { layer = $bindable() }: Props = $props();
+	let { layers = $bindable() }: Props = $props();
 
 	const editor = getPresentationEditorContext();
 
 	const flipToggle = (isHorizontal?: boolean) => () => {
-		const undo = isHorizontal ? { flipY: layer.flipY } : { flipX: layer.flipX };
-		const redo = isHorizontal ? { flipY: !layer.flipY } : { flipX: !layer.flipX };
-		Object.assign(layer, redo);
-		editor.historyPush({ type: 'layer', layer: { id: layer.id, type: layer.type }, undo, redo });
+		if (Array.isArray(layers)) {
+			editor.historyPush({
+				type: 'layersGroup',
+				actions: layers.map((layer) => {
+					const undo = isHorizontal ? { flipY: layer.flipY } : { flipX: layer.flipX };
+					const redo = isHorizontal ? { flipY: !layer.flipY } : { flipX: !layer.flipX };
+					Object.assign(layer, redo);
+					return {
+						type: 'layer',
+						slideId: editor.activeSlide.id,
+						layer: { id: layer.id, type: layer.type },
+						undo,
+						redo,
+					};
+				}),
+			});
+		} else {
+			const undo = isHorizontal ? { flipY: layers.flipY } : { flipX: layers.flipX };
+			const redo = isHorizontal ? { flipY: !layers.flipY } : { flipX: !layers.flipX };
+			Object.assign(layers, redo);
+			editor.historyPush({
+				type: 'backgroundImage',
+				slideId: editor.activeSlide.id,
+				undo,
+				redo,
+			});
+		}
 	};
 </script>
 

package/dist/components/presentation-editor/layers/buttons/flip-button/flip-button.svelte.d.ts

@@ -1,7 +1,7 @@
-import type { ImageLayer } from '../../../types.js';
+import type { ImageLayer, BackgroundImage } from '../../../types.js';
 interface Props {
-    layer: ImageLayer;
+    layers: ImageLayer[] | BackgroundImage;
 }
-declare const FlipButton: import("svelte").Component<Props, {}, "layer">;
+declare const FlipButton: import("svelte").Component<Props, {}, "layers">;
 type FlipButton = ReturnType<typeof FlipButton>;
 export default FlipButton;

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

@@ -1,48 +1,90 @@
 <script lang="ts">
 	import OpacityIcon from 'svelte-radix/TransparencyGrid.svelte';
-	import type { Layer, LayerChangesAction } from '../../../types.js';
+	import type {
+		Layer,
+		BackgroundImage,
+		HistoryAction,
+	} from '../../../types.js';
 	import { getPresentationEditorContext } from '../../../presentation-editor.svelte.js';
 	import * as Popover from '../../../../ui/popover/index.js';
 	import { Button } from '../../../../ui/button/index.js';
 	import { Slider } from '../../../../ui/slider/index.js';
+	import { Input } from '../../../../ui/input/index.js';
 	import { createDebouncedCallback } from '../../../../../utils.js';
 
 	interface Props {
-		layer: Layer;
+		layers: Layer[] | BackgroundImage;
 	}
 
-	let { layer = $bindable() }: Props = $props();
+	let { layers = $bindable() }: Props = $props();
 
 	const editor = getPresentationEditorContext();
 
 	let undo: { opacity: number | null } | null = null;
-	const debouncedHistoryPush = createDebouncedCallback((action: LayerChangesAction) => {
+	let initial: (Layer & { state: Layer })[] | BackgroundImage | null = null;
+	const debouncedHistoryPush = createDebouncedCallback((action: HistoryAction) => {
 		editor.historyPush(action);
-		undo = null;
+		initial = null;
 	}, 500);
 
-	let trasparency = $derived(parseFloat((100 - (layer.opacity ?? 1) * 100).toFixed(2)));
+	const getOpacity = (layer: Layer | BackgroundImage) =>
+		parseFloat((100 - (layer.opacity ?? 1) * 100).toFixed(2));
+
+	const trasparency = $derived.by(() => {
+		if (!Array.isArray(layers)) return getOpacity(layers);
+		if (!layers.length) return;
+
+		const firstLayerOpacity = getOpacity(layers[0]);
+		const allSame = layers.every((layer) => getOpacity(layer) === firstLayerOpacity);
+
+		return allSame ? firstLayerOpacity : undefined;
+	});
 
 	let min = 0;
 	let max = 100;
 	const setTransparency = (value: string | number, debounce = false) => {
-		let transparency = Number(value);
-		if (transparency > max) {
-			transparency = max;
-		} else if (!(transparency >= min || transparency <= max)) {
-			transparency = min;
+		value = Number(value);
+		if (value > max) {
+			value = max;
+		} else if (!(value >= min || value <= max)) {
+			value = min;
+		}
+		const opacity = value ? (100 - value) / 100 : null;
+
+		if (!initial) {
+			initial = Array.isArray(layers)
+				? layers.map((layer) => ({ ...layer, state: layer }))
+				: { ...layers };
 		}
-		if (!undo) {
-			undo = { opacity: layer.opacity };
+
+		let action: HistoryAction;
+		const redo = { opacity };
+		if (Array.isArray(initial)) {
+			action = {
+				type: 'layersGroup',
+				actions: initial.map((layerWithState) => {
+					const { state, ...layer } = layerWithState;
+					const undo = { opacity: layer.opacity };
+					Object.assign(state, redo);
+					return {
+						type: 'layer',
+						slideId: editor.activeSlide.id,
+						layer: { id: layer.id, type: layer.type },
+						undo,
+						redo,
+					};
+				}),
+			};
+		} else {
+			Object.assign(layers, redo);
+			action = {
+				type: 'backgroundImage',
+				slideId: editor.activeSlide.id,
+				undo: { opacity: initial.opacity },
+				redo,
+			};
 		}
-		const redo = { opacity: transparency ? (100 - transparency) / 100 : null };
-		Object.assign(layer, redo);
-		const action: LayerChangesAction = {
-			type: 'layer',
-			layer: { id: layer.id, type: layer.type },
-			undo,
-			redo,
-		};
+
 		if (debounce) {
 			debouncedHistoryPush(action);
 		} else {
@@ -69,18 +111,19 @@
 		<div class="flex flex-col gap-2">
 			<div class="flex flex-col">
 				<div class="text-sm font-medium text-gray-500">Transparency</div>
-				<div class="flex gap-4">
-					<Slider
-						type="single"
-						value={trasparency}
-						{min}
-						{max}
-						step={1}
-						onValueChange={(value) => setTransparency(value, true)}
-					/>
-					<input
-						class="border-input m-0 h-10 w-10 rounded-md bg-transparent p-0 pb-1 text-center text-sm font-semibold leading-none focus:ring-0 [&::-webkit-inner-spin-button]:appearance-none"
-						type="text"
+				<div class="flex items-center gap-2">
+					<div class="grow">
+						<Slider
+							type="single"
+							value={trasparency || 0}
+							{min}
+							{max}
+							step={1}
+							onValueChange={(value) => setTransparency(value, true)}
+						/>
+					</div>
+					<Input
+						class="w-10 bg-transparent p-0 text-center font-semibold leading-none [&::-webkit-inner-spin-button]:appearance-none"
 						inputmode="decimal"
 						placeholder="--"
 						value={trasparency}

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

@@ -1,7 +1,7 @@
-import type { Layer } from '../../../types.js';
+import type { Layer, BackgroundImage } from '../../../types.js';
 interface Props {
-    layer: Layer;
+    layers: Layer[] | BackgroundImage;
 }
-declare const OpacityButton: import("svelte").Component<Props, {}, "layer">;
+declare const OpacityButton: import("svelte").Component<Props, {}, "layers">;
 type OpacityButton = ReturnType<typeof OpacityButton>;
 export default OpacityButton;

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

@@ -1,6 +1,5 @@
 <script lang="ts" module>
 	import { tv, type VariantProps } from 'tailwind-variants';
-	import type { Layer } from '../../../types.js';
 
 	const cornerScaleControlVariants = tv({
 		slots: {
@@ -34,100 +33,125 @@
 		},
 	});
 
-	type Origin = VariantProps<typeof cornerScaleControlVariants>['origin'];
+	type Variants = VariantProps<typeof cornerScaleControlVariants>;
 
-	interface Props {
-		origin: NonNullable<Origin>;
-		layer: Layer;
-	}
+	interface Props extends Omit<Variants, 'origin'>, Required<Pick<Variants, 'origin'>> {}
 </script>
 
 <script lang="ts">
 	import { cn } from '../../../../../utils.js';
-	import { calculateNewPosition } from '../../utils.js';
+	import {
+		calculateGroupRotatedBoundingBox,
+		calculateLayerTransform,
+		calculateNewPosition,
+		type Transform,
+	} from '../../utils.js';
 	import { getPresentationEditorContext } from '../../../presentation-editor.svelte.js';
+	import type { Layer } from '../../../types.js';
+
+	let { origin }: Props = $props();
 
-	let { origin, layer = $bindable() }: Props = $props();
+	const type = `${origin}-origin-scale`;
 
 	const editor = getPresentationEditorContext();
 
-	let isChanged = false;
+	let initial: {
+		clientX: number;
+		clientY: number;
+		bbox: Transform;
+		layers: (Layer & { state: Layer })[];
+	} | null = null;
+	const actionId = editor.generateId();
+	let scaleFactor = 1;
 
 	const { base, handler, cursor } = cornerScaleControlVariants({ origin });
 
 	const onMouseDown = (e: MouseEvent) => {
+		if (e.button !== 0) return;
 		e.preventDefault();
 		e.stopPropagation();
-		console.log('scale', 'mousedown', layer.id);
-		isChanged = false;
-		editor.activeAction = {
-			type: `${origin}-origin-scale`,
-			cursor: cursor(),
+		console.log(type, 'mousedown', e);
+
+		scaleFactor = 1;
+		initial = {
 			clientX: e.clientX,
 			clientY: e.clientY,
-			layer: { ...layer },
+			bbox:
+				editor.activeLayers.length === 1
+					? calculateLayerTransform(editor.activeLayers[0])
+					: calculateGroupRotatedBoundingBox(
+							editor.activeLayers.map(calculateLayerTransform),
+							editor.activeGroupRotate,
+						),
+			layers: editor.activeLayers.map((layer) => ({ ...layer, state: layer })),
 		};
+		editor.activeAction = { id: actionId, type, cursor: cursor() };
 		addEventListener('mousemove', onMouseMove);
 		addEventListener('mouseup', onMouseUp);
 	};
 
-	const onMouseUp = () => {
-		console.log('scale', 'mouseup', layer.id);
-		if (isChanged && editor.activeAction) {
-			if (editor.checkIfLayerInBounds(layer)) {
-				editor.historyPush({
-					type: 'layer',
-					layer: { id: layer.id, type: layer.type },
-					undo: {
-						scale: editor.activeAction.layer.scale,
-						x: editor.activeAction.layer.x,
-						y: editor.activeAction.layer.y,
-					},
-					redo: { scale: layer.scale, x: layer.x, y: layer.y },
-				});
-			}
-		}
-		editor.activeAction = null;
+	const onMouseUp = (e: MouseEvent) => {
+		console.log(type, 'mouseup', e);
 		removeEventListener('mousemove', onMouseMove);
 		removeEventListener('mouseup', onMouseUp);
+
+		if (editor.activeAction?.id !== actionId) return;
+		editor.activeAction = null;
+		if (!initial || scaleFactor === 1) return;
+
+		editor.historyPush({
+			type: 'layersGroup',
+			actions: initial.layers.map((layer) => {
+				if (editor.isLayerOutOfBounds(layer.state)) {
+					return {
+						type: 'layersRemove',
+						slideId: editor.activeSlide.id,
+						layers: [layer],
+					};
+				} else {
+					return {
+						type: 'layer',
+						slideId: editor.activeSlide.id,
+						layer: { id: layer.id, type: layer.type },
+						undo: { x: layer.x, y: layer.y, scale: layer.scale },
+						redo: { x: layer.state.x, y: layer.state.y, scale: layer.state.scale },
+					};
+				}
+			}),
+		});
 	};
 
 	const onMouseMove = (e: MouseEvent) => {
-		if (!editor.activeAction) return;
+		if (!initial || editor.activeAction?.id !== actionId) return;
 
-		isChanged = true;
-		const { clientX, clientY } = editor.activeAction;
-		const { width, height, x, y } = editor.activeAction.layer;
-		const scale = editor.activeAction.layer.scale || 1;
-		const rotate = editor.activeAction.layer.rotate || 0;
+		const { width, height, x, y, rotate } = initial.bbox;
 		const angle = (rotate * Math.PI) / 180;
-		const xDiff = (e.clientX - clientX) / editor.zoom;
-		const yDiff = (e.clientY - clientY) / editor.zoom;
+		const xDiff = (e.clientX - initial.clientX) / editor.zoom;
+		const yDiff = (e.clientY - initial.clientY) / editor.zoom;
 		const adjustedXDiff = xDiff * Math.cos(angle) + yDiff * Math.sin(angle);
 		const adjustedYDiff = -xDiff * Math.sin(angle) + yDiff * Math.cos(angle);
 
-		// Calculate the initial width and height of the layer, adjusted for scale
-		const initialWidth = width * scale;
-		const initialHeight = height * scale;
-
 		// Define the new x2 and y2 coordinates based on the variant (corner being dragged)
 		const originCoordinates = {
 			'bottom-right': {
-				x2: x + initialWidth - adjustedXDiff,
-				y2: y + initialHeight - adjustedYDiff,
+				x2: x + width - adjustedXDiff,
+				y2: y + height - adjustedYDiff,
 			},
 			'bottom-left': {
-				x2: x + initialWidth + adjustedXDiff,
-				y2: y + initialHeight - adjustedYDiff,
+				x2: x + width + adjustedXDiff,
+				y2: y + height - adjustedYDiff,
+			},
+			'top-right': {
+				x2: x + width - adjustedXDiff,
+				y2: y + height + adjustedYDiff,
 			},
-			'top-right': { x2: x + initialWidth - adjustedXDiff, y2: y + initialHeight + adjustedYDiff },
-			'top-left': { x2: x + initialWidth + adjustedXDiff, y2: y + initialHeight + adjustedYDiff },
+			'top-left': { x2: x + width + adjustedXDiff, y2: y + height + adjustedYDiff },
 		};
 
 		const { x2, y2 } = originCoordinates[origin];
 
 		// Calculate the slope of the rectangle
-		const slope = initialHeight / initialWidth;
+		const slope = height / width;
 
 		// Calculate the x-coordinate of the intersection point
 		const xIntersect = (y2 + x2 / slope - y + x * slope) / (slope + 1 / slope);
@@ -145,18 +169,24 @@
 			newHeight = 10;
 		}
 
-		const scaleFactor = Math.max(newWidth / initialWidth, newHeight / initialHeight);
+		scaleFactor = Math.max(newWidth / width, newHeight / height);
 
 		if (scaleFactor > 0) {
-			const newScale = scale * scaleFactor;
 			const { newX, newY } = calculateNewPosition(
 				origin,
-				{ x, y, width: initialWidth, height: initialHeight, rotate },
-				width * newScale,
-				height * newScale,
+				{ x, y, width, height, rotate },
+				width * scaleFactor,
+				height * scaleFactor,
 			);
-			const newProps = { scale: newScale, x: newX, y: newY };
-			Object.assign(layer, newProps);
+			initial.layers.forEach((layer) => {
+				const scale = layer.scale || 1;
+				const newProps = {
+					scale: scale * scaleFactor,
+					x: newX + (layer.x - x) * scaleFactor,
+					y: newY + (layer.y - y) * scaleFactor,
+				};
+				Object.assign(layer.state, newProps);
+			});
 		}
 
 		if (editor.activeAction) {
@@ -173,7 +203,7 @@
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div class={cn(handler(), cursor())} onmousedown={onMouseDown}></div>
 	<div
-		class="h-3 w-3 rounded-full bg-white transition-colors group-hover:bg-purple-500 group-active:bg-purple-500"
+		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>