@peteai/presentation-editor 0.0.2 → 0.0.4

package/dist/components/presentation-editor/header.svelte

@@ -1,16 +1,11 @@
 <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 { ActiveSidebar } from './types.js';
 	import { getPresentationEditorContext } from './presentation-editor.svelte.js';
-	import { BackgroundLayerButtons, HtmlLayerButtons, ImageLayerButtons } from './layers/index.js';
-
-	interface Props {
-		activeSidebarTab: ActiveSidebar;
-		onChange: (tab: ActiveSidebar) => void;
-	}
-	let { activeSidebarTab, onChange }: Props = $props();
+	import { BackgroundLayerButtons } from './layers/index.js';
+	import ActiveLayersButtons from './active-layers-buttons.svelte';
 
 	const editor = getPresentationEditorContext();
 </script>
@@ -18,22 +13,6 @@
 <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="xs"
-				active={activeSidebarTab === 'layers'}
-				onclick={() => onChange('layers')}
-			>
-				Layers
-			</Button>
-			<Button
-				variant="ghost"
-				size="xs"
-				active={activeSidebarTab === 'images'}
-				onclick={() => onChange('images')}
-			>
-				Images
-			</Button>
 			<Button
 				variant="ghost"
 				size="icon-xs"
@@ -50,17 +29,26 @@
 			>
 				<RedoIcon class="h-6 w-6" />
 			</Button>
-			{#if editor.activeBackground}
-				<BackgroundLayerButtons />
-			{:else if editor.activeLayer}
-				{#if editor.activeLayer.type === 'html'}
-					{#if editor.htmlEditor}
-						<HtmlLayerButtons bind:layer={editor.activeLayer} htmlEditor={editor.htmlEditor} />
+			<div class="grid grid-flow-col items-center gap-2 overflow-x-auto">
+				{#if !editor.activeSlide.locked}
+					{#if editor.activeBackground}
+						{#if !editor.activeSlide.backgroundLocked}
+							<BackgroundLayerButtons />
+						{/if}
+					{:else if editor.activeLayers.length}
+						<ActiveLayersButtons />
 					{/if}
-				{:else if editor.activeLayer.type === 'image'}
-					<ImageLayerButtons bind:layer={editor.activeLayer} />
 				{/if}
-			{/if}
+			</div>
+			<Separator orientation="vertical" />
+			<Button
+				variant="ghost"
+				size="xs"
+				active={editor.activeSidebarPopup === 'position'}
+				onclick={() => editor.toggleActiveSidebarPopup('position')}
+			>
+				Position
+			</Button>
 		</div>
 	</div>
 </div>

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

@@ -1,8 +1,18 @@
-import type { ActiveSidebar } from './types.js';
-interface Props {
-    activeSidebarTab: ActiveSidebar;
-    onChange: (tab: ActiveSidebar) => void;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
 }
-declare const Header: import("svelte").Component<Props, {}, "">;
-type Header = ReturnType<typeof Header>;
+declare const Header: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Header = InstanceType<typeof Header>;
 export default Header;

package/dist/components/presentation-editor/hotkeys.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+	import { getPresentationEditorContext } from './presentation-editor.svelte.js';
+
+	const editor = getPresentationEditorContext();
+
+	const onKeyDown = (e: KeyboardEvent) => {
+		console.log('keydown hotkey', e);
+
+		if (
+			e.target &&
+			(e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement)
+		)
+			return;
+
+		if (e.code === 'Escape') {
+			if (editor.activeAction) {
+				editor.activeAction = null;
+			} else {
+				editor.setActiveBackground(!!editor.activeLayers.length);
+			}
+		} else if (!editor.activeAction) {
+			if (e.code === 'Enter' && (e.metaKey || e.ctrlKey)) {
+				editor.addSlide();
+				e.preventDefault();
+			} else if (['Delete', 'Backspace'].includes(e.code)) {
+				if (editor.activeLayers.length) {
+					editor.removeLayers(
+						editor.activeSlide.id,
+						editor.activeLayers.map(({ id }) => id),
+					);
+				} else if (editor.activeBackground) {
+					editor.removeBackground(editor.activeSlide.id);
+				} else if (editor.slideSelected) {
+					editor.removeSlide(editor.activeSlide.id);
+				}
+			} else if (e.code === 'KeyZ') {
+				if (e.metaKey || e.ctrlKey) {
+					if (e.shiftKey) {
+						editor.historyRedo();
+					} else {
+						editor.historyUndo();
+					}
+				}
+			} 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);
+					e.preventDefault();
+				}
+			} else if (e.code === 'KeyC' && (e.metaKey || e.ctrlKey)) {
+				if (editor.activeLayers.length) {
+					editor.copyLayers(
+						editor.activeSlide.id,
+						editor.activeLayers.map(({ id }) => id),
+					);
+				} else if (editor.slideSelected) {
+					editor.copySlide(editor.activeSlide.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.activeLayers.map(({ id }) => id),
+						e.altKey ? 'back' : 'backward',
+					);
+					e.preventDefault();
+				}
+			} else if (e.code === 'BracketRight' && (e.metaKey || e.ctrlKey)) {
+				if (editor.activeLayers.length) {
+					editor.moveLayers(
+						editor.activeSlide.id,
+						editor.activeLayers.map(({ id }) => id),
+						e.altKey ? 'front' : 'forward',
+					);
+					e.preventDefault();
+				}
+			}
+		}
+	};
+</script>
+
+<svelte:window onkeydown={onKeyDown} />

package/dist/components/presentation-editor/{sidebar/layers.svelte.d.ts → hotkeys.svelte.d.ts}

@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Layers: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const Hotkeys: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-type Layers = InstanceType<typeof Layers>;
-export default Layers;
+type Hotkeys = InstanceType<typeof Hotkeys>;
+export default Hotkeys;

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

@@ -5,12 +5,8 @@
 </script>
 
 <div
-	class="pointer-events-none absolute left-0 top-0 h-full w-full"
+	class="pointer-events-none absolute left-0 top-0 -m-px box-content p-px"
 	style:width={`${editor.width * editor.zoom}px`}
 	style:height={`${editor.height * editor.zoom}px`}
->
-	<div
-		class="absolute -inset-px border-2 border-purple-500"
-		style:box-shadow="0 0 0 1px hsla(0, 0%, 100%, .07), inset 0 0 0 1px hsla(0, 0%, 100%, .07)"
-	></div>
-</div>
+	style:box-shadow="0 0 0 1px hsl(var(--background)), 0 0 0 3px hsl(var(--primary))"
+></div>

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

@@ -4,10 +4,9 @@
 
 	interface Props {
 		layer: Layer;
-		children?: import('svelte').Snippet;
 	}
 
-	let { layer, children }: Props = $props();
+	let { layer }: Props = $props();
 
 	const editor = getPresentationEditorContext();
 
@@ -22,9 +21,7 @@
 	style:transform={`translate(${layer.x * editor.zoom}px, ${layer.y * editor.zoom}px) rotate(${rotate}deg)`}
 >
 	<div
-		class="absolute -inset-px border-2 border-purple-500"
+		class="border-primary absolute -inset-px border-2"
 		style:box-shadow="0 0 0 1px hsla(0, 0%, 100%, .07), inset 0 0 0 1px hsla(0, 0%, 100%, .07)"
 	></div>
 </div>
-
-{@render children?.()}

package/dist/components/presentation-editor/layers/active-layer-border.svelte.d.ts

@@ -1,7 +1,6 @@
 import type { Layer } from '../types.js';
 interface Props {
     layer: Layer;
-    children?: import('svelte').Snippet;
 }
 declare const ActiveLayerBorder: import("svelte").Component<Props, {}, "">;
 type ActiveLayerBorder = ReturnType<typeof ActiveLayerBorder>;

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

@@ -4,49 +4,80 @@
 	import BorderSolidIcon from 'svelte-radix/BorderSolid.svelte';
 	import BorderDashedIcon from 'svelte-radix/BorderDashed.svelte';
 	import BorderDottedIcon from 'svelte-radix/BorderDotted.svelte';
-	import PaletteIcon from 'lucide-svelte/icons/palette';
 	import type {
 		ImageLayer,
 		LayerBorder,
-		LayerChangesAction,
+		HistoryAction,
 	} from '../../../types.js';
 	import { getPresentationEditorContext } from '../../../presentation-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 { cn, createDebouncedCallback } from '../../../../../utils.js';
+	import { Input } from '../../../../ui/input/index.js';
+	import { createDebouncedCallback } from '../../../../../utils.js';
+	import { buildBackgroundCircleStyle, extractBorderColors } from '../../utils.js';
 
 	interface Props {
-		layer: ImageLayer;
+		layers: ImageLayer[];
 	}
 
-	let { layer = $bindable() }: Props = $props();
+	let { layers = $bindable() }: Props = $props();
 
 	const editor = getPresentationEditorContext();
 
-	let selectedColor = $state(layer.borderColor || '#000000');
+	const getLayerBorderWidth = (layer: ImageLayer) =>
+		layer.borderStyle ? layer.borderWidth || 0 : 0;
+
+	const borderWidth = $derived.by(() => {
+		if (!layers.length) return;
+
+		const firstLayerBorderWidth = getLayerBorderWidth(layers[0]);
+		const allSame = layers.every((layer) => getLayerBorderWidth(layer) === firstLayerBorderWidth);
+
+		return allSame ? firstLayerBorderWidth : undefined;
+	});
+
+	const borderStyle = $derived.by(() => {
+		if (!layers.length) return;
+
+		const firstLayerBorderWidth = layers[0].borderStyle;
+		const allSame = layers.every((layer) => layer.borderStyle === firstLayerBorderWidth);
+
+		return allSame ? firstLayerBorderWidth : undefined;
+	});
+
+	const borderColors = $derived(extractBorderColors(layers));
 
 	const setStyle = (value: LayerBorder['borderStyle']) => {
-		if (value === layer.borderStyle) return;
+		if (value === borderStyle) return;
 
-		const undo = {
-			borderStyle: layer.borderStyle,
-			borderWidth: layer.borderWidth,
-			borderColor: layer.borderColor,
-		};
-		const redo = {
-			borderStyle: value,
-			borderWidth: layer.borderWidth ?? 10,
-			borderColor: selectedColor,
-		};
-		Object.assign(layer, redo);
-		editor.historyPush({ type: 'layer', layer: { id: layer.id, type: layer.type }, undo, redo });
+		editor.historyPush({
+			type: 'layersGroup',
+			actions: layers.map((layer) => {
+				const undo = {
+					borderStyle: layer.borderStyle,
+					borderWidth: layer.borderWidth,
+				};
+				const redo = {
+					borderStyle: value,
+					borderWidth: layer.borderWidth ?? 10,
+				};
+				Object.assign(layer, redo);
+				return {
+					type: 'layer',
+					slideId: editor.activeSlide.id,
+					layer: { id: layer.id, type: layer.type },
+					undo,
+					redo,
+				};
+			}),
+		});
 	};
 
-	let undo: LayerBorder | null = null;
-	const debouncedHistoryPush = createDebouncedCallback((action: LayerChangesAction) => {
+	let initial: (ImageLayer & { state: ImageLayer })[] | null = null;
+	const debouncedHistoryPush = createDebouncedCallback((action: HistoryAction) => {
 		editor.historyPush(action);
-		undo = null;
+		initial = null;
 	}, 500);
 
 	let min = 0;
@@ -58,79 +89,36 @@
 		} else if (borderWidth < min) {
 			borderWidth = min;
 		}
-		if (!undo) {
-			undo = {
-				borderStyle: layer.borderStyle,
-				borderWidth: layer.borderWidth,
-				borderColor: layer.borderColor,
-			};
+		if (!initial) {
+			initial = layers.map((layer) => ({ ...layer, state: layer }));
 		}
-		const redo = {
-			borderStyle: layer.borderStyle ?? 'solid',
-			borderWidth: borderWidth,
-			borderColor: selectedColor,
-		};
-		Object.assign(layer, redo);
-		const action: LayerChangesAction = {
-			type: 'layer',
-			layer: { id: layer.id, type: layer.type },
-			undo,
-			redo,
+		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,
+				};
+			}),
 		};
 		if (debounce) {
 			debouncedHistoryPush(action);
 		} else {
 			editor.historyPush(action);
-			undo = null;
-		}
-	};
-
-	const colors = [
-		{ value: '#000000', name: 'Black' },
-		{ value: '#545454', name: 'Dark Gray' },
-		{ value: '#737373', name: 'Gray' },
-		{ value: '#a6a6a6', name: 'Gray' },
-		{ value: '#d9d9d9', name: 'Light Gray' },
-		{ value: '#ffffff', name: 'White' },
-
-		{ value: '#ff3131', name: 'Bright Red' },
-		{ value: '#ff5757', name: 'Coral Red' },
-		{ value: '#ff66c4', name: 'Pink' },
-		{ value: '#cb6ce6', name: 'Magenta' },
-		{ value: '#8c52ff', name: 'Purple' },
-		{ value: '#5e17eb', name: 'Violet' },
-
-		{ value: '#0097b2', name: 'Dark Turquoise' },
-		{ value: '#0cc0df', name: 'Aqua Blue' },
-		{ value: '#5ce1e6', name: 'Turquoise Blue' },
-		{ value: '#38b6ff', name: 'Light Blue' },
-		{ value: '#5271ff', name: 'Royal Blue' },
-		{ value: '#004aad', name: 'Cobalt Blue' },
-
-		{ value: '#00bf63', name: 'Green' },
-		{ value: '#7ed957', name: 'Grass Green' },
-		{ value: '#c1ff72', name: 'Lime' },
-		{ value: '#ffde59', name: 'Yellow' },
-		{ value: '#ffbd59', name: 'Peach' },
-		{ value: '#ff914d', name: 'Orange' },
-	];
-
-	const setColor = (value: string) => () => {
-		if (value === selectedColor) return;
-		selectedColor = value;
-		if (layer.borderWidth) {
-			const undo = {
-				borderStyle: layer.borderStyle,
-				borderWidth: layer.borderWidth,
-				borderColor: layer.borderColor,
-			};
-			const redo = {
-				borderStyle: layer.borderStyle,
-				borderWidth: layer.borderWidth,
-				borderColor: selectedColor,
-			};
-			Object.assign(layer, redo);
-			editor.historyPush({ type: 'layer', layer: { id: layer.id, type: layer.type }, undo, redo });
+			initial = null;
 		}
 	};
 </script>
@@ -150,7 +138,7 @@
 					<Button
 						variant="outline"
 						class="w-12 p-2"
-						active={!layer.borderWidth}
+						active={borderStyle === null}
 						onclick={() => setStyle(null)}
 					>
 						<BorderNoneIcon class="h-6 w-6" />
@@ -158,7 +146,7 @@
 					<Button
 						variant="outline"
 						class="w-12 p-2"
-						active={layer.borderStyle === 'solid'}
+						active={borderStyle === 'solid'}
 						onclick={() => setStyle('solid')}
 					>
 						<BorderSolidIcon class="h-6 w-6" />
@@ -166,7 +154,7 @@
 					<Button
 						variant="outline"
 						class="w-12 p-2"
-						active={layer.borderStyle === 'dashed'}
+						active={borderStyle === 'dashed'}
 						onclick={() => setStyle('dashed')}
 					>
 						<BorderDashedIcon class="h-6 w-6" />
@@ -174,7 +162,7 @@
 					<Button
 						variant="outline"
 						class="w-12 p-2"
-						active={layer.borderStyle === 'dotted'}
+						active={borderStyle === 'dotted'}
 						onclick={() => setStyle('dotted')}
 					>
 						<BorderDottedIcon class="h-6 w-6" />
@@ -183,49 +171,45 @@
 			</div>
 			<div class="flex flex-col">
 				<div class="text-sm font-medium text-gray-500">Border width</div>
-				<div class="flex gap-4">
-					<Slider
-						type="single"
-						value={layer.borderWidth || 0}
-						{min}
-						{max}
-						step={1}
-						onValueChange={(value) => setWidth(value, true)}
-					/>
-					<input
-						class="border-input m-0 h-10 w-10 rounded-md bg-transparent p-0 pb-1 text-center text-sm font-semibold leading-none focus:ring-0 [&::-webkit-inner-spin-button]:appearance-none"
+				<div class="flex items-center gap-2">
+					<div class="grow">
+						<Slider
+							type="single"
+							value={borderWidth || 0}
+							{min}
+							{max}
+							step={1}
+							onValueChange={(value) => setWidth(value, true)}
+						/>
+					</div>
+					<Input
+						class="w-10 bg-transparent p-0 text-center font-semibold leading-none [&::-webkit-inner-spin-button]:appearance-none"
 						type="text"
 						inputmode="decimal"
 						placeholder="--"
-						value={layer.borderWidth || 0}
+						value={borderWidth}
 						onchange={(e) => setWidth(e.target.value)}
 					/>
 				</div>
 			</div>
-			<div class="flex flex-col gap-2">
-				<div class="flex items-center gap-2 py-2">
-					<PaletteIcon class="h-5 w-5" />
-					<h5 class="text-left text-sm font-bold">Colors</h5>
-				</div>
-				<div class="grid grid-cols-6 items-stretch gap-3">
-					{#each colors as color}
-						<Button
-							class={cn(
-								'relative h-10 w-10 after:absolute after:inset-0 after:rounded-full after:transition-shadow',
-								(layer.borderColor || selectedColor) === color.value && 'after:shadow-active',
-							)}
-							variant="ghost"
-							size="icon"
-							onclick={setColor(color.value)}
-						>
-							<span
-								class="h-full w-full rounded-full after:absolute after:inset-0 after:rounded-full after:shadow-inner"
-								style:background-color={color.value}
-							></span>
-						</Button>
-					{/each}
-				</div>
-			</div>
 		</div>
 	</Popover.Content>
 </Popover.Root>
+
+{#if borderColors}
+	<Button
+		variant="ghost"
+		size="icon-xs"
+		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/layers/buttons/border-button/border-button.svelte.d.ts

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