@peteai/presentation-editor 0.0.1

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

@@ -0,0 +1,179 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from 'tailwind-variants';
+	import type { Layer } from '../../../types.js';
+
+	const cornerScaleControlVariants = tv({
+		slots: {
+			base: 'group absolute w-8 h-8 flex items-center justify-center pointer-events-none',
+			handler: 'absolute w-4 h-4 pointer-events-auto',
+			cursor: '',
+		},
+		variants: {
+			origin: {
+				'bottom-right': {
+					base: '-top-4 -left-4',
+					handler: '-translate-x-0.5 -translate-y-0.5 rounded-tl-full',
+					cursor: 'cursor-nwse-resize',
+				},
+				'bottom-left': {
+					base: '-top-4 -right-4',
+					handler: 'translate-x-0.5 -translate-y-0.5 rounded-tr-full',
+					cursor: 'cursor-nesw-resize',
+				},
+				'top-right': {
+					base: '-bottom-4 -left-4',
+					handler: '-translate-x-0.5 translate-y-0.5 rounded-bl-full',
+					cursor: 'cursor-nesw-resize',
+				},
+				'top-left': {
+					base: '-bottom-4 -right-4',
+					handler: 'translate-x-0.5 translate-y-0.5 rounded-br-full',
+					cursor: 'cursor-nwse-resize',
+				},
+			},
+		},
+	});
+
+	type Origin = VariantProps<typeof cornerScaleControlVariants>['origin'];
+
+	interface Props {
+		origin: NonNullable<Origin>;
+		layer: Layer;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from '../../../../../utils.js';
+	import { calculateNewPosition } from '../../utils.js';
+	import { getPresentationEditorContext } from '../../../presentation-editor.svelte.js';
+
+	let { origin, layer = $bindable() }: Props = $props();
+
+	const editor = getPresentationEditorContext();
+
+	let isChanged = false;
+
+	const { base, handler, cursor } = cornerScaleControlVariants({ origin });
+
+	const onMouseDown = (e: MouseEvent) => {
+		e.preventDefault();
+		e.stopPropagation();
+		console.log('scale', 'mousedown', layer.id);
+		isChanged = false;
+		editor.activeAction = {
+			type: `${origin}-origin-scale`,
+			cursor: cursor(),
+			clientX: e.clientX,
+			clientY: e.clientY,
+			layer: { ...layer },
+		};
+		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;
+		removeEventListener('mousemove', onMouseMove);
+		removeEventListener('mouseup', onMouseUp);
+	};
+
+	const onMouseMove = (e: MouseEvent) => {
+		if (!editor.activeAction) 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 angle = (rotate * Math.PI) / 180;
+		const xDiff = (e.clientX - clientX) / editor.zoom;
+		const yDiff = (e.clientY - 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,
+			},
+			'bottom-left': {
+				x2: x + initialWidth + adjustedXDiff,
+				y2: y + initialHeight - adjustedYDiff,
+			},
+			'top-right': { x2: x + initialWidth - adjustedXDiff, y2: y + initialHeight + adjustedYDiff },
+			'top-left': { x2: x + initialWidth + adjustedXDiff, y2: y + initialHeight + adjustedYDiff },
+		};
+
+		const { x2, y2 } = originCoordinates[origin];
+
+		// Calculate the slope of the rectangle
+		const slope = initialHeight / initialWidth;
+
+		// Calculate the x-coordinate of the intersection point
+		const xIntersect = (y2 + x2 / slope - y + x * slope) / (slope + 1 / slope);
+
+		// Calculate the new width and height, ensuring they are at least 10 units
+		let newWidth = Math.max(xIntersect - x, 10);
+		let newHeight = Math.max(newWidth * slope, 10);
+
+		// Ensure the new dimensions are not less than 10 units
+		if (newHeight / slope < 10) {
+			newWidth = 10;
+		}
+
+		if (newWidth * slope < 10) {
+			newHeight = 10;
+		}
+
+		const scaleFactor = Math.max(newWidth / initialWidth, newHeight / initialHeight);
+
+		if (scaleFactor > 0) {
+			const newScale = scale * scaleFactor;
+			const { newX, newY } = calculateNewPosition(
+				origin,
+				{ x, y, width: initialWidth, height: initialHeight, rotate },
+				width * newScale,
+				height * newScale,
+			);
+			const newProps = { scale: newScale, x: newX, y: newY };
+			Object.assign(layer, newProps);
+		}
+
+		if (editor.activeAction) {
+			editor.activeAction.tooltip = {
+				x: e.clientX,
+				y: e.clientY,
+				text: `w: ${Math.round(newWidth)} h: ${Math.round(newHeight)}`,
+			};
+		}
+	};
+</script>
+
+<div class={base()}>
+	<!-- 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"
+		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/presentation-editor/layers/controls/corner-scale-control/corner-scale-control.svelte.d.ts

@@ -0,0 +1,184 @@
+import { type VariantProps } from 'tailwind-variants';
+import type { Layer } from '../../../types.js';
+declare const cornerScaleControlVariants: import("tailwind-variants").TVReturnType<{
+    origin: {
+        'bottom-right': {
+            base: string;
+            handler: string;
+            cursor: string;
+        };
+        'bottom-left': {
+            base: string;
+            handler: string;
+            cursor: string;
+        };
+        'top-right': {
+            base: string;
+            handler: string;
+            cursor: string;
+        };
+        'top-left': {
+            base: string;
+            handler: string;
+            cursor: string;
+        };
+    };
+}, {
+    base: string;
+    handler: string;
+    cursor: string;
+}, undefined, import("tailwind-variants/dist/config.js").TVConfig<{
+    origin: {
+        'bottom-right': {
+            base: string;
+            handler: string;
+            cursor: string;
+        };
+        'bottom-left': {
+            base: string;
+            handler: string;
+            cursor: string;
+        };
+        'top-right': {
+            base: string;
+            handler: string;
+            cursor: string;
+        };
+        'top-left': {
+            base: string;
+            handler: string;
+            cursor: string;
+        };
+    };
+}, {
+    origin: {
+        'bottom-right': {
+            base: string;
+            handler: string;
+            cursor: string;
+        };
+        'bottom-left': {
+            base: string;
+            handler: string;
+            cursor: string;
+        };
+        'top-right': {
+            base: string;
+            handler: string;
+            cursor: string;
+        };
+        'top-left': {
+            base: string;
+            handler: string;
+            cursor: string;
+        };
+    };
+}>, {
+    origin: {
+        'bottom-right': {
+            base: string;
+            handler: string;
+            cursor: string;
+        };
+        'bottom-left': {
+            base: string;
+            handler: string;
+            cursor: string;
+        };
+        'top-right': {
+            base: string;
+            handler: string;
+            cursor: string;
+        };
+        'top-left': {
+            base: string;
+            handler: string;
+            cursor: string;
+        };
+    };
+}, {
+    base: string;
+    handler: string;
+    cursor: string;
+}, import("tailwind-variants").TVReturnType<{
+    origin: {
+        'bottom-right': {
+            base: string;
+            handler: string;
+            cursor: string;
+        };
+        'bottom-left': {
+            base: string;
+            handler: string;
+            cursor: string;
+        };
+        'top-right': {
+            base: string;
+            handler: string;
+            cursor: string;
+        };
+        'top-left': {
+            base: string;
+            handler: string;
+            cursor: string;
+        };
+    };
+}, {
+    base: string;
+    handler: string;
+    cursor: string;
+}, undefined, import("tailwind-variants/dist/config.js").TVConfig<{
+    origin: {
+        'bottom-right': {
+            base: string;
+            handler: string;
+            cursor: string;
+        };
+        'bottom-left': {
+            base: string;
+            handler: string;
+            cursor: string;
+        };
+        'top-right': {
+            base: string;
+            handler: string;
+            cursor: string;
+        };
+        'top-left': {
+            base: string;
+            handler: string;
+            cursor: string;
+        };
+    };
+}, {
+    origin: {
+        'bottom-right': {
+            base: string;
+            handler: string;
+            cursor: string;
+        };
+        'bottom-left': {
+            base: string;
+            handler: string;
+            cursor: string;
+        };
+        'top-right': {
+            base: string;
+            handler: string;
+            cursor: string;
+        };
+        'top-left': {
+            base: string;
+            handler: string;
+            cursor: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;
+type Origin = VariantProps<typeof cornerScaleControlVariants>['origin'];
+interface Props {
+    origin: NonNullable<Origin>;
+    layer: Layer;
+}
+declare const CornerScaleControl: import("svelte").Component<Props, {}, "layer">;
+type CornerScaleControl = ReturnType<typeof CornerScaleControl>;
+export default CornerScaleControl;

package/dist/components/presentation-editor/layers/controls/corner-scale-control/index.d.ts

@@ -0,0 +1,2 @@
+import Root from './corner-scale-control.svelte';
+export { Root, Root as CornerScaleControl, };

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

@@ -0,0 +1,4 @@
+import Root from './corner-scale-control.svelte';
+export { Root, 
+//
+Root as CornerScaleControl, };

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

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

package/dist/components/presentation-editor/layers/controls/rotate-control/index.js

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

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

@@ -0,0 +1,105 @@
+<script lang="ts" module>
+	import type { Layer } from '../../../types.js';
+
+	interface Props {
+		layer: Layer;
+	}
+</script>
+
+<script lang="ts">
+	import RotateIcon from 'lucide-svelte/icons/refresh-cw';
+	import { getPresentationEditorContext } from '../../../presentation-editor.svelte.js';
+
+	let { layer = $bindable() }: Props = $props();
+
+	const editor = getPresentationEditorContext();
+
+	let element: HTMLElement | null = $state(null);
+
+	const onMouseDown = (e: MouseEvent) => {
+		e.preventDefault();
+		e.stopPropagation();
+		console.log('rotate', 'mousedown', layer.id);
+		editor.activeAction = {
+			type: 'rotate',
+			cursor: 'cursor-grabbing',
+			clientX: e.clientX,
+			clientY: e.clientY,
+			layer: { ...layer },
+		};
+		addEventListener('mousemove', onMouseMove);
+		addEventListener('mouseup', onMouseUp);
+	};
+
+	const onMouseUp = () => {
+		console.log('rotate', 'mouseup', layer.id);
+		if (editor.activeAction && editor.activeAction.layer.rotate !== layer.rotate) {
+			if (editor.checkIfLayerInBounds(layer)) {
+				editor.historyPush({
+					type: 'layer',
+					layer: { id: layer.id, type: layer.type },
+					undo: { rotate: editor.activeAction.layer.rotate },
+					redo: { rotate: layer.rotate },
+				});
+			}
+		}
+		editor.activeAction = null;
+		removeEventListener('mousemove', onMouseMove);
+		removeEventListener('mouseup', onMouseUp);
+	};
+
+	const onMouseMove = (e: MouseEvent) => {
+		if (!editor.activeAction || !element) return;
+
+		const slideClientRect = element.closest('[data-slide-container]')?.getBoundingClientRect();
+		if (!slideClientRect) return;
+
+		const { x: slideX, y: slideY } = slideClientRect;
+
+		const { width, height, x, y } = editor.activeAction.layer;
+		const scale = editor.activeAction.layer.scale || 1;
+
+		// Calculate the center of the layer
+		const centerX = slideX + x * editor.zoom + (width * scale * editor.zoom) / 2;
+		const centerY = slideY + y * editor.zoom + (height * scale * editor.zoom) / 2;
+
+		// Calculate the current angle based on the current mouse position relative to the center of the layer
+		const currentAngle = Math.atan2(
+			(e.clientY - centerY) / editor.zoom,
+			(e.clientX - centerX) / editor.zoom,
+		);
+
+		// Convert the current angle from radians to degrees and adjust to make 0 degrees the initial position
+		let rotate = ((currentAngle * 180) / Math.PI - 90 + 360) % 360;
+
+		// Add snapping
+		const snapThreshold = 1;
+		const remainder = rotate % 45;
+		if (remainder < snapThreshold || remainder > 45 - snapThreshold) {
+			rotate = Math.round(rotate / 45) * 45;
+		}
+
+		// Normalize the rotation to be between -180 and 180 degrees
+		if (rotate >= 180) rotate -= 360;
+
+		// Apply the new rotation to the layer
+		layer.rotate = rotate;
+		editor.activeAction.tooltip = { x: e.clientX, y: e.clientY, text: `${Math.round(rotate)}°` };
+	};
+</script>
+
+<div bind:this={element} 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="pointer-events-auto absolute h-6 w-6 cursor-grab rounded-full"
+			onmousedown={onMouseDown}
+		></div>
+		<div
+			class="flex h-6 w-6 items-center justify-center rounded-full bg-white transition-colors group-hover:bg-purple-500 group-active:bg-purple-500"
+			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>

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

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

package/dist/components/presentation-editor/layers/controls/side-resize-control/index.d.ts

@@ -0,0 +1,2 @@
+import Root from './side-resize-control.svelte';
+export { Root, Root as SideResizeControl, };

package/dist/components/presentation-editor/layers/controls/side-resize-control/index.js

@@ -0,0 +1,4 @@
+import Root from './side-resize-control.svelte';
+export { Root, 
+//
+Root as SideResizeControl, };