@peteai/presentation-editor 0.0.1

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

@@ -0,0 +1,352 @@
+import uniqid from 'uniqid';
+import { getContext, setContext } from 'svelte';
+import { cognitionImages, cognitionSlides } from './cognition-slides.js';
+import { cognitionSlideToJson } from './utils.js';
+import { calculateBoundingBox } from './layers/utils.js';
+export class PresentationEditor {
+    mode = 'multiple';
+    slides = $state(cognitionSlides.map(cognitionSlideToJson)); // getSlides()
+    images = $state(cognitionImages);
+    width = 1920;
+    height = 1080;
+    zoom = $state(0.4);
+    generateId = () => uniqid();
+    onImageUpload;
+    onSlideAdd;
+    onSlideUpdate;
+    onSlideRemove;
+    onLayerAdd;
+    onLayerUpdate;
+    onLayerRemove;
+    activeSlide = $state();
+    clipboard = null;
+    slideSelected = $state(false);
+    activeLayer = $state();
+    activeBackground = $state(false);
+    htmlEditor = $state.raw(null);
+    activeAction = $state(null);
+    historyActions = $state([]);
+    historyIndex = $state(-1);
+    dragged = $state();
+    fileDragged = $state(false);
+    constructor(options = {}) {
+        if (options.mode === 'single') {
+            const { slide, ...rest } = options;
+            Object.assign(this, { ...rest });
+            if (slide) {
+                Object.assign(this, { slides: [slide] });
+            }
+        }
+        else {
+            Object.assign(this, options);
+        }
+        if (!this.slides.length) {
+            this.addSlide({ index: 0 });
+        }
+        // initial sorting
+        this.sortSlides();
+        this.slides.forEach((slide) => this.sortLayers(slide.layers));
+        this.activeSlide = this.slides[0];
+        setPresentationEditorContext(this);
+    }
+    sortLayers(layers) {
+        layers.sort((a, b) => a.sortOrder - b.sortOrder);
+    }
+    sortSlides() {
+        this.slides.sort((a, b) => a.sortOrder - b.sortOrder);
+    }
+    findSlideIndex(slideId) {
+        return this.slides.findIndex(({ id }) => id === slideId);
+    }
+    buildEmptySlide(sortOrder = 1) {
+        return {
+            id: this.generateId(),
+            sortOrder,
+            backgroundColor: null,
+            layers: [],
+        };
+    }
+    addSlide({ slide = this.buildEmptySlide(), index = this.findSlideIndex(this.activeSlide.id) + 1, } = {}) {
+        if (this.mode !== 'multiple')
+            return;
+        const prevSlide = this.slides[index - 1];
+        const nextSlide = this.slides[index];
+        if (!prevSlide && !nextSlide)
+            return;
+        const sortOrder = nextSlide && prevSlide
+            ? (prevSlide.sortOrder + nextSlide.sortOrder) / 2
+            : prevSlide
+                ? prevSlide.sortOrder + 1
+                : nextSlide.sortOrder - 1;
+        this.historyPush({ type: 'slideAdd', slide: { ...slide, sortOrder } });
+    }
+    removeSlide(slide) {
+        if (this.mode !== 'multiple')
+            return;
+        this.historyPush({ type: 'slideRemove', slide });
+    }
+    duplicateSlide(slide) {
+        if (this.mode !== 'multiple')
+            return;
+        const { layers, ...rest } = slide;
+        const duplicate = {
+            ...rest,
+            id: this.generateId(),
+            layers: layers.map((layer) => ({ ...layer, id: this.generateId() })),
+        };
+        this.addSlide({ slide: duplicate });
+    }
+    async addImageLayer({ image, x, y, width, height, sortOrder, ...rest }) {
+        const imageLayer = {
+            id: this.generateId(),
+            type: 'image',
+            x,
+            y,
+            width,
+            height,
+            image,
+            sortOrder: sortOrder ??
+                (this.activeSlide.layers.length
+                    ? this.activeSlide.layers[this.activeSlide.layers.length - 1].sortOrder + 1
+                    : 1),
+            rotate: null,
+            opacity: null,
+            scale: null,
+            offsetX: null,
+            offsetY: null,
+            cornerRadius: null,
+            flipX: false,
+            flipY: false,
+            borderStyle: null,
+            borderWidth: null,
+            borderColor: null,
+            ...rest,
+        };
+        console.log('imageLayer', imageLayer);
+        this.historyPush({ type: 'layerAdd', layer: { ...imageLayer } });
+    }
+    addLayer({ layer, index = this.activeSlide.layers.length }) {
+        const prev = this.activeSlide.layers[index - 1];
+        const next = this.activeSlide.layers[index];
+        if (!prev && !next)
+            return;
+        const sortOrder = next && prev
+            ? (prev.sortOrder + next.sortOrder) / 2
+            : prev
+                ? prev.sortOrder + 1
+                : next.sortOrder - 1;
+        this.historyPush({ type: 'layerAdd', layer: { ...layer, sortOrder } });
+    }
+    duplicateLayer(layer) {
+        const increment = 50;
+        const scale = layer.scale || 1;
+        const xIncrement = layer.x + (layer.width * scale) / 2 > this.width / 2 ? -increment : increment;
+        const yIncrement = layer.y + (layer.height * scale) / 2 > this.height / 2 ? -increment : increment;
+        let xAdjust = 0;
+        let iteration = 1;
+        const tryToDuplicate = () => {
+            const duplicate = {
+                ...layer,
+                id: this.generateId(),
+                x: layer.x + xAdjust + xIncrement * iteration,
+                y: layer.y + yIncrement * iteration,
+            };
+            const occupied = this.activeSlide.layers.some((l) => l.x === duplicate.x &&
+                l.y === duplicate.y &&
+                l.width === duplicate.width &&
+                l.height === duplicate.height);
+            if (occupied) {
+                iteration++;
+                tryToDuplicate();
+            }
+            else if (this.checkIfLayerInBounds(duplicate, true)) {
+                this.addLayer({ layer: duplicate });
+            }
+            else {
+                xAdjust += xIncrement;
+                iteration = 0;
+                const newX = layer.x + xAdjust;
+                if (newX >= 0 && newX < this.width) {
+                    tryToDuplicate();
+                }
+            }
+        };
+        tryToDuplicate();
+    }
+    setActiveSlide(slideId) {
+        if (this.mode !== 'multiple')
+            return;
+        const slide = this.slides.find(({ id }) => id === slideId);
+        if (slide) {
+            this.setActiveLayer(null);
+            // this.historyReset();
+            this.activeSlide = slide;
+            this.slideSelected = true;
+            return slide;
+        }
+    }
+    setActiveLayer(layer) {
+        this.activeAction = null;
+        this.activeLayer = layer;
+        this.activeBackground = false;
+        this.slideSelected = false;
+    }
+    setActiveBackground(value) {
+        this.activeAction = null;
+        this.activeLayer = null;
+        this.activeBackground = value;
+        this.slideSelected = false;
+    }
+    async applyChanges(action, type) {
+        if (this.mode === 'multiple' && (action.type === 'slideAdd' || action.type === 'slideRemove')) {
+            if ((action.type === 'slideAdd' && type === 'redo') ||
+                (action.type === 'slideRemove' && type === 'undo')) {
+                let newSlide = { ...action.slide };
+                if (this.onSlideAdd) {
+                    newSlide = await this.onSlideAdd(action.slide);
+                }
+                this.slides.push(newSlide);
+                this.sortSlides();
+                this.setActiveSlide(newSlide.id);
+                if (action.type === 'slideRemove' && action.newSlide) {
+                    const slideId = action.newSlide.id;
+                    const index = this.slides.findIndex(({ id }) => id === slideId);
+                    if (~index) {
+                        this.slides.splice(index, 1);
+                        this.onSlideRemove?.(action.newSlide.id);
+                    }
+                }
+            }
+            else {
+                const index = this.slides.findIndex(({ id }) => id === action.slide.id);
+                if (~index) {
+                    this.slides.splice(index, 1);
+                    this.onSlideRemove?.(action.slide.id);
+                    if (!this.slides.length && action.type === 'slideRemove') {
+                        let newSlide = this.buildEmptySlide();
+                        if (this.onSlideAdd) {
+                            newSlide = await this.onSlideAdd(action.slide);
+                        }
+                        this.slides.push(newSlide);
+                        this.setActiveSlide(newSlide.id);
+                        action.newSlide = newSlide;
+                    }
+                    else {
+                        this.setActiveSlide(this.slides[index > 0 ? index - 1 : 0].id);
+                    }
+                }
+            }
+        }
+        else {
+            const slide = this.slides.find(({ id }) => id === action.slideId);
+            if (!slide)
+                return;
+            if (this.mode === 'multiple' && action.type === 'slide') {
+                Object.assign(slide, action[type]);
+                if ('sortOrder' in action[type]) {
+                    this.sortSlides();
+                }
+                this.onSlideUpdate?.(action.slideId, action[type]);
+            }
+            else if (action.type === 'layerAdd' || action.type === 'layerRemove') {
+                if ((action.type === 'layerAdd' && type === 'redo') ||
+                    (action.type === 'layerRemove' && type === 'undo')) {
+                    let layer = { ...action.layer };
+                    if (this.onLayerAdd) {
+                        layer = await this.onLayerAdd(action.slideId, action.layer);
+                    }
+                    slide.layers.push(layer);
+                    this.sortLayers(slide.layers);
+                    this.setActiveLayer(layer);
+                }
+                else {
+                    const index = slide.layers.findIndex(({ id }) => id === action.layer.id);
+                    if (~index) {
+                        slide.layers.splice(index, 1);
+                        this.onLayerRemove?.(action.slideId, action.layer.id, action.layer.type);
+                    }
+                }
+            }
+            else if (!action.type || action.type === 'layer') {
+                const layer = slide.layers.find(({ id }) => id === action.layer.id);
+                if (!layer)
+                    return;
+                Object.assign(layer, action[type]);
+                if ('sortOrder' in action[type]) {
+                    this.sortLayers(slide.layers);
+                }
+                this.onLayerUpdate?.(action.slideId, action.layer.id, action.layer.type, action[type]);
+            }
+        }
+    }
+    historyReset() {
+        this.historyActions = [];
+        this.historyIndex = -1;
+    }
+    async historyPush(newAction, slideId) {
+        const action = { ...newAction, slideId: slideId ?? this.activeSlide.id };
+        this.historyActions = [...this.historyActions.slice(0, this.historyIndex + 1), action];
+        this.historyIndex = this.historyActions.length - 1;
+        await this.applyChanges(action, 'redo');
+    }
+    async historyUndo() {
+        if (this.historyIndex >= 0) {
+            const action = this.historyActions[this.historyIndex];
+            this.historyIndex--;
+            await this.applyChanges(action, 'undo');
+            if (this.activeLayer) {
+                if (action.type === 'layerAdd' && action.layer.id === this.activeLayer.id) {
+                    this.setActiveLayer(null);
+                }
+            }
+        }
+    }
+    async historyRedo() {
+        if (this.historyIndex < this.historyActions.length - 1) {
+            this.historyIndex++;
+            const action = this.historyActions[this.historyIndex];
+            await this.applyChanges(action, 'redo');
+            if (this.activeLayer) {
+                if (action.type === 'layerRemove' && action.layer.id === this.activeLayer.id) {
+                    this.setActiveLayer(null);
+                }
+            }
+        }
+    }
+    async removeBackground() {
+        await this.historyPush({
+            type: 'slide',
+            undo: { backgroundColor: this.activeSlide.backgroundColor },
+            redo: { backgroundColor: null },
+        });
+    }
+    async removeLayer(layer) {
+        await this.historyPush({
+            type: 'layerRemove',
+            layer: this.activeAction?.layer ?? layer,
+        });
+        this.setActiveLayer(null);
+        return true;
+    }
+    checkIfLayerInBounds(layer, check = false) {
+        const bBox = calculateBoundingBox(layer);
+        const scale = layer.scale || 1;
+        if (bBox.x > this.width ||
+            bBox.y > this.height ||
+            bBox.x + bBox.width * scale < 0 ||
+            bBox.y * scale + bBox.height < 0) {
+            if (!check) {
+                this.removeLayer(layer);
+            }
+            return false;
+        }
+        return true;
+    }
+}
+const presentationEditorKey = Symbol('presentationEditor');
+export function setPresentationEditorContext(presentationEditor) {
+    setContext(presentationEditorKey, presentationEditor);
+}
+export function getPresentationEditorContext() {
+    return getContext(presentationEditorKey);
+}

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

@@ -0,0 +1,108 @@
+<script lang="ts">
+	import CloudUploadIcon from 'lucide-svelte/icons/cloud-upload';
+	import ImageIcon from 'lucide-svelte/icons/image';
+	import { Button, buttonVariants } from '../../ui/button/index.js';
+	import * as Dialog from '../../ui/dialog/index.js';
+	import { Input } from '../../ui/input/index.js';
+	import { Label } from '../../ui/label/index.js';
+	import UploadsImage from './uploads-image.svelte';
+	import { checkImage } from '../utils.js';
+	import { getPresentationEditorContext } from '../presentation-editor.svelte.js';
+
+	const editor = getPresentationEditorContext();
+
+	let open = $state(false);
+	let url = $state('');
+	let error = $state(false);
+
+	const resetState = () => {
+		url = '';
+		error = false;
+	};
+
+	const onFormSubmit = (e: Event) => {
+		e.preventDefault();
+
+		console.log('submit', url);
+		checkImage(url)
+			.then((image) => {
+				console.log('image', image);
+				editor.images.push({
+					id: editor.generateId(),
+					src: url,
+					width: image.width,
+					height: image.height,
+				});
+				error = false;
+				open = false;
+				url = '';
+			})
+			.catch((err) => {
+				console.log('err', err);
+				error = true;
+			});
+	};
+</script>
+
+<div class="relative flex h-full shrink-0 flex-col gap-2">
+	{#if editor.fileDragged}
+		<div
+			class="bg-background absolute inset-0 z-10 flex h-full w-full flex-col items-center justify-center"
+		>
+			<div class="grid gap-6">
+				<div class="grid justify-center">
+					<CloudUploadIcon class="m-auto h-8 w-8" />
+					<span class="text-center font-semibold">Drop files to upload</span>
+				</div>
+
+				<div class="grid w-full justify-center">
+					<div class="flex items-center justify-center gap-1">
+						<ImageIcon class="h-4 w-4" />
+						<p class="text-sm font-semibold">Images</p>
+					</div>
+					<p class="text-muted-foreground text-xs">GIF, JPG, PNG</p>
+				</div>
+			</div>
+		</div>
+	{/if}
+	<div class="text-xl font-medium text-gray-500">Images</div>
+	<div class="-m-1">
+		{#each editor.images as image}
+			<UploadsImage {image} />
+		{/each}
+	</div>
+	<div>
+		<Dialog.Root bind:open onOpenChange={resetState}>
+			<Dialog.Trigger class={buttonVariants({ variant: 'default' })}>Upload Image</Dialog.Trigger>
+			<Dialog.Content>
+				<form onsubmit={onFormSubmit}>
+					<Dialog.Header>
+						<Dialog.Title>Upload Image</Dialog.Title>
+						<Dialog.Description>Add image to the library by URL or drop it here.</Dialog.Description
+						>
+					</Dialog.Header>
+					<div class="grid gap-4 py-4">
+						<div class="grid grid-cols-4 items-center gap-4">
+							<Label for="url" class="text-right">Image URL</Label>
+							<Input
+								type="url"
+								id="url"
+								placeholder="https://..."
+								bind:value={url}
+								class="col-span-3"
+							/>
+							{#if error}
+								<div class="text-destructive col-span-3 col-start-2 text-sm font-medium">
+									Invalid
+								</div>
+							{/if}
+						</div>
+					</div>
+					<Dialog.Footer>
+						<Button type="submit">Add</Button>
+					</Dialog.Footer>
+				</form>
+			</Dialog.Content>
+		</Dialog.Root>
+	</div>
+</div>

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

@@ -0,0 +1,3 @@
+declare const ImagesLibrary: import("svelte").Component<Record<string, never>, {}, "">;
+type ImagesLibrary = ReturnType<typeof ImagesLibrary>;
+export default ImagesLibrary;

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

@@ -0,0 +1,94 @@
+<script lang="ts">
+	import { flip } from 'svelte/animate';
+	import { dndzone } from 'svelte-dnd-action';
+	import {
+		LayerButton,
+		LayerThumbWrapper,
+		BackgroundLayerThumb,
+		HtmlLayerThumb,
+		ImageLayerThumb,
+	} from '../layers/index.js';
+	import { getPresentationEditorContext } from '../presentation-editor.svelte.js';
+
+	const editor = getPresentationEditorContext();
+
+	const flipDurationMs = 300;
+	const otherOptions = { flipDurationMs, type: 'layers', dropTargetStyle: {} };
+
+	function handleDndConsider(e) {
+		editor.activeSlide.layers = e.detail.items;
+	}
+
+	async function handleDndFinalize(e) {
+		console.log('handleDndFinalize', e);
+
+		editor.activeSlide.layers = e.detail.items;
+
+		const index = e.detail.items.findIndex((item) => item.id === e.detail.info.id);
+		const item = e.detail.items[index];
+
+		let redo;
+		const prev = e.detail.items[index - 1];
+		const next = e.detail.items[index + 1];
+		if (prev && next) {
+			if (!(prev.sortOrder < item.sortOrder && next.sortOrder > item.sortOrder)) {
+				redo = { sortOrder: (prev.sortOrder + next.sortOrder) / 2 };
+			}
+		} else if (next) {
+			if (next && next.sortOrder <= item.sortOrder) {
+				redo = { sortOrder: next.sortOrder - 1 };
+			}
+		} else if (prev) {
+			if (prev && prev.sortOrder >= item.sortOrder) {
+				redo = { sortOrder: prev.sortOrder + 1 };
+			}
+		}
+
+		if (redo) {
+			editor.historyPush({
+				type: 'layer',
+				layer: { id: item.id, type: item.type },
+				undo: { sortOrder: item.sortOrder },
+				redo,
+			});
+		}
+	}
+</script>
+
+<div class="flex flex-col gap-2">
+	<div class="text-xl font-medium text-gray-500">Layers</div>
+	<div class="flex-1 resize-none overflow-y-auto">
+		<div class="flex flex-col gap-2">
+			<section
+				class="flex flex-col-reverse gap-2"
+				aria-label="Layers"
+				use:dndzone={{ items: editor.activeSlide.layers, ...otherOptions }}
+				onconsider={handleDndConsider}
+				onfinalize={handleDndFinalize}
+			>
+				{#each editor.activeSlide.layers as layer (layer.id)}
+					<div aria-label={layer.type} animate:flip={{ duration: flipDurationMs }}>
+						<LayerButton {layer}>
+							<LayerThumbWrapper {layer} thumb={{ width: 192, height: 32 }}>
+								{#snippet children({ thumbScale })}
+									{#if layer.type === 'html'}
+										<HtmlLayerThumb {layer} {thumbScale} />
+									{:else if layer.type === 'image'}
+										<ImageLayerThumb {layer} {thumbScale} />
+									{/if}
+								{/snippet}
+							</LayerThumbWrapper>
+						</LayerButton>
+					</div>
+				{/each}
+			</section>
+			<LayerButton>
+				<div class="absolute top-1/2 h-28 w-48 -translate-y-1/2">
+					<div class="h-full w-full">
+						<BackgroundLayerThumb slide={editor.activeSlide} />
+					</div>
+				</div>
+			</LayerButton>
+		</div>
+	</div>
+</div>

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

@@ -0,0 +1,18 @@
+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 Layers: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Layers = InstanceType<typeof Layers>;
+export default Layers;

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { ActiveSidebar } from '../types.js';
+	import ImagesLibrary from './images-library.svelte';
+	import Layers from './layers.svelte';
+
+	interface Props {
+		activeSidebarTab: ActiveSidebar;
+	}
+	let { activeSidebarTab }: Props = $props();
+</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>
+{/if}

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

@@ -0,0 +1,7 @@
+import type { ActiveSidebar } from '../types.js';
+interface Props {
+    activeSidebarTab: ActiveSidebar;
+}
+declare const Sidebar: import("svelte").Component<Props, {}, "">;
+type Sidebar = ReturnType<typeof Sidebar>;
+export default Sidebar;

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

@@ -0,0 +1,64 @@
+<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 onDocumentDragEnter = (e: DragEvent) => {
+		console.log('document dragenter', e);
+		if (editor.dragged) {
+			editor.dragged = { ...editor.dragged, hidden: false, scale: null, sticky: true };
+		}
+	};
+
+	const onDragStart = (e: DragEvent) => {
+		if (!e.target || !e.dataTransfer) {
+			return null;
+		}
+
+		console.log('dragstart', e, $state.snapshot(image));
+		e.dataTransfer.effectAllowed = 'move';
+		editor.dragged = {
+			id,
+			hidden: false,
+			sticky: true,
+			image,
+			x: e.clientX,
+			y: e.clientY,
+			offsetX: e.offsetX,
+			offsetY: e.offsetY,
+			initialScale: (e.target as HTMLElement).clientHeight / image.height,
+		};
+		addEventListener('dragenter', onDocumentDragEnter);
+	};
+
+	const onDragEnd = (e: DragEvent) => {
+		console.log('dragend', e);
+		removeEventListener('dragend', onDocumentDragEnter);
+		editor.dragged = null;
+	};
+
+	const onDrag = (e: DragEvent) => {
+		// console.log('drag', e);
+		const { dragged } = editor;
+		if (dragged && dragged.sticky && (e.clientX || e.clientY)) {
+			editor.dragged = { ...dragged, x: e.clientX, y: e.clientY };
+		}
+	};
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	class="m-1 inline-block h-20"
+	draggable={true}
+	ondragstart={onDragStart}
+	ondragend={onDragEnd}
+	ondrag={onDrag}
+	style:opacity={editor.dragged?.id === id ? 0 : null}
+>
+	<img src={image.src} alt="" crossorigin="anonymous" class="h-full" draggable={false} />
+</div>

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

@@ -0,0 +1,5 @@
+declare const UploadsImage: import("svelte").Component<{
+    image: any;
+}, {}, "">;
+type UploadsImage = ReturnType<typeof UploadsImage>;
+export default UploadsImage;