@peteai/presentation-editor 0.0.9 → 0.0.10

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

@@ -1,136 +0,0 @@
-<script lang="ts">
-	import { flip } from 'svelte/animate';
-	import { dndzone, type DndEvent } from 'svelte-dnd-action';
-	import XIcon from '@lucide/svelte/icons/x';
-	import * as ContextMenu from '../../ui/context-menu/index.js';
-	import { Button } from '../../ui/button/index.js';
-	import {
-		LayerButton,
-		LayerThumbWrapper,
-		TextLayerContent,
-		ImageLayerContent,
-		BackgroundLayerContent,
-		GroupLayerContent,
-	} from '../layers/index.js';
-	import { getEditorContext } from '../editor.svelte.js';
-	import LayerMenuContent from '../menu/layer-menu-content.svelte';
-	import BackgroundMenuContent from '../menu/background-menu-content.svelte';
-	import type { Layer } from '../types.js';
-
-	const editor = $derived(getEditorContext());
-
-	const flipDurationMs = 300;
-	const otherOptions = { flipDurationMs, type: 'layers', dropTargetStyle: {} };
-
-	function handleDndConsider(e: CustomEvent<DndEvent<Layer>>) {
-		editor.rootLayers = e.detail.items;
-	}
-
-	async function handleDndFinalize(e: CustomEvent<DndEvent<Layer>>) {
-		console.log('handleDndFinalize', e);
-
-		editor.rootLayers = 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: 'layerUpdate',
-				pageId: editor.activePage.id,
-				layer: { id: item.id, type: item.type },
-				undo: { sortOrder: item.sortOrder },
-				redo,
-			});
-		}
-	}
-</script>
-
-<div class="flex h-full flex-col gap-2">
-	<div class="flex items-center justify-between">
-		<div class="text-sm font-bold">Position</div>
-		<Button variant="ghost" size="icon" onclick={() => (editor.activeSidebarPopup = null)}>
-			<XIcon />
-		</Button>
-	</div>
-	<div class="text-lg 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.rootLayers,
-					dragDisabled: editor.activePage.locked,
-					...otherOptions,
-				}}
-				onconsider={handleDndConsider}
-				onfinalize={handleDndFinalize}
-			>
-				{#each editor.rootLayers as layer (layer.id)}
-					<div aria-label={layer.type} animate:flip={{ duration: flipDurationMs }}>
-						<ContextMenu.Root
-							onOpenChange={(open) =>
-								open &&
-								!editor.activeLayers.find((l) => l.id === layer.id) &&
-								editor.setActiveLayers(layer.id)}
-						>
-							<ContextMenu.Trigger>
-								<LayerButton {layer}>
-									<LayerThumbWrapper {layer} thumb={{ width: 192, height: 32 }}>
-										{#snippet children({ thumbScale })}
-											{#if layer.type === 'text'}
-												<TextLayerContent {layer} {thumbScale} />
-											{:else if layer.type === 'image'}
-												<ImageLayerContent {layer} {thumbScale} />
-											{:else if layer.type === 'group'}
-												<GroupLayerContent page={editor.activePage} {layer} {thumbScale} />
-											{/if}
-										{/snippet}
-									</LayerThumbWrapper>
-								</LayerButton>
-							</ContextMenu.Trigger>
-							<ContextMenu.Content class="w-72">
-								<LayerMenuContent />
-							</ContextMenu.Content>
-						</ContextMenu.Root>
-					</div>
-				{/each}
-			</section>
-			<ContextMenu.Root>
-				<ContextMenu.Trigger>
-					<LayerButton>
-						{@const thumbScale = Math.max(192 / editor.width, 32 / editor.height)}
-						<div
-							class="absolute top-1/2 -translate-y-1/2"
-							style:width="{editor.width * thumbScale}px"
-							style:height="{editor.height * thumbScale}px"
-						>
-							<BackgroundLayerContent page={editor.activePage} {thumbScale} />
-						</div>
-					</LayerButton>
-				</ContextMenu.Trigger>
-				<ContextMenu.Content class="w-72">
-					<BackgroundMenuContent {editor} page={editor.activePage} />
-				</ContextMenu.Content>
-			</ContextMenu.Root>
-		</div>
-	</div>
-</div>

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

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