@peteai/presentation-editor 0.0.2 → 0.0.4

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

@@ -1,5 +1,4 @@
 import { type VariantProps } from 'tailwind-variants';
-import type { Layer } from '../../../types.js';
 declare const cornerScaleControlVariants: import("tailwind-variants").TVReturnType<{
     origin: {
         'bottom-right': {
@@ -27,53 +26,7 @@ declare const cornerScaleControlVariants: import("tailwind-variants").TVReturnTy
     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;
-        };
-    };
-}>, {
+}, undefined, {
     origin: {
         'bottom-right': {
             base: string;
@@ -127,58 +80,10 @@ declare const cornerScaleControlVariants: import("tailwind-variants").TVReturnTy
     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;
+}, undefined, unknown, unknown, undefined>>;
+type Variants = VariantProps<typeof cornerScaleControlVariants>;
+interface Props extends Omit<Variants, 'origin'>, Required<Pick<Variants, 'origin'>> {
 }
-declare const CornerScaleControl: import("svelte").Component<Props, {}, "layer">;
+declare const CornerScaleControl: import("svelte").Component<Props, {}, "">;
 type CornerScaleControl = ReturnType<typeof CornerScaleControl>;
 export default CornerScaleControl;

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

@@ -0,0 +1,337 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from 'tailwind-variants';
+	import type { Layer } 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-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 { getPresentationEditorContext } from '../../../presentation-editor.svelte.js';
+	import { cn } from '../../../../../utils.js';
+	import {
+		calculateGroupRotatedBoundingBox,
+		calculateLayerTransform,
+		calculateNewPosition,
+		calculateNewSize,
+		degToRad,
+		getRotatedBoundingBox,
+		rotatePoint,
+		type Transform,
+	} from '../../utils.js';
+
+	let { origin }: Props = $props();
+
+	const type = `${origin}-origin-resize`;
+
+	const editor = getPresentationEditorContext();
+
+	const { base, handler, grip, cursor } = sideResizeControlVariants({ origin });
+
+	let initial: {
+		clientX: number;
+		clientY: number;
+		bbox: Transform;
+		layers: (Layer & { state: Layer })[];
+	} | 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;
+		initial = {
+			clientX: e.clientX,
+			clientY: e.clientY,
+			bbox: 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 = (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;
+
+		editor.historyPush({
+			type: 'layersGroup',
+			actions: initial.layers.map((layerWithState) => {
+				const { state, ...layer } = layerWithState;
+				if (editor.isLayerOutOfBounds(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,
+							width: layer.width,
+							height: layer.height,
+							...(layer.type === 'image' && {
+								scale: layer.scale,
+								offsetX: layer.offsetX,
+								offsetY: layer.offsetY,
+							}),
+						},
+						redo: {
+							x: state.x,
+							y: state.y,
+							width: state.width,
+							height: state.height,
+							...(state.type === 'image' && {
+								scale: state.scale,
+								offsetX: state.offsetX,
+								offsetY: state.offsetY,
+							}),
+						},
+					};
+				}
+			}),
+		});
+	};
+
+	const onMouseMove = async (e: MouseEvent) => {
+		if (!initial || editor.activeAction?.id !== actionId) return;
+
+		const groupBbox = initial.bbox;
+		const groupAngle = degToRad(groupBbox.rotate);
+		const xDiff = (e.clientX - initial.clientX) / editor.zoom;
+		const yDiff = (e.clientY - initial.clientY) / editor.zoom;
+		const adjustedXDiff = xDiff * Math.cos(groupAngle) + yDiff * Math.sin(groupAngle);
+		const adjustedYDiff = -xDiff * Math.sin(groupAngle) + yDiff * Math.cos(groupAngle);
+
+		let groupNewWidth = groupBbox.width;
+		let groupNewHeight = groupBbox.height;
+		const minSize = 10;
+		if (origin === 'left') {
+			groupNewWidth = Math.max(groupBbox.width + adjustedXDiff, minSize);
+		} else if (origin === 'top') {
+			groupNewHeight = Math.max(groupBbox.height + adjustedYDiff, minSize);
+		} else if (origin === 'right') {
+			groupNewWidth = Math.max(groupBbox.width - adjustedXDiff, minSize);
+		} else if (origin === 'bottom') {
+			groupNewHeight = Math.max(groupBbox.height - adjustedYDiff, minSize);
+		}
+
+		isChanged = groupNewWidth !== groupBbox.width || groupNewHeight !== groupBbox.height;
+
+		const { newX: groupNewX, newY: groupNewY } = calculateNewPosition(
+			origin,
+			initial.bbox,
+			groupNewWidth,
+			groupNewHeight,
+		);
+
+		const widthScale = groupNewWidth / groupBbox.width;
+		const heightScale = groupNewHeight / groupBbox.height;
+
+		const groupCenter = {
+			x: groupBbox.x + groupBbox.width / 2,
+			y: groupBbox.y + groupBbox.height / 2,
+		};
+		const groupNewCenter = { x: groupNewX + groupNewWidth / 2, y: groupNewY + groupNewHeight / 2 };
+		// calculate rotated points relative to new group center
+		const groupCenterRotated = rotatePoint(groupCenter, groupNewCenter, -groupAngle);
+
+		await Promise.all(
+			initial.layers.map(async (layer) => {
+				const { width, height, x, y, rotate } = calculateLayerTransform(layer);
+				const center = { x: x + width / 2, y: y + height / 2 };
+				const centerRotated = rotatePoint(center, groupNewCenter, -groupAngle);
+				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 - groupBbox.rotate;
+
+				const isHorizontal = origin === 'left' || origin === 'right';
+				const bboxScale = isHorizontal ? widthScale : heightScale;
+				const newSize = calculateNewSize(width, height, rotateRelative, bboxScale, isHorizontal);
+
+				const scale = layer.scale || 1;
+
+				let newWidth = newSize.width;
+				let newHeight = newSize.height;
+				let newScale = scale;
+
+				if (layer.type === 'html') {
+					if (newSize.scaled === 'height') {
+						newHeight = layer.height * scale;
+					} else {
+						Object.assign(layer.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(newCenterRotated, groupNewCenter, degToRad(groupBbox.rotate));
+
+				if (layer.type === 'image') {
+					const offsetX = layer.offsetX || 0;
+					const offsetY = layer.offsetY || 0;
+
+					const { image } = layer;
+
+					let newOffsetX = offsetX;
+					let newOffsetY = offsetY;
+
+					if (newSize.scaled === 'width') {
+						const maxOffsetDiff = Math.min(offsetX, image.width - offsetX - layer.width);
+						const maxWidth = (layer.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 += (layer.width - newWidth / newScale) / 2;
+						}
+					} else {
+						const maxOffsetDiff = Math.min(offsetY, image.height - offsetY - layer.height);
+						const maxHeight = (layer.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 += (layer.height - newHeight / newScale) / 2;
+						}
+					}
+
+					Object.assign(layer.state, {
+						x: newCenter.x - newWidth / 2,
+						y: newCenter.y - newHeight / 2,
+						width: newWidth / newScale,
+						height: newHeight / newScale,
+						scale: newScale,
+						offsetX: newOffsetX,
+						offsetY: newOffsetY,
+					});
+				} else {
+					Object.assign(layer.state, {
+						x: newCenter.x - newWidth / 2,
+						y: newCenter.y - newHeight / 2,
+						width: newWidth / newScale,
+						height: newHeight / newScale,
+						scale: newScale,
+					});
+				}
+			}),
+		);
+
+		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>

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

@@ -0,0 +1,104 @@
+import { type VariantProps } from 'tailwind-variants';
+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, {
+    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, unknown, unknown, undefined>>;
+type Variants = VariantProps<typeof sideResizeControlVariants>;
+interface Props extends Omit<Variants, 'origin'>, Required<Pick<Variants, 'origin'>> {
+}
+declare const GroupResizeControl: import("svelte").Component<Props, {}, "">;
+type GroupResizeControl = ReturnType<typeof GroupResizeControl>;
+export default GroupResizeControl;

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

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

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

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