@peteai/presentation-editor 0.0.6 → 0.0.8

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

@@ -1,27 +1,34 @@
 <script lang="ts">
+	import { BROWSER } from 'esm-env';
 	import { onDestroy, onMount, tick } from 'svelte';
 	import { get } from 'svelte/store';
-	import CheckIcon from 'lucide-svelte/icons/check';
+	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 { Image } from './types.js';
+	import type { EditorOptions, Image } from './types.js';
 	import { checkImage } from './utils.js';
-	import {
-		PresentationEditor,
-		type PresentationEditorOptions,
-	} from './presentation-editor.svelte.js';
+	import { Editor } from './editor.svelte.js';
 	import Hotkeys from './hotkeys.svelte';
 	import Header from './header.svelte';
-	import SlideEditor from './slide-editor.svelte';
-	import SlidesNavigation from './slides-navigation/slides-navigation.svelte';
+	import PageEditor from './page-editor.svelte';
+	import PagesNavigation from './pages-navigation/pages-navigation.svelte';
 	import CursorTooltip from './cursor-tooltip.svelte';
 	import Dragged from './dragged.svelte';
 	import Sidebar from './sidebar/sidebar.svelte';
+	import { extractNodeFonts } from './layers/types/text/editor/utils.js';
 
-	let editorOptions: PresentationEditorOptions = $props();
+	let editorOptions: EditorOptions = $props();
 
-	export const presentationEditor = new PresentationEditor(editorOptions);
+	export const editor = new Editor(editorOptions);
+
+	if (BROWSER) {
+		const fontFamilies = editor.pages
+			.flatMap((page) => page.layers)
+			.filter((layer) => layer.type === 'text')
+			.flatMap((layer) => extractNodeFonts(layer.html));
+		Promise.all(fontFamilies.map(editor.loadFont));
+	}
 
 	const sliderMin = -2.304;
 	const sliderMax = 1.61;
@@ -51,18 +58,18 @@
 			: Math.round((value - intercept2) / slope2 / sliderStep) * sliderStep;
 	};
 
-	let sliderValue = $state(convertZoomToSlider(presentationEditor.zoom));
+	let sliderValue = $state(convertZoomToSlider(editor.zoom));
 
 	let viewportRef: HTMLDivElement | null = $state(null);
 	let wrapperRef: HTMLDivElement | null = $state(null);
 
-	let scaledWidth = $derived(presentationEditor.width * presentationEditor.zoom);
-	let scaledHeight = $derived(presentationEditor.height * presentationEditor.zoom);
+	let scaledWidth = $derived(editor.width * editor.zoom);
+	let scaledHeight = $derived(editor.height * editor.zoom);
 
 	let centerX = 0;
 	let centerY = 0;
 	export const setZoom = async (zoom: number) => {
-		presentationEditor.zoomSnapping = null;
+		editor.zoomSnapping = null;
 		if (viewportRef) {
 			const centeringPrecision = 0.001;
 			const newCenterX =
@@ -73,7 +80,7 @@
 			centerX = Math.abs(centerX - newCenterX) < centeringPrecision ? centerX : newCenterX;
 			centerY = Math.abs(centerY - newCenterY) < centeringPrecision ? centerY : newCenterY;
 		}
-		presentationEditor.zoom = zoom;
+		editor.zoom = zoom;
 		await tick();
 		if (viewportRef) {
 			viewportRef.scrollLeft = centerX * viewportRef.scrollWidth - viewportRef.clientWidth / 2;
@@ -85,12 +92,11 @@
 	export const fillScreen = async () => {
 		if (viewportRef && wrapperRef) {
 			await setZoom(
-				(presentationEditor.zoom *
-					(viewportRef.clientWidth - (wrapperRef.clientWidth - scaledWidth))) /
+				(editor.zoom * (viewportRef.clientWidth - (wrapperRef.clientWidth - scaledWidth))) /
 					scaledWidth,
 			);
 			tick().then(() => {
-				presentationEditor.zoomSnapping = 'fill';
+				editor.zoomSnapping = 'fill';
 			});
 		}
 	};
@@ -100,39 +106,23 @@
 			viewportRef.scrollLeft = 0;
 			viewportRef.scrollTop = 0;
 			await setZoom(
-				presentationEditor.zoom *
+				editor.zoom *
 					Math.min(
 						(viewportRef.clientWidth - (wrapperRef.clientWidth - scaledWidth)) / scaledWidth,
 						(viewportRef.clientHeight - (wrapperRef.clientHeight - scaledHeight)) / scaledHeight,
 					),
 			);
 			tick().then(() => {
-				presentationEditor.zoomSnapping = 'fit';
+				editor.zoomSnapping = 'fit';
 			});
 		}
 	};
 
-	const onResize = () => {
-		tick().then(() => {
-			if (presentationEditor.zoomSnapping === 'fit') {
-				fitToScreen();
-			} else if (presentationEditor.zoomSnapping === 'fill') {
-				fillScreen();
-			}
-		});
-	};
-
-	$effect(() => {
-		presentationEditor.activeSidebarPopup;
-		presentationEditor.activeSidebarTab;
-		onResize();
-	});
-
 	const onDragOver = (e: DragEvent) => {
-		// console.log('dragover windown', e);
+		// console.log('dragover editor', e);
 		e.preventDefault();
 		if (e.dataTransfer?.items.length) {
-			presentationEditor.fileDragged = true;
+			editor.fileDragged = true;
 		}
 	};
 
@@ -142,9 +132,9 @@
 		e.preventDefault();
 		e.stopPropagation();
 
-		presentationEditor.fileDragged = false;
+		editor.fileDragged = false;
 		if (e.dataTransfer?.items.length) {
-			let dropToSlide = false;
+			let dropToPage = false;
 			const viewportRect = viewportRef?.getBoundingClientRect();
 			const wrapperRect = wrapperRef?.getBoundingClientRect();
 			if (viewportRect && wrapperRect) {
@@ -153,7 +143,7 @@
 				const minTop = Math.max(viewportRect.top, wrapperRect.top);
 				const maxBottom = Math.min(viewportRect.bottom, wrapperRect.bottom);
 
-				dropToSlide =
+				dropToPage =
 					e.pageX > minLeft && e.pageX < maxRight && e.pageY > minTop && e.pageY < maxBottom;
 			}
 
@@ -165,28 +155,27 @@
 				if (file) {
 					try {
 						let image: Image;
-						if (presentationEditor.onImageUpload) {
-							image = await presentationEditor.onImageUpload(file);
+						if (editor.onImageUpload) {
+							image = await editor.onImageUpload(file);
 						} else {
 							const url = URL.createObjectURL(file);
 							console.log('image url', url);
-							// presentationEditor.
 							const htmlImage = await checkImage(url);
 							image = {
-								id: presentationEditor.generateId(),
+								id: editor.generateId(),
 								src: url,
 								width: htmlImage.width,
 								height: htmlImage.height,
 							};
 						}
-						presentationEditor.images.push(image);
-						if (dropToSlide) {
-							const layer = presentationEditor.buildImageLayer({
+						editor.images.push(image);
+						if (dropToPage) {
+							const layer = editor.buildImageLayer({
 								width: image.width,
 								height: image.height,
 								image,
 							});
-							presentationEditor.addLayers(presentationEditor.activeSlide.id, layer);
+							editor.addLayers(editor.activePage.id, layer);
 						}
 					} catch (err) {
 						console.log('err', err);
@@ -196,15 +185,29 @@
 		}
 	};
 
+	const onResize = () => {
+		if (editor.zoomSnapping === 'fit') {
+			tick().then(fitToScreen);
+		} else if (editor.zoomSnapping === 'fill') {
+			tick().then(fillScreen);
+		}
+	};
+
 	onMount(() => {
 		tick().then(() => {
 			fitToScreen();
 		});
+
+		const observer = new ResizeObserver(onResize);
+
+		if (viewportRef) observer.observe(viewportRef);
+
+		return () => observer.disconnect();
 	});
 
 	onDestroy(() => {
 		console.log('editor main component destroy');
-		get(presentationEditor.htmlEditor).destroy();
+		get(editor.htmlEditor).destroy();
 	});
 </script>
 
@@ -214,21 +217,21 @@
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div class="flex h-full w-full select-none" ondragover={onDragOver} ondrop={onDrop}>
-	<Sidebar />
+	<Sidebar {editor} />
 	<div class="flex h-full flex-1 select-none flex-col overflow-auto">
-		<Dragged />
-		<CursorTooltip />
-		<Header />
+		<Dragged {editor} />
+		<CursorTooltip {editor} />
+		<Header {editor} />
 
 		<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 />
+					<PageEditor bind:wrapperRef bind:viewportRef />
 				</main>
 
 				<footer class="relative">
-					{#if presentationEditor.mode === 'multiple'}
-						<SlidesNavigation />
+					{#if editor.mode === 'multiple'}
+						<PagesNavigation {editor} />
 					{/if}
 					<div class="flex items-center justify-end gap-2 px-4">
 						<div class="w-48">
@@ -245,14 +248,14 @@
 							<DropdownMenu.Trigger
 								class={buttonVariants({ variant: 'ghost', size: 'icon-xs', class: 'w-16' })}
 							>
-								{Math.round(presentationEditor.zoom * 100)}%
+								{Math.round(editor.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}
+										{#if editor.zoom === zoomLevel}
 											<CheckIcon class="h-4 w-4" />
 										{/if}
 									</DropdownMenu.Item>
@@ -260,13 +263,13 @@
 								<DropdownMenu.Separator />
 								<DropdownMenu.Item onclick={fitToScreen}>
 									Fit
-									{#if presentationEditor.zoomSnapping === 'fit'}
+									{#if editor.zoomSnapping === 'fit'}
 										<CheckIcon class="h-4 w-4" />
 									{/if}
 								</DropdownMenu.Item>
 								<DropdownMenu.Item onclick={fillScreen}>
 									Fill
-									{#if presentationEditor.zoomSnapping === 'fill'}
+									{#if editor.zoomSnapping === 'fill'}
 										<CheckIcon class="h-4 w-4" />
 									{/if}
 								</DropdownMenu.Item>

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

@@ -0,0 +1,4 @@
+import { Editor } from './editor.svelte.js';
+declare const Editor: any;
+type Editor = ReturnType<typeof Editor>;
+export default Editor;