@peteai/presentation-editor 0.0.2 → 0.0.4

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

@@ -1,20 +1,76 @@
 <script lang="ts">
-	import type { ActiveSidebar } from '../types.js';
-	import ImagesLibrary from './images-library.svelte';
-	import Layers from './layers.svelte';
+	import type { Icon as LucideIcon } from 'lucide-svelte';
+	import TextIcon from 'lucide-svelte/icons/type';
+	import UploadIcon from 'lucide-svelte/icons/cloud-upload';
+	import Button from '../../ui/button/button.svelte';
+	import SidebarTextTab from './sidebar-text-tab.svelte';
+	import SidebarUploadsTab from './sidebar-uploads-tab.svelte';
+	import { getPresentationEditorContext } from '../presentation-editor.svelte.js';
+	import type { ActiveSidebarTab } from '../types.js';
+	import PositionSlidebar from './position-slidebar.svelte';
+	import { ColorSidebar } from './color-sidebar/index.js';
+	import { FontSidebar } from './font-sidebar/index.js';
 
-	interface Props {
-		activeSidebarTab: ActiveSidebar;
-	}
-	let { activeSidebarTab }: Props = $props();
+	const editor = getPresentationEditorContext();
+
+	const tabs: { id: ActiveSidebarTab; name: string; icon: typeof LucideIcon }[] = [
+		// {
+		//   name: 'Template',
+		//   icon: <LayoutIcon />,
+		// },
+		{
+			id: 'text',
+			name: 'Text',
+			icon: TextIcon,
+		},
+		// {
+		//   name: 'Image',
+		//   icon: <ImageIcon />,
+		// },
+		// {
+		//   name: 'Shape',
+		//   icon: <ElementsIcon />,
+		// },
+		// {
+		//   name: 'Frame',
+		//   icon: <FrameIcon />,
+		// },
+		{
+			id: 'uploads',
+			name: 'Uploads',
+			icon: UploadIcon,
+		},
+	];
 </script>
 
-{#if activeSidebarTab}
-	<div class="w-80 shrink-0 border-r border-gray-200 bg-background p-2">
-		{#if activeSidebarTab === 'layers'}
-			<Layers />
-		{:else if activeSidebarTab === 'images'}
-			<ImagesLibrary />
-		{/if}
+<div class="flex">
+	<div class="flex h-full flex-col gap-1 overflow-y-auto border-r border-gray-200 p-1">
+		{#each tabs as tab}
+			<Button
+				variant="ghost"
+				class="flex h-16 w-16 flex-col gap-1 text-xs"
+				onclick={() => editor.toggleActiveSidebarTab(tab.id)}
+				active={!editor.activeSidebarPopup && editor.activeSidebarTab === tab.id}
+			>
+				<tab.icon />
+				{tab.name}
+			</Button>
+		{/each}
 	</div>
-{/if}
+
+	{#if editor.activeSidebarPopup || editor.activeSidebarTab}
+		<div class="bg-background h-full w-80 shrink-0 overflow-y-auto border-r border-gray-200 p-2">
+			{#if editor.activeSidebarPopup === 'position'}
+				<PositionSlidebar />
+			{:else if editor.activeSidebarPopup === 'font'}
+				<FontSidebar />
+			{:else if editor.activeSidebarPopup}
+				<ColorSidebar />
+			{:else if editor.activeSidebarTab === 'text'}
+				<SidebarTextTab />
+			{:else if editor.activeSidebarTab === 'uploads'}
+				<SidebarUploadsTab />
+			{/if}
+		</div>
+	{/if}
+</div>

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

@@ -1,7 +1,18 @@
-import type { ActiveSidebar } from '../types.js';
-interface Props {
-    activeSidebarTab: ActiveSidebar;
+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 Sidebar: import("svelte").Component<Props, {}, "">;
-type Sidebar = ReturnType<typeof Sidebar>;
+declare const Sidebar: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Sidebar = InstanceType<typeof Sidebar>;
 export default Sidebar;

package/dist/components/presentation-editor/sidebar/uploads-image.svelte

@@ -1,17 +1,25 @@
 <script lang="ts">
 	import { getPresentationEditorContext } from '../presentation-editor.svelte.js';
-	import { generateId } from '../../../utils.js';
 
 	let { image } = $props();
 
 	const editor = getPresentationEditorContext();
 
-	const id = generateId();
+	const height = 80;
+	const initialScale = height / image.height;
+
+	let dragging = $state(false);
 
 	const onDocumentDragEnter = (e: DragEvent) => {
 		console.log('document dragenter', e);
 		if (editor.dragged) {
-			editor.dragged = { ...editor.dragged, hidden: false, scale: null, sticky: true };
+			editor.dragged = {
+				...editor.dragged,
+				hidden: false,
+				inside: false,
+				sticky: true,
+				customScale: null,
+			};
 		}
 	};
 
@@ -20,25 +28,28 @@
 			return null;
 		}
 
-		console.log('dragstart', e, $state.snapshot(image));
 		e.dataTransfer.effectAllowed = 'move';
 		editor.dragged = {
-			id,
 			hidden: false,
 			sticky: true,
 			image,
+			opacity: 0.5,
+			inside: false,
+			scale: Math.min(editor.getMaxScale(image), 1),
 			x: e.clientX,
 			y: e.clientY,
 			offsetX: e.offsetX,
 			offsetY: e.offsetY,
-			initialScale: (e.target as HTMLElement).clientHeight / image.height,
+			initialScale,
 		};
 		addEventListener('dragenter', onDocumentDragEnter);
+		dragging = true;
 	};
 
 	const onDragEnd = (e: DragEvent) => {
 		console.log('dragend', e);
-		removeEventListener('dragend', onDocumentDragEnter);
+		removeEventListener('dragenter', onDocumentDragEnter);
+		dragging = false;
 		editor.dragged = null;
 	};
 
@@ -49,16 +60,22 @@
 			editor.dragged = { ...dragged, x: e.clientX, y: e.clientY };
 		}
 	};
+
+	const createLayer = () => {
+		editor.addLayers(editor.activeSlide.id, editor.buildImageLayer({ image }));
+	};
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-	class="m-1 inline-block h-20"
+<button
+	class="m-1 inline-block"
+	style:height="{height}px"
+	onclick={createLayer}
 	draggable={true}
 	ondragstart={onDragStart}
 	ondragend={onDragEnd}
 	ondrag={onDrag}
-	style:opacity={editor.dragged?.id === id ? 0 : null}
+	style:opacity={dragging ? 0 : null}
 >
 	<img src={image.src} alt="" crossorigin="anonymous" class="h-full" draggable={false} />
-</div>
+</button>

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

@@ -3,19 +3,17 @@
 	import { cn } from '../../utils.js';
 	import {
 		ActiveLayerBorder,
-		HoveredLayer,
 		LayerWrapper,
 		BackgroundLayer,
 		HtmlLayer,
 		ImageLayer,
-		HtmlLayerActive,
-		ImageLayerActive,
 		ActiveBackgroundBorder,
 	} from './layers/index.js';
-	import type { ActiveLayerGuide, Layer } from './types.js';
-	import SnappingGuides from './snapping-guides.svelte';
-	import SlideInner from './slide-inner.svelte';
+	import type { ActiveLayerGuide } from './types.js';
 	import { getPresentationEditorContext } from './presentation-editor.svelte.js';
+	import SlideInner from './slide-inner.svelte';
+	import ActiveLayers from './active-layers.svelte';
+	import SnappingGuides from './snapping-guides.svelte';
 
 	interface Props {
 		viewportRef: HTMLDivElement | null;
@@ -28,7 +26,7 @@
 
 	let activeLayerGuides: ActiveLayerGuide[] = $state([]);
 
-	let hoveredLayer: Layer | 'background' | null = $state(null);
+	let hoveredLayerId: string | null = $state(null);
 
 	let scaledWidth = $derived(editor.width * editor.zoom);
 	let scaledHeight = $derived(editor.height * editor.zoom);
@@ -36,7 +34,7 @@
 
 <div class="relative min-h-0 flex-1">
 	<ScrollArea orientation="both" class="h-full" bind:viewportRef>
-		<div class="pointer-events-none flex min-h-full flex-1">
+		<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-slide-container>
@@ -56,12 +54,12 @@
 									style:width="{editor.width}px"
 									style:height="{editor.height}px"
 								>
-									<BackgroundLayer bind:hoveredLayer />
+									<BackgroundLayer bind:hoveredLayerId />
 									<SlideInner />
 									{#each editor.activeSlide.layers as layer, i (layer.id)}
 										<LayerWrapper
 											bind:layer={editor.activeSlide.layers[i]}
-											bind:hoveredLayer
+											bind:hoveredLayerId
 											bind:activeLayerGuides
 										>
 											{#if editor.activeSlide.layers[i].type === 'html'}
@@ -75,23 +73,23 @@
 							</div>
 						</div>
 						<div
-							class="absolute z-10 m-0"
+							class="pointer-events-none absolute z-10 m-0"
 							style:width="{scaledWidth}px"
 							style:height="{scaledHeight}px"
 						>
-							{#if hoveredLayer && (hoveredLayer === 'background' || hoveredLayer.id !== editor.activeLayer?.id)}
-								<HoveredLayer layer={hoveredLayer} />
-							{/if}
-							{#if editor.activeBackground}
-								<ActiveBackgroundBorder />
-							{:else if editor.activeLayer}
-								<ActiveLayerBorder layer={editor.activeLayer} />
-								{#if editor.activeLayer.type === 'html'}
-									<HtmlLayerActive bind:layer={editor.activeLayer} />
-								{:else if editor.activeLayer.type === 'image'}
-									<ImageLayerActive bind:layer={editor.activeLayer} />
+							{#if hoveredLayerId === 'background'}
+								{#if !editor.activeBackground}
+									<ActiveBackgroundBorder />
+								{/if}
+							{:else if hoveredLayerId && !editor.activeLayerIds.has(hoveredLayerId)}
+								{@const layer = editor.activeSlide.layers.find(({ id }) => id === hoveredLayerId)}
+								{#if layer}
+									<ActiveLayerBorder {layer} />
 								{/if}
 							{/if}
+
+							<ActiveLayers />
+
 							<SnappingGuides zoom={editor.zoom} guides={activeLayerGuides} />
 						</div>
 					</div>

package/dist/components/presentation-editor/slide-inner.svelte

@@ -8,44 +8,45 @@
 
 	const onDragEnter = (e: DragEvent) => {
 		console.log('dragenter slide inner', e);
-		e.preventDefault();
-		e.stopPropagation();
 
 		if (editor.dragged) {
-			editor.dragged = { ...editor.dragged, hidden: false, scale: editor.zoom, sticky: true };
+			e.preventDefault();
+			e.stopPropagation();
+			editor.dragged = {
+				...editor.dragged,
+				hidden: false,
+				customScale: null,
+				inside: true,
+				sticky: true,
+			};
 		}
 	};
 
 	const onDragOver = (e: DragEvent) => {
 		// console.log('dragover slide inner', e);
-		e.preventDefault();
+		if (editor.dragged) {
+			e.preventDefault();
+			e.stopPropagation();
+		}
 	};
 
 	const onDrop = (e: DragEvent) => {
 		console.log('drop slide inner', e);
-		e.preventDefault();
 
 		const { dragged } = editor;
 		if (dragged) {
-			editor.addImageLayer({
-				x: e.offsetX - dragged.offsetX / editor.zoom + inset,
-				y: e.offsetY - dragged.offsetY / editor.zoom + inset,
-				width: dragged.image.width,
-				height: dragged.image.height,
-				image: {
-					id: dragged.image.id,
-					src: dragged.image.src,
-					width: dragged.image.width,
-					height: dragged.image.height,
-				},
-			});
+			e.preventDefault();
+			e.stopPropagation();
+			const x = e.offsetX - dragged.offsetX / editor.zoom + inset;
+			const y = e.offsetY - dragged.offsetY / editor.zoom + inset;
+			editor.dropDragged(x, y);
 		}
 	};
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
-	class={cn('absolute', { 'pointer-events-auto': !!editor.dragged })}
+	class={cn('absolute', { 'pointer-events-none': !editor.dragged })}
 	style:inset="{inset}px"
 	ondragenter={onDragEnter}
 	ondragover={onDragOver}

package/dist/components/presentation-editor/slides-navigation/slide-preview.svelte

@@ -2,20 +2,20 @@
 	import { dragHandle } from 'svelte-dnd-action';
 	import PlusIcon from 'lucide-svelte/icons/plus';
 	import EllipsisIcon from 'lucide-svelte/icons/ellipsis';
+	import IconLocked from 'lucide-svelte/icons/lock-keyhole';
 	import { Button, buttonVariants } from '../../ui/button/index.js';
 	import * as ContextMenu from '../../ui/context-menu/index.js';
 	import * as DropdownMenu from '../../ui/dropdown-menu/index.js';
 	import {
-		BackgroundLayerThumb,
-		HtmlLayerThumb,
-		ImageLayerThumb,
+		BackgroundLayerContent,
+		HtmlLayerContent,
+		ImageLayerContent,
 		LayerThumbWrapper,
 	} from '../layers/index.js';
 	import { cn } from '../../../utils.js';
-	import SlideDeleteButton from './buttons/slide-delete-button.svelte';
-	import SlideDuplicateButton from './buttons/slide-duplicate-button.svelte';
 	import type { PresentationEditor } from '../presentation-editor.svelte.js';
 	import type { Slide } from '../types.js';
+	import SlidePreviewMenuContent from '../menu/slide-menu-content.svelte';
 
 	interface Props {
 		editor: PresentationEditor;
@@ -29,7 +29,7 @@
 	let menuOpen = $state(false);
 </script>
 
-<div class="flex items-center">
+<div class="relative flex items-center">
 	<div class="group h-full">
 		<div class="absolute -left-2 top-0 z-20 h-full w-4 group-hover:w-16"></div>
 		<div
@@ -50,62 +50,72 @@
 			</div>
 		</div>
 	</div>
-	<div use:dragHandle class="group relative mx-2 my-1 transition-transform" role="none">
-		<button class="block" onclick={() => editor.setActiveSlide(slide.id)}>
-			<ContextMenu.Root>
-				<ContextMenu.Trigger>
-					<div
-						class={cn(
-							'relative',
-							{
-								'after:absolute after:inset-0 after:rounded-xl after:border-2':
-									editor.activeSlide === slide,
-							},
-							editor.slideSelected ? 'after:border-purple-500' : 'after:border-gray-400',
-						)}
-					>
+	<div class="group relative mx-2 my-1 transition-transform">
+		<div use:dragHandle role="none">
+			<button class="block" onclick={() => editor.setActiveSlide(slide.id)}>
+				<ContextMenu.Root>
+					<ContextMenu.Trigger>
 						<div
-							class="relative overflow-hidden rounded-lg bg-white"
-							style:clip-path={editor.activeSlide === slide
-								? 'inset(5px round 8px)'
-								: 'inset(0px round 10px)'}
-							style:width="{editor.width * thumbScale}px"
-							style:height="{editor.height * thumbScale}px"
+							class={cn(
+								'relative',
+								{
+									'after:absolute after:inset-0 after:rounded-xl after:border-2':
+										editor.activeSlide.id === slide.id,
+								},
+								editor.slideSelected ? 'after:border-primary' : 'after:border-gray-400',
+							)}
 						>
-							<BackgroundLayerThumb {slide} />
-							{#each slide.layers as layer (layer.id)}
-								<LayerThumbWrapper {layer} thumb={thumbScale}>
-									{#snippet children({ thumbScale })}
-										{#if layer.type === 'html'}
-											<HtmlLayerThumb {layer} {thumbScale} />
-										{:else if layer.type === 'image'}
-											<ImageLayerThumb {layer} {thumbScale} />
-										{/if}
-									{/snippet}
-								</LayerThumbWrapper>
-							{/each}
+							<div
+								class="relative overflow-hidden rounded-lg bg-white"
+								style:clip-path={editor.activeSlide.id === slide.id
+									? 'inset(5px round 8px)'
+									: 'inset(0px round 10px)'}
+								style:width="{editor.width * thumbScale}px"
+								style:height="{editor.height * thumbScale}px"
+							>
+								<div class="absolute inset-0 overflow-hidden">
+									<div class="h-full w-full">
+										<BackgroundLayerContent {slide} {thumbScale} />
+									</div>
+								</div>
+								{#each slide.layers as layer (layer.id)}
+									<LayerThumbWrapper {layer} thumb={thumbScale}>
+										{#snippet children({ thumbScale })}
+											{#if layer.type === 'html'}
+												<HtmlLayerContent {layer} {thumbScale} />
+											{:else if layer.type === 'image'}
+												<ImageLayerContent {layer} {thumbScale} />
+											{/if}
+										{/snippet}
+									</LayerThumbWrapper>
+								{/each}
+							</div>
 						</div>
-					</div>
-				</ContextMenu.Trigger>
-				<ContextMenu.Content class="w-72">
-					<SlideDuplicateButton {editor} {slide} />
-					<SlideDeleteButton {editor} {slide} context={true} />
-				</ContextMenu.Content>
-			</ContextMenu.Root>
-		</button>
+					</ContextMenu.Trigger>
+					<ContextMenu.Content class="w-72">
+						<SlidePreviewMenuContent {editor} {slide} />
+					</ContextMenu.Content>
+				</ContextMenu.Root>
+			</button>
+		</div>
 		<div
 			class={cn(
 				'pointer-events-none absolute z-10 flex flex-col-reverse flex-wrap overflow-hidden',
 			)}
-			style:inset={editor.activeSlide === slide ? '5px' : '0'}
-			style:border-radius={editor.activeSlide === slide ? '8px' : '10px'}
+			style:inset={editor.activeSlide.id === slide.id ? '5px' : '0'}
+			style:border-radius={editor.activeSlide.id === slide.id ? '8px' : '10px'}
 		>
 			<div
-				class="flex h-8 min-h-5 w-8 max-w-full items-end overflow-hidden rounded-bl-md rounded-br-md"
+				class="flex h-8 min-h-5 w-fit max-w-full items-end overflow-hidden rounded-bl-md rounded-br-md"
 				style:background={`radial-gradient(100% 120% at 0% 120%, rgba(255, 255, 255, 0.8) 55%, rgba(0, 0, 0, 0))`}
 			>
 				<div class="relative flex h-5 items-center px-2">
+					{#if slide.locked}
+						<IconLocked class="mr-1 size-4" />
+					{/if}
 					<p class="text-xs font-semibold">{index + 1}</p>
+					<p class="mx-0.5"></p>
+					<div class="pointer-events-auto flex h-full min-w-2"></div>
 				</div>
 			</div>
 		</div>
@@ -124,9 +134,8 @@
 					<EllipsisIcon />
 				</DropdownMenu.Trigger>
 
-				<DropdownMenu.Content side="top" align="start" class="w-72">
-					<SlideDuplicateButton {editor} {slide} />
-					<SlideDeleteButton {editor} {slide} />
+				<DropdownMenu.Content class="w-72" side="top" align="start" trapFocus={false}>
+					<SlidePreviewMenuContent {editor} {slide} />
 				</DropdownMenu.Content>
 			</DropdownMenu.Root>
 		</div>

package/dist/components/presentation-editor/slides-navigation/slides-navigation.svelte

@@ -50,14 +50,12 @@
 		}
 
 		if (redo) {
-			editor.historyPush(
-				{
-					type: 'slide',
-					undo: { sortOrder: item.sortOrder },
-					redo,
-				},
-				item.id,
-			);
+			editor.historyPush({
+				type: 'slide',
+				slideId: item.id,
+				undo: { sortOrder: item.sortOrder },
+				redo,
+			});
 		}
 	}
 </script>

package/dist/components/presentation-editor/snapping-guides.svelte

@@ -13,11 +13,11 @@
 <div class="absolute h-full w-full">
 	{#each guides as guide (guide.id)}
 		{#if guide.type === 'box'}
-			<div class="absolute border border-purple-500" style:inset="{guide.inset * zoom}px"></div>
+			<div class="border-primary absolute border" style:inset="{guide.inset * zoom}px"></div>
 		{:else if guide.type === 'vertical'}
 			<div
 				class={cn(
-					'absolute h-full border-l border-purple-500',
+					'border-primary absolute h-full border-l',
 					guide.style === 'dashed' && 'border-dashed',
 					guide.style === 'dotted' && 'border-dotted',
 				)}
@@ -28,7 +28,7 @@
 		{:else if guide.type === 'horizontal'}
 			<div
 				class={cn(
-					'absolute w-full border-t border-purple-500',
+					'border-primary absolute w-full border-t',
 					guide.style === 'dashed' && 'border-dashed',
 					guide.style === 'dotted' && 'border-dotted',
 				)}