@peteai/presentation-editor 0.0.2 → 0.0.4

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

@@ -1,159 +0,0 @@
-<script lang="ts">
-	import { tick, untrack } from 'svelte';
-	import type { HtmlLayer } from '../../../types.js';
-	import { getPresentationEditorContext } from '../../../presentation-editor.svelte.js';
-	import { createEditor, EditorContent } from './editor/index.js';
-	import { extensions } from './index.js';
-	import { calculateNewPosition } from '../../utils.js';
-	import { SideScaleControl } from '../../controls/side-scale-control/index.js';
-	import { CornerScaleControl } from '../../controls/corner-scale-control/index.js';
-	import { RotateControl } from '../../controls/rotate-control/index.js';
-	import { createDebouncedCallback } from '../../../../../utils.js';
-
-	import './editor.css';
-
-	interface Props {
-		layer: HtmlLayer;
-	}
-
-	let { layer = $bindable() }: Props = $props();
-
-	const editorState = getPresentationEditorContext();
-
-	let scaleAndZoom = $derived((layer.scale || 1) * editorState.zoom);
-	let rotate = $derived(layer.rotate || 0);
-
-	let undo: object | null = null;
-	let currentLayer: HtmlLayer | null = $state(layer);
-	let currentHtml: object | undefined = layer.html;
-
-	const updateContent = (reset: boolean = true) => {
-		if (reset) {
-			$editor.chain().setContent(layer.html).selectAll().run();
-		} else {
-			console.log('html changed');
-			if (editorState.activeAction?.type === 'edit') {
-				if (layer.html !== currentHtml) {
-					$editor.chain().setContent(layer.html).focus().run();
-				}
-			} else {
-				$editor.chain().setContent(layer.html).selectAll().run();
-			}
-		}
-		currentHtml = layer.html;
-	};
-
-	const debouncedUpdates = createDebouncedCallback((e, action) => {
-		console.log('debouncedUpdates', action);
-		editorState.historyPush(action);
-		undo = null;
-	}, 750);
-
-	console.log('create editor');
-	const editor = createEditor({
-		content: layer.html,
-		extensions,
-		injectCSS: false,
-		editorProps: { attributes: { class: 'whitespace-pre-wrap focus:outline-none' } },
-		onUpdate: async (e) => {
-			if (!undo) {
-				undo = { html: currentHtml, x: layer.x, y: layer.y, height: layer.height };
-			}
-			layer.html = e.editor.getJSON();
-			currentHtml = layer.html;
-			await tick();
-
-			const { x, y, width, height } = layer;
-			const scale = layer.scale || 1;
-			const rotate = layer.rotate || 0;
-			const layerContent = document.getElementById(`layer-content-${layer.id}`);
-			if (layerContent) {
-				const contentHeight = layerContent.offsetHeight;
-				if (contentHeight !== height) {
-					const newHeight = contentHeight * scale;
-
-					const { newX, newY } = calculateNewPosition(
-						`top-left`,
-						{ x, y, width: width * scale, height: height * scale, rotate },
-						width * scale,
-						newHeight,
-					);
-
-					const newValues = { x: newX, y: newY, height: newHeight / scale };
-					Object.assign(layer, newValues);
-				}
-			}
-			const action = {
-				type: 'layer',
-				layer: { id: layer.id, type: layer.type },
-				undo: undo,
-				redo: { html: e.editor.getJSON(), x: layer.x, y: layer.y, height: layer.height },
-			};
-			debouncedUpdates(e, action);
-		},
-		onDestroy: () => {
-			console.log('destroy editor');
-			editorState.htmlEditor = null;
-		},
-	});
-
-	editorState.htmlEditor = editor;
-	updateContent();
-
-	$effect(() => {
-		if (currentLayer !== layer) {
-			console.log('layer changed');
-			currentLayer = layer;
-			updateContent();
-		}
-	});
-
-	// update html when it changes by history undo/redo
-	$effect(() => {
-		if (layer.html !== untrack(() => currentHtml)) {
-			updateContent(false);
-		}
-	});
-</script>
-
-{#if editorState.activeAction?.type === 'edit'}
-	<div
-		class="absolute origin-top-left select-none"
-		hidden={editorState.activeAction?.type !== 'edit'}
-	>
-		<div
-			class="pointer-events-auto select-text"
-			style:width={`${layer.width * scaleAndZoom}px`}
-			style:height={`${layer.height * scaleAndZoom}px`}
-			style:transform={`translate(${layer.x * editorState.zoom}px, ${layer.y * editorState.zoom}px) rotate(${rotate}deg)`}
-		>
-			<div
-				class="origin-top-left"
-				style:width="{layer.width}px"
-				style:height="{layer.height}px"
-				style:transform={`scale(${scaleAndZoom})`}
-			>
-				<EditorContent editor={$editor} />
-			</div>
-		</div>
-	</div>
-{/if}
-
-<div
-	class="pointer-events-none absolute left-0 top-0 h-full w-full"
-	style:width={`${layer.width * scaleAndZoom}px`}
-	style:height={`${layer.height * scaleAndZoom}px`}
-	style:transform={`translate(${layer.x * editorState.zoom}px, ${layer.y * editorState.zoom}px) rotate(${rotate}deg)`}
->
-	<div class="h-full w-full outline-none transition-opacity duration-300">
-		<div class="flex h-full w-full items-center justify-center">
-			<SideScaleControl origin="left" bind:layer />
-			<SideScaleControl origin="right" bind:layer />
-			<CornerScaleControl origin="bottom-right" bind:layer />
-			<CornerScaleControl origin="bottom-left" bind:layer />
-			<CornerScaleControl origin="top-right" bind:layer />
-			<CornerScaleControl origin="top-left" bind:layer />
-			<RotateControl bind:layer />
-		</div>
-	</div>
-</div>

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

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

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

@@ -1,42 +0,0 @@
-<script lang="ts">
-	import type { Readable } from 'svelte/store';
-	import type { HtmlLayer } from '../../../types.js';
-	import { Separator } from '../../../../ui/separator/index.js';
-	import { FontSizeButton } from './buttons/font-size-button/index.js';
-	import { ColorButton } from './buttons/color-button/index.js';
-	import { BoldButton } from './buttons/bold-button/index.js';
-	import { ItalicButton } from './buttons/italic-button/index.js';
-	import { UnderlineButton } from './buttons/underline-button/index.js';
-	import { StrikethroughButton } from './buttons/strikethrough-button/index.js';
-	import { CaseButton } from './buttons/case-button/index.js';
-	import { AlignmentButton } from './buttons/alignment-button/index.js';
-	import { ListButton } from './buttons/list-button/index.js';
-	import { OpacityButton } from '../../buttons/opacity-button/index.js';
-	import type { Editor } from './editor/Editor.js';
-
-	interface Props {
-		htmlEditor: Readable<Editor>;
-		layer: HtmlLayer;
-	}
-
-	let { htmlEditor, layer = $bindable() }: Props = $props();
-</script>
-
-{#if $htmlEditor}
-	<FontSizeButton {layer} editor={$htmlEditor} />
-	<ColorButton editor={$htmlEditor} />
-	<div class="grid grid-flow-col items-center gap-0.5">
-		<BoldButton editor={$htmlEditor} />
-		<ItalicButton editor={$htmlEditor} />
-		<UnderlineButton editor={$htmlEditor} />
-		<StrikethroughButton editor={$htmlEditor} />
-		<CaseButton editor={$htmlEditor} />
-	</div>
-	<Separator orientation="vertical" />
-	<div class="grid grid-flow-col items-center gap-0.5">
-		<AlignmentButton editor={$htmlEditor} />
-		<ListButton editor={$htmlEditor} />
-	</div>
-	<Separator orientation="vertical" />
-	<OpacityButton bind:layer />
-{/if}

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

@@ -1,10 +0,0 @@
-import type { Readable } from 'svelte/store';
-import type { HtmlLayer } from '../../../types.js';
-import type { Editor } from './editor/Editor.js';
-interface Props {
-    htmlEditor: Readable<Editor>;
-    layer: HtmlLayer;
-}
-declare const HtmlLayerButtons: import("svelte").Component<Props, {}, "layer">;
-type HtmlLayerButtons = ReturnType<typeof HtmlLayerButtons>;
-export default HtmlLayerButtons;

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

@@ -1,24 +0,0 @@
-<script lang="ts">
-	import type { HtmlLayer } from '../../../types.js';
-	import { HtmlContent } from './index.js';
-
-	interface Props {
-		layer: HtmlLayer;
-		thumbScale: number;
-	}
-
-	let { layer, thumbScale }: Props = $props();
-</script>
-
-<div
-	class="h-full origin-top-left"
-	style:width="{layer.width}px"
-	style:height="{layer.height}px"
-	style:transform={`scale(${thumbScale * (layer.scale || 1)})`}
->
-	<div
-		class="whitespace-pre-wrap break-words p-0 text-left text-base font-normal normal-case not-italic text-black"
-	>
-		<HtmlContent html={layer.html} />
-	</div>
-</div>

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

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

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

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

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

@@ -1,21 +0,0 @@
-<script lang="ts">
-	import type { ImageLayer } from '../../../types.js';
-	import { Separator } from '../../../../ui/separator/index.js';
-	import { BorderButton } from '../../buttons/border-button/index.js';
-	import { CornerRadiusButton } from '../../buttons/corner-radius-button/index.js';
-	import { FlipButton } from '../../buttons/flip-button/index.js';
-	import { OpacityButton } from '../../buttons/opacity-button/index.js';
-
-	interface Props {
-		layer: ImageLayer;
-	}
-
-	let { layer = $bindable() }: Props = $props();
-</script>
-
-<BorderButton bind:layer />
-<CornerRadiusButton bind:layer />
-<Separator orientation="vertical" />
-<FlipButton bind:layer />
-<Separator orientation="vertical" />
-<OpacityButton bind:layer />

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

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

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

@@ -1,13 +0,0 @@
-<script lang="ts">
-	import type { ImageLayer } from '../../../types.js';
-	import ImageLayerContent from './image-content.svelte';
-
-	interface Props {
-		layer: ImageLayer;
-		thumbScale: number;
-	}
-
-	let { layer, thumbScale }: Props = $props();
-</script>
-
-<ImageLayerContent {layer} {thumbScale} />

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

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

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

@@ -1,3 +0,0 @@
-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

@@ -1,94 +0,0 @@
-<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/slides-navigation/buttons/slide-delete-button.svelte

@@ -1,32 +0,0 @@
-<script lang="ts">
-	import TrashIcon from 'lucide-svelte/icons/trash-2';
-	import type { PresentationEditor } from '../../presentation-editor.svelte.js';
-	import * as ContextMenu from '../../../ui/context-menu/index.js';
-	import * as DropdownMenu from '../../../ui/dropdown-menu/index.js';
-	import type { Slide } from '../../types.js';
-
-	interface Props {
-		editor: PresentationEditor;
-		slide: Slide;
-		context?: boolean;
-	}
-
-	let { editor, slide, context }: Props = $props();
-
-	const ItemComponent = context ? ContextMenu.Item : DropdownMenu.Item;
-	const ShortcutComponent = context ? ContextMenu.Shortcut : DropdownMenu.Shortcut;
-</script>
-
-<ItemComponent onclick={() => editor.removeSlide(slide)}>
-	<div class="flex items-center">
-		<TrashIcon class="text-foreground-alt mr-2 size-5" />
-		Delete Page
-	</div>
-	<ShortcutComponent>
-		<kbd
-			class="bg-muted text-muted-foreground inline-flex items-center justify-center rounded-sm px-2 py-1 text-xs"
-		>
-			DELETE
-		</kbd>
-	</ShortcutComponent>
-</ItemComponent>

package/dist/components/presentation-editor/slides-navigation/buttons/slide-delete-button.svelte.d.ts

@@ -1,10 +0,0 @@
-import type { PresentationEditor } from '../../presentation-editor.svelte.js';
-import type { Slide } from '../../types.js';
-interface Props {
-    editor: PresentationEditor;
-    slide: Slide;
-    context?: boolean;
-}
-declare const SlideDeleteButton: import("svelte").Component<Props, {}, "">;
-type SlideDeleteButton = ReturnType<typeof SlideDeleteButton>;
-export default SlideDeleteButton;

package/dist/components/presentation-editor/slides-navigation/buttons/slide-duplicate-button.svelte

@@ -1,34 +0,0 @@
-<script lang="ts">
-	import DuplicateIcon from 'lucide-svelte/icons/copy-plus';
-	import type { PresentationEditor } from '../../presentation-editor.svelte.js';
-	import * as ContextMenu from '../../../ui/context-menu/index.js';
-	import * as DropdownMenu from '../../../ui/dropdown-menu/index.js';
-	import type { Slide } from '../../types.js';
-
-	interface Props {
-		editor: PresentationEditor;
-		slide: Slide;
-		context?: boolean;
-	}
-
-	let { editor, slide, context }: Props = $props();
-
-	const ItemComponent = context ? ContextMenu.Item : DropdownMenu.Item;
-	const ShortcutComponent = context ? ContextMenu.Shortcut : DropdownMenu.Shortcut;
-
-	const isMac = /Mac OS X/.test(navigator.userAgent);
-</script>
-
-<ItemComponent onclick={() => editor.duplicateSlide(slide)}>
-	<div class="flex items-center">
-		<DuplicateIcon class="text-foreground-alt mr-2 size-5" />
-		Duplicate Page
-	</div>
-	<ShortcutComponent>
-		<kbd
-			class="bg-muted text-muted-foreground inline-flex items-center justify-center rounded-sm px-2 py-1 text-xs"
-		>
-			{isMac ? '⌘D' : 'Ctrl+D'}
-		</kbd>
-	</ShortcutComponent>
-</ItemComponent>

package/dist/components/presentation-editor/slides-navigation/buttons/slide-duplicate-button.svelte.d.ts

@@ -1,10 +0,0 @@
-import type { PresentationEditor } from '../../presentation-editor.svelte.js';
-import type { Slide } from '../../types.js';
-interface Props {
-    editor: PresentationEditor;
-    slide: Slide;
-    context?: boolean;
-}
-declare const SlideDuplicateButton: import("svelte").Component<Props, {}, "">;
-type SlideDuplicateButton = ReturnType<typeof SlideDuplicateButton>;
-export default SlideDuplicateButton;