@peteai/presentation-editor 0.0.1

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

@@ -0,0 +1,220 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from 'tailwind-variants';
+	import type { ActiveAction, ImageLayer } from '../../../types.js';
+
+	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-purple-500 group-hover:bg-purple-500 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 Origin = VariantProps<typeof sideResizeControlVariants>['origin'];
+
+	interface Props {
+		origin: NonNullable<Origin>;
+		layer: ImageLayer;
+	}
+</script>
+
+<script lang="ts">
+	import { getPresentationEditorContext } from '../../../presentation-editor.svelte.js';
+	import { cn } from '../../../../../utils.js';
+	import { calculateNewPosition } from '../../utils.js';
+
+	let { origin, layer = $bindable() }: Props = $props();
+
+	const editor = getPresentationEditorContext();
+
+	let action: (Omit<ActiveAction, 'layer'> & { layer: ImageLayer }) | null = null;
+	let isChanged = false;
+
+	const { base, handler, grip, cursor } = sideResizeControlVariants({ origin });
+
+	const onMouseDown = (e: MouseEvent) => {
+		e.preventDefault();
+		e.stopPropagation();
+		console.log(`${origin}-origin-resize`, 'mousedown', layer.id);
+		isChanged = false;
+		action = {
+			type: `${origin}-origin-resize`,
+			cursor: cursor(),
+			clientX: e.clientX,
+			clientY: e.clientY,
+			layer: { ...layer },
+		};
+		editor.activeAction = action;
+		addEventListener('mousemove', onMouseMove);
+		addEventListener('mouseup', onMouseUp);
+	};
+
+	const onMouseUp = () => {
+		console.log(`${origin}-origin-resize`, 'mouseup', layer.id);
+		if (isChanged && action) {
+			if (editor.checkIfLayerInBounds(layer)) {
+				const undo = {
+					scale: action.layer.scale,
+					x: action.layer.x,
+					y: action.layer.y,
+					width: action.layer.width,
+					height: action.layer.height,
+					offsetX: action.layer.offsetX,
+					offsetY: action.layer.offsetY,
+				};
+				const redo = {
+					scale: layer.scale,
+					x: layer.x,
+					y: layer.y,
+					width: layer.width,
+					height: layer.height,
+					offsetX: layer.offsetX,
+					offsetY: layer.offsetY,
+				};
+				editor.historyPush({
+					type: 'layer',
+					layer: { id: layer.id, type: layer.type },
+					undo,
+					redo,
+				});
+			}
+		}
+		action = null;
+		editor.activeAction = null;
+		removeEventListener('mousemove', onMouseMove);
+		removeEventListener('mouseup', onMouseUp);
+	};
+
+	const onMouseMove = async (e: MouseEvent) => {
+		if (!action) return;
+
+		isChanged = true;
+		const { clientX, clientY } = action;
+		const { width, height, x, y } = action.layer;
+		const scale = action.layer.scale || 1;
+		const rotate = action.layer.rotate || 0;
+		const offsetX = action.layer.offsetX || 0;
+		const offsetY = action.layer.offsetY || 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);
+
+		let newWidth = width * scale;
+		let newHeight = height * scale;
+		let newScale = scale;
+		let newOffsetX = offsetX;
+		let newOffsetY = offsetY;
+		const snapping = 10;
+		if (origin === 'left') {
+			newWidth += adjustedXDiff;
+			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;
+			}
+		} else if (origin === 'top') {
+			newHeight += adjustedYDiff;
+			const maxHeight = layer.image.height - offsetY;
+			const maxHeightDiff = maxHeight * scale - newHeight;
+			if (Math.abs(maxHeightDiff) < snapping) {
+				newHeight = maxHeight * scale;
+			} else if (maxHeightDiff < 0) {
+				newScale = newHeight / maxHeight;
+				newOffsetX += ((layer.image.width / 2 - offsetX) * (newScale - scale)) / newScale;
+			}
+		} else if (origin === 'right') {
+			newWidth -= adjustedXDiff;
+			newOffsetX += adjustedXDiff / scale;
+			if (Math.abs(newOffsetX * scale) < snapping) {
+				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;
+			}
+		} else if (origin === 'bottom') {
+			newHeight -= adjustedYDiff;
+			newOffsetY += adjustedYDiff / scale;
+			if (Math.abs(newOffsetY * scale) < snapping) {
+				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;
+			}
+		}
+		newWidth = Math.max(newWidth, 10);
+		newHeight = Math.max(newHeight, 10);
+
+		const { newX, newY } = calculateNewPosition(
+			origin,
+			{ x, y, width: width * scale, height: height * scale, rotate },
+			newWidth,
+			newHeight,
+		);
+
+		Object.assign(layer, {
+			scale: newScale,
+			x: newX,
+			y: newY,
+			width: newWidth / newScale,
+			height: newHeight / newScale,
+			offsetX: newOffsetX,
+			offsetY: newOffsetY,
+		});
+
+		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={grip()}
+		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/side-resize-control/side-resize-control.svelte.d.ts

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

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

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

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

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

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

@@ -0,0 +1,141 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from 'tailwind-variants';
+	import type { HtmlLayer } from '../../../types.js';
+
+	const sideScaleControlVariants = tv({
+		slots: {
+			base: 'group absolute w-8 h-full flex flex-col items-center justify-center pointer-events-none',
+			handler: 'absolute w-4 h-full pointer-events-auto',
+			cursor: '',
+		},
+		variants: {
+			origin: {
+				right: {
+					base: '-left-4',
+					handler: '-translate-x-2',
+					cursor: 'cursor-ew-resize',
+				},
+				left: {
+					base: '-right-4',
+					handler: 'translate-x-2',
+					cursor: 'cursor-ew-resize',
+				},
+			},
+		},
+	});
+
+	type Origin = VariantProps<typeof sideScaleControlVariants>['origin'];
+
+	export interface Props {
+		origin: NonNullable<Origin>;
+		layer: HtmlLayer;
+	}
+</script>
+
+<script lang="ts">
+	import { tick } from 'svelte';
+	import { getPresentationEditorContext } from '../../../presentation-editor.svelte.js';
+	import { cn } from '../../../../../utils.js';
+	import { calculateNewPosition } from '../../utils.js';
+
+	let { origin, layer = $bindable() }: Props = $props();
+
+	const editor = getPresentationEditorContext();
+
+	let isChanged = false;
+
+	const { base, handler, cursor } = sideScaleControlVariants({ origin });
+
+	const onMouseDown = (e: MouseEvent) => {
+		e.preventDefault();
+		e.stopPropagation();
+		console.log(`${origin}-origin-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(`${origin}-origin-scale`, 'mouseup', layer.id);
+		if (isChanged && editor.activeAction) {
+			if (editor.checkIfLayerInBounds(layer)) {
+				const undo = {
+					x: editor.activeAction.layer.x,
+					y: editor.activeAction.layer.y,
+					width: editor.activeAction.layer.width,
+					height: editor.activeAction.layer.height,
+				};
+				const redo = { x: layer.x, y: layer.y, width: layer.width, height: layer.height };
+				editor.historyPush({
+					type: 'layer',
+					layer: { id: layer.id, type: layer.type },
+					undo,
+					redo,
+				});
+			}
+		}
+		editor.activeAction = null;
+		removeEventListener('mousemove', onMouseMove);
+		removeEventListener('mouseup', onMouseUp);
+	};
+
+	const onMouseMove = async (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);
+
+		let newWidth = width * scale;
+		if (origin === 'right') {
+			newWidth -= adjustedXDiff;
+		} else if (origin === 'left') {
+			newWidth += adjustedXDiff;
+		}
+		newWidth = Math.max(newWidth, 10);
+
+		layer.width = newWidth / scale;
+		await tick();
+
+		const layerContent = document.getElementById(`layer-content-${layer.id}`);
+		const contentHeight = layerContent?.offsetHeight || height;
+		const newHeight = contentHeight * scale;
+
+		const { newX, newY } = calculateNewPosition(
+			`top-${origin}`,
+			{ x, y, width: width * scale, height: height * scale, rotate },
+			newWidth,
+			newHeight,
+		);
+		Object.assign(layer, { x: newX, y: newY, height: newHeight / scale });
+
+		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-4 w-1.5 rounded-sm 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/side-scale-control/side-scale-control.svelte.d.ts

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