@peteai/presentation-editor 0.0.6 → 0.0.8

package/dist/components/{presentation-editor → editor}/layers/utils.js

@@ -1,13 +1,4 @@
-import { tick } from 'svelte';
-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) {
@@ -33,40 +24,48 @@ const getPoints = (origin, width, height) => {
             throw new Error(`Unknown origin: ${origin}`);
     }
 };
-export const calculateLayerTransform = (layer) => {
-    const { x, y, width, height } = layer;
-    const scale = layer.scale || 1;
-    const rotate = layer.rotate || 0;
-    return { x, y, width: width * scale, height: height * scale, rotate };
-};
+export const calculateLayerTransform = (layer, groupScale = 1) => ({
+    x: layer.x * groupScale,
+    y: layer.y * groupScale,
+    width: layer.width * groupScale,
+    height: layer.height * groupScale,
+    rotate: layer.rotate,
+    scale: layer.scale,
+});
 export const calculateNewPosition = (origin, transform, newWidth, newHeight) => {
-    const { x, y, width, height, rotate } = transform;
-    const oldPoint = getPoints(origin, width, height);
-    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) / 2,
-        newY: y - deltaY - (newHeight - height) / 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 } = 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, height };
     }
-    const radians = (rotate * Math.PI) / 180;
-    const origins = ['top-left', 'top-right'];
-    const corners = origins.map((position) => rotatePointOld(getPoints(position, width, height), 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 / 2 - maxX,
         y: y + height / 2 - maxY,
@@ -77,38 +76,29 @@ 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 cx = rect.x + rect.width / 2;
-    const cy = rect.y + rect.height / 2;
-    const angle = degToRad(rect.rotate);
-    const hw = rect.width / 2;
-    const hh = rect.height / 2;
+    const rad = degToRad(rect.rotate);
+    const cx = rect.x + (rect.width * rect.scale) / 2;
+    const cy = rect.y + (rect.height * rect.scale) / 2;
+    const hw = (rect.width * rect.scale) / 2;
+    const hh = (rect.height * rect.scale) / 2;
     const corners = [
         { x: cx - hw, y: cy - hh },
         { x: cx + hw, y: cy - hh },
         { x: cx + hw, y: cy + hh },
         { x: cx - hw, y: cy + hh },
     ];
-    return corners.map((p) => rotatePoint(p, { x: cx, y: cy }, angle));
-}
-export function calculateBoundingBoxSize(width, height, rotate) {
-    const theta = degToRad(rotate);
-    const cosTheta = Math.abs(Math.cos(theta));
-    const sinTheta = Math.abs(Math.sin(theta));
-    return {
-        width: width * cosTheta + height * sinTheta,
-        height: width * sinTheta + height * cosTheta,
-    };
+    return corners.map((p) => rotatePoint(rad, p, { x: cx, y: cy }));
 }
 export function isRotatedVertically(rotate) {
     const rotationNormalized = ((rotate % 360) + 360) % 360;
@@ -170,13 +160,13 @@ export function getRotatedBoundingBox(center, width, height, rotate) {
         height: maxY - minY,
     };
 }
-export function calculateGroupRotatedBoundingBox(rects, groupRotate = 0) {
-    if (!groupRotate)
-        return { ...calculateGroupBoundingBox(rects), rotate: 0 };
-    const allCorners = rects.flatMap(getRotatedCorners);
-    const theta = degToRad(-groupRotate); // inverse to align bbox with axes
-    // Rotate all points to align with desired bbox angle
-    const rotatedPoints = allCorners.map((p) => rotatePoint(p, { x: 0, y: 0 }, theta));
+export function calculateGroupRotatedBoundingBox(transforms, rotate = 0) {
+    if (!rotate)
+        return calculateGroupBoundingBox(transforms);
+    const allCorners = transforms.flatMap((t) => getRotatedCorners(t));
+    const rad = degToRad(rotate);
+    // Rotate all points to align with desired angle
+    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);
@@ -191,33 +181,57 @@ export function calculateGroupRotatedBoundingBox(rects, groupRotate = 0) {
         y: (minY + maxY) / 2,
     };
     // Rotate center back to original space
-    const center = rotatePoint(centerRotated, { x: 0, y: 0 }, degToRad(groupRotate));
-    const bbox = {
+    const center = rotatePoint(rad, centerRotated);
+    return {
         x: center.x - width / 2,
         y: center.y - height / 2,
         width,
         height,
-        rotate: groupRotate,
+        rotate,
+        scale: 1,
     };
-    return bbox;
 }
-export function calculateRelativeRects(bbox, rects) {
-    const theta = degToRad(-bbox.rotate); // inverse to align bbox with axes
-    const bboxCenter = { x: bbox.x + bbox.width / 2, y: bbox.y + bbox.height / 2 };
-    return rects.map((rect) => {
-        // Get center of original rect
+export function calculateRelativeRects(bbox, absoluteRects) {
+    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,
+    };
+    return absoluteRects.map((rect) => {
+        // Get center of original absolute rect
         const center = {
-            x: rect.x + rect.width / 2,
-            y: rect.y + rect.height / 2,
+            x: rect.x + (rect.width * rect.scale) / 2,
+            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 {
-            x: relativeCenter.x - rect.width / 2 - bbox.x,
-            y: relativeCenter.y - rect.height / 2 - bbox.y,
-            width: rect.width,
-            height: rect.height,
+            ...rect,
+            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 rad = degToRad(bbox.rotate);
+    const bboxCenter = {
+        x: bbox.x + (bbox.width * bbox.scale) / 2,
+        y: bbox.y + (bbox.height * bbox.scale) / 2,
+    };
+    return rects.map((rect) => {
+        const relativeCenter = {
+            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(rad, relativeCenter, bboxCenter);
+        return {
+            ...rect,
+            x: center.x - (rect.width * rect.scale * bbox.scale) / 2,
+            y: center.y - (rect.height * rect.scale * bbox.scale) / 2,
+            rotate: rect.rotate + bbox.rotate,
+            scale: rect.scale * bbox.scale,
         };
     });
 }
@@ -259,7 +273,7 @@ export function calculateGroupBoundingBox(transforms) {
         minY = Math.min(minY, bbox.y);
         maxY = Math.max(maxY, bbox.y + bbox.height);
     });
-    return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+    return { x: minX, y: minY, width: maxX - minX, height: maxY - minY, rotate: 0, scale: 1 };
 }
 const minScaleToContain = (rotatedRect, rect) => {
     const { width: rw, height: rh, rotate } = rotatedRect;
@@ -278,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';
@@ -307,21 +323,55 @@ export function buildBackgroundCircleStyle(colors) {
         .join(', ');
     return `background-image: conic-gradient(${gradientColors})`;
 }
-export async function applyHtmlToLayer(layer, html) {
-    layer.html = html;
-    await tick();
-    const { x, y, width, height } = layer;
-    const redo = { html, x, y, height };
-    const layerContent = document.getElementById(`layer-content-${layer.id}`);
-    if (layerContent && layerContent.offsetHeight !== layer.height) {
-        const scale = layer.scale || 1;
-        const rotate = layer.rotate || 0;
-        const newHeight = layerContent.offsetHeight * scale;
-        const { newX, newY } = calculateNewPosition(`top-left`, { x, y, width: width * scale, height: height * scale, rotate }, width * scale, newHeight);
-        redo.x = newX;
-        redo.y = newY;
-        redo.height = newHeight / scale;
+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 };
     }
-    Object.assign(layer, redo);
-    return redo;
+    return {
+        imageRotate,
+        scale: scale * minScaleFactor,
+        width: width / minScaleFactor,
+        height: height / minScaleFactor,
+        offsetX: imageCenter.x / minScaleFactor - ihw,
+        offsetY: imageCenter.y / minScaleFactor - ihh,
+    };
 }

package/dist/components/{presentation-editor → editor}/menu/background-menu-content.svelte

@@ -1,55 +1,55 @@
 <script lang="ts">
-	import CopyIcon from 'lucide-svelte/icons/copy';
-	import PasteIcon from 'lucide-svelte/icons/clipboard';
-	import DuplicateIcon from 'lucide-svelte/icons/copy-plus';
-	import AddIcon from 'lucide-svelte/icons/file-plus-2';
-	import TrashIcon from 'lucide-svelte/icons/trash-2';
-	import LockIcon from 'lucide-svelte/icons/lock-keyhole';
-	import UnlockIcon from 'lucide-svelte/icons/lock-keyhole-open';
-	import ExtractImageIcon from 'lucide-svelte/icons/square-arrow-out-up-right';
+	import CopyIcon from '@lucide/svelte/icons/copy';
+	import PasteIcon from '@lucide/svelte/icons/clipboard';
+	import DuplicateIcon from '@lucide/svelte/icons/copy-plus';
+	import AddIcon from '@lucide/svelte/icons/file-plus-2';
+	import TrashIcon from '@lucide/svelte/icons/trash-2';
+	import LockIcon from '@lucide/svelte/icons/lock-keyhole';
+	import UnlockIcon from '@lucide/svelte/icons/lock-keyhole-open';
+	import ExtractImageIcon from '@lucide/svelte/icons/square-arrow-out-up-right';
 	import * as DropdownMenu from '../../ui/dropdown-menu/index.js';
-	import type { PresentationEditor } from '../presentation-editor.svelte.js';
-	import type { Slide } from '../types.js';
+	import type { Editor } from '../editor.svelte.js';
+	import type { Page } from '../types.js';
 	import { checkIfMac } from '../../../utils.js';
 
 	interface Props {
-		editor: PresentationEditor;
-		slide: Slide;
+		editor: Editor;
+		page: Page;
 	}
 
-	let { editor, slide }: Props = $props();
+	let { editor, page }: Props = $props();
 
-	const locked = $derived(slide.locked || slide.backgroundLocked);
+	const locked = $derived(page.locked || page.backgroundLocked);
 
 	const isMac = checkIfMac();
 </script>
 
-<DropdownMenu.Item onclick={() => editor.copySlide(slide.id)}>
+<DropdownMenu.Item onclick={() => editor.copyPage(page.id)}>
 	<CopyIcon />
 	Copy
 	<DropdownMenu.Shortcut>{isMac ? '⌘C' : 'Ctrl+C'}</DropdownMenu.Shortcut>
 </DropdownMenu.Item>
 <DropdownMenu.Item
 	onclick={() => editor.clipboardPaste()}
-	disabled={!editor.clipboard || (slide.locked && !('layers' in editor.clipboard))}
+	disabled={!editor.clipboard || (page.locked && !('layers' in editor.clipboard))}
 >
 	<PasteIcon />
 	Paste
 	<DropdownMenu.Shortcut>{isMac ? '⌘V' : 'Ctrl+V'}</DropdownMenu.Shortcut>
 </DropdownMenu.Item>
-<DropdownMenu.Item onclick={() => editor.addSlide()}>
+<DropdownMenu.Item onclick={() => editor.addPage()}>
 	<AddIcon />
 	Add page
 	<DropdownMenu.Shortcut>{isMac ? '⌘⏎' : 'Ctrl+⏎'}</DropdownMenu.Shortcut>
 </DropdownMenu.Item>
-<DropdownMenu.Item onclick={() => editor.duplicateSlide(slide)}>
+<DropdownMenu.Item onclick={() => editor.duplicatePage(page)}>
 	<DuplicateIcon />
 	Duplicate page
 	<DropdownMenu.Shortcut>{isMac ? '⌘D' : 'Ctrl+D'}</DropdownMenu.Shortcut>
 </DropdownMenu.Item>
-<DropdownMenu.Item onclick={() => editor.removeBackground(slide.id)} disabled={locked}>
+<DropdownMenu.Item onclick={() => editor.removeBackground(page.id)} disabled={locked}>
 	<TrashIcon />
-	{#if slide.backgroundImage}
+	{#if page.backgroundImage}
 		Delete background image
 	{:else}
 		Delete background
@@ -59,8 +59,8 @@
 
 <DropdownMenu.Separator />
 
-<DropdownMenu.Item onclick={() => editor.backgroundToggleLocked(slide.id)} disabled={slide.locked}>
-	{#if slide.backgroundLocked}
+<DropdownMenu.Item onclick={() => editor.backgroundToggleLocked(page.id)} disabled={page.locked}>
+	{#if page.backgroundLocked}
 		<UnlockIcon />
 		Unlock background
 	{:else}
@@ -70,10 +70,10 @@
 	<DropdownMenu.Shortcut>{isMac ? '⌥⇧L' : 'Alt+Shift+L'}</DropdownMenu.Shortcut>
 </DropdownMenu.Item>
 
-{#if slide.backgroundImage}
+{#if page.backgroundImage}
 	<DropdownMenu.Separator />
 
-	<DropdownMenu.Item onclick={() => editor.backgroundImageToLayer(slide.id)} disabled={locked}>
+	<DropdownMenu.Item onclick={() => editor.backgroundImageToLayer(page.id)} disabled={locked}>
 		<ExtractImageIcon />
 		Detach image from background
 	</DropdownMenu.Item>

package/dist/components/{presentation-editor → editor}/menu/background-menu-content.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { PresentationEditor } from '../presentation-editor.svelte.js';
-import type { Slide } from '../types.js';
+import type { Editor } from '../editor.svelte.js';
+import type { Page } from '../types.js';
 interface Props {
-    editor: PresentationEditor;
-    slide: Slide;
+    editor: Editor;
+    page: Page;
 }
 declare const BackgroundMenuContent: import("svelte").Component<Props, {}, "">;
 type BackgroundMenuContent = ReturnType<typeof BackgroundMenuContent>;

package/dist/components/{presentation-editor → editor}/menu/layer-menu-content.svelte

@@ -1,34 +1,37 @@
 <script lang="ts">
-	import CopyIcon from 'lucide-svelte/icons/copy';
-	import PasteIcon from 'lucide-svelte/icons/clipboard';
-	import DuplicateIcon from 'lucide-svelte/icons/copy-plus';
-	import TrashIcon from 'lucide-svelte/icons/trash-2';
-	import LayerIcon from 'lucide-svelte/icons/layers';
-	import LayerBringForwardIcon from 'lucide-svelte/icons/arrow-up';
-	import LayerBringToFrontIcon from 'lucide-svelte/icons/arrow-up-to-line';
-	import LayerSendBackwardIcon from 'lucide-svelte/icons/arrow-down';
-	import LayerSendToBackIcon from 'lucide-svelte/icons/arrow-down-to-line';
-	import AlignLeftIcon from 'lucide-svelte/icons/align-start-vertical';
-	import AlignCenterIcon from 'lucide-svelte/icons/align-center-vertical';
-	import AlignRightIcon from 'lucide-svelte/icons/align-end-vertical';
-	import AlignTopIcon from 'lucide-svelte/icons/align-start-horizontal';
-	import AlignMiddleIcon from 'lucide-svelte/icons/align-center-horizontal';
-	import AlignBottomIcon from 'lucide-svelte/icons/align-end-horizontal';
-	import LockIcon from 'lucide-svelte/icons/lock-keyhole';
-	import UnlockIcon from 'lucide-svelte/icons/lock-keyhole-open';
-	import SetAsBackgroundIcon from 'lucide-svelte/icons/image-upscale';
+	import CopyIcon from '@lucide/svelte/icons/copy';
+	import PasteIcon from '@lucide/svelte/icons/clipboard';
+	import DuplicateIcon from '@lucide/svelte/icons/copy-plus';
+	import TrashIcon from '@lucide/svelte/icons/trash-2';
+	import LayerIcon from '@lucide/svelte/icons/layers';
+	import LayerBringForwardIcon from '@lucide/svelte/icons/arrow-up';
+	import LayerBringToFrontIcon from '@lucide/svelte/icons/arrow-up-to-line';
+	import LayerSendBackwardIcon from '@lucide/svelte/icons/arrow-down';
+	import LayerSendToBackIcon from '@lucide/svelte/icons/arrow-down-to-line';
+	import AlignLeftIcon from '@lucide/svelte/icons/align-start-vertical';
+	import AlignCenterIcon from '@lucide/svelte/icons/align-center-vertical';
+	import AlignRightIcon from '@lucide/svelte/icons/align-end-vertical';
+	import AlignTopIcon from '@lucide/svelte/icons/align-start-horizontal';
+	import AlignMiddleIcon from '@lucide/svelte/icons/align-center-horizontal';
+	import AlignBottomIcon from '@lucide/svelte/icons/align-end-horizontal';
+	import GroupIcon from '@lucide/svelte/icons/group';
+	import UngroupIcon from '@lucide/svelte/icons/ungroup';
+	import LockIcon from '@lucide/svelte/icons/lock-keyhole';
+	import UnlockIcon from '@lucide/svelte/icons/lock-keyhole-open';
+	import SetAsBackgroundIcon from '@lucide/svelte/icons/image-upscale';
 	import * as DropdownMenu from '../../ui/dropdown-menu/index.js';
-	import { getPresentationEditorContext } from '../presentation-editor.svelte.js';
+	import { getEditorContext } from '../editor.svelte.js';
 	import { checkIfMac } from '../../../utils.js';
 
-	const editor = getPresentationEditorContext();
+	const editor = getEditorContext();
 
 	const someLayersLocked = $derived(editor.activeLayers.some((layer) => layer.locked));
-	const locked = $derived(editor.activeSlide.locked || someLayersLocked);
+	const locked = $derived(editor.activePage.locked || someLayersLocked);
 
 	const isMac = checkIfMac();
 
 	const activeLayerIds = $derived(editor.activeLayers.map((l) => l.id));
+	const selectedLayerIds = $derived(editor.selectedLayers.map((l) => l.id));
 
 	const singleImageLayer = $derived(
 		editor.activeLayers.length === 1 && editor.activeLayers[0].type === 'image'
@@ -36,10 +39,10 @@
 			: null,
 	);
 
-	let overlaps = editor.getLayerOverlaps(editor.activeSlide, editor.activeLayers);
+	let overlaps = editor.getLayerOverlaps(editor.activePage, editor.activeLayers);
 </script>
 
-<DropdownMenu.Item onclick={() => editor.copyLayers(editor.activeSlide.id, activeLayerIds)}>
+<DropdownMenu.Item onclick={() => editor.copyLayers(editor.activePage.id, activeLayerIds)}>
 	<CopyIcon />
 	Copy
 	<DropdownMenu.Shortcut>{isMac ? '⌘C' : 'Ctrl+C'}</DropdownMenu.Shortcut>
@@ -55,7 +58,7 @@
 	<DropdownMenu.Shortcut>{isMac ? '⌘D' : 'Ctrl+D'}</DropdownMenu.Shortcut>
 </DropdownMenu.Item>
 <DropdownMenu.Item
-	onclick={() => editor.removeLayers(editor.activeSlide.id, activeLayerIds)}
+	onclick={() => editor.removeLayers(editor.activePage.id, selectedLayerIds)}
 	disabled={locked}
 >
 	<TrashIcon />
@@ -74,7 +77,7 @@
 		<DropdownMenu.SubContent class="w-56" align="start">
 			<DropdownMenu.Item
 				disabled={overlaps.forward === undefined}
-				onclick={() => editor.moveLayers(editor.activeSlide.id, activeLayerIds, 'forward')}
+				onclick={() => editor.moveLayers(editor.activePage.id, activeLayerIds, 'forward')}
 			>
 				<LayerBringForwardIcon />
 				Bring forward
@@ -82,7 +85,7 @@
 			</DropdownMenu.Item>
 			<DropdownMenu.Item
 				disabled={overlaps.front === undefined}
-				onclick={() => editor.moveLayers(editor.activeSlide.id, activeLayerIds, 'front')}
+				onclick={() => editor.moveLayers(editor.activePage.id, activeLayerIds, 'front')}
 			>
 				<LayerBringToFrontIcon />
 				Bring to front
@@ -90,7 +93,7 @@
 			</DropdownMenu.Item>
 			<DropdownMenu.Item
 				disabled={overlaps.backward === undefined}
-				onclick={() => editor.moveLayers(editor.activeSlide.id, activeLayerIds, 'backward')}
+				onclick={() => editor.moveLayers(editor.activePage.id, activeLayerIds, 'backward')}
 			>
 				<LayerSendBackwardIcon />
 				Send backward
@@ -98,7 +101,7 @@
 			</DropdownMenu.Item>
 			<DropdownMenu.Item
 				disabled={overlaps.back === undefined}
-				onclick={() => editor.moveLayers(editor.activeSlide.id, activeLayerIds, 'back')}
+				onclick={() => editor.moveLayers(editor.activePage.id, activeLayerIds, 'back')}
 			>
 				<LayerSendToBackIcon />
 				Send to back
@@ -115,38 +118,38 @@
 	</DropdownMenu.SubTrigger>
 	<DropdownMenu.SubContent class="w-32" align="start">
 		<DropdownMenu.Item
-			onclick={() => editor.alignLayers(editor.activeSlide.id, activeLayerIds, 'left')}
+			onclick={() => editor.alignLayers(editor.activePage.id, activeLayerIds, 'left')}
 		>
 			<AlignLeftIcon />
 			Left
 		</DropdownMenu.Item>
 		<DropdownMenu.Item
-			onclick={() => editor.alignLayers(editor.activeSlide.id, activeLayerIds, 'center')}
+			onclick={() => editor.alignLayers(editor.activePage.id, activeLayerIds, 'center')}
 		>
 			<AlignCenterIcon />
 			Center
 		</DropdownMenu.Item>
 		<DropdownMenu.Item
-			onclick={() => editor.alignLayers(editor.activeSlide.id, activeLayerIds, 'right')}
+			onclick={() => editor.alignLayers(editor.activePage.id, activeLayerIds, 'right')}
 		>
 			<AlignRightIcon />
 			Right
 		</DropdownMenu.Item>
 		<DropdownMenu.Separator />
 		<DropdownMenu.Item
-			onclick={() => editor.alignLayers(editor.activeSlide.id, activeLayerIds, 'top')}
+			onclick={() => editor.alignLayers(editor.activePage.id, activeLayerIds, 'top')}
 		>
 			<AlignTopIcon />
 			Top
 		</DropdownMenu.Item>
 		<DropdownMenu.Item
-			onclick={() => editor.alignLayers(editor.activeSlide.id, activeLayerIds, 'middle')}
+			onclick={() => editor.alignLayers(editor.activePage.id, activeLayerIds, 'middle')}
 		>
 			<AlignMiddleIcon />
 			Middle
 		</DropdownMenu.Item>
 		<DropdownMenu.Item
-			onclick={() => editor.alignLayers(editor.activeSlide.id, activeLayerIds, 'bottom')}
+			onclick={() => editor.alignLayers(editor.activePage.id, activeLayerIds, 'bottom')}
 		>
 			<AlignBottomIcon />
 			Bottom
@@ -156,10 +159,31 @@
 
 <DropdownMenu.Separator />
 
+{#if editor.activeLayers.length > 1}
+	<DropdownMenu.Item
+		onclick={() => editor.groupLayers(editor.activePage.id, activeLayerIds)}
+		disabled={locked}
+	>
+		<GroupIcon />
+		Group
+		<DropdownMenu.Shortcut>{isMac ? '⌘G' : 'Ctrl+G'}</DropdownMenu.Shortcut>
+	</DropdownMenu.Item>
+{/if}
+
+{#if editor.activeLayers.every((layer) => layer.type === 'group')}
+	<DropdownMenu.Item
+		onclick={() => editor.ungroupLayers(editor.activePage.id, activeLayerIds)}
+		disabled={locked}
+	>
+		<UngroupIcon />
+		Ungroup
+		<DropdownMenu.Shortcut>{isMac ? '⇧⌘G' : 'Ctrl+Shift+G'}</DropdownMenu.Shortcut>
+	</DropdownMenu.Item>
+{/if}
+
 <DropdownMenu.Item
-	onclick={() =>
-		editor.toggleLayersLocked(editor.activeSlide.id, activeLayerIds, !someLayersLocked)}
-	disabled={editor.activeSlide.locked}
+	onclick={() => editor.toggleLayersLocked(editor.activePage.id, activeLayerIds, !someLayersLocked)}
+	disabled={editor.activePage.locked}
 >
 	{#if someLayersLocked}
 		<UnlockIcon />
@@ -174,7 +198,7 @@
 {#if singleImageLayer}
 	<DropdownMenu.Separator />
 	<DropdownMenu.Item
-		onclick={() => editor.imageLayerToBackground(editor.activeSlide.id, singleImageLayer.id)}
+		onclick={() => editor.imageLayerToBackground(editor.activePage.id, singleImageLayer.id)}
 		disabled={locked}
 	>
 		<SetAsBackgroundIcon />