@peteai/presentation-editor 0.0.7 → 0.0.8

package/dist/components/editor/layers/utils.js

@@ -1,12 +1,4 @@
-export const rotatePointOld = (point, angleRad) => {
-    const cos = Math.cos(angleRad);
-    const sin = Math.sin(angleRad);
-    return {
-        x: point.x * cos - point.y * sin,
-        y: point.x * sin + point.y * cos,
-    };
-};
-const getPoints = (origin, width, height) => {
+const getOriginRelativePoint = (origin, width, height) => {
     const halfWidth = width / 2;
     const halfHeight = height / 2;
     switch (origin) {
@@ -41,36 +33,42 @@ export const calculateLayerTransform = (layer, groupScale = 1) => ({
     scale: layer.scale,
 });
 export const calculateNewPosition = (origin, transform, newWidth, newHeight) => {
-    const { x, y, width, height, rotate, scale } = transform;
-    const oldPoint = getPoints(origin, width * scale, height * scale);
-    const newPoint = getPoints(origin, newWidth, newHeight);
-    let deltaX = newPoint.x - oldPoint.x;
-    let deltaY = newPoint.y - oldPoint.y;
-    if (rotate !== 0) {
-        const rad = (rotate * Math.PI) / 180;
-        const rotatedOldCenter = rotatePointOld(oldPoint, rad);
-        const rotatedNewCenter = rotatePointOld(newPoint, rad);
-        deltaX = rotatedNewCenter.x - rotatedOldCenter.x;
-        deltaY = rotatedNewCenter.y - rotatedOldCenter.y;
-    }
+    const { x, y, width: rawWidth, height: rawHeight, rotate, scale } = transform;
+    const width = rawWidth * scale;
+    const height = rawHeight * scale;
+    // Get relative points based on origin for old and new dimensions
+    const oldPoint = getOriginRelativePoint(origin, width, height);
+    const newPoint = getOriginRelativePoint(origin, newWidth, newHeight);
+    // Calculate position delta
+    const delta = {
+        x: newPoint.x - oldPoint.x,
+        y: newPoint.y - oldPoint.y,
+    };
+    // Apply rotation if needed
+    const rotatedDelta = rotate !== 0 ? rotatePoint(degToRad(rotate), delta) : delta;
+    // Calculate new position accounting for size difference and delta
     return {
-        newX: x - deltaX - (newWidth - width * scale) / 2,
-        newY: y - deltaY - (newHeight - height * scale) / 2,
+        newX: x - rotatedDelta.x - (newWidth - width) / 2,
+        newY: y - rotatedDelta.y - (newHeight - height) / 2,
     };
 };
 export function calculateBoundingBox(transform) {
-    const { x, y, width, height, rotate, scale } = transform;
+    const { x, y, width: rawWidth, height: rawHeight, rotate, scale } = transform;
+    const width = rawWidth * scale;
+    const height = rawHeight * scale;
     if (rotate === 0) {
-        return { x, y, width: width * scale, height: height * scale };
+        return { x, y, width, height };
     }
-    const radians = (rotate * Math.PI) / 180;
-    const origins = ['top-left', 'top-right'];
-    const corners = origins.map((position) => rotatePointOld(getPoints(position, width * scale, height * scale), radians));
-    const maxX = Math.max(...corners.map((corner) => Math.abs(corner.x)));
-    const maxY = Math.max(...corners.map((corner) => Math.abs(corner.y)));
+    const rad = degToRad(rotate);
+    const cos = Math.cos(rad);
+    const sin = Math.sin(rad);
+    const hw = width / 2;
+    const hh = height / 2;
+    const maxX = Math.abs(hw * cos) + Math.abs(hh * sin);
+    const maxY = Math.abs(hw * sin) + Math.abs(hh * cos);
     return {
-        x: x + (width * scale) / 2 - maxX,
-        y: y + (height * scale) / 2 - maxY,
+        x: x + width / 2 - maxX,
+        y: y + height / 2 - maxY,
         width: maxX * 2,
         height: maxY * 2,
     };
@@ -78,20 +76,20 @@ export function calculateBoundingBox(transform) {
 export function degToRad(deg) {
     return (deg * Math.PI) / 180;
 }
-export function rotatePoint(p, origin, angleRad) {
-    const dx = p.x - origin.x;
-    const dy = p.y - origin.y;
-    const cos = Math.cos(angleRad);
-    const sin = Math.sin(angleRad);
+export function rotatePoint(rad, p, center = { x: 0, y: 0 }) {
+    const cos = Math.cos(rad);
+    const sin = Math.sin(rad);
+    const dx = p.x - center.x;
+    const dy = p.y - center.y;
     return {
-        x: origin.x + dx * cos - dy * sin,
-        y: origin.y + dx * sin + dy * cos,
+        x: center.x + dx * cos - dy * sin,
+        y: center.y + dx * sin + dy * cos,
     };
 }
 export function getRotatedCorners(rect) {
+    const rad = degToRad(rect.rotate);
     const cx = rect.x + (rect.width * rect.scale) / 2;
     const cy = rect.y + (rect.height * rect.scale) / 2;
-    const angle = degToRad(rect.rotate);
     const hw = (rect.width * rect.scale) / 2;
     const hh = (rect.height * rect.scale) / 2;
     const corners = [
@@ -100,7 +98,7 @@ export function getRotatedCorners(rect) {
         { x: cx + hw, y: cy + hh },
         { x: cx - hw, y: cy + hh },
     ];
-    return corners.map((p) => rotatePoint(p, { x: cx, y: cy }, angle));
+    return corners.map((p) => rotatePoint(rad, p, { x: cx, y: cy }));
 }
 export function isRotatedVertically(rotate) {
     const rotationNormalized = ((rotate % 360) + 360) % 360;
@@ -166,9 +164,9 @@ export function calculateGroupRotatedBoundingBox(transforms, rotate = 0) {
     if (!rotate)
         return calculateGroupBoundingBox(transforms);
     const allCorners = transforms.flatMap((t) => getRotatedCorners(t));
-    const theta = degToRad(-rotate); // inverse to align bbox with axes
+    const rad = degToRad(rotate);
     // Rotate all points to align with desired angle
-    const rotatedPoints = allCorners.map((p) => rotatePoint(p, { x: 0, y: 0 }, theta));
+    const rotatedPoints = allCorners.map((p) => rotatePoint(-rad, p));
     // Compute AABB of rotated points
     const xs = rotatedPoints.map((p) => p.x);
     const ys = rotatedPoints.map((p) => p.y);
@@ -183,7 +181,7 @@ export function calculateGroupRotatedBoundingBox(transforms, rotate = 0) {
         y: (minY + maxY) / 2,
     };
     // Rotate center back to original space
-    const center = rotatePoint(centerRotated, { x: 0, y: 0 }, degToRad(rotate));
+    const center = rotatePoint(rad, centerRotated);
     return {
         x: center.x - width / 2,
         y: center.y - height / 2,
@@ -194,7 +192,7 @@ export function calculateGroupRotatedBoundingBox(transforms, rotate = 0) {
     };
 }
 export function calculateRelativeRects(bbox, absoluteRects) {
-    const theta = degToRad(-bbox.rotate); // inverse to align bbox with axes
+    const rad = degToRad(bbox.rotate); // inverse to align bbox with axes
     const bboxCenter = {
         x: bbox.x + (bbox.width * bbox.scale) / 2,
         y: bbox.y + (bbox.height * bbox.scale) / 2,
@@ -206,17 +204,18 @@ export function calculateRelativeRects(bbox, absoluteRects) {
             y: rect.y + (rect.height * rect.scale) / 2,
         };
         // Rotate center ralatively to the bbox center
-        const relativeCenter = rotatePoint(center, bboxCenter, theta);
+        const relativeCenter = rotatePoint(-rad, center, bboxCenter);
         return {
             ...rect,
-            x: (relativeCenter.x - bbox.x) / bbox.scale - (rect.width * rect.scale) / 2,
-            y: (relativeCenter.y - bbox.y) / bbox.scale - (rect.height * rect.scale) / 2,
+            x: ((relativeCenter.x - bbox.x) / bbox.scale - (rect.width * rect.scale) / 2) / bbox.scale,
+            y: ((relativeCenter.y - bbox.y) / bbox.scale - (rect.height * rect.scale) / 2) / bbox.scale,
             rotate: rect.rotate - bbox.rotate,
+            scale: rect.scale / bbox.scale,
         };
     });
 }
 export function calculateAbsoluteRects(bbox, rects) {
-    const theta = degToRad(bbox.rotate);
+    const rad = degToRad(bbox.rotate);
     const bboxCenter = {
         x: bbox.x + (bbox.width * bbox.scale) / 2,
         y: bbox.y + (bbox.height * bbox.scale) / 2,
@@ -226,7 +225,7 @@ export function calculateAbsoluteRects(bbox, rects) {
             x: bbox.x + (rect.x + (rect.width * rect.scale) / 2) * bbox.scale,
             y: bbox.y + (rect.y + (rect.height * rect.scale) / 2) * bbox.scale,
         };
-        const center = rotatePoint(relativeCenter, bboxCenter, theta);
+        const center = rotatePoint(rad, relativeCenter, bboxCenter);
         return {
             ...rect,
             x: center.x - (rect.width * rect.scale * bbox.scale) / 2,
@@ -293,12 +292,14 @@ const minScaleToContain = (rotatedRect, rect) => {
 };
 export function calculateImageCover(image, bbox) {
     const scale = minScaleToContain(image, bbox);
+    const width = bbox.width / scale;
+    const height = bbox.height / scale;
     return {
-        width: bbox.width / scale,
-        height: bbox.height / scale,
+        width,
+        height,
         scale,
-        offsetX: (image.width - bbox.width / scale) / 2,
-        offsetY: (image.height - bbox.height / scale) / 2,
+        offsetX: (width - image.width) / 2,
+        offsetY: (height - image.height) / 2,
     };
 }
 export const defaultColor = '#000000';
@@ -322,3 +323,55 @@ export function buildBackgroundCircleStyle(colors) {
         .join(', ');
     return `background-image: conic-gradient(${gradientColors})`;
 }
+export function getImageLayerBboxRelativeToImageCenter(layer) {
+    const { width, height, image, offsetX, offsetY, imageRotate } = layer;
+    // current image center in layer coords (rotation doesn't change it)
+    const imageCenter = { x: image.width / 2 + offsetX, y: image.height / 2 + offsetY };
+    const imageRad = degToRad(imageRotate);
+    // For each corner, compute v = corner - C, rotate by -theta, accumulate max abs X/Y
+    const corners = [
+        { x: 0, y: 0 },
+        { x: width, y: 0 },
+        { x: width, y: height },
+        { x: 0, y: height },
+    ].map((p) => {
+        const v = { x: p.x - imageCenter.x, y: p.y - imageCenter.y }; // layer->center
+        return rotatePoint(-imageRad, v); // bring into image unrotated axes
+    });
+    // Compute AABB of rotated points
+    const xs = corners.map((p) => p.x);
+    const ys = corners.map((p) => p.y);
+    const minX = Math.min(...xs);
+    const maxX = Math.max(...xs);
+    const minY = Math.min(...ys);
+    const maxY = Math.max(...ys);
+    return { minX, minY, maxX, maxY };
+}
+export function calculateImageLayerPropsForImageRotate(layer, imageRotate) {
+    const { width, height, scale, image, offsetX, offsetY } = layer;
+    // image half-width and half-height
+    const ihw = image.width / 2;
+    const ihh = image.height / 2;
+    // current image center in layer coords (rotation doesn't change it)
+    const imageCenter = { x: ihw + offsetX, y: ihh + offsetY };
+    const bbox = getImageLayerBboxRelativeToImageCenter({ ...layer, imageRotate });
+    const maxAbsX = Math.max(Math.abs(bbox.minX), Math.abs(bbox.maxX));
+    const maxAbsY = Math.max(Math.abs(bbox.minY), Math.abs(bbox.maxY));
+    // Required scale so half-extents of (Iw*s, Ih*s) cover maxAbsX/Y:
+    // Iw*s/2 >= maxAbsX  => s >= 2*maxAbsX / Iw
+    // Ih*s/2 >= maxAbsY  => s >= 2*maxAbsY / Ih
+    const sReqX = (2 * maxAbsX) / image.width;
+    const sReqY = (2 * maxAbsY) / image.height;
+    const minScaleFactor = Math.max(sReqX, sReqY);
+    if (minScaleFactor < 1) {
+        return { imageRotate };
+    }
+    return {
+        imageRotate,
+        scale: scale * minScaleFactor,
+        width: width / minScaleFactor,
+        height: height / minScaleFactor,
+        offsetX: imageCenter.x / minScaleFactor - ihw,
+        offsetY: imageCenter.y / minScaleFactor - ihh,
+    };
+}

package/dist/components/editor/page-editor.svelte

@@ -25,6 +25,8 @@
 
 	const editor = getEditorContext();
 
+	let pageRef: HTMLDivElement | null = $state(null);
+
 	let activeLayerGuides: ActiveLayerGuide[] = $state([]);
 
 	let hoveredLayerId: string | null = $state(null);
@@ -38,7 +40,7 @@
 		<div class="flex min-h-full flex-1">
 			<div class="box-border flex w-full shrink-0 items-center justify-center p-0">
 				<div bind:this={wrapperRef} class="translate-x-0 translate-y-0 p-4 transition-transform">
-					<div class="relative flex flex-col items-center" data-page-container>
+					<div bind:this={pageRef} class="relative flex flex-col items-center">
 						<div
 							class="m-0 overflow-hidden shadow-xl"
 							style:width="{scaledWidth}px"
@@ -89,7 +91,9 @@
 								{/if}
 							{/if}
 
-							<ActiveLayers />
+							{#if viewportRef && pageRef}
+								<ActiveLayers {viewportRef} {wrapperRef} {pageRef} />
+							{/if}
 
 							<SnappingGuides zoom={editor.zoom} guides={activeLayerGuides} />
 						</div>

package/dist/components/editor/sidebar/image-crop-sidebar.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+	import XIcon from '@lucide/svelte/icons/x';
+	import { Button } from '../../ui/button/index.js';
+	import { Slider } from '../../ui/slider/index.js';
+	import { Input } from '../../ui/input/index.js';
+	import { getEditorContext } from '../editor.svelte.js';
+	import {
+		calculateImageLayerPropsForImageRotate,
+		calculateRelativeRects,
+	} from '../layers/utils.js';
+	import type { ImageLayer } from '../types.js';
+
+	interface Props {
+		layer: ImageLayer;
+	}
+
+	let { layer }: Props = $props();
+
+	const editor = $derived(getEditorContext());
+
+	let value = $derived(Math.round(layer.imageRotate * 10) / 10);
+	let originalLayer = $derived(
+		editor.selectedLayersNotLocked.find((l) => l.id === layer.id),
+	) as ImageLayer;
+
+	const min = -180;
+	const max = 180;
+	const step = 0.1;
+
+	let layerCache: ImageLayer | null = $state.snapshot(null);
+
+	const setImageRotate = (value: string | number) => {
+		value = Number(value);
+		if (!layerCache) {
+			layerCache = $state.snapshot(layer);
+		}
+		const props = calculateImageLayerPropsForImageRotate(layerCache, value);
+		Object.assign(layer, props);
+	};
+
+	const applyChanges = () => {
+		if (!originalLayer) return;
+		const relativeLayer = editor.activeGroupAndChild
+			? (calculateRelativeRects(editor.activeGroupAndChild.groupLayer, [layer])[0] as ImageLayer)
+			: layer;
+		// Define keys to check for changes in image layer properties
+		const imageLayerKeys: (keyof ImageLayer)[] = [
+			'imageRotate', // Rotation angle of the image
+			'scale', // Scale/zoom level
+			'width', // Width dimension
+			'height', // Height dimension
+			'offsetX', // X offset position
+			'offsetY', // Y offset position
+		];
+
+		// Filter keys that have different values between original and relative layers
+		const changedKeys = imageLayerKeys.filter((key) => originalLayer[key] !== relativeLayer[key]);
+		if (changedKeys.length > 0) {
+			editor.historyPush({
+				type: 'layerUpdate',
+				pageId: editor.activePage.id,
+				layer: { id: layer.id, type: layer.type },
+				undo: Object.fromEntries(changedKeys.map((key) => [key, originalLayer[key]])),
+				redo: Object.fromEntries(changedKeys.map((key) => [key, relativeLayer[key]])),
+			});
+		}
+		editor.imageCropLayer = null;
+	};
+
+	$effect(() => {
+		if (!originalLayer) {
+			editor.imageCropLayer = null;
+		}
+	});
+</script>
+
+<div class="flex h-full flex-col gap-2">
+	<div class="flex items-center justify-between">
+		<div class="text-sm font-bold">Crop</div>
+		<Button variant="ghost" size="icon" onclick={() => (editor.imageCropLayer = null)}>
+			<XIcon />
+		</Button>
+	</div>
+	<div class="flex-1 resize-none overflow-y-auto">
+		<div class="flex items-center gap-2">
+			<div class="grow">
+				<Slider
+					type="single"
+					{value}
+					{min}
+					{max}
+					{step}
+					onValueChange={(value) => setImageRotate(value)}
+					onValueCommit={() => (layerCache = null)}
+				/>
+			</div>
+			<Input
+				class="w-12 bg-transparent p-0 text-center font-semibold leading-none [&::-webkit-inner-spin-button]:appearance-none"
+				inputmode="decimal"
+				placeholder="--"
+				{value}
+				onchange={(e) => setImageRotate(e.currentTarget.value)}
+			/>
+		</div>
+		<div class="flex justify-end gap-2 p-2">
+			<Button class="flex-1" variant="outline" onclick={() => (editor.imageCropLayer = null)}>
+				Cancel
+			</Button>
+			<Button class="flex-1" onclick={applyChanges}>Done</Button>
+		</div>
+	</div>
+</div>

package/dist/components/editor/sidebar/image-crop-sidebar.svelte.d.ts

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

package/dist/components/editor/sidebar/position-sidebar.svelte

@@ -19,8 +19,6 @@
 
 	const editor = $derived(getEditorContext());
 
-	$inspect(editor.sortedPages);
-
 	const flipDurationMs = 300;
 	const otherOptions = { flipDurationMs, type: 'layers', dropTargetStyle: {} };
 

package/dist/components/editor/sidebar/sidebar.svelte

@@ -10,6 +10,7 @@
 	import PositionSidebar from './position-sidebar.svelte';
 	import { ColorSidebar } from './color-sidebar/index.js';
 	import { FontSidebar } from './font-sidebar/index.js';
+	import ImageCropSidebar from './image-crop-sidebar.svelte';
 
 	interface Props {
 		editor: Editor;
@@ -62,13 +63,15 @@
 		{/each}
 	</div>
 
-	{#if editor.activeSidebarPopup || editor.activeSidebarTab}
+	{#if editor.activeSidebarPopup || editor.activeSidebarTab || editor.imageCropLayer}
 		<div class="bg-background h-full w-80 shrink-0 overflow-y-auto border-r border-gray-200 p-2">
-			{#if editor.activeSidebarPopup === 'position'}
+			{#if editor.imageCropLayer}
+				<ImageCropSidebar layer={editor.imageCropLayer} />
+			{:else if editor.activeSidebarPopup === 'position'}
 				<PositionSidebar />
 			{:else if editor.activeSidebarPopup === 'font'}
 				<FontSidebar />
-			{:else if editor.activeSidebarPopup}
+			{:else if editor.activeSidebarPopup?.indexOf('Color')}
 				<ColorSidebar />
 			{:else if editor.activeSidebarTab === 'text'}
 				<SidebarTextTab />

package/dist/components/editor/types.d.ts

@@ -46,6 +46,7 @@ export type LayerBorder = {
 export interface ImageLayer extends BaseLayer, LayerBorder {
     type: 'image';
     image: Image;
+    imageRotate: number;
     offsetX: number;
     offsetY: number;
     cornerRadius: number;
@@ -61,7 +62,7 @@ export type Gradient = {
     type: 'linear90' | 'linear180' | 'linear135' | 'radialCenter' | 'radialTopLeft';
     colors: string[];
 };
-export type BackgroundImage = Pick<ImageLayer, 'rotate' | 'opacity' | 'scale' | 'image' | 'offsetX' | 'offsetY' | 'flipX' | 'flipY'>;
+export type BackgroundImage = Pick<ImageLayer, 'opacity' | 'scale' | 'image' | 'imageRotate' | 'offsetX' | 'offsetY' | 'flipX' | 'flipY'>;
 export type Page = {
     id: string;
     backgroundColor: string | null;

package/dist/components/editor/utils.js

@@ -363,6 +363,7 @@ const buildTextLayerBulletsFields = ({ bullets }) => ({
 });
 const buildImageLayerFields = (image) => ({
     image,
+    imageRotate: 0,
     offsetX: 0,
     offsetY: 0,
     cornerRadius: 0,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@peteai/presentation-editor",
-	"version": "0.0.7",
+	"version": "0.0.8",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",