@peteai/presentation-editor 0.0.1 → 0.0.3

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

@@ -1,41 +1,31 @@
 <script lang="ts">
-	import { onMount, tick } from 'svelte';
+	import { onDestroy, onMount, tick } from 'svelte';
+	import { get } from 'svelte/store';
 	import CheckIcon from 'lucide-svelte/icons/check';
 	import * as DropdownMenu from '../ui/dropdown-menu/index.js';
 	import { Slider } from '../ui/slider/index.js';
 	import { buttonVariants } from '../ui/button/index.js';
-	import type { ActiveSidebar, Image } from './types.js';
+	import type { Image } from './types.js';
 	import { checkImage } from './utils.js';
 	import {
 		PresentationEditor,
 		type PresentationEditorOptions,
 	} from './presentation-editor.svelte.js';
+	import Hotkeys from './hotkeys.svelte';
 	import Header from './header.svelte';
-	import Sidebar from './sidebar/sidebar.svelte';
 	import SlideEditor from './slide-editor.svelte';
 	import SlidesNavigation from './slides-navigation/slides-navigation.svelte';
 	import CursorTooltip from './cursor-tooltip.svelte';
 	import Dragged from './dragged.svelte';
+	import Sidebar from './sidebar/sidebar.svelte';
 
 	let editorOptions: PresentationEditorOptions = $props();
 
-	const presentationEditor = new PresentationEditor(editorOptions);
-
-	let activeSidebarTab: ActiveSidebar = $state('images');
-
-	const toggleActiveSidebarTab = (name: ActiveSidebar) => {
-		const newTab = activeSidebarTab === name ? null : name;
-		if (newTab !== activeSidebarTab && (newTab === null || activeSidebarTab === null)) {
-			onResize();
-		}
-		activeSidebarTab = newTab;
-	};
-
-	let fittedToScreen = $state(false);
-	let filledToScreen = $state(false);
+	export const presentationEditor = new PresentationEditor(editorOptions);
 
 	const sliderMin = -2.304;
 	const sliderMax = 1.61;
+	const sliderStep = 0.001;
 	const zoomMin = 0.1;
 	const zoomMax = 5;
 	const referenceSlider = 0;
@@ -56,17 +46,12 @@
 	};
 
 	const convertZoomToSlider = (value: number) => {
-		if (value <= referenceZoom) {
-			return (value - intercept1) / slope1;
-		} else {
-			return (value - intercept2) / slope2;
-		}
+		return value <= referenceZoom
+			? Math.round((value - intercept1) / slope1 / sliderStep) * sliderStep
+			: Math.round((value - intercept2) / slope2 / sliderStep) * sliderStep;
 	};
 
 	let sliderValue = $state(convertZoomToSlider(presentationEditor.zoom));
-	const setZoom = (zoom: number) => {
-		sliderValue = convertZoomToSlider(zoom);
-	};
 
 	let viewportRef: HTMLDivElement | null = $state(null);
 	let wrapperRef: HTMLDivElement | null = $state(null);
@@ -76,10 +61,8 @@
 
 	let centerX = 0;
 	let centerY = 0;
-	$effect(() => {
-		fittedToScreen = false;
-		filledToScreen = false;
-		const newZoom = convertSliderToZoom(sliderValue);
+	export const setZoom = async (zoom: number) => {
+		presentationEditor.zoomSnapping = null;
 		if (viewportRef) {
 			const centeringPrecision = 0.001;
 			const newCenterX =
@@ -89,37 +72,34 @@
 
 			centerX = Math.abs(centerX - newCenterX) < centeringPrecision ? centerX : newCenterX;
 			centerY = Math.abs(centerY - newCenterY) < centeringPrecision ? centerY : newCenterY;
-
-			presentationEditor.zoom = newZoom;
-			tick().then(() => {
-				if (viewportRef) {
-					viewportRef.scrollLeft = centerX * viewportRef.scrollWidth - viewportRef.clientWidth / 2;
-					viewportRef.scrollTop = centerY * viewportRef.scrollHeight - viewportRef.clientHeight / 2;
-				}
-			});
-		} else {
-			presentationEditor.zoom = newZoom;
 		}
-	});
+		presentationEditor.zoom = zoom;
+		await tick();
+		if (viewportRef) {
+			viewportRef.scrollLeft = centerX * viewportRef.scrollWidth - viewportRef.clientWidth / 2;
+			viewportRef.scrollTop = centerY * viewportRef.scrollHeight - viewportRef.clientHeight / 2;
+		}
+		sliderValue = convertZoomToSlider(zoom);
+	};
 
 	export const fillScreen = async () => {
 		if (viewportRef && wrapperRef) {
-			sliderValue = convertZoomToSlider(
+			await setZoom(
 				(presentationEditor.zoom *
 					(viewportRef.clientWidth - (wrapperRef.clientWidth - scaledWidth))) /
 					scaledWidth,
 			);
 			tick().then(() => {
-				filledToScreen = true;
+				presentationEditor.zoomSnapping = 'fill';
 			});
 		}
 	};
 
-	export const fitToScreen = () => {
+	export const fitToScreen = async () => {
 		if (viewportRef && wrapperRef) {
 			viewportRef.scrollLeft = 0;
 			viewportRef.scrollTop = 0;
-			sliderValue = convertZoomToSlider(
+			await setZoom(
 				presentationEditor.zoom *
 					Math.min(
 						(viewportRef.clientWidth - (wrapperRef.clientWidth - scaledWidth)) / scaledWidth,
@@ -127,69 +107,27 @@
 					),
 			);
 			tick().then(() => {
-				fittedToScreen = true;
+				presentationEditor.zoomSnapping = 'fit';
 			});
 		}
 	};
 
-	const onKeyDown = (e: KeyboardEvent) => {
-		console.log('keydown', e);
-		if (e.key === 'Escape') {
-			if (presentationEditor.activeAction) {
-				presentationEditor.activeAction = null;
-			} else {
-				presentationEditor.setActiveBackground(!!presentationEditor.activeLayer);
-			}
-		} else if (['Delete', 'Backspace'].includes(e.key)) {
-			if (presentationEditor.activeLayer) {
-				presentationEditor.removeLayer(presentationEditor.activeLayer);
-			} else if (presentationEditor.activeBackground) {
-				presentationEditor.removeBackground();
-			} else if (presentationEditor.slideSelected) {
-				presentationEditor.removeSlide(presentationEditor.activeSlide);
-			}
-		} else if (e.key === 'z') {
-			if (e.metaKey || e.ctrlKey) {
-				if (e.shiftKey) {
-					presentationEditor.historyRedo();
-				} else {
-					presentationEditor.historyUndo();
-				}
-			}
-		} else if (e.key === 'y' && (e.metaKey || e.ctrlKey)) {
-			presentationEditor.historyRedo();
-		} else if (e.key === 'd' && (e.metaKey || e.ctrlKey)) {
-			if (presentationEditor.slideSelected) {
-				presentationEditor.duplicateSlide(presentationEditor.activeSlide);
-				e.preventDefault();
-			}
-		} else if (e.key === 'c' && (e.metaKey || e.ctrlKey)) {
-			if (presentationEditor.activeLayer) {
-				presentationEditor.clipboard = presentationEditor.activeLayer;
-			} else if (presentationEditor.slideSelected) {
-				presentationEditor.clipboard = presentationEditor.activeSlide;
-			}
-		} else if (e.key === 'v' && (e.metaKey || e.ctrlKey)) {
-			if (presentationEditor.clipboard) {
-				if ('type' in presentationEditor.clipboard) {
-					presentationEditor.duplicateLayer(presentationEditor.clipboard);
-				} else if ('layers' in presentationEditor.clipboard) {
-					presentationEditor.duplicateSlide(presentationEditor.clipboard);
-				}
-			}
-		}
-	};
-
 	const onResize = () => {
 		tick().then(() => {
-			if (fittedToScreen) {
+			if (presentationEditor.zoomSnapping === 'fit') {
 				fitToScreen();
-			} else if (filledToScreen) {
+			} else if (presentationEditor.zoomSnapping === 'fill') {
 				fillScreen();
 			}
 		});
 	};
 
+	$effect(() => {
+		presentationEditor.activeSidebarPopup;
+		presentationEditor.activeSidebarTab;
+		onResize();
+	});
+
 	const onDragOver = (e: DragEvent) => {
 		// console.log('dragover windown', e);
 		e.preventDefault();
@@ -199,25 +137,26 @@
 	};
 
 	const onDrop = async (e: DragEvent) => {
-		console.log('drop images library', e);
-
-		let dropToSlide = false;
-		const viewportRect = viewportRef?.getBoundingClientRect();
-		const wrapperRect = wrapperRef?.getBoundingClientRect();
-		if (viewportRect && wrapperRect) {
-			const minLeft = Math.max(viewportRect.left, wrapperRect.left);
-			const maxRight = Math.min(viewportRect.right, wrapperRect.right);
-			const minTop = Math.max(viewportRect.top, wrapperRect.top);
-			const maxBottom = Math.min(viewportRect.bottom, wrapperRect.bottom);
-
-			dropToSlide =
-				e.pageX > minLeft && e.pageX < maxRight && e.pageY > minTop && e.pageY < maxBottom;
-		}
+		console.log('drop editor', e);
 
 		e.preventDefault();
 		e.stopPropagation();
+
 		presentationEditor.fileDragged = false;
 		if (e.dataTransfer?.items.length) {
+			let dropToSlide = false;
+			const viewportRect = viewportRef?.getBoundingClientRect();
+			const wrapperRect = wrapperRef?.getBoundingClientRect();
+			if (viewportRect && wrapperRect) {
+				const minLeft = Math.max(viewportRect.left, wrapperRect.left);
+				const maxRight = Math.min(viewportRect.right, wrapperRect.right);
+				const minTop = Math.max(viewportRect.top, wrapperRect.top);
+				const maxBottom = Math.min(viewportRect.bottom, wrapperRect.bottom);
+
+				dropToSlide =
+					e.pageX > minLeft && e.pageX < maxRight && e.pageY > minTop && e.pageY < maxBottom;
+			}
+
 			const item = e.dataTransfer.items[0];
 			console.log('item', item, item.kind, item.type);
 			if (['image/png', 'image/jpeg', 'image/gif'].includes(item.type)) {
@@ -242,18 +181,12 @@
 						}
 						presentationEditor.images.push(image);
 						if (dropToSlide) {
-							presentationEditor.addImageLayer({
-								x: (presentationEditor.width - image.width) / 2,
-								y: (presentationEditor.height - image.height) / 2,
+							const layer = presentationEditor.buildImageLayer({
 								width: image.width,
 								height: image.height,
-								image: {
-									id: image.id,
-									src: image.src,
-									width: image.width,
-									height: image.height,
-								},
+								image,
 							});
+							presentationEditor.addLayers(presentationEditor.activeSlide.id, layer);
 						}
 					} catch (err) {
 						console.log('err', err);
@@ -268,69 +201,80 @@
 			fitToScreen();
 		});
 	});
-</script>
-
-<svelte:window onkeydown={onKeyDown} onresize={onResize} ondragover={onDragOver} />
-
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-	class="flex h-full select-none flex-col"
-	ondragover={(e) => e.preventDefault()}
-	ondrop={onDrop}
->
-	<Dragged />
-	<CursorTooltip />
-	<Header {activeSidebarTab} onChange={toggleActiveSidebarTab} />
 
-	<div class="flex min-h-0 flex-1">
-		<Sidebar {activeSidebarTab} />
+	onDestroy(() => {
+		console.log('editor main component destroy');
+		get(presentationEditor.htmlEditor).destroy();
+	});
+</script>
 
-		<div class="relative flex grow flex-col overflow-hidden bg-gray-100">
-			<main class="flex min-h-0 flex-1 flex-col bg-gray-200">
-				<SlideEditor bind:wrapperRef bind:viewportRef />
-			</main>
+<svelte:window onresize={onResize} />
 
-			<footer class="relative">
-				{#if presentationEditor.mode === 'multiple'}
-					<SlidesNavigation />
-				{/if}
-				<div class="flex items-center justify-end gap-2 px-4">
-					<div class="w-48">
-						<Slider
-							type="single"
-							bind:value={sliderValue}
-							min={sliderMin}
-							max={sliderMax}
-							step={0.001}
-						/>
-					</div>
-					<DropdownMenu.Root>
-						<DropdownMenu.Trigger
-							class={buttonVariants({ variant: 'ghost', size: 'icon-xs', class: 'w-16' })}
-						>
-							{Math.round(presentationEditor.zoom * 100)}%
-						</DropdownMenu.Trigger>
+<Hotkeys />
 
-						<DropdownMenu.Content align="end" class="w-48">
-							{#each [3, 2, 1.25, 1, 0.75, 0.5, 0.25, 0.1] as zoomLevel}
-								<DropdownMenu.Item onclick={() => setZoom(zoomLevel)}>
-									{(zoomLevel * 100).toFixed(0)}%
-									{#if presentationEditor.zoom === zoomLevel}<CheckIcon class="h-4 w-4" />{/if}
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class="flex h-full w-full select-none" ondragover={onDragOver} ondrop={onDrop}>
+	<Sidebar />
+	<div class="flex h-full flex-1 select-none flex-col overflow-auto">
+		<Dragged />
+		<CursorTooltip />
+		<Header />
+
+		<div class="flex min-h-0 flex-1">
+			<div class="relative flex grow flex-col overflow-hidden bg-gray-100">
+				<main class="flex min-h-0 flex-1 flex-col bg-gray-200">
+					<SlideEditor bind:wrapperRef bind:viewportRef />
+				</main>
+
+				<footer class="relative">
+					{#if presentationEditor.mode === 'multiple'}
+						<SlidesNavigation />
+					{/if}
+					<div class="flex items-center justify-end gap-2 px-4">
+						<div class="w-48">
+							<Slider
+								type="single"
+								value={sliderValue}
+								onValueChange={(v) => setZoom(convertSliderToZoom(v))}
+								min={sliderMin}
+								max={sliderMax}
+								step={sliderStep}
+							/>
+						</div>
+						<DropdownMenu.Root>
+							<DropdownMenu.Trigger
+								class={buttonVariants({ variant: 'ghost', size: 'icon-xs', class: 'w-16' })}
+							>
+								{Math.round(presentationEditor.zoom * 100)}%
+							</DropdownMenu.Trigger>
+
+							<DropdownMenu.Content align="end" class="w-48">
+								{#each [3, 2, 1.25, 1, 0.75, 0.5, 0.25, 0.1] as zoomLevel}
+									<DropdownMenu.Item onclick={() => setZoom(zoomLevel)}>
+										{(zoomLevel * 100).toFixed(0)}%
+										{#if presentationEditor.zoom === zoomLevel}
+											<CheckIcon class="h-4 w-4" />
+										{/if}
+									</DropdownMenu.Item>
+								{/each}
+								<DropdownMenu.Separator />
+								<DropdownMenu.Item onclick={fitToScreen}>
+									Fit
+									{#if presentationEditor.zoomSnapping === 'fit'}
+										<CheckIcon class="h-4 w-4" />
+									{/if}
+								</DropdownMenu.Item>
+								<DropdownMenu.Item onclick={fillScreen}>
+									Fill
+									{#if presentationEditor.zoomSnapping === 'fill'}
+										<CheckIcon class="h-4 w-4" />
+									{/if}
 								</DropdownMenu.Item>
-							{/each}
-							<DropdownMenu.Separator />
-							<DropdownMenu.Item onclick={fitToScreen}>
-								Fit
-								{#if fittedToScreen}<CheckIcon class="h-4 w-4" />{/if}
-							</DropdownMenu.Item>
-							<DropdownMenu.Item onclick={fillScreen}>
-								Fill
-								{#if filledToScreen}<CheckIcon class="h-4 w-4" />{/if}
-							</DropdownMenu.Item>
-						</DropdownMenu.Content>
-					</DropdownMenu.Root>
-				</div>
-			</footer>
+							</DropdownMenu.Content>
+						</DropdownMenu.Root>
+					</div>
+				</footer>
+			</div>
 		</div>
 	</div>
 </div>

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

@@ -1,7 +1,4 @@
 import { PresentationEditor } from './presentation-editor.svelte.js';
-declare const PresentationEditor: import("svelte").Component<PresentationEditorOptions, {
-    fillScreen: () => Promise<void>;
-    fitToScreen: () => void;
-}, "">;
+declare const PresentationEditor: any;
 type PresentationEditor = ReturnType<typeof PresentationEditor>;
 export default PresentationEditor;