@peteai/presentation-editor 0.0.2 → 0.0.4

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

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
+	import { tick } from 'svelte';
 	import type { HtmlLayer } from '../../../types.js';
 	import { getPresentationEditorContext } from '../../../presentation-editor.svelte.js';
-	import { cn } from '../../../../../utils.js';
-	import { HtmlContent } from './index.js';
+	import { HtmlLayerContent } from './index.js';
+	import { calculateBoundingBox, calculateLayerTransform } from '../../utils.js';
 
 	interface Props {
 		layer: HtmlLayer;
@@ -13,85 +13,93 @@
 
 	const editor = getPresentationEditorContext();
 
-	let ref: HTMLElement;
+	let ref: HTMLElement | null = $state(null);
 
-	let scale = $derived(layer.scale || 1);
-
-	onMount(() => {
-		layer.height = ref.offsetHeight;
+	$effect(() => {
+		if (!ref) return;
+		tick().then(() => {
+			if (!ref) return;
+			layer.height = ref.offsetHeight;
+		});
 	});
 
-	const onMouseDown = () => {
-		console.log('mousedown', layer.id);
-		if (editor.activeLayer?.id === layer.id && !editor.activeAction) {
+	const onMouseDown = (e: MouseEvent) => {
+		if (e.button !== 0) return;
+		console.log('mousedown', layer.id, e);
+		if (
+			!editor.activeSlide.locked &&
+			!layer.locked &&
+			editor.activeLayerIds.has(layer.id) &&
+			!editor.activeAction
+		) {
 			addEventListener('mouseup', onMouseUp);
 		}
 	};
 
 	const onMouseUp = (e: MouseEvent) => {
-		console.log('mouseup', layer.id);
-		if (editor.activeLayer?.id === layer.id && !editor.activeAction) {
+		console.log('mouseup', layer.id, e);
+		if (
+			editor.activeLayerIds.has(layer.id) &&
+			editor.activeLayerIds.size === 1 &&
+			!editor.activeAction
+		) {
 			console.log('edit layer', layer.id);
-			editor.activeAction = {
-				type: 'edit',
-				clientX: e.clientX,
-				clientY: e.clientY,
-				layer: { ...layer },
-			};
+			editor.activeAction = { id: layer.id, type: 'edit' };
 		}
 		removeEventListener('mouseup', onMouseUp);
 	};
 
 	const onDragEnter = (e: DragEvent) => {
 		console.log('dragenter html layer', e);
-		e.preventDefault();
-		e.stopPropagation();
 
 		if (editor.dragged) {
-			editor.dragged = { ...editor.dragged, hidden: false, scale: editor.zoom, sticky: true };
+			e.preventDefault();
+			e.stopPropagation();
+			editor.dragged = {
+				...editor.dragged,
+				hidden: false,
+				inside: true,
+				sticky: true,
+				customScale: null,
+			};
+		}
+	};
+
+	const onDragOver = (e: DragEvent) => {
+		// console.log('dragover html layer', e);
+		if (editor.dragged) {
+			e.preventDefault();
+			e.stopPropagation();
 		}
 	};
 
 	const onDrop = (e: DragEvent) => {
+		if (!ref) return;
 		console.log('drop html layer', e);
-		e.preventDefault();
 
 		const { dragged } = editor;
 		if (dragged) {
-			editor.addImageLayer({
-				x: e.offsetX - dragged.offsetX / editor.zoom + layer.x,
-				y: e.offsetY - dragged.offsetY / editor.zoom + layer.y,
-				width: dragged.image.width,
-				height: dragged.image.height,
-				image: {
-					id: dragged.image.id,
-					src: dragged.image.src,
-					width: dragged.image.width,
-					height: dragged.image.height,
-				},
-			});
+			e.preventDefault();
+			e.stopPropagation();
+			const bbox = calculateBoundingBox(calculateLayerTransform(layer));
+			const rect = ref.getBoundingClientRect();
+			const x = (e.clientX - rect.left - dragged.offsetX) / editor.zoom + bbox.x;
+			const y = (e.clientY - rect.top - dragged.offsetY) / editor.zoom + bbox.y;
+			editor.dropDragged(x, y);
 		}
 	};
 </script>
 
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
-	class={cn('h-full', { 'origin-top-left': scale !== 1 })}
-	style:width="{layer.width}px"
-	style:height="{layer.height}px"
-	style:transform={scale !== 1 ? `scale(${layer.scale})` : ''}
+	class="h-full w-full"
+	style:opacity={editor.activeAction?.id === layer.id && editor.activeAction?.type === 'edit'
+		? 0
+		: null}
+	onmousedown={onMouseDown}
+	ondragenter={onDragEnter}
+	ondragover={onDragOver}
+	ondrop={onDrop}
 >
-	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<div
-		class="whitespace-pre-wrap break-words p-0 text-left text-base font-normal normal-case not-italic text-black"
-		bind:this={ref}
-		id="layer-content-{layer.id}"
-		style:opacity={editor.activeLayer?.id === layer.id && editor.activeAction?.type === 'edit'
-			? 0
-			: null}
-		onmousedown={onMouseDown}
-		ondragenter={onDragEnter}
-		ondrop={onDrop}
-	>
-		<HtmlContent html={layer.html} />
-	</div>
+	<HtmlLayerContent {layer} bind:ref />
 </div>

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

@@ -1,7 +1,5 @@
 import Root from './html-layer.svelte';
-import HtmlLayerThumb from './html-layer-thumb.svelte';
+import HtmlLayerContent from './html-layer-content.svelte';
 import HtmlContent from './html-content.svelte';
-import HtmlLayerButtons from './html-layer-buttons.svelte';
-import HtmlLayerActive from './html-layer-active.svelte';
-declare const extensions: (import("@tiptap/core").Extension<any, any> | import("@tiptap/core").Node<any, any> | import("@tiptap/core").Mark<import("@tiptap/extension-bold").BoldOptions, any>)[];
-export { Root, Root as HtmlLayer, HtmlLayerThumb, HtmlContent, HtmlLayerButtons, HtmlLayerActive, extensions, };
+import HtmlLayerEdit from './html-layer-edit.svelte';
+export { Root, Root as HtmlLayer, HtmlLayerContent, HtmlContent, HtmlLayerEdit };

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

@@ -1,58 +1,5 @@
-import { Document } from '@tiptap/extension-document';
-import { Paragraph } from '@tiptap/extension-paragraph';
-import { Text } from '@tiptap/extension-text';
-import { ListItem } from '@tiptap/extension-list-item';
-import { BulletList } from '@tiptap/extension-bullet-list';
-import { OrderedList } from '@tiptap/extension-ordered-list';
-import { UnstyledList } from './extensions/unstyled-list/index.js';
-import { TextStyle } from '@tiptap/extension-text-style';
-import { TextAlign } from '@tiptap/extension-text-align';
-import { LineHeight } from './extensions/line-height/index.js';
-import { TextTransform } from './extensions/text-transform/index.js';
-import { FontSize } from './extensions/font-size/index.js';
-import { Color } from '@tiptap/extension-color';
-import { Bold } from '@tiptap/extension-bold';
-import { Italic } from '@tiptap/extension-italic';
-import { Underline } from '@tiptap/extension-underline';
-import { Strike } from '@tiptap/extension-strike';
-import { Selection } from './extensions/selection/index.js';
 import Root from './html-layer.svelte';
-import HtmlLayerThumb from './html-layer-thumb.svelte';
+import HtmlLayerContent from './html-layer-content.svelte';
 import HtmlContent from './html-content.svelte';
-import HtmlLayerButtons from './html-layer-buttons.svelte';
-import HtmlLayerActive from './html-layer-active.svelte';
-const extensions = [
-    Document,
-    Paragraph,
-    Text,
-    ListItem.configure({
-        HTMLAttributes: { style: 'margin-left: calc(var(--list-item-ident)*1em)' },
-    }),
-    BulletList.configure({
-        HTMLAttributes: { class: 'list-disc', style: '--list-item-ident: 1.7' },
-        keepAttributes: true,
-        keepMarks: true,
-    }),
-    OrderedList.configure({
-        HTMLAttributes: { class: 'list-decimal', style: '--list-item-ident: 1.7' },
-        keepAttributes: true,
-        keepMarks: true,
-    }),
-    UnstyledList.configure({
-        HTMLAttributes: { class: 'list-none', style: '--list-item-ident: 0' },
-        keepAttributes: true,
-        keepMarks: true,
-    }),
-    TextStyle,
-    TextAlign.configure({ types: ['paragraph', 'listItem'] }),
-    LineHeight.configure({ types: ['paragraph', 'listItem'] }),
-    TextTransform.configure({ types: ['paragraph', 'listItem'] }),
-    FontSize.configure({ types: ['paragraph', 'listItem'] }),
-    Color.configure({ types: ['paragraph', 'listItem', 'textStyle'] }),
-    Bold,
-    Italic,
-    Underline,
-    Strike,
-    Selection,
-];
-export { Root, Root as HtmlLayer, HtmlLayerThumb, HtmlContent, HtmlLayerButtons, HtmlLayerActive, extensions, };
+import HtmlLayerEdit from './html-layer-edit.svelte';
+export { Root, Root as HtmlLayer, HtmlLayerContent, HtmlContent, HtmlLayerEdit };

package/dist/components/presentation-editor/layers/types/image/{image-content.svelte → image-layer-content.svelte}

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { ImageLayer } from '../../../types.js';
+	import ColorIndicatorGradientDef from '../../../color-indicator/color-indicator-gradient-def.svelte';
 	import { generateId } from '../../../../../utils.js';
 
 	interface Props {
@@ -7,7 +8,7 @@
 		thumbScale?: number;
 	}
 
-	let { layer = $bindable(), thumbScale = 1 }: Props = $props();
+	let { layer, thumbScale = 1 }: Props = $props();
 
 	let imageLoaded = $state(false);
 	const image = new Image();
@@ -16,6 +17,10 @@
 	image.onload = () => (imageLoaded = true);
 
 	const layerBorderId = generateId();
+	const gradientId = generateId();
+
+	let borderColor = $derived(layer.borderColor || '#000000');
+	let isGradient = $derived(~borderColor.indexOf(':'));
 
 	let scale = $derived(layer.scale || 1);
 	let width = $derived(layer.width * scale * thumbScale);
@@ -57,7 +62,7 @@
 		</div>
 	</div>
 
-	{#if layer.borderWidth}
+	{#if layer.borderStyle && layer.borderWidth}
 		{@const borderWidth = layer.borderWidth * thumbScale}
 		{@const path = `M0,0L0,${height}L${width},${height}L${width},0L0,0`}
 		<div
@@ -73,13 +78,16 @@
 				style:height="{height}px"
 			>
 				<defs>
+					{#if isGradient}
+						<ColorIndicatorGradientDef id={gradientId} color={borderColor} {width} {height} />
+					{/if}
 					<clipPath id={layerBorderId}>
 						<path d={path}></path>
 					</clipPath>
 				</defs>
 				<path
 					d={roundedClipPath || path}
-					stroke={layer.borderColor || '#000000'}
+					stroke={isGradient ? `url(#${gradientId})` : borderColor}
 					stroke-width={borderWidth * 2}
 					stroke-linecap="butt"
 					clip-path="url(#{layerBorderId})"

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

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

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

@@ -1,8 +1,12 @@
 <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';
+	import ImageLayerContent from './image-layer-content.svelte';
+	import {
+		calculateBoundingBox,
+		calculateImageCover,
+		calculateLayerTransform,
+	} from '../../utils.js';
 
 	interface Props {
 		layer: ImageLayer;
@@ -17,31 +21,42 @@
 	let ref: HTMLDivElement;
 
 	const buildImageDropChanges = (image: Image) => {
-		const layerScale = layer.scale || 1;
+		const scale = layer.scale || 1;
 
 		return {
 			image,
-			...calculateImageFill(image, {
-				width: layer.width * layerScale,
-				height: layer.height * layerScale,
+			...calculateImageCover(image, {
+				width: layer.width * scale,
+				height: layer.height * scale,
 			}),
 		};
 	};
 
 	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) };
+			e.preventDefault();
+			e.stopPropagation();
+			editor.dragged = {
+				...editor.dragged,
+				hidden: false,
+				inside: true,
+				sticky: true,
+				customScale: null,
+			};
+			if ('image' in editor.dragged) {
+				editor.dragged.hidden = true;
+				layerSubstitute = { ...layer, ...buildImageDropChanges(editor.dragged.image) };
+			}
 		}
 	};
 
 	const onDragOver = (e: DragEvent) => {
 		// console.log('dragover image layer', e);
-		e.preventDefault();
+		if (editor.dragged) {
+			e.preventDefault();
+		}
 	};
 
 	const onDragLeave = (e: DragEvent) => {
@@ -53,15 +68,30 @@
 	};
 
 	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 });
+		const { dragged } = editor;
+		if (dragged) {
+			e.preventDefault();
+			e.stopPropagation();
+			if ('image' in dragged) {
+				const redo = buildImageDropChanges(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',
+					slideId: editor.activeSlide.id,
+					layer: { id: layer.id, type: layer.type },
+					undo,
+					redo,
+				});
+			} else {
+				const bbox = calculateBoundingBox(calculateLayerTransform(layer));
+				const rect = ref.getBoundingClientRect();
+				const x = (e.clientX - rect.left - dragged.offsetX) / editor.zoom + bbox.x;
+				const y = (e.clientY - rect.top - dragged.offsetY) / editor.zoom + bbox.y;
+				editor.dropDragged(x, y);
+			}
 		}
 		layerSubstitute = null;
 	};
@@ -76,5 +106,5 @@
 	ondragleave={onDragLeave}
 	ondrop={onDrop}
 >
-	<ImageContent layer={layerSubstitute ?? layer} />
+	<ImageLayerContent layer={layerSubstitute ?? layer} />
 </div>

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

@@ -1,5 +1,3 @@
 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 };
+import ImageLayerContent from './image-layer-content.svelte';
+export { Root, Root as ImageLayer, ImageLayerContent };

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

@@ -1,5 +1,3 @@
 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 };
+import ImageLayerContent from './image-layer-content.svelte';
+export { Root, Root as ImageLayer, ImageLayerContent };

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

@@ -1,32 +1,91 @@
+import type { HtmlLayer, ImageLayer, Layer } from '../types.js';
 type Origin = 'top-left' | 'top-right' | 'center-left' | 'center-right' | 'bottom-left' | 'bottom-right' | 'left' | 'right' | 'top' | 'bottom';
-interface ElementProps {
+export type Point = {
+    x: number;
+    y: number;
+};
+export type Transform = {
     x: number;
     y: number;
     width: number;
     height: number;
-    rotate: number | null;
-}
-export declare const calculateNewPosition: (origin: Origin, element: ElementProps, newWidth: number, newHeight: number) => {
+    rotate: number;
+};
+export declare const rotatePointOld: (point: {
+    x: number;
+    y: number;
+}, angleRad: number) => {
+    x: number;
+    y: number;
+};
+export declare const calculateLayerTransform: (layer: Layer) => Transform;
+export declare const calculateNewPosition: (origin: Origin, transform: Transform, newWidth: number, newHeight: number) => {
     newX: number;
     newY: number;
 };
-export declare function calculateBoundingBox(element: ElementProps): {
+export declare function calculateBoundingBox(transform: Transform): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export declare function degToRad(deg: number): number;
+export declare function rotatePoint(p: Point, origin: Point, angleRad: number): Point;
+export declare function getRotatedCorners(rect: Transform): Point[];
+export declare function calculateBoundingBoxSize(width: number, height: number, rotate: number): {
+    width: number;
+    height: number;
+};
+export declare function isRotatedVertically(rotate: number): boolean;
+interface ScaleResult {
+    width: number;
+    height: number;
+    scaled: 'width' | 'height';
+}
+export declare function calculateNewSize(width: number, height: number, rotate: number, scale: number, isHorizontal: boolean): ScaleResult;
+export declare function getRotatedBoundingBox(center: Point, width: number, height: number, rotate: number): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export declare function calculateGroupRotatedBoundingBox(rects: Transform[], groupRotate?: number): Transform;
+export declare function calculateRelativeRects(bbox: Transform, rects: Transform[]): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    rotate: number;
+}[];
+export declare const checkPolygonsIntersect: (a: {
+    x: number;
+    y: number;
+}[], b: {
+    x: number;
+    y: number;
+}[]) => boolean;
+export declare function calculateGroupBoundingBox(transforms: Transform[]): {
     x: number;
     y: number;
     width: number;
     height: number;
 };
-export declare function calculateImageFill(image: {
+export declare function calculateImageCover(image: {
     width: number;
     height: number;
-}, bBox: {
+    rotate?: number | null;
+}, bbox: {
     width: number;
     height: number;
 }): {
-    offsetX: number;
-    offsetY: number;
     width: number;
     height: number;
     scale: number;
+    offsetX: number;
+    offsetY: number;
 };
+export declare const defaultColor = "#000000";
+export declare function extractBorderColors(layers: ImageLayer[]): string[] | undefined;
+export declare function buildBackgroundCircleStyle(colors: string[]): string;
+export declare function applyHtmlToLayer(layer: HtmlLayer, html: HtmlLayer['html']): Promise<Pick<HtmlLayer, 'html' | 'x' | 'y' | 'height'>>;
 export {};