@peteai/presentation-editor 0.0.1

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

@@ -0,0 +1,80 @@
+<script lang="ts">
+	import type { Image, ImageLayer } from '../../../types.js';
+	import { getPresentationEditorContext } from '../../../presentation-editor.svelte.js';
+	import ImageContent from './image-content.svelte';
+	import { calculateImageFill } from '../../utils.js';
+
+	interface Props {
+		layer: ImageLayer;
+	}
+
+	let { layer = $bindable() }: Props = $props();
+
+	const editor = getPresentationEditorContext();
+
+	let layerSubstitute: ImageLayer | null = $state(null);
+
+	let ref: HTMLDivElement;
+
+	const buildImageDropChanges = (image: Image) => {
+		const layerScale = layer.scale || 1;
+
+		return {
+			image,
+			...calculateImageFill(image, {
+				width: layer.width * layerScale,
+				height: layer.height * layerScale,
+			}),
+		};
+	};
+
+	const onDragEnter = (e: DragEvent) => {
+		console.log('dragenter image layer', e);
+		e.preventDefault();
+		e.stopPropagation();
+
+		if (editor.dragged) {
+			editor.dragged.hidden = true;
+			layerSubstitute = { ...layer, ...buildImageDropChanges(editor.dragged.image) };
+		}
+	};
+
+	const onDragOver = (e: DragEvent) => {
+		// console.log('dragover image layer', e);
+		e.preventDefault();
+	};
+
+	const onDragLeave = (e: DragEvent) => {
+		console.log('dragleave image layer', e);
+		e.preventDefault();
+		e.stopPropagation();
+
+		layerSubstitute = null;
+	};
+
+	const onDrop = (e: DragEvent) => {
+		e.preventDefault();
+
+		if (editor.dragged) {
+			const redo = buildImageDropChanges(editor.dragged.image);
+			const undo = Object.fromEntries(
+				Object.keys(redo).map((key) => [key, layer[key as keyof ImageLayer]]),
+			);
+			Object.assign(layer, redo);
+			editor.historyPush({ type: 'layer', layer: { id: layer.id, type: layer.type }, undo, redo });
+		}
+		layerSubstitute = null;
+	};
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	bind:this={ref}
+	class="h-full w-full"
+	ondragenter={onDragEnter}
+	ondragover={onDragOver}
+	ondragleave={onDragLeave}
+	ondrop={onDrop}
+>
+	<ImageContent layer={layerSubstitute ?? layer} />
+</div>

package/dist/components/presentation-editor/layers/types/image/image-layer.svelte.d.ts

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

package/dist/components/presentation-editor/layers/types/image/index.d.ts

@@ -0,0 +1,5 @@
+import Root from './image-layer.svelte';
+import ImageLayerThumb from './image-layer-thumb.svelte';
+import ImageLayerButtons from './image-layer-buttons.svelte';
+import ImageLayerActive from './image-layer-active.svelte';
+export { Root, Root as ImageLayer, ImageLayerThumb, ImageLayerButtons, ImageLayerActive };

package/dist/components/presentation-editor/layers/types/image/index.js

@@ -0,0 +1,5 @@
+import Root from './image-layer.svelte';
+import ImageLayerThumb from './image-layer-thumb.svelte';
+import ImageLayerButtons from './image-layer-buttons.svelte';
+import ImageLayerActive from './image-layer-active.svelte';
+export { Root, Root as ImageLayer, ImageLayerThumb, ImageLayerButtons, ImageLayerActive };

package/dist/components/presentation-editor/layers/utils.d.ts

@@ -0,0 +1,32 @@
+type Origin = 'top-left' | 'top-right' | 'center-left' | 'center-right' | 'bottom-left' | 'bottom-right' | 'left' | 'right' | 'top' | 'bottom';
+interface ElementProps {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    rotate: number | null;
+}
+export declare const calculateNewPosition: (origin: Origin, element: ElementProps, newWidth: number, newHeight: number) => {
+    newX: number;
+    newY: number;
+};
+export declare function calculateBoundingBox(element: ElementProps): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export declare function calculateImageFill(image: {
+    width: number;
+    height: number;
+}, bBox: {
+    width: number;
+    height: number;
+}): {
+    offsetX: number;
+    offsetY: number;
+    width: number;
+    height: number;
+    scale: number;
+};
+export {};

package/dist/components/presentation-editor/layers/utils.js

@@ -0,0 +1,92 @@
+const rotatePoint = (point, angleRad) => {
+    const cos = Math.cos(angleRad);
+    const sin = Math.sin(angleRad);
+    return {
+        x: point.x * cos - point.y * sin,
+        y: point.x * sin + point.y * cos,
+    };
+};
+const getPoints = (origin, width, height) => {
+    const halfWidth = width / 2;
+    const halfHeight = height / 2;
+    switch (origin) {
+        case 'top-left':
+            return { x: -halfWidth, y: -halfHeight };
+        case 'top-right':
+            return { x: halfWidth, y: -halfHeight };
+        case 'center-left':
+        case 'left':
+            return { x: -halfWidth, y: 0 };
+        case 'center-right':
+        case 'right':
+            return { x: halfWidth, y: 0 };
+        case 'bottom-left':
+            return { x: -halfWidth, y: halfHeight };
+        case 'bottom-right':
+            return { x: halfWidth, y: halfHeight };
+        case 'top':
+            return { x: 0, y: -halfHeight };
+        case 'bottom':
+            return { x: 0, y: halfHeight };
+        default:
+            throw new Error(`Unknown origin: ${origin}`);
+    }
+};
+export const calculateNewPosition = (origin, element, newWidth, newHeight) => {
+    const { x, y, width, height } = element;
+    const rotate = element.rotate || 0;
+    const oldPoint = getPoints(origin, width, height);
+    const newPoint = getPoints(origin, newWidth, newHeight);
+    let deltaX = newPoint.x - oldPoint.x;
+    let deltaY = newPoint.y - oldPoint.y;
+    if (rotate !== 0) {
+        const rad = (rotate * Math.PI) / 180;
+        const rotatedOldCenter = rotatePoint(oldPoint, rad);
+        const rotatedNewCenter = rotatePoint(newPoint, rad);
+        deltaX = rotatedNewCenter.x - rotatedOldCenter.x;
+        deltaY = rotatedNewCenter.y - rotatedOldCenter.y;
+    }
+    return {
+        newX: x - deltaX - (newWidth - width) / 2,
+        newY: y - deltaY - (newHeight - height) / 2,
+    };
+};
+export function calculateBoundingBox(element) {
+    const { x, y, width, height } = element;
+    const rotate = element.rotate || 0;
+    if (rotate === 0) {
+        return { x, y, width, height };
+    }
+    const radians = (rotate * Math.PI) / 180;
+    const origins = ['top-left', 'top-right'];
+    const corners = origins.map((position) => rotatePoint(getPoints(position, width, height), radians));
+    const maxX = Math.max(...corners.map((corner) => Math.abs(corner.x)));
+    const maxY = Math.max(...corners.map((corner) => Math.abs(corner.y)));
+    return {
+        x: x + width / 2 - maxX,
+        y: y + height / 2 - maxY,
+        width: maxX * 2,
+        height: maxY * 2,
+    };
+}
+export function calculateImageFill(image, bBox) {
+    const widthScale = bBox.width / image.width;
+    const heightScale = bBox.height / image.height;
+    const scale = Math.max(widthScale, heightScale);
+    const width = bBox.width / scale;
+    const height = bBox.height / scale;
+    return {
+        width,
+        height,
+        scale,
+        ...(widthScale > heightScale
+            ? {
+                offsetX: 0,
+                offsetY: (image.height - bBox.height / scale) / 2,
+            }
+            : {
+                offsetX: (image.width - bBox.width / scale) / 2,
+                offsetY: 0,
+            }),
+    };
+}

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

@@ -0,0 +1,336 @@
+<script lang="ts">
+	import { onMount, tick } from 'svelte';
+	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 { checkImage } from './utils.js';
+	import {
+		PresentationEditor,
+		type PresentationEditorOptions,
+	} from './presentation-editor.svelte.js';
+	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';
+
+	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);
+
+	const sliderMin = -2.304;
+	const sliderMax = 1.61;
+	const zoomMin = 0.1;
+	const zoomMax = 5;
+	const referenceSlider = 0;
+	const referenceZoom = 1;
+
+	const slope1 = (referenceZoom - zoomMin) / (referenceSlider - sliderMin);
+	const intercept1 = referenceZoom - slope1 * referenceSlider;
+
+	const slope2 = (zoomMax - referenceZoom) / (sliderMax - referenceSlider);
+	const intercept2 = referenceZoom - slope2 * referenceSlider;
+
+	const convertSliderToZoom = (value: number) => {
+		if (value <= referenceSlider) {
+			return slope1 * value + intercept1;
+		} else {
+			return slope2 * value + intercept2;
+		}
+	};
+
+	const convertZoomToSlider = (value: number) => {
+		if (value <= referenceZoom) {
+			return (value - intercept1) / slope1;
+		} else {
+			return (value - intercept2) / slope2;
+		}
+	};
+
+	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);
+
+	let scaledWidth = $derived(presentationEditor.width * presentationEditor.zoom);
+	let scaledHeight = $derived(presentationEditor.height * presentationEditor.zoom);
+
+	let centerX = 0;
+	let centerY = 0;
+	$effect(() => {
+		fittedToScreen = false;
+		filledToScreen = false;
+		const newZoom = convertSliderToZoom(sliderValue);
+		if (viewportRef) {
+			const centeringPrecision = 0.001;
+			const newCenterX =
+				(viewportRef.clientWidth / 2 + viewportRef.scrollLeft) / viewportRef.scrollWidth;
+			const newCenterY =
+				(viewportRef.clientHeight / 2 + viewportRef.scrollTop) / viewportRef.scrollHeight;
+
+			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;
+		}
+	});
+
+	export const fillScreen = async () => {
+		if (viewportRef && wrapperRef) {
+			sliderValue = convertZoomToSlider(
+				(presentationEditor.zoom *
+					(viewportRef.clientWidth - (wrapperRef.clientWidth - scaledWidth))) /
+					scaledWidth,
+			);
+			tick().then(() => {
+				filledToScreen = true;
+			});
+		}
+	};
+
+	export const fitToScreen = () => {
+		if (viewportRef && wrapperRef) {
+			viewportRef.scrollLeft = 0;
+			viewportRef.scrollTop = 0;
+			sliderValue = convertZoomToSlider(
+				presentationEditor.zoom *
+					Math.min(
+						(viewportRef.clientWidth - (wrapperRef.clientWidth - scaledWidth)) / scaledWidth,
+						(viewportRef.clientHeight - (wrapperRef.clientHeight - scaledHeight)) / scaledHeight,
+					),
+			);
+			tick().then(() => {
+				fittedToScreen = true;
+			});
+		}
+	};
+
+	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) {
+				fitToScreen();
+			} else if (filledToScreen) {
+				fillScreen();
+			}
+		});
+	};
+
+	const onDragOver = (e: DragEvent) => {
+		// console.log('dragover windown', e);
+		e.preventDefault();
+		if (e.dataTransfer?.items.length) {
+			presentationEditor.fileDragged = true;
+		}
+	};
+
+	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;
+		}
+
+		e.preventDefault();
+		e.stopPropagation();
+		presentationEditor.fileDragged = false;
+		if (e.dataTransfer?.items.length) {
+			const item = e.dataTransfer.items[0];
+			console.log('item', item, item.kind, item.type);
+			if (['image/png', 'image/jpeg', 'image/gif'].includes(item.type)) {
+				const file = item.getAsFile();
+				console.log('image file', file);
+				if (file) {
+					try {
+						let image: Image;
+						if (presentationEditor.onImageUpload) {
+							image = await presentationEditor.onImageUpload(file);
+						} else {
+							const url = URL.createObjectURL(file);
+							console.log('image url', url);
+							// presentationEditor.
+							const htmlImage = await checkImage(url);
+							image = {
+								id: presentationEditor.generateId(),
+								src: url,
+								width: htmlImage.width,
+								height: htmlImage.height,
+							};
+						}
+						presentationEditor.images.push(image);
+						if (dropToSlide) {
+							presentationEditor.addImageLayer({
+								x: (presentationEditor.width - image.width) / 2,
+								y: (presentationEditor.height - image.height) / 2,
+								width: image.width,
+								height: image.height,
+								image: {
+									id: image.id,
+									src: image.src,
+									width: image.width,
+									height: image.height,
+								},
+							});
+						}
+					} catch (err) {
+						console.log('err', err);
+					}
+				}
+			}
+		}
+	};
+
+	onMount(() => {
+		tick().then(() => {
+			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} />
+
+		<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"
+							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>
+
+						<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 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>
+		</div>
+	</div>
+</div>

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

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