@peteai/presentation-editor 0.0.6 → 0.0.8

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

@@ -1,11 +1,7 @@
 <script lang="ts">
 	import OpacityIcon from 'svelte-radix/TransparencyGrid.svelte';
-	import type {
-		Layer,
-		BackgroundImage,
-		HistoryAction,
-	} from '../../../types.js';
-	import { getPresentationEditorContext } from '../../../presentation-editor.svelte.js';
+	import type { Layer, BackgroundImage, HistoryAction } from '../../../types.js';
+	import { getEditorContext } from '../../../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';
@@ -18,17 +14,16 @@
 
 	let { layers = $bindable() }: Props = $props();
 
-	const editor = getPresentationEditorContext();
+	const editor = getEditorContext();
 
-	let undo: { opacity: number | null } | null = null;
 	let initial: (Layer & { state: Layer })[] | BackgroundImage | null = null;
-	const debouncedHistoryPush = createDebouncedCallback((action: HistoryAction) => {
-		editor.historyPush(action);
+	const debouncedHistoryPush = createDebouncedCallback((actions: HistoryAction[]) => {
+		editor.historyPush(actions);
 		initial = null;
 	}, 500);
 
 	const getOpacity = (layer: Layer | BackgroundImage) =>
-		parseFloat((100 - (layer.opacity ?? 1) * 100).toFixed(2));
+		parseFloat((100 - layer.opacity * 100).toFixed(2));
 
 	const trasparency = $derived.by(() => {
 		if (!Array.isArray(layers)) return getOpacity(layers);
@@ -49,54 +44,48 @@
 		} else if (!(value >= min || value <= max)) {
 			value = min;
 		}
-		const opacity = value ? (100 - value) / 100 : null;
+		const opacity = (100 - value) / 100;
 
 		if (!initial) {
 			initial = Array.isArray(layers)
 				? layers.map((layer) => ({ ...layer, state: layer }))
-				: { ...layers };
+				: $state.snapshot(layers);
 		}
 
-		let action: HistoryAction;
+		let actions: 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,
-					};
-				}),
-			};
+			actions = initial.map((layerWithState) => {
+				const { state, ...layer } = layerWithState;
+				const undo = { opacity: layer.opacity };
+				Object.assign(state, redo);
+				return {
+					type: 'layerUpdate',
+					pageId: editor.activePage.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,
-			};
+			actions = [
+				{
+					type: 'backgroundImageUpdate',
+					pageId: editor.activePage.id,
+					undo: { opacity: initial.opacity },
+					redo,
+				},
+			];
 		}
 
 		if (debounce) {
-			debouncedHistoryPush(action);
+			debouncedHistoryPush(actions);
 		} else {
-			editor.historyPush(action);
-			undo = null;
+			editor.historyPush(actions);
+			initial = null;
 		}
 	};
-
-	const onChange = (e: Event) => {
-		const target = e.target as HTMLInputElement;
-		setTransparency(target.value);
-	};
 </script>
 
 <Popover.Root>
@@ -127,7 +116,7 @@
 						inputmode="decimal"
 						placeholder="--"
 						value={trasparency}
-						onchange={onChange}
+						onchange={(e) => setTransparency(e.currentTarget.value)}
 					/>
 				</div>
 			</div>

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

@@ -42,18 +42,17 @@
 	import { cn } from '../../../../../utils.js';
 	import {
 		calculateGroupRotatedBoundingBox,
-		calculateLayerTransform,
 		calculateNewPosition,
 		type Transform,
 	} from '../../utils.js';
-	import { getPresentationEditorContext } from '../../../presentation-editor.svelte.js';
+	import { getEditorContext } from '../../../editor.svelte.js';
 	import type { Layer } from '../../../types.js';
 
 	let { origin }: Props = $props();
 
 	const type = `${origin}-origin-scale`;
 
-	const editor = getPresentationEditorContext();
+	const editor = getEditorContext();
 
 	let initial: {
 		clientX: number;
@@ -76,13 +75,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() };
@@ -99,32 +96,31 @@
 		editor.activeAction = null;
 		if (!initial || scaleFactor === 1) 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, scale: layer.scale },
 						redo: { x: layer.state.x, y: layer.state.y, scale: layer.state.scale },
 					};
 				}
 			}),
-		});
+		);
 	};
 
 	const onMouseMove = (e: MouseEvent) => {
 		if (!initial || editor.activeAction?.id !== actionId) return;
 
-		const { width, height, x, y, rotate } = initial.bbox;
+		const { width, height, x, y, rotate, scale } = initial.bbox;
 		const angle = (rotate * Math.PI) / 180;
 		const xDiff = (e.clientX - initial.clientX) / editor.zoom;
 		const yDiff = (e.clientY - initial.clientY) / editor.zoom;
@@ -134,18 +130,18 @@
 		// Define the new x2 and y2 coordinates based on the variant (corner being dragged)
 		const originCoordinates = {
 			'bottom-right': {
-				x2: x + width - adjustedXDiff,
-				y2: y + height - adjustedYDiff,
+				x2: x + width * scale - adjustedXDiff,
+				y2: y + height * scale - adjustedYDiff,
 			},
 			'bottom-left': {
-				x2: x + width + adjustedXDiff,
-				y2: y + height - adjustedYDiff,
+				x2: x + width * scale + adjustedXDiff,
+				y2: y + height * scale - adjustedYDiff,
 			},
 			'top-right': {
-				x2: x + width - adjustedXDiff,
-				y2: y + height + adjustedYDiff,
+				x2: x + width * scale - adjustedXDiff,
+				y2: y + height * scale + adjustedYDiff,
 			},
-			'top-left': { x2: x + width + adjustedXDiff, y2: y + height + adjustedYDiff },
+			'top-left': { x2: x + width * scale + adjustedXDiff, y2: y + height * scale + adjustedYDiff },
 		};
 
 		const { x2, y2 } = originCoordinates[origin];
@@ -169,19 +165,18 @@
 			newHeight = 10;
 		}
 
-		scaleFactor = Math.max(newWidth / width, newHeight / height);
+		scaleFactor = Math.max(newWidth / (width * scale), newHeight / (height * scale));
 
 		if (scaleFactor > 0) {
 			const { newX, newY } = calculateNewPosition(
 				origin,
-				{ x, y, width, height, rotate },
-				width * scaleFactor,
-				height * scaleFactor,
+				initial.bbox,
+				width * scale * scaleFactor,
+				height * scale * scaleFactor,
 			);
 			initial.layers.forEach((layer) => {
-				const scale = layer.scale || 1;
 				const newProps = {
-					scale: scale * scaleFactor,
+					scale: layer.scale * scaleFactor,
 					x: newX + (layer.x - x) * scaleFactor,
 					y: newY + (layer.y - y) * scaleFactor,
 				};

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

@@ -0,0 +1,418 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from 'tailwind-variants';
+
+	const sideResizeControlVariants = tv({
+		slots: {
+			base: 'group absolute flex flex-col items-center justify-center pointer-events-none',
+			handler: 'absolute pointer-events-auto',
+			grip: 'rounded-sm bg-white group-active:bg-primary group-hover:bg-primary transition-colors',
+			cursor: '',
+		},
+		variants: {
+			origin: {
+				right: {
+					base: '-left-4 w-8 h-full',
+					handler: '-translate-x-2 w-4 h-full',
+					grip: 'w-1.5 h-4',
+					cursor: 'cursor-ew-resize',
+				},
+				left: {
+					base: '-right-4 w-8 h-full',
+					handler: 'translate-x-2 w-4 h-full',
+					grip: 'w-1.5 h-4',
+					cursor: 'cursor-ew-resize',
+				},
+				top: {
+					base: '-bottom-4 w-full h-8',
+					handler: 'translate-y-2 w-full h-4',
+					grip: 'w-4 h-1.5',
+					cursor: 'cursor-ns-resize',
+				},
+				bottom: {
+					base: '-top-4 w-full h-8',
+					handler: '-translate-y-2 w-full h-4',
+					grip: 'w-4 h-1.5',
+					cursor: 'cursor-ns-resize',
+				},
+			},
+		},
+	});
+
+	type Variants = VariantProps<typeof sideResizeControlVariants>;
+
+	interface Props extends Omit<Variants, 'origin'>, Required<Pick<Variants, 'origin'>> {}
+</script>
+
+<script lang="ts">
+	import { tick } from 'svelte';
+	import type { HistoryAction, Layer, LayerUpdateAction } from '../../../types.js';
+	import { getEditorContext } from '../../../editor.svelte.js';
+	import { cn } from '../../../../../utils.js';
+	import {
+		calculateGroupRotatedBoundingBox,
+		calculateNewPosition,
+		calculateNewSize,
+		calculateRelativeRects,
+		degToRad,
+		getRotatedBoundingBox,
+		rotatePoint,
+		type Transform,
+	} from '../../utils.js';
+
+	let { origin }: Props = $props();
+
+	const type = `${origin}-origin-resize`;
+
+	const editor = getEditorContext();
+
+	const { base, handler, grip, cursor } = sideResizeControlVariants({ origin });
+
+	type LayerState = {
+		[K in Layer as K['type']]: {
+			type: K['type'];
+			layer: K;
+			state: K;
+		};
+	}[Layer['type']];
+
+	type LayerStateWithoutGroup = Exclude<LayerState, { type: 'group' }>;
+
+	type Initial = {
+		clientX: number;
+		clientY: number;
+		bbox: Transform;
+		layers: LayerState[];
+	};
+
+	let initial: Initial | null = null;
+	let isChanged = false;
+	const actionId = editor.generateId();
+
+	const onMouseDown = (e: MouseEvent) => {
+		if (e.button !== 0) return;
+		e.preventDefault();
+		e.stopPropagation();
+		console.log(type, 'mousedown', e);
+
+		isChanged = false;
+
+		const createLayerState = (layer: Layer): LayerState =>
+			({
+				type: layer.type,
+				layer: $state.snapshot(layer),
+				state: layer,
+			}) as LayerState;
+
+		initial = {
+			clientX: e.clientX,
+			clientY: e.clientY,
+			bbox: $state.snapshot(
+				editor.activeLayers.length === 1
+					? editor.activeLayers[0]
+					: calculateGroupRotatedBoundingBox(editor.activeLayers, editor.activeGroupRotate),
+			),
+			layers: editor.activeLayers
+				.flatMap((l) =>
+					l.type === 'group' ? [l, ...editor.findGroupChildren(editor.activePage, l.id)] : l,
+				)
+				.map(createLayerState),
+		};
+		editor.activeAction = { id: actionId, type, cursor: cursor() };
+		addEventListener('mousemove', onMouseMove);
+		addEventListener('mouseup', onMouseUp);
+	};
+
+	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 || !isChanged) return;
+
+		const buildLayerUpdateActionDiff = (
+			layer: Layer,
+		): LayerUpdateAction['undo'] | LayerUpdateAction['redo'] => ({
+			x: layer.x,
+			y: layer.y,
+			width: layer.width,
+			height: layer.height,
+			...(layer.type === 'image' && {
+				scale: layer.scale,
+				offsetX: layer.offsetX,
+				offsetY: layer.offsetY,
+			}),
+		});
+
+		const { layers } = initial;
+
+		editor.historyPush(
+			layers
+				.filter((l) => l.layer.type === 'group' || !l.layer.groupId)
+				.flatMap((layerState): HistoryAction | HistoryAction[] => {
+					if (editor.isLayerOutOfBounds(layerState.state)) {
+						return {
+							type: 'layerRemove',
+							pageId: editor.activePage.id,
+							layer: layerState.layer,
+						};
+					} else {
+						if (layerState.type === 'group') {
+							return [
+								{
+									type: 'layerUpdate',
+									pageId: editor.activePage.id,
+									layer: { id: layerState.layer.id, type: layerState.layer.type },
+									undo: buildLayerUpdateActionDiff(layerState.layer),
+									redo: buildLayerUpdateActionDiff(layerState.state),
+								},
+								...layers
+									.filter((l) => l.type !== 'group')
+									.filter((l) => l.layer.groupId === layerState.layer.id)
+									.map(({ layer, state }): LayerUpdateAction => {
+										return {
+											type: 'layerUpdate',
+											pageId: editor.activePage.id,
+											layer: { id: layer.id, type: layer.type },
+											undo: buildLayerUpdateActionDiff(layer),
+											redo: buildLayerUpdateActionDiff(state),
+										};
+									}),
+							];
+						}
+						return {
+							type: 'layerUpdate',
+							pageId: editor.activePage.id,
+							layer: { id: layerState.layer.id, type: layerState.layer.type },
+							undo: buildLayerUpdateActionDiff(layerState.layer),
+							redo: buildLayerUpdateActionDiff(layerState.state),
+						};
+					}
+				}),
+		);
+	};
+
+	const onMouseMove = async (e: MouseEvent) => {
+		if (!initial || editor.activeAction?.id !== actionId) return;
+
+		const { clientX, clientY, bbox, layers } = initial;
+		const groupAngle = degToRad(bbox.rotate);
+		const xDiff = (e.clientX - clientX) / editor.zoom;
+		const yDiff = (e.clientY - clientY) / editor.zoom;
+		const adjustedXDiff = xDiff * Math.cos(groupAngle) + yDiff * Math.sin(groupAngle);
+		const adjustedYDiff = -xDiff * Math.sin(groupAngle) + yDiff * Math.cos(groupAngle);
+
+		const groupAbsWidth = bbox.width * bbox.scale;
+		const groupAbsHeight = bbox.height * bbox.scale;
+		let groupNewWidth = bbox.width * bbox.scale;
+		let groupNewHeight = groupAbsHeight;
+		const minSize = 10;
+		if (origin === 'left') {
+			groupNewWidth = Math.max(groupAbsWidth + adjustedXDiff, minSize);
+		} else if (origin === 'top') {
+			groupNewHeight = Math.max(groupAbsHeight + adjustedYDiff, minSize);
+		} else if (origin === 'right') {
+			groupNewWidth = Math.max(groupAbsWidth - adjustedXDiff, minSize);
+		} else if (origin === 'bottom') {
+			groupNewHeight = Math.max(groupAbsHeight - adjustedYDiff, minSize);
+		}
+
+		isChanged = groupNewWidth !== groupAbsWidth || groupNewHeight !== groupAbsHeight;
+
+		const { newX: groupNewX, newY: groupNewY } = calculateNewPosition(
+			origin,
+			bbox,
+			groupNewWidth,
+			groupNewHeight,
+		);
+
+		const widthScale = groupNewWidth / groupAbsWidth;
+		const heightScale = groupNewHeight / groupAbsHeight;
+
+		const groupCenter = {
+			x: bbox.x + groupAbsWidth / 2,
+			y: bbox.y + groupAbsHeight / 2,
+		};
+		const groupNewCenter = { x: groupNewX + groupNewWidth / 2, y: groupNewY + groupNewHeight / 2 };
+		// calculate rotated points relative to new group center
+		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(-groupAngle, center, groupNewCenter);
+			const newCenterRotated = {
+				x: groupNewCenter.x + (centerRotated.x - groupCenterRotated.x) * widthScale,
+				y: groupNewCenter.y + (centerRotated.y - groupCenterRotated.y) * heightScale,
+			};
+
+			// rotate relative to the bbox
+			const rotateRelative = rotate - bbox.rotate;
+
+			const isHorizontal = origin === 'left' || origin === 'right';
+			const bboxScale = isHorizontal ? widthScale : heightScale;
+			const newSize = calculateNewSize(width, height, rotateRelative, bboxScale, isHorizontal);
+
+			let newWidth = newSize.width * scale;
+			let newHeight = newSize.height * scale;
+			let newScale = scale;
+
+			if (layer.type === 'text') {
+				if (newSize.scaled === 'height') {
+					newHeight = height * scale;
+				} else {
+					Object.assign(state, {
+						width: newWidth / scale,
+					});
+					await tick();
+
+					const layerContent = document.getElementById(`layer-content-${layer.id}`);
+					if (layerContent) {
+						newHeight = layerContent.offsetHeight * scale;
+					}
+				}
+			}
+
+			if (newWidth < minSize) {
+				newWidth = minSize;
+			}
+			if (newHeight < minSize) {
+				newHeight = minSize;
+			}
+
+			const bboxRotated = getRotatedBoundingBox(centerRotated, newWidth, newHeight, rotateRelative);
+
+			if (origin === 'left' || origin === 'right') {
+				const minX = groupNewX + bboxRotated.width / 2;
+				const maxX = groupNewX + groupNewWidth - bboxRotated.width / 2;
+				newCenterRotated.x =
+					origin === 'left'
+						? Math.max(Math.min(newCenterRotated.x, maxX), minX)
+						: Math.min(Math.max(newCenterRotated.x, minX), maxX);
+			} else {
+				const minY = groupNewY + bboxRotated.height / 2;
+				const maxY = groupNewY + groupNewHeight - bboxRotated.height / 2;
+				newCenterRotated.y =
+					origin === 'top'
+						? Math.max(Math.min(newCenterRotated.y, maxY), minY)
+						: Math.min(Math.max(newCenterRotated.y, minY), maxY);
+			}
+
+			let newCenter = rotatePoint(degToRad(bbox.rotate), newCenterRotated, groupNewCenter);
+
+			if (layer.type === 'image') {
+				const { offsetX, offsetY, image } = layer;
+
+				let newOffsetX = layer.offsetX;
+				let newOffsetY = offsetY;
+
+				if (newSize.scaled === '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;
+					} else {
+						newOffsetX += (newWidth / newScale - width) / 2;
+					}
+				} else {
+					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;
+					} else {
+						newOffsetY += (newHeight / newScale - height) / 2;
+					}
+				}
+
+				return {
+					x: newCenter.x - newWidth / 2,
+					y: newCenter.y - newHeight / 2,
+					width: newWidth / newScale,
+					height: newHeight / newScale,
+					scale: newScale,
+					offsetX: newOffsetX,
+					offsetY: newOffsetY,
+				};
+			} else {
+				return {
+					x: newCenter.x - newWidth / 2,
+					y: newCenter.y - newHeight / 2,
+					width: newWidth / newScale,
+					height: newHeight / newScale,
+					scale: newScale,
+				};
+			}
+		};
+
+		await Promise.all(
+			layers
+				.filter((l) => l.layer.type === 'group' || !l.layer.groupId)
+				.map(async (layerState) => {
+					if (layerState.type === 'group') {
+						const childrenState = layers
+							.filter((l) => l.type !== 'group')
+							.filter((l) => l.layer.groupId === layerState.layer.id);
+						const absoluteChildren = editor.getAbsoluteGroupLayers(
+							layerState.layer,
+							childrenState.map((l) => l.layer),
+						);
+						const diffs = await Promise.all(
+							childrenState.map(({ state }, i) =>
+								buildLayerDiffs({
+									type: state.type,
+									layer: absoluteChildren[i],
+									state,
+								} as LayerStateWithoutGroup),
+							),
+						);
+						absoluteChildren.forEach((absolute, i) => Object.assign(absolute, diffs[i]));
+						const groupScale = layerState.layer.scale;
+						const groupRotate = layerState.layer.rotate;
+						const newGroupBbox = calculateGroupRotatedBoundingBox(absoluteChildren, groupRotate);
+						Object.assign(layerState.state, {
+							x: newGroupBbox.x,
+							y: newGroupBbox.y,
+							width: newGroupBbox.width / groupScale,
+							height: newGroupBbox.height / groupScale,
+						});
+						const relativeLayers = calculateRelativeRects(newGroupBbox, absoluteChildren);
+						await Promise.all(
+							childrenState.map(({ state }, i) => {
+								const diff = diffs[i];
+								const relativeLayer = relativeLayers[i];
+								Object.assign(state, diff, {
+									x: relativeLayer.x / groupScale,
+									y: relativeLayer.y / groupScale,
+									scale: diff.scale / groupScale,
+								});
+							}),
+						);
+					} else {
+						const diffs = await buildLayerDiffs(layerState);
+						Object.assign(layerState.state, diffs);
+					}
+				}),
+		);
+
+		editor.activeAction.tooltip = {
+			x: e.clientX,
+			y: e.clientY,
+			text: `w: ${Math.round(groupNewWidth)} h: ${Math.round(groupNewHeight)}`,
+		};
+	};
+</script>
+
+<div class={base()}>
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div class={cn(handler(), cursor())} onmousedown={onMouseDown}></div>
+	<div
+		class={grip()}
+		style:box-shadow="0 0 4px 1px rgba(57,76,96,.15), 0 0 0 1px rgba(43,59,74,.3)"
+	></div>
+</div>