@peteai/presentation-editor 0.0.6 → 0.0.8

package/dist/components/editor/header.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import UndoIcon from '@lucide/svelte/icons/undo-2';
+	import RedoIcon from '@lucide/svelte/icons/redo-2';
+	import { Separator } from '../ui/separator/index.js';
+	import { Button } from '../ui/button/index.js';
+	import type { Editor } from './editor.svelte.js';
+	import { BackgroundLayerButtons } from './layers/index.js';
+	import ActiveLayersButtons from './active-layers-buttons.svelte';
+
+	interface Props {
+		editor: Editor;
+	}
+
+	const { editor }: Props = $props();
+
+	let disabled = $derived(!!editor.imageCropLayer);
+</script>
+
+<div class="bg-background h-12 w-full border-b border-gray-200 px-2">
+	<div class="flex h-full items-center justify-between">
+		<div class="grid grid-flow-col items-center gap-2">
+			<Button
+				variant="ghost"
+				size="icon-xs"
+				disabled={editor.historyIndex === -1 || disabled}
+				onclick={() => editor.historyUndo()}
+			>
+				<UndoIcon class="h-6 w-6" />
+			</Button>
+			<Button
+				variant="ghost"
+				size="icon-xs"
+				disabled={editor.historyIndex === editor.historyActions.length - 1 || disabled}
+				onclick={() => editor.historyRedo()}
+			>
+				<RedoIcon class="h-6 w-6" />
+			</Button>
+			{#if !disabled}
+				<div class="grid grid-flow-col items-center gap-2 overflow-x-auto">
+					{#if !editor.activePage.locked}
+						{#if editor.activeSelection.type === 'background'}
+							{#if !editor.activePage.backgroundLocked}
+								<BackgroundLayerButtons />
+							{/if}
+						{:else if editor.activeLayers.length}
+							<ActiveLayersButtons />
+						{/if}
+					{/if}
+				</div>
+				<Separator orientation="vertical" />
+				<Button
+					variant="ghost"
+					size="xs"
+					active={editor.activeSidebarPopup === 'position'}
+					onclick={() => editor.toggleActiveSidebarPopup('position')}
+				>
+					Position
+				</Button>
+			{/if}
+		</div>
+	</div>
+</div>

package/dist/components/editor/header.svelte.d.ts

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

package/dist/components/{presentation-editor → editor}/hotkeys.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { getPresentationEditorContext } from './presentation-editor.svelte.js';
+	import { getEditorContext } from './editor.svelte.js';
 
-	const editor = getPresentationEditorContext();
+	const editor = getEditorContext();
 
 	const onKeyDown = (e: KeyboardEvent) => {
 		console.log('keydown hotkey', e);
@@ -12,6 +12,13 @@
 		)
 			return;
 
+		if (editor.imageCropLayer) {
+			if (e.code === 'Escape') {
+				editor.imageCropLayer = null;
+			}
+			return;
+		}
+
 		if (e.code === 'Escape') {
 			if (editor.activeAction) {
 				editor.activeAction = null;
@@ -20,18 +27,18 @@
 			}
 		} else if (!editor.activeAction) {
 			if (e.code === 'Enter' && (e.metaKey || e.ctrlKey)) {
-				editor.addSlide();
+				editor.addPage();
 				e.preventDefault();
 			} else if (['Delete', 'Backspace'].includes(e.code)) {
 				if (editor.activeLayers.length) {
 					editor.removeLayers(
-						editor.activeSlide.id,
-						editor.activeLayers.map(({ id }) => id),
+						editor.activePage.id,
+						editor.selectedLayers.map((l) => l.id),
 					);
-				} else if (editor.activeBackground) {
-					editor.removeBackground(editor.activeSlide.id);
-				} else if (editor.slideSelected) {
-					editor.removeSlide(editor.activeSlide.id);
+				} else if (editor.activeSelection.type === 'background') {
+					editor.removeBackground(editor.activePage.id);
+				} else if (editor.pageSelected) {
+					editor.removePage(editor.activePage.id);
 				}
 			} else if (e.code === 'KeyZ') {
 				if (e.metaKey || e.ctrlKey) {
@@ -44,25 +51,25 @@
 			} else if (e.code === 'KeyY' && (e.metaKey || e.ctrlKey)) {
 				editor.historyRedo();
 			} else if (e.code === 'KeyD' && (e.metaKey || e.ctrlKey)) {
-				if (editor.slideSelected) {
-					editor.duplicateSlide(editor.activeSlide);
+				if (editor.pageSelected) {
+					editor.duplicatePage(editor.activePage);
 					e.preventDefault();
 				}
 			} else if (e.code === 'KeyC' && (e.metaKey || e.ctrlKey)) {
 				if (editor.activeLayers.length) {
 					editor.copyLayers(
-						editor.activeSlide.id,
+						editor.activePage.id,
 						editor.activeLayers.map(({ id }) => id),
 					);
-				} else if (editor.slideSelected) {
-					editor.copySlide(editor.activeSlide.id);
+				} else if (editor.pageSelected) {
+					editor.copyPage(editor.activePage.id);
 				}
 			} else if (e.code === 'KeyV' && (e.metaKey || e.ctrlKey)) {
 				editor.clipboardPaste();
 			} else if (e.code === 'BracketLeft' && (e.metaKey || e.ctrlKey)) {
 				if (editor.activeLayers.length) {
 					editor.moveLayers(
-						editor.activeSlide.id,
+						editor.activePage.id,
 						editor.activeLayers.map(({ id }) => id),
 						e.altKey ? 'back' : 'backward',
 					);
@@ -71,12 +78,37 @@
 			} else if (e.code === 'BracketRight' && (e.metaKey || e.ctrlKey)) {
 				if (editor.activeLayers.length) {
 					editor.moveLayers(
-						editor.activeSlide.id,
+						editor.activePage.id,
 						editor.activeLayers.map(({ id }) => id),
 						e.altKey ? 'front' : 'forward',
 					);
 					e.preventDefault();
 				}
+			} else if (e.code === 'KeyG' && (e.metaKey || e.ctrlKey)) {
+				if (editor.activeLayers.length) {
+					if (e.shiftKey) {
+						console.log('ungroup');
+						editor.ungroupLayers(
+							editor.activePage.id,
+							editor.activeLayers.map(({ id }) => id),
+						);
+					} else {
+						editor.groupLayers(
+							editor.activePage.id,
+							editor.activeLayers.map(({ id }) => id),
+						);
+					}
+					e.preventDefault();
+				}
+			} else if (e.code === 'KeyL' && e.altKey && e.shiftKey) {
+				if (editor.activeLayers.length) {
+					editor.toggleLayersLocked(
+						editor.activePage.id,
+						editor.activeLayers.map(({ id }) => id),
+						!editor.activeLayers.some(({ locked }) => locked),
+					);
+					e.preventDefault();
+				}
 			}
 		}
 	};

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

@@ -0,0 +1,3 @@
+import Editor from './editor.svelte';
+import Page from './page.svelte';
+export { Editor, Page };

package/dist/components/editor/index.js

@@ -0,0 +1,3 @@
+import Editor from './editor.svelte';
+import Page from './page.svelte';
+export { Editor, Page };

package/dist/components/{presentation-editor → editor}/layers/active-background-border.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { getPresentationEditorContext } from '../presentation-editor.svelte.js';
+	import { getEditorContext } from '../editor.svelte.js';
 
-	const editor = getPresentationEditorContext();
+	const editor = getEditorContext();
 </script>
 
 <div

package/dist/components/{presentation-editor → editor}/layers/active-layer-border.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { getPresentationEditorContext } from '../presentation-editor.svelte.js';
 	import type { Layer } from '../types.js';
+	import { getEditorContext } from '../editor.svelte.js';
 
 	interface Props {
 		layer: Layer;
@@ -8,17 +8,14 @@
 
 	let { layer }: Props = $props();
 
-	const editor = getPresentationEditorContext();
-
-	let scale = $derived(layer.scale ?? 1);
-	let rotate = $derived(layer.rotate ?? 0);
+	const editor = getEditorContext();
 </script>
 
 <div
 	class="pointer-events-none absolute left-0 top-0 h-full w-full"
-	style:width={`${layer.width * scale * editor.zoom}px`}
-	style:height={`${layer.height * scale * editor.zoom}px`}
-	style:transform={`translate(${layer.x * editor.zoom}px, ${layer.y * editor.zoom}px) rotate(${rotate}deg)`}
+	style:width={`${layer.width * layer.scale * editor.zoom}px`}
+	style:height={`${layer.height * layer.scale * editor.zoom}px`}
+	style:transform={`translate(${layer.x * editor.zoom}px, ${layer.y * editor.zoom}px) rotate(${layer.rotate}deg)`}
 >
 	<div
 		class="border-primary absolute -inset-px border-2"

package/dist/components/editor/layers/buttons/border-button/border-button-colors.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import { Button, type ButtonProps } from '../../../../ui/button/index.js';
+	import { AlphaGrid } from '../../../../ui/color-picker/index.js';
+	import { ColorIndicatorGradientDef } from '../../../color-indicator/index.js';
+	import { generateId } from '../../../../../utils.js';
+
+	interface Props extends ButtonProps {
+		borderColors: string[];
+		width: number;
+		height: number;
+	}
+
+	let { borderColors, width, height, ...restProps }: Props = $props();
+
+	let partitionWidth = $derived(width / borderColors.length);
+
+	let gradientId = generateId();
+
+	const isGradient = (color: string) => ~color.indexOf(':');
+
+	let containGradient = $derived(borderColors.some(isGradient));
+</script>
+
+<Button variant="ghost" size="icon-xs" {...restProps}>
+	<span
+		class="relative overflow-hidden rounded-full border border-gray-300"
+		style:width="{width}px"
+		style:height="{height}px"
+	>
+		<AlphaGrid size={12}>
+			<svg class="absolute inset-0" preserveAspectRatio="none" viewBox="0 0 {width} {height}">
+				{#if containGradient}
+					<defs>
+						{#each borderColors as color, index}
+							{#if isGradient(color)}
+								<ColorIndicatorGradientDef id="{gradientId}_{index}" {color} {width} {height} />
+							{/if}
+						{/each}
+					</defs>
+				{/if}
+				{#each borderColors as color, index}
+					<rect
+						y="0"
+						x={index * partitionWidth}
+						{height}
+						width={partitionWidth}
+						fill={isGradient(color) ? `url(#${gradientId}_${index})` : color}
+						shape-rendering="crispEdges"
+					></rect>
+				{/each}
+			</svg>
+			<span
+				class="bg-background absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full"
+				style:width="{width / 2}px"
+				style:height="{height / 2}px"
+			></span>
+		</AlphaGrid>
+	</span>
+</Button>

package/dist/components/editor/layers/buttons/border-button/border-button-colors.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type ButtonProps } from '../../../../ui/button/index.js';
+interface Props extends ButtonProps {
+    borderColors: string[];
+    width: number;
+    height: number;
+}
+declare const BorderButtonColors: import("svelte").Component<Props, {}, "">;
+type BorderButtonColors = ReturnType<typeof BorderButtonColors>;
+export default BorderButtonColors;

package/dist/components/{presentation-editor → editor}/layers/buttons/border-button/border-button.svelte

@@ -4,18 +4,15 @@
 	import BorderSolidIcon from 'svelte-radix/BorderSolid.svelte';
 	import BorderDashedIcon from 'svelte-radix/BorderDashed.svelte';
 	import BorderDottedIcon from 'svelte-radix/BorderDotted.svelte';
-	import type {
-		ImageLayer,
-		LayerBorder,
-		HistoryAction,
-	} from '../../../types.js';
-	import { getPresentationEditorContext } from '../../../presentation-editor.svelte.js';
+	import type { ImageLayer, LayerBorder, HistoryAction } from '../../../types.js';
+	import { getEditorContext } from '../../../editor.svelte.js';
 	import * as Popover from '../../../../ui/popover/index.js';
 	import { Button } from '../../../../ui/button/index.js';
 	import { Slider } from '../../../../ui/slider/index.js';
 	import { Input } from '../../../../ui/input/index.js';
 	import { createDebouncedCallback } from '../../../../../utils.js';
-	import { buildBackgroundCircleStyle, extractBorderColors } from '../../utils.js';
+	import { extractBorderColors } from '../../utils.js';
+	import BorderButtonColors from './border-button-colors.svelte';
 
 	interface Props {
 		layers: ImageLayer[];
@@ -23,25 +20,24 @@
 
 	let { layers = $bindable() }: Props = $props();
 
-	const editor = getPresentationEditorContext();
-
-	const getLayerBorderWidth = (layer: ImageLayer) =>
-		layer.borderStyle ? layer.borderWidth || 0 : 0;
+	const editor = getEditorContext();
 
 	const borderWidth = $derived.by(() => {
 		if (!layers.length) return;
 
-		const firstLayerBorderWidth = getLayerBorderWidth(layers[0]);
-		const allSame = layers.every((layer) => getLayerBorderWidth(layer) === firstLayerBorderWidth);
+		const firstLayerBorderWidth = layers[0].borderWidth;
+		const allSame = layers.every((layer) => layer.borderWidth === firstLayerBorderWidth);
 
 		return allSame ? firstLayerBorderWidth : undefined;
 	});
 
+	const getLayerBorderStyle = (layer: ImageLayer) => (layer.borderWidth ? layer.borderStyle : null);
+
 	const borderStyle = $derived.by(() => {
 		if (!layers.length) return;
 
-		const firstLayerBorderWidth = layers[0].borderStyle;
-		const allSame = layers.every((layer) => layer.borderStyle === firstLayerBorderWidth);
+		const firstLayerBorderWidth = getLayerBorderStyle(layers[0]);
+		const allSame = layers.every((layer) => getLayerBorderStyle(layer) === firstLayerBorderWidth);
 
 		return allSame ? firstLayerBorderWidth : undefined;
 	});
@@ -51,32 +47,31 @@
 	const setStyle = (value: LayerBorder['borderStyle']) => {
 		if (value === borderStyle) return;
 
-		editor.historyPush({
-			type: 'layersGroup',
-			actions: layers.map((layer) => {
+		editor.historyPush(
+			layers.map((layer) => {
 				const undo = {
 					borderStyle: layer.borderStyle,
 					borderWidth: layer.borderWidth,
 				};
 				const redo = {
 					borderStyle: value,
-					borderWidth: layer.borderWidth ?? 10,
+					borderWidth: layer.borderWidth || 10,
 				};
 				Object.assign(layer, redo);
 				return {
-					type: 'layer',
-					slideId: editor.activeSlide.id,
+					type: 'layerUpdate',
+					pageId: editor.activePage.id,
 					layer: { id: layer.id, type: layer.type },
 					undo,
 					redo,
 				};
 			}),
-		});
+		);
 	};
 
 	let initial: (ImageLayer & { state: ImageLayer })[] | null = null;
-	const debouncedHistoryPush = createDebouncedCallback((action: HistoryAction) => {
-		editor.historyPush(action);
+	const debouncedHistoryPush = createDebouncedCallback((actions: HistoryAction[]) => {
+		editor.historyPush(actions);
 		initial = null;
 	}, 500);
 
@@ -92,32 +87,27 @@
 		if (!initial) {
 			initial = layers.map((layer) => ({ ...layer, state: layer }));
 		}
-		const action: HistoryAction = {
-			type: 'layersGroup',
-			actions: initial.map((layerWithState) => {
-				const { state, ...layer } = layerWithState;
-				const undo = {
-					borderStyle: layer.borderStyle,
-					borderWidth: layer.borderWidth,
-				};
-				const redo = {
-					borderStyle: layer.borderStyle ?? 'solid',
-					borderWidth: borderWidth,
-				};
-				Object.assign(state, redo);
-				return {
-					type: 'layer',
-					slideId: editor.activeSlide.id,
-					layer: { id: layer.id, type: layer.type },
-					undo,
-					redo,
-				};
-			}),
-		};
+		const actions: HistoryAction[] = initial.map((layerWithState) => {
+			const { state, ...layer } = layerWithState;
+			const undo = {
+				borderWidth: layer.borderWidth,
+			};
+			const redo = {
+				borderWidth: borderWidth,
+			};
+			Object.assign(state, redo);
+			return {
+				type: 'layerUpdate',
+				pageId: editor.activePage.id,
+				layer: { id: layer.id, type: layer.type },
+				undo,
+				redo,
+			};
+		});
 		if (debounce) {
-			debouncedHistoryPush(action);
+			debouncedHistoryPush(actions);
 		} else {
-			editor.historyPush(action);
+			editor.historyPush(actions);
 			initial = null;
 		}
 	};
@@ -138,8 +128,8 @@
 					<Button
 						variant="outline"
 						class="w-12 p-2"
-						active={borderStyle === null}
-						onclick={() => setStyle(null)}
+						active={borderWidth === 0}
+						onclick={() => setWidth(0)}
 					>
 						<BorderNoneIcon class="h-6 w-6" />
 					</Button>
@@ -175,7 +165,7 @@
 					<div class="grow">
 						<Slider
 							type="single"
-							value={borderWidth || 0}
+							value={borderWidth}
 							{min}
 							{max}
 							step={1}
@@ -188,7 +178,7 @@
 						inputmode="decimal"
 						placeholder="--"
 						value={borderWidth}
-						onchange={(e) => setWidth(e.target.value)}
+						onchange={(e) => setWidth(e.currentTarget.value)}
 					/>
 				</div>
 			</div>
@@ -197,19 +187,11 @@
 </Popover.Root>
 
 {#if borderColors}
-	<Button
-		variant="ghost"
-		size="icon-xs"
+	<BorderButtonColors
+		{borderColors}
+		width={24}
+		height={24}
 		onclick={() => editor.toggleActiveSidebarPopup('borderColor')}
 		active={editor.activeSidebarPopup === 'borderColor'}
-	>
-		<span
-			class="relative h-6 w-6 rounded-full border border-gray-300"
-			style={buildBackgroundCircleStyle(borderColors)}
-		>
-			<span
-				class="bg-background absolute left-1/2 top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 rounded-full"
-			></span>
-		</span>
-	</Button>
+	/>
 {/if}

package/dist/components/{presentation-editor → editor}/layers/buttons/corner-radius-button/corner-radius-button.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import CornerRadiusIcon from 'svelte-radix/CornerTopLeft.svelte';
 	import type { ImageLayer, HistoryAction } from '../../../types.js';
-	import { getPresentationEditorContext } from '../../../presentation-editor.svelte.js';
+	import { getEditorContext } from '../../../editor.svelte.js';
 	import * as Popover from '../../../../ui/popover/index.js';
 	import { Button } from '../../../../ui/button/index.js';
 	import { Slider } from '../../../../ui/slider/index.js';
@@ -14,7 +14,7 @@
 
 	let { layers = $bindable() }: Props = $props();
 
-	const editor = getPresentationEditorContext();
+	const editor = getEditorContext();
 
 	const cornerRadius = $derived.by(() => {
 		if (!layers.length) return;
@@ -22,14 +22,13 @@
 		const firstLayerCornerRadius = layers[0].cornerRadius;
 		const allSame = layers.every((layer) => layer.cornerRadius === firstLayerCornerRadius);
 
-		return allSame ? firstLayerCornerRadius || 0 : undefined;
+		return allSame ? firstLayerCornerRadius : undefined;
 	});
 
 	let initial: (ImageLayer & { state: ImageLayer })[] | null = null;
-	let undo: { cornerRadius: number | null } | null = null;
-	const debouncedHistoryPush = createDebouncedCallback((action: HistoryAction) => {
-		editor.historyPush(action);
-		undo = null;
+	const debouncedHistoryPush = createDebouncedCallback((actions: HistoryAction[]) => {
+		editor.historyPush(actions);
+		initial = null;
 	}, 500);
 
 	let min = 0;
@@ -44,27 +43,24 @@
 		if (!initial) {
 			initial = layers.map((layer) => ({ ...layer, state: layer }));
 		}
-		const action: HistoryAction = {
-			type: 'layersGroup',
-			actions: initial.map((layerWithState) => {
-				const { state, ...layer } = layerWithState;
-				const undo = { cornerRadius: layer.cornerRadius };
-				const redo = { cornerRadius: value || null };
-				Object.assign(state, redo);
-				return {
-					type: 'layer',
-					slideId: editor.activeSlide.id,
-					layer: { id: layer.id, type: layer.type },
-					undo,
-					redo,
-				};
-			}),
-		};
+		const actions: HistoryAction[] = initial.map((layerWithState) => {
+			const { state, ...layer } = layerWithState;
+			const undo = { cornerRadius: layer.cornerRadius };
+			const redo = { cornerRadius: value };
+			Object.assign(state, redo);
+			return {
+				type: 'layerUpdate',
+				pageId: editor.activePage.id,
+				layer: { id: layer.id, type: layer.type },
+				undo,
+				redo,
+			};
+		});
 		if (debounce) {
-			debouncedHistoryPush(action);
+			debouncedHistoryPush(actions);
 		} else {
-			editor.historyPush(action);
-			undo = null;
+			editor.historyPush(actions);
+			initial = null;
 		}
 	};
 </script>
@@ -85,7 +81,7 @@
 					<div class="grow">
 						<Slider
 							type="single"
-							value={cornerRadius || 0}
+							value={cornerRadius}
 							{min}
 							{max}
 							step={1}
@@ -98,7 +94,7 @@
 						inputmode="decimal"
 						placeholder="--"
 						value={cornerRadius}
-						onchange={(e) => setCornerRadius(e.target.value)}
+						onchange={(e) => setCornerRadius(e.currentTarget.value)}
 					/>
 				</div>
 			</div>

package/dist/components/{presentation-editor → editor}/layers/buttons/flip-button/flip-button.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import FlipHorizontalIcon from 'lucide-svelte/icons/flip-horizontal';
-	import FlipVerticalIcon from 'lucide-svelte/icons/flip-vertical';
+	import FlipHorizontalIcon from '@lucide/svelte/icons/flip-horizontal';
+	import FlipVerticalIcon from '@lucide/svelte/icons/flip-vertical';
 	import type { ImageLayer, BackgroundImage } from '../../../types.js';
-	import { getPresentationEditorContext } from '../../../presentation-editor.svelte.js';
+	import { getEditorContext } from '../../../editor.svelte.js';
 	import * as DropdownMenu from '../../../../ui/dropdown-menu/index.js';
 	import { buttonVariants } from '../../../../ui/button/index.js';
 
@@ -12,32 +12,31 @@
 
 	let { layers = $bindable() }: Props = $props();
 
-	const editor = getPresentationEditorContext();
+	const editor = getEditorContext();
 
 	const flipToggle = (isHorizontal?: boolean) => () => {
 		if (Array.isArray(layers)) {
-			editor.historyPush({
-				type: 'layersGroup',
-				actions: layers.map((layer) => {
+			editor.historyPush(
+				layers.map((layer) => {
 					const undo = isHorizontal ? { flipY: layer.flipY } : { flipX: layer.flipX };
 					const redo = isHorizontal ? { flipY: !layer.flipY } : { flipX: !layer.flipX };
 					Object.assign(layer, redo);
 					return {
-						type: 'layer',
-						slideId: editor.activeSlide.id,
+						type: 'layerUpdate',
+						pageId: editor.activePage.id,
 						layer: { id: layer.id, type: layer.type },
 						undo,
 						redo,
 					};
 				}),
-			});
+			);
 		} else {
 			const undo = isHorizontal ? { flipY: layers.flipY } : { flipX: layers.flipX };
 			const redo = isHorizontal ? { flipY: !layers.flipY } : { flipX: !layers.flipX };
 			Object.assign(layers, redo);
 			editor.historyPush({
-				type: 'backgroundImage',
-				slideId: editor.activeSlide.id,
+				type: 'backgroundImageUpdate',
+				pageId: editor.activePage.id,
 				undo,
 				redo,
 			});