@peteai/presentation-editor 0.0.6 → 0.0.8

package/dist/components/editor/layers/types/text/text-layer-edit.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+	import { onDestroy, untrack } from 'svelte';
+	import type { EditorEvents } from '@tiptap/core';
+	import type {
+		TextLayer,
+		GroupLayer,
+		TextLayerInitial,
+		HistoryAction,
+	} from '../../../types.js';
+	import { getEditorContext } from '../../../editor.svelte.js';
+	import { EditorContent } from './editor/index.js';
+	import { createDebouncedCallback } from '../../../../../utils.js';
+
+	import './editor.css';
+
+	interface Props {
+		layer: TextLayer;
+		groupLayer?: GroupLayer;
+	}
+
+	let { layer = $bindable(), groupLayer = $bindable() }: Props = $props();
+
+	const editor = getEditorContext();
+
+	const pageId = editor.activePage.id;
+	const layerId = layer.id;
+	const layerState = layer;
+	const groupLayerState = groupLayer;
+
+	let bbox = $derived(
+		groupLayerState
+			? editor.getAbsoluteGroupLayers(groupLayerState, [layerState]).find((l) => l.id === layerId)!
+			: layerState,
+	);
+
+	const { htmlEditor } = editor;
+
+	let initial: TextLayerInitial | null = null;
+
+	const debouncedUpdates = createDebouncedCallback((actions: HistoryAction[]) => {
+		console.log('debouncedUpdates', actions);
+		editor.historyPush(actions);
+		initial = null;
+	}, 750);
+
+	const onUpdate = async (e: EditorEvents['update']) => {
+		console.log('editor update', e.editor.getJSON());
+		if (!initial) {
+			initial = editor.createTextLayerInitial(editor.activePage, layerState);
+		}
+		const html = e.editor.getJSON();
+		const actions = await editor.applyHtmlToLayer(initial, html);
+		// save update only when there is a content
+		if (e.editor.state.doc.textContent.trim().length) {
+			debouncedUpdates(actions);
+		}
+	};
+
+	const checkIfEmpty = () => {
+		if (initial && !$htmlEditor.isFocused && !$htmlEditor.state.doc.textContent.trim().length) {
+			Object.assign(layerState, {
+				html: initial.layer.initial.html,
+				x: initial.layer.initial.x,
+				y: initial.layer.initial.y,
+				height: initial.layer.initial.height,
+			});
+			editor.removeLayers(pageId, layerId);
+		}
+	};
+
+	$htmlEditor.on('update', onUpdate);
+
+	onDestroy(() => {
+		$htmlEditor.off('update', onUpdate);
+		checkIfEmpty();
+	});
+
+	$effect(() => {
+		if (editor.activeAction?.type !== 'edit') {
+			checkIfEmpty();
+		}
+	});
+
+	$htmlEditor.chain().setContent(layer.html).selectAll().run();
+
+	// update html when it changes by history undo/redo
+	$effect(() => {
+		if (editor.activeAction?.type !== 'edit') {
+			untrack(() => $htmlEditor)
+				.chain()
+				.setContent(layer.html)
+				.selectAll()
+				.run();
+		}
+	});
+</script>
+
+<div class="absolute origin-top-left select-none">
+	<div
+		class="pointer-events-auto select-text"
+		style:width={`${bbox.width * bbox.scale * editor.zoom}px`}
+		style:height={`${bbox.height * bbox.scale * editor.zoom}px`}
+		style:transform={`translate(${bbox.x * editor.zoom}px, ${bbox.y * editor.zoom}px) rotate(${bbox.rotate}deg)`}
+	>
+		<div
+			class="origin-top-left"
+			style:width="{bbox.width}px"
+			style:height="{bbox.height}px"
+			style:transform={`scale(${bbox.scale * editor.zoom})`}
+		>
+			<EditorContent editor={$htmlEditor} />
+		</div>
+	</div>
+</div>

package/dist/components/editor/layers/types/text/text-layer-edit.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { TextLayer, GroupLayer } from '../../../types.js';
+import './editor.css';
+interface Props {
+    layer: TextLayer;
+    groupLayer?: GroupLayer;
+}
+declare const TextLayerEdit: import("svelte").Component<Props, {}, "layer" | "groupLayer">;
+type TextLayerEdit = ReturnType<typeof TextLayerEdit>;
+export default TextLayerEdit;

package/dist/components/editor/layers/types/text/text-layer.svelte

@@ -0,0 +1,125 @@
+<script lang="ts">
+	import { BROWSER } from 'esm-env';
+	import { onMount } from 'svelte';
+	import type { TextLayer } from '../../../types.js';
+	import { getEditorContext } from '../../../editor.svelte.js';
+	import { TextLayerContent } from './index.js';
+	import { calculateBoundingBox } from '../../utils.js';
+	import { extractNodeFonts } from './editor/utils.js';
+
+	interface Props {
+		layer: TextLayer;
+	}
+
+	let { layer }: Props = $props();
+
+	const editor = getEditorContext();
+
+	let ref: HTMLElement | null = $state(null);
+
+	if (BROWSER) {
+		Promise.all(extractNodeFonts(layer.html).map(editor.loadFont)).finally(() => {
+			if (ref) {
+				Object.assign(layer, { height: ref.offsetHeight });
+			}
+		});
+	}
+
+	onMount(() => {
+		if (ref) {
+			Object.assign(layer, { height: ref.offsetHeight });
+		}
+	});
+
+	const canEdit = () => {
+		if (editor.activeAction) return false;
+		if (editor.activePage.locked) return false;
+		if (editor.activeSelection.type === 'root-layers') {
+			if (!editor.activeLayers.find((l) => l.id === layer.id)) return false;
+			if (layer.locked) return false;
+		} else if (editor.activeSelection.type === 'child-layer') {
+			if (!editor.activeGroupAndChild) return false;
+			const { groupLayer, childLayer } = editor.activeGroupAndChild;
+			if (childLayer.id !== layer.id) return false;
+			if (groupLayer.locked) return false;
+		} else {
+			return false;
+		}
+		return true;
+	};
+
+	let tryToEdit = false;
+
+	const onMouseDown = (e: MouseEvent) => {
+		if (e.button !== 0) return;
+		console.log('mousedown', layer.id, e);
+		if (!canEdit()) return;
+		tryToEdit = true;
+	};
+
+	const onClick = (e: MouseEvent) => {
+		console.log('click', layer.id, e);
+		if (!tryToEdit) return;
+		tryToEdit = false;
+		if (!canEdit()) return;
+		e.stopPropagation();
+		console.log('edit layer', layer.id);
+		editor.activeAction = { id: layer.id, type: 'edit' };
+	};
+
+	const onDragEnter = (e: DragEvent) => {
+		console.log('dragenter text layer', e);
+
+		if (editor.dragged) {
+			e.preventDefault();
+			e.stopPropagation();
+			editor.dragged = {
+				...editor.dragged,
+				hidden: false,
+				inside: true,
+				sticky: true,
+				customScale: null,
+			};
+		}
+	};
+
+	const onDragOver = (e: DragEvent) => {
+		// console.log('dragover text layer', e);
+		if (editor.dragged) {
+			e.preventDefault();
+			e.stopPropagation();
+		}
+	};
+
+	const onDrop = (e: DragEvent) => {
+		if (!ref) return;
+		console.log('drop text layer', e);
+
+		const { dragged } = editor;
+		if (dragged) {
+			e.preventDefault();
+			e.stopPropagation();
+			const bbox = calculateBoundingBox(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_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	class="h-full w-full"
+	style:opacity={editor.activeAction?.id === layer.id && editor.activeAction?.type === 'edit'
+		? 0
+		: null}
+	onclick={onClick}
+	onmousedown={onMouseDown}
+	ondragenter={onDragEnter}
+	ondragover={onDragOver}
+	ondrop={onDrop}
+>
+	<TextLayerContent {layer} bind:ref />
+</div>

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

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

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

@@ -1,4 +1,4 @@
-import type { HtmlLayer, ImageLayer, Layer } from '../types.js';
+import type { ImageLayer, Layer } from '../types.js';
 type Origin = 'top-left' | 'top-right' | 'center-left' | 'center-right' | 'bottom-left' | 'bottom-right' | 'left' | 'right' | 'top' | 'bottom';
 export type Point = {
     x: number;
@@ -10,15 +10,9 @@ export type Transform = {
     width: number;
     height: number;
     rotate: number;
+    scale: 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 calculateLayerTransform: (layer: Layer, groupScale?: number) => Transform;
 export declare const calculateNewPosition: (origin: Origin, transform: Transform, newWidth: number, newHeight: number) => {
     newX: number;
     newY: number;
@@ -30,12 +24,8 @@ export declare function calculateBoundingBox(transform: Transform): {
     height: number;
 };
 export declare function degToRad(deg: number): number;
-export declare function rotatePoint(p: Point, origin: Point, angleRad: number): Point;
+export declare function rotatePoint(rad: number, p: Point, center?: Point): 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;
@@ -49,14 +39,16 @@ export declare function getRotatedBoundingBox(center: Point, width: number, heig
     width: number;
     height: number;
 };
-export declare function calculateGroupRotatedBoundingBox(rects: Transform[], groupRotate?: number): Transform;
-export declare function calculateRelativeRects(bbox: Transform, rects: Transform[]): {
+export declare function calculateGroupRotatedBoundingBox(transforms: Transform[], rotate?: number): Transform;
+export declare function calculateRelativeRects(bbox: Transform, absoluteRects: Transform[]): {
     x: number;
     y: number;
+    rotate: number;
+    scale: number;
     width: number;
     height: number;
-    rotate: number;
 }[];
+export declare function calculateAbsoluteRects(bbox: Transform, rects: Transform[]): Transform[];
 export declare const checkPolygonsIntersect: (a: {
     x: number;
     y: number;
@@ -64,16 +56,12 @@ export declare const checkPolygonsIntersect: (a: {
     x: number;
     y: number;
 }[]) => boolean;
-export declare function calculateGroupBoundingBox(transforms: Transform[]): {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-};
+export declare function calculateGroupBoundingBox(transforms: Transform[]): Transform;
 export declare function calculateImageCover(image: {
     width: number;
     height: number;
     rotate?: number | null;
+    imageRotate?: number | null;
 }, bbox: {
     width: number;
     height: number;
@@ -87,5 +75,25 @@ export declare function calculateImageCover(image: {
 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 declare function getImageLayerBboxRelativeToImageCenter(layer: ImageLayer): {
+    minX: number;
+    minY: number;
+    maxX: number;
+    maxY: number;
+};
+export declare function calculateImageLayerPropsForImageRotate(layer: ImageLayer, imageRotate: number): {
+    imageRotate: number;
+    scale?: undefined;
+    width?: undefined;
+    height?: undefined;
+    offsetX?: undefined;
+    offsetY?: undefined;
+} | {
+    imageRotate: number;
+    scale: number;
+    width: number;
+    height: number;
+    offsetX: number;
+    offsetY: number;
+};
 export {};