@peteai/presentation-editor 0.0.8 → 0.0.10

package/dist/components/editor/active-layers.svelte

@@ -147,14 +147,14 @@
 	>
 		{#if !group.items.length}
 			<div
-				class="border-primary absolute -inset-px border-2"
+				class="absolute -inset-px border-2 border-primary"
 				style:box-shadow="0 0 0 1px hsla(0, 0%, 100%, .07), inset 0 0 0 1px hsla(0, 0%, 100%, .07)"
 			></div>
 		{:else}
 			<div class="group-border absolute -inset-px"></div>
 			{#each group.items as item}
 				<div
-					class="border-primary absolute -left-px -top-px border-2"
+					class="absolute -left-px -top-px border-2 border-primary"
 					style:box-shadow="0 0 0 1px hsla(0, 0%, 100%, .07), inset 0 0 0 1px hsla(0, 0%, 100%, .07)"
 					style:width={`${item.width * item.scale * editor.zoom + 2}px`}
 					style:height={`${item.height * item.scale * editor.zoom + 2}px`}

package/dist/components/editor/design.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import { BROWSER } from 'esm-env';
+	import { onMount } from 'svelte';
+	import type { DesignOptions, Page } from './types.js';
+	import { normalizePage } from './editor.svelte.js';
+	import { extractNodeFonts } from './layers/types/text/editor/utils.js';
+	import { defaultFonts } from './fonts.js';
+	import PageWithTransition from './page-with-transition.svelte';
+
+	const {
+		pages: pagesInput,
+		fonts = defaultFonts,
+		loadFont = async (family: string) => {
+			const font = fonts[family];
+			if (!font) return;
+			const WebFont = await import('webfontloader');
+			return new Promise((resolve, reject) => {
+				WebFont.load({
+					[font.type]: { families: [family] },
+					active: () => resolve(),
+					inactive: reject,
+				});
+			});
+		},
+	}: DesignOptions = $props();
+
+	const pages = pagesInput.map(normalizePage);
+
+	if (BROWSER) {
+		const fontFamilies = pages
+			.flatMap((page) => page.layers)
+			.filter((layer) => layer.type === 'text')
+			.flatMap((layer) => extractNodeFonts(layer.html));
+		Promise.all(fontFamilies.map(loadFont));
+	}
+
+	let element: HTMLDivElement | null = $state(null);
+
+	const width = 1920;
+	const height = 1080;
+
+	let thumbScale = $state(1);
+
+	onMount(() => {
+		const observer = new ResizeObserver((entries) => {
+			for (const entry of entries) {
+				const scaleX = entry.contentRect.width / width;
+				const scaleY = entry.contentRect.height / height;
+				thumbScale = Math.min(scaleX, scaleY); // preserve aspect ratio
+			}
+		});
+
+		if (element) observer.observe(element);
+
+		return () => observer.disconnect();
+	});
+
+	let sortedPages = $derived(pages.sort((a, b) => a.sortOrder - b.sortOrder));
+	let currentPageIndex = $state(0);
+	let page = $derived(sortedPages[currentPageIndex]);
+	let previousPage: Page | undefined = $state();
+
+	const setIndex = (index: number) => {
+		previousPage = page;
+		transition = page.transition;
+		currentPageIndex = index;
+	};
+	let transition = $derived(previousPage?.transition);
+
+	export const prevPage = () => {
+		if (currentPageIndex <= 0) return;
+		setIndex(currentPageIndex - 1);
+	};
+
+	export const nextPage = () => {
+		if (currentPageIndex >= sortedPages.length - 1) return;
+		setIndex(currentPageIndex + 1);
+	};
+
+	export const setPageIndex = (index: number) => {
+		if (index < 0 || index >= sortedPages.length) return;
+		setIndex(index);
+	};
+</script>
+
+<div bind:this={element} class="grid h-full w-full place-items-center">
+	<div style:width="{width * thumbScale}px" style:height="{height * thumbScale}px">
+		{#key page.id}
+			<PageWithTransition {page} {previousPage} {transition} {thumbScale} />
+		{/key}
+	</div>
+</div>

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

@@ -0,0 +1,8 @@
+import type { DesignOptions } from './types.js';
+declare const Design: import("svelte").Component<DesignOptions, {
+    prevPage: () => void;
+    nextPage: () => void;
+    setPageIndex: (index: number) => void;
+}, "">;
+type Design = ReturnType<typeof Design>;
+export default Design;

package/dist/components/editor/editor.svelte

@@ -216,7 +216,7 @@
 <Hotkeys />
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<div class="flex h-full w-full select-none" ondragover={onDragOver} ondrop={onDrop}>
+<div class="flex h-full w-full select-none bg-background" ondragover={onDragOver} ondrop={onDrop}>
 	<Sidebar {editor} />
 	<div class="flex h-full flex-1 select-none flex-col overflow-auto">
 		<Dragged {editor} />

package/dist/components/editor/editor.svelte.js

@@ -7,6 +7,12 @@ import { calculateBoundingBox, calculateImageCover, checkPolygonsIntersect, getR
 import createEditor from './layers/types/text/editor/createEditor.js';
 import { extensions } from './layers/types/text/extensions.js';
 import { SvelteSet } from 'svelte/reactivity';
+export const normalizePage = (page) => {
+    return {
+        ...page,
+        transition: page.transition || null,
+    };
+};
 export class Editor {
     mode = 'multiple';
     fonts = defaultFonts;
@@ -125,6 +131,7 @@ export class Editor {
     selectedLayersNotLocked = $derived(this.selectedLayers.filter((layer) => !layer.locked));
     selectedSimpleLayersNotLocked = $derived(this.selectedLayersNotLocked.flatMap((l) => l.type === 'group' ? this.findGroupChildren(this.activePage, l.id) : l));
     activeGroupRotate = $state(0);
+    pageTransitionPreview = $state(null);
     pageSelected = $state(false);
     clipboard = null;
     htmlEditor = createEditor({
@@ -142,11 +149,15 @@ export class Editor {
             const { page, ...rest } = options;
             Object.assign(this, { ...rest });
             if (page) {
-                Object.assign(this, { pages: [page] });
+                Object.assign(this, { pages: [normalizePage(page)] });
             }
         }
         else {
-            Object.assign(this, options);
+            const { pages, ...rest } = options;
+            Object.assign(this, rest);
+            if (pages) {
+                Object.assign(this, { pages: pages.map(normalizePage) });
+            }
         }
         if (!this.pages.length) {
             this.addPage();
@@ -163,6 +174,7 @@ export class Editor {
             backgroundImage: null,
             backgroundLocked: false,
             layers: [],
+            transition: null,
         };
     }
     addPage({ page, index } = {}) {

package/dist/components/editor/header.svelte

@@ -16,7 +16,7 @@
 	let disabled = $derived(!!editor.imageCropLayer);
 </script>
 
-<div class="bg-background h-12 w-full border-b border-gray-200 px-2">
+<div class="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

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

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

package/dist/components/editor/index.js

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

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

@@ -18,7 +18,7 @@
 	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"
+		class="absolute -inset-px border-2 border-primary"
 		style:box-shadow="0 0 0 1px hsla(0, 0%, 100%, .07), inset 0 0 0 1px hsla(0, 0%, 100%, .07)"
 	></div>
 </div>

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

@@ -50,7 +50,7 @@
 				{/each}
 			</svg>
 			<span
-				class="bg-background absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full"
+				class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-background"
 				style:width="{width / 2}px"
 				style:height="{height / 2}px"
 			></span>

package/dist/components/editor/layers/controls/corner-scale-control/corner-scale-control.svelte

@@ -198,7 +198,7 @@
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div class={cn(handler(), cursor())} onmousedown={onMouseDown}></div>
 	<div
-		class="group-hover:bg-primary group-active:bg-primary h-3 w-3 rounded-full bg-white transition-colors"
+		class="h-3 w-3 rounded-full bg-white transition-colors group-hover:bg-primary group-active:bg-primary"
 		style:box-shadow="0 0 4px 1px rgba(57,76,96,.15), 0 0 0 1px rgba(43,59,74,.3)"
 	></div>
 </div>

package/dist/components/editor/layers/controls/rotate-control/rotate-control.svelte

@@ -180,7 +180,7 @@
 			onmousedown={onMouseDown}
 		></div>
 		<div
-			class="group-hover:bg-primary group-active:bg-primary group-hover:text-primary-foreground group-active:text-primary-foreground flex h-6 w-6 items-center justify-center rounded-full bg-white transition-colors"
+			class="flex h-6 w-6 items-center justify-center rounded-full bg-white transition-colors group-hover:bg-primary group-hover:text-primary-foreground group-active:bg-primary group-active:text-primary-foreground"
 			style:box-shadow="0 0 4px 1px rgba(57,76,96,.15), 0 0 0 1px rgba(43,59,74,.3)"
 		>
 			<RotateIcon class="h-4 w-4" />

package/dist/components/editor/layers/controls/side-scale-control/side-scale-control.svelte

@@ -146,7 +146,7 @@
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div class={cn(handler(), cursor())} onmousedown={onMouseDown}></div>
 	<div
-		class="group-hover:bg-primary group-active:bg-primary h-4 w-1.5 rounded-sm bg-white transition-colors"
+		class="h-4 w-1.5 rounded-sm bg-white transition-colors group-hover:bg-primary group-active:bg-primary"
 		style:box-shadow="0 0 4px 1px rgba(57,76,96,.15), 0 0 0 1px rgba(43,59,74,.3)"
 	></div>
 </div>

package/dist/components/editor/layers/layer-button.svelte

@@ -33,7 +33,7 @@
 	<button
 		{onclick}
 		class={cn(
-			'bg-muted flex w-full items-center justify-between rounded-md border-2 border-transparent p-2 outline-none',
+			'flex w-full items-center justify-between rounded-md border-2 border-transparent bg-muted p-2 outline-none',
 			{
 				'border-blue-500': layer
 					? editor.activeLayers.find((l) => l.id === layer.id)

package/dist/components/editor/layers/types/background/background-layer-buttons.svelte

@@ -20,7 +20,7 @@
 	active={editor.activeSidebarPopup === 'backgroundColor'}
 >
 	<div
-		class="after:shadow-inner-1 relative h-6 w-6 overflow-hidden rounded-full after:absolute after:inset-0 after:rounded-full"
+		class="relative h-6 w-6 overflow-hidden rounded-full after:absolute after:inset-0 after:rounded-full after:shadow-inner-1"
 	>
 		<ColorPickerAlphaGrid size={12}>
 			<ColorIndicator color={backgroundColor} />

package/dist/components/editor/layers/types/image/controls/image-rotate-control/image-rotate-control.svelte

@@ -110,7 +110,7 @@
 	onmousedown={onMouseDown}
 >
 	<div
-		class="group-hover:bg-primary group-active:bg-primary group-hover:text-primary-foreground group-active:text-primary-foreground flex h-6 w-6 items-center justify-center rounded-full bg-white transition-colors after:pointer-events-auto after:absolute after:inset-0 after:rounded-full"
+		class="flex h-6 w-6 items-center justify-center rounded-full bg-white transition-colors after:pointer-events-auto after:absolute after:inset-0 after:rounded-full group-hover:bg-primary group-hover:text-primary-foreground group-active:bg-primary group-active:text-primary-foreground"
 		style:box-shadow="0 0 4px 1px rgba(57,76,96,.15), 0 0 0 1px rgba(43,59,74,.3)"
 	>
 		<RotateIcon class="h-4 w-4" />

package/dist/components/editor/layers/types/image/controls/image-scale-control/image-scale-control.svelte

@@ -148,7 +148,7 @@
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div class={cn(handler(), cursor())} onmousedown={onMouseDown}></div>
 	<div
-		class="group-hover:bg-primary group-active:bg-primary h-3 w-3 rounded-full bg-white transition-colors"
+		class="h-3 w-3 rounded-full bg-white transition-colors group-hover:bg-primary group-active:bg-primary"
 		style:box-shadow="0 0 4px 1px rgba(57,76,96,.15), 0 0 0 1px rgba(43,59,74,.3)"
 	></div>
 </div>

package/dist/components/editor/layers/types/image/image-layer-crop.svelte

@@ -156,7 +156,7 @@
 	</div>
 	<div class="pointer-events-auto">
 		<div
-			class="shadow-inner-1 outline-primary/50 pointer-events-none absolute outline outline-2"
+			class="pointer-events-none absolute shadow-inner-1 outline outline-2 outline-primary/50"
 			style:width={`${layer.image.width * layer.scale * editor.zoom}px`}
 			style:height={`${layer.image.height * layer.scale * editor.zoom}px`}
 			style:transform={`translate(${imageTransform.x * editor.zoom}px, ${imageTransform.y * editor.zoom}px) rotate(${imageTransform.rotate}deg)`}
@@ -173,7 +173,7 @@
 			<ImageRotateControl {pageRef} {layer} />
 		</div>
 		<div
-			class="outline-primary pointer-events-none absolute outline outline-2"
+			class="pointer-events-none absolute outline outline-2 outline-primary"
 			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)`}

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

@@ -15,6 +15,7 @@
 	import PageInner from './page-inner.svelte';
 	import ActiveLayers from './active-layers.svelte';
 	import SnappingGuides from './snapping-guides.svelte';
+	import PageTransitionPreview from './page-transition-preview.svelte';
 
 	interface Props {
 		viewportRef: HTMLDivElement | null;
@@ -96,6 +97,12 @@
 							{/if}
 
 							<SnappingGuides zoom={editor.zoom} guides={activeLayerGuides} />
+
+							{#if editor.pageTransitionPreview}
+								{#key editor.pageTransitionPreview}
+									<PageTransitionPreview {editor} transition={editor.pageTransitionPreview} />
+								{/key}
+							{/if}
 						</div>
 					</div>
 				</div>

package/dist/components/editor/{pages-navigation/page-preview.svelte → page-preview.svelte}

@@ -5,15 +5,15 @@
 		TextLayerContent,
 		ImageLayerContent,
 		GroupLayerContent,
-	} from '../layers/index.js';
-	import type { Page } from '../types.js';
+	} from './layers/index.js';
+	import type { Page } from './types.js';
 
 	interface Props {
 		page: Page;
-		thumbScale: number;
+		thumbScale?: number;
 	}
 
-	let { page, thumbScale }: Props = $props();
+	let { page, thumbScale = 1 }: Props = $props();
 
 	let rootLayers = $derived(page.layers.filter((l) => l.type === 'group' || !l.groupId));
 </script>

package/dist/components/editor/{pages-navigation/page-preview.svelte.d.ts → page-preview.svelte.d.ts}

@@ -1,7 +1,7 @@
-import type { Page } from '../types.js';
+import type { Page } from './types.js';
 interface Props {
     page: Page;
-    thumbScale: number;
+    thumbScale?: number;
 }
 declare const PagePreview: import("svelte").Component<Props, {}, "">;
 type PagePreview = ReturnType<typeof PagePreview>;

package/dist/components/editor/page-transition-preview.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import type { PageTransition } from './types.js';
+	import type { Editor } from './editor.svelte.js';
+	import PageWithTransition from './page-with-transition.svelte';
+
+	interface Props {
+		editor: Editor;
+		transition: PageTransition;
+	}
+
+	const { editor, transition }: Props = $props();
+
+	let nextPage = $derived(
+		editor.sortedPages.find((p) => p.sortOrder > editor.activePage.sortOrder),
+	);
+
+	onMount(() => {
+		const timeout = setTimeout(() => {
+			editor.pageTransitionPreview = null;
+		}, transition.duration + 500);
+
+		return () => clearTimeout(timeout);
+	});
+</script>
+
+{#if nextPage}
+	<PageWithTransition
+		page={nextPage}
+		previousPage={editor.activePage}
+		{transition}
+		thumbScale={editor.zoom}
+	/>
+{/if}

package/dist/components/editor/page-transition-preview.svelte.d.ts

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

package/dist/components/editor/page-with-transition.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+	import { circleWipe } from '../../transitions/circleWipe.js';
+	import { lineWipe } from '../../transitions/lineWipe.js';
+	import { stack } from '../../transitions/stack.js';
+	import type { Page, PageTransition } from './types.js';
+	import PagePreview from './page-preview.svelte';
+
+	interface Props {
+		page: Page;
+		previousPage?: Page;
+		transition: PageTransition | null | undefined;
+		thumbScale: number;
+	}
+
+	const { page, previousPage, transition, thumbScale }: Props = $props();
+
+	const previousPageTransition = (node: HTMLElement) => {
+		if (!transition) return { duration: 0 };
+		if (transition.type === 'slide') return stack(node, { ...transition, reverse: true });
+		return { duration: 0 };
+	};
+
+	const pageTransition = (node: HTMLElement) => {
+		if (!transition) return { duration: 0 };
+		if (transition.type === 'fade') return fade(node, transition);
+		if (transition.type === 'slide') return stack(node, transition);
+		if (transition.type === 'circleWipe') return circleWipe(node, transition);
+		if (transition.type === 'lineWipe') return lineWipe(node, transition);
+		if (transition.type === 'stack') return stack(node, transition);
+		return { duration: 0 };
+	};
+</script>
+
+<div class="relative h-full w-full overflow-hidden">
+	{#if previousPage}
+		<div class="absolute inset-0">
+			<div in:previousPageTransition|global class="h-full w-full">
+				<PagePreview page={previousPage} {thumbScale} />
+			</div>
+		</div>
+	{/if}
+	<div class="absolute inset-0">
+		<div in:pageTransition|global class="h-full w-full">
+			<PagePreview {page} {thumbScale} />
+		</div>
+	</div>
+</div>

package/dist/components/editor/page-with-transition.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Page, PageTransition } from './types.js';
+interface Props {
+    page: Page;
+    previousPage?: Page;
+    transition: PageTransition | null | undefined;
+    thumbScale: number;
+}
+declare const PageWithTransition: import("svelte").Component<Props, {}, "">;
+type PageWithTransition = ReturnType<typeof PageWithTransition>;
+export default PageWithTransition;

package/dist/components/editor/page.svelte

@@ -2,13 +2,13 @@
 	import { BROWSER } from 'esm-env';
 	import { onMount } from 'svelte';
 	import type { PageOptions } from './types.js';
+	import { normalizePage } from './editor.svelte.js';
 	import { extractNodeFonts } from './layers/types/text/editor/utils.js';
 	import { defaultFonts } from './fonts.js';
-	import PagePreview from './pages-navigation/page-preview.svelte';
+	import PagePreview from './page-preview.svelte';
 
 	const {
-		page,
-		thumbScale = 1,
+		page: pageInput,
 		fonts = defaultFonts,
 		loadFont = async (family: string) => {
 			const font = fonts[family];
@@ -22,10 +22,10 @@
 				});
 			});
 		},
-		class: className,
-		...restProps
 	}: PageOptions = $props();
 
+	const page = normalizePage(pageInput);
+
 	if (BROWSER) {
 		const fontFamilies = page.layers
 			.filter((layer) => layer.type === 'text')
@@ -35,17 +35,17 @@
 
 	let element: HTMLDivElement | null = $state(null);
 
-	let width = 1920 * thumbScale;
-	let height = 1080 * thumbScale;
+	const width = 1920;
+	const height = 1080;
 
-	let scale = $state(1);
+	let thumbScale = $state(1);
 
 	onMount(() => {
 		const observer = new ResizeObserver((entries) => {
 			for (const entry of entries) {
 				const scaleX = entry.contentRect.width / width;
 				const scaleY = entry.contentRect.height / height;
-				scale = Math.min(scaleX, scaleY); // preserve aspect ratio
+				thumbScale = Math.min(scaleX, scaleY); // preserve aspect ratio
 			}
 		});
 
@@ -55,15 +55,8 @@
 	});
 </script>
 
-<div class={className} {...restProps}>
-	<div bind:this={element} class="h-full w-full">
-		<div
-			class="relative origin-top-left"
-			style:width="{width}px"
-			style:height="{height}px"
-			style:transform="scale({scale})"
-		>
-			<PagePreview {page} {thumbScale} />
-		</div>
+<div bind:this={element} class="grid h-full w-full place-items-center">
+	<div class="relative" style:width="{width * thumbScale}px" style:height="{height * thumbScale}px">
+		<PagePreview {page} {thumbScale} />
 	</div>
 </div>