@peteai/presentation-editor 0.0.6 → 0.0.7

package/dist/components/presentation-editor/layers/controls/group-resize-control/group-resize-control.svelte

@@ -1,337 +0,0 @@
-<script lang="ts" module>
-	import { tv, type VariantProps } from 'tailwind-variants';
-	import type { Layer } from '../../../types.js';
-
-	const sideResizeControlVariants = tv({
-		slots: {
-			base: 'group absolute flex flex-col items-center justify-center pointer-events-none',
-			handler: 'absolute pointer-events-auto',
-			grip: 'rounded-sm bg-white group-active:bg-primary group-hover:bg-primary transition-colors',
-			cursor: '',
-		},
-		variants: {
-			origin: {
-				right: {
-					base: '-left-4 w-8 h-full',
-					handler: '-translate-x-2 w-4 h-full',
-					grip: 'w-1.5 h-4',
-					cursor: 'cursor-ew-resize',
-				},
-				left: {
-					base: '-right-4 w-8 h-full',
-					handler: 'translate-x-2 w-4 h-full',
-					grip: 'w-1.5 h-4',
-					cursor: 'cursor-ew-resize',
-				},
-				top: {
-					base: '-bottom-4 w-full h-8',
-					handler: 'translate-y-2 w-full h-4',
-					grip: 'w-4 h-1.5',
-					cursor: 'cursor-ns-resize',
-				},
-				bottom: {
-					base: '-top-4 w-full h-8',
-					handler: '-translate-y-2 w-full h-4',
-					grip: 'w-4 h-1.5',
-					cursor: 'cursor-ns-resize',
-				},
-			},
-		},
-	});
-
-	type Variants = VariantProps<typeof sideResizeControlVariants>;
-
-	interface Props extends Omit<Variants, 'origin'>, Required<Pick<Variants, 'origin'>> {}
-</script>
-
-<script lang="ts">
-	import { tick } from 'svelte';
-	import { getPresentationEditorContext } from '../../../presentation-editor.svelte.js';
-	import { cn } from '../../../../../utils.js';
-	import {
-		calculateGroupRotatedBoundingBox,
-		calculateLayerTransform,
-		calculateNewPosition,
-		calculateNewSize,
-		degToRad,
-		getRotatedBoundingBox,
-		rotatePoint,
-		type Transform,
-	} from '../../utils.js';
-
-	let { origin }: Props = $props();
-
-	const type = `${origin}-origin-resize`;
-
-	const editor = getPresentationEditorContext();
-
-	const { base, handler, grip, cursor } = sideResizeControlVariants({ origin });
-
-	let initial: {
-		clientX: number;
-		clientY: number;
-		bbox: Transform;
-		layers: (Layer & { state: Layer })[];
-	} | null = null;
-	let isChanged = false;
-	const actionId = editor.generateId();
-
-	const onMouseDown = (e: MouseEvent) => {
-		if (e.button !== 0) return;
-		e.preventDefault();
-		e.stopPropagation();
-		console.log(type, 'mousedown', e);
-
-		isChanged = false;
-		initial = {
-			clientX: e.clientX,
-			clientY: e.clientY,
-			bbox: calculateGroupRotatedBoundingBox(
-				editor.activeLayers.map(calculateLayerTransform),
-				editor.activeGroupRotate,
-			),
-			layers: editor.activeLayers.map((layer) => ({ ...layer, state: layer })),
-		};
-		editor.activeAction = {
-			id: actionId,
-			type,
-			cursor: cursor(),
-		};
-		addEventListener('mousemove', onMouseMove);
-		addEventListener('mouseup', onMouseUp);
-	};
-
-	const onMouseUp = (e: MouseEvent) => {
-		console.log(type, 'mouseup', e);
-		removeEventListener('mousemove', onMouseMove);
-		removeEventListener('mouseup', onMouseUp);
-
-		if (editor.activeAction?.id !== actionId) return;
-		editor.activeAction = null;
-		if (!initial || !isChanged) return;
-
-		editor.historyPush({
-			type: 'layersGroup',
-			actions: initial.layers.map((layerWithState) => {
-				const { state, ...layer } = layerWithState;
-				if (editor.isLayerOutOfBounds(state)) {
-					return {
-						type: 'layersRemove',
-						slideId: editor.activeSlide.id,
-						layers: [layer],
-					};
-				} else {
-					return {
-						type: 'layer',
-						slideId: editor.activeSlide.id,
-						layer: { id: layer.id, type: layer.type },
-						undo: {
-							x: layer.x,
-							y: layer.y,
-							width: layer.width,
-							height: layer.height,
-							...(layer.type === 'image' && {
-								scale: layer.scale,
-								offsetX: layer.offsetX,
-								offsetY: layer.offsetY,
-							}),
-						},
-						redo: {
-							x: state.x,
-							y: state.y,
-							width: state.width,
-							height: state.height,
-							...(state.type === 'image' && {
-								scale: state.scale,
-								offsetX: state.offsetX,
-								offsetY: state.offsetY,
-							}),
-						},
-					};
-				}
-			}),
-		});
-	};
-
-	const onMouseMove = async (e: MouseEvent) => {
-		if (!initial || editor.activeAction?.id !== actionId) return;
-
-		const groupBbox = initial.bbox;
-		const groupAngle = degToRad(groupBbox.rotate);
-		const xDiff = (e.clientX - initial.clientX) / editor.zoom;
-		const yDiff = (e.clientY - initial.clientY) / editor.zoom;
-		const adjustedXDiff = xDiff * Math.cos(groupAngle) + yDiff * Math.sin(groupAngle);
-		const adjustedYDiff = -xDiff * Math.sin(groupAngle) + yDiff * Math.cos(groupAngle);
-
-		let groupNewWidth = groupBbox.width;
-		let groupNewHeight = groupBbox.height;
-		const minSize = 10;
-		if (origin === 'left') {
-			groupNewWidth = Math.max(groupBbox.width + adjustedXDiff, minSize);
-		} else if (origin === 'top') {
-			groupNewHeight = Math.max(groupBbox.height + adjustedYDiff, minSize);
-		} else if (origin === 'right') {
-			groupNewWidth = Math.max(groupBbox.width - adjustedXDiff, minSize);
-		} else if (origin === 'bottom') {
-			groupNewHeight = Math.max(groupBbox.height - adjustedYDiff, minSize);
-		}
-
-		isChanged = groupNewWidth !== groupBbox.width || groupNewHeight !== groupBbox.height;
-
-		const { newX: groupNewX, newY: groupNewY } = calculateNewPosition(
-			origin,
-			initial.bbox,
-			groupNewWidth,
-			groupNewHeight,
-		);
-
-		const widthScale = groupNewWidth / groupBbox.width;
-		const heightScale = groupNewHeight / groupBbox.height;
-
-		const groupCenter = {
-			x: groupBbox.x + groupBbox.width / 2,
-			y: groupBbox.y + groupBbox.height / 2,
-		};
-		const groupNewCenter = { x: groupNewX + groupNewWidth / 2, y: groupNewY + groupNewHeight / 2 };
-		// calculate rotated points relative to new group center
-		const groupCenterRotated = rotatePoint(groupCenter, groupNewCenter, -groupAngle);
-
-		await Promise.all(
-			initial.layers.map(async (layer) => {
-				const { width, height, x, y, rotate } = calculateLayerTransform(layer);
-				const center = { x: x + width / 2, y: y + height / 2 };
-				const centerRotated = rotatePoint(center, groupNewCenter, -groupAngle);
-				const newCenterRotated = {
-					x: groupNewCenter.x + (centerRotated.x - groupCenterRotated.x) * widthScale,
-					y: groupNewCenter.y + (centerRotated.y - groupCenterRotated.y) * heightScale,
-				};
-
-				// rotate relative to the bbox
-				const rotateRelative = rotate - groupBbox.rotate;
-
-				const isHorizontal = origin === 'left' || origin === 'right';
-				const bboxScale = isHorizontal ? widthScale : heightScale;
-				const newSize = calculateNewSize(width, height, rotateRelative, bboxScale, isHorizontal);
-
-				const scale = layer.scale || 1;
-
-				let newWidth = newSize.width;
-				let newHeight = newSize.height;
-				let newScale = scale;
-
-				if (layer.type === 'html') {
-					if (newSize.scaled === 'height') {
-						newHeight = layer.height * scale;
-					} else {
-						Object.assign(layer.state, {
-							width: newWidth / scale,
-						});
-						await tick();
-
-						const layerContent = document.getElementById(`layer-content-${layer.id}`);
-						if (layerContent) {
-							newHeight = layerContent.offsetHeight * scale;
-						}
-					}
-				}
-
-				if (newWidth < minSize) {
-					newWidth = minSize;
-				}
-				if (newHeight < minSize) {
-					newHeight = minSize;
-				}
-
-				const bboxRotated = getRotatedBoundingBox(
-					centerRotated,
-					newWidth,
-					newHeight,
-					rotateRelative,
-				);
-
-				if (origin === 'left' || origin === 'right') {
-					const minX = groupNewX + bboxRotated.width / 2;
-					const maxX = groupNewX + groupNewWidth - bboxRotated.width / 2;
-					newCenterRotated.x =
-						origin === 'left'
-							? Math.max(Math.min(newCenterRotated.x, maxX), minX)
-							: Math.min(Math.max(newCenterRotated.x, minX), maxX);
-				} else {
-					const minY = groupNewY + bboxRotated.height / 2;
-					const maxY = groupNewY + groupNewHeight - bboxRotated.height / 2;
-					newCenterRotated.y =
-						origin === 'top'
-							? Math.max(Math.min(newCenterRotated.y, maxY), minY)
-							: Math.min(Math.max(newCenterRotated.y, minY), maxY);
-				}
-
-				let newCenter = rotatePoint(newCenterRotated, groupNewCenter, degToRad(groupBbox.rotate));
-
-				if (layer.type === 'image') {
-					const offsetX = layer.offsetX || 0;
-					const offsetY = layer.offsetY || 0;
-
-					const { image } = layer;
-
-					let newOffsetX = offsetX;
-					let newOffsetY = offsetY;
-
-					if (newSize.scaled === 'width') {
-						const maxOffsetDiff = Math.min(offsetX, image.width - offsetX - layer.width);
-						const maxWidth = (layer.width + Math.max(maxOffsetDiff, 0) * 2) * scale;
-						if (newWidth > maxWidth) {
-							newScale *= newWidth / maxWidth;
-							newOffsetX = offsetX - maxOffsetDiff;
-							newOffsetY += ((layer.image.height / 2 - offsetY) * (newScale - scale)) / newScale;
-						} else {
-							newOffsetX += (layer.width - newWidth / newScale) / 2;
-						}
-					} else {
-						const maxOffsetDiff = Math.min(offsetY, image.height - offsetY - layer.height);
-						const maxHeight = (layer.height + Math.max(maxOffsetDiff, 0) * 2) * scale;
-						if (newHeight > maxHeight) {
-							newScale *= newHeight / maxHeight;
-							newOffsetY = offsetY - maxOffsetDiff;
-							newOffsetX += ((layer.image.width / 2 - offsetX) * (newScale - scale)) / newScale;
-						} else {
-							newOffsetY += (layer.height - newHeight / newScale) / 2;
-						}
-					}
-
-					Object.assign(layer.state, {
-						x: newCenter.x - newWidth / 2,
-						y: newCenter.y - newHeight / 2,
-						width: newWidth / newScale,
-						height: newHeight / newScale,
-						scale: newScale,
-						offsetX: newOffsetX,
-						offsetY: newOffsetY,
-					});
-				} else {
-					Object.assign(layer.state, {
-						x: newCenter.x - newWidth / 2,
-						y: newCenter.y - newHeight / 2,
-						width: newWidth / newScale,
-						height: newHeight / newScale,
-						scale: newScale,
-					});
-				}
-			}),
-		);
-
-		editor.activeAction.tooltip = {
-			x: e.clientX,
-			y: e.clientY,
-			text: `w: ${Math.round(groupNewWidth)} h: ${Math.round(groupNewHeight)}`,
-		};
-	};
-</script>
-
-<div class={base()}>
-	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<div class={cn(handler(), cursor())} onmousedown={onMouseDown}></div>
-	<div
-		class={grip()}
-		style:box-shadow="0 0 4px 1px rgba(57,76,96,.15), 0 0 0 1px rgba(43,59,74,.3)"
-	></div>
-</div>

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

@@ -1,19 +0,0 @@
-<script lang="ts">
-	import type { Slide } from '../../../types.js';
-	import { ColorIndicator } from '../../../color-indicator/index.js';
-	import BackgroundContentImage from './background-content-image.svelte';
-
-	interface Props {
-		slide: Slide;
-		thumbScale?: number;
-	}
-
-	let { slide, thumbScale }: Props = $props();
-
-	let backgroundColor = $derived(slide.backgroundColor || '#ffffff');
-</script>
-
-<ColorIndicator color={backgroundColor} />
-{#if slide.backgroundImage}
-	<BackgroundContentImage backgroundImage={slide.backgroundImage} {thumbScale} />
-{/if}

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

@@ -1,71 +0,0 @@
-<script lang="ts">
-	import BoldIcon from 'lucide-svelte/icons/bold';
-	import { Toggle } from '../../../../../../ui/toggle/index.js';
-	import type { HtmlLayer } from '../../../../../types.js';
-	import { getPresentationEditorContext } from '../../../../../presentation-editor.svelte.js';
-	import { createEditorNotReactive } from '../../editor/utils.js';
-	import { applyHtmlToLayer } from '../../../../utils.js';
-
-	interface Props {
-		layers: HtmlLayer[];
-	}
-
-	let { layers = $bindable() }: Props = $props();
-
-	const editor = getPresentationEditorContext();
-
-	const { htmlEditor } = editor;
-
-	const editorNotReactive = createEditorNotReactive();
-
-	const isActive = $derived.by(() => {
-		if (editor.activeAction?.type === 'edit') {
-			return $htmlEditor.isActive('bold');
-		} else {
-			return layers.every((layer) => {
-				editorNotReactive.chain().setContent(layer.html).selectAll().run();
-				return editorNotReactive.isActive('bold');
-			});
-		}
-	});
-
-	const setValue = async (value: boolean) => {
-		if (editor.activeAction?.type === 'edit') {
-			if (value) {
-				$htmlEditor.chain().focus().setBold().run();
-			} else {
-				$htmlEditor.chain().focus().unsetBold().run();
-			}
-		} else {
-			editor.historyPush({
-				type: 'layersGroup',
-				actions: await Promise.all(
-					layers.map(async (layer) => {
-						let chain = editorNotReactive.chain().setContent(layer.html).selectAll();
-						if (value) {
-							chain = chain.setBold();
-						} else {
-							chain = chain.unsetBold();
-						}
-						chain.run();
-
-						const undo = { html: layer.html, x: layer.x, y: layer.y, height: layer.height };
-						const redo = await applyHtmlToLayer(layer, editorNotReactive.getJSON());
-
-						return {
-							type: 'layer',
-							slideId: editor.activeSlide.id,
-							layer: { id: layer.id, type: layer.type },
-							undo,
-							redo,
-						};
-					}),
-				),
-			});
-		}
-	};
-</script>
-
-<Toggle size="xs" pressed={isActive} onPressedChange={(val) => setValue(val)}>
-	<BoldIcon class="h-6 w-6" />
-</Toggle>

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

@@ -1,71 +0,0 @@
-<script lang="ts">
-	import ItalicIcon from 'lucide-svelte/icons/italic';
-	import { Toggle } from '../../../../../../ui/toggle/index.js';
-	import type { HtmlLayer } from '../../../../../types.js';
-	import { getPresentationEditorContext } from '../../../../../presentation-editor.svelte.js';
-	import { createEditorNotReactive } from '../../editor/utils.js';
-	import { applyHtmlToLayer } from '../../../../utils.js';
-
-	interface Props {
-		layers: HtmlLayer[];
-	}
-
-	let { layers = $bindable() }: Props = $props();
-
-	const editor = getPresentationEditorContext();
-
-	const { htmlEditor } = editor;
-
-	const editorNotReactive = createEditorNotReactive();
-
-	const isActive = $derived.by(() => {
-		if (editor.activeAction?.type === 'edit') {
-			return $htmlEditor.isActive('italic');
-		} else {
-			return layers.every((layer) => {
-				editorNotReactive.chain().setContent(layer.html).selectAll().run();
-				return editorNotReactive.isActive('italic');
-			});
-		}
-	});
-
-	const setValue = async (value: boolean) => {
-		if (editor.activeAction?.type === 'edit') {
-			if (value) {
-				$htmlEditor.chain().focus().setItalic().run();
-			} else {
-				$htmlEditor.chain().focus().unsetItalic().run();
-			}
-		} else {
-			editor.historyPush({
-				type: 'layersGroup',
-				actions: await Promise.all(
-					layers.map(async (layer) => {
-						let chain = editorNotReactive.chain().setContent(layer.html).selectAll();
-						if (value) {
-							chain = chain.setItalic();
-						} else {
-							chain = chain.unsetItalic();
-						}
-						chain.run();
-
-						const undo = { html: layer.html, x: layer.x, y: layer.y, height: layer.height };
-						const redo = await applyHtmlToLayer(layer, editorNotReactive.getJSON());
-
-						return {
-							type: 'layer',
-							slideId: editor.activeSlide.id,
-							layer: { id: layer.id, type: layer.type },
-							undo,
-							redo,
-						};
-					}),
-				),
-			});
-		}
-	};
-</script>
-
-<Toggle size="xs" pressed={isActive} onPressedChange={(val) => setValue(val)}>
-	<ItalicIcon class="h-6 w-6" />
-</Toggle>

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

@@ -1,90 +0,0 @@
-<script lang="ts">
-	import BulletListIcon from 'lucide-svelte/icons/list';
-	import OrderedListIcon from 'lucide-svelte/icons/list-ordered';
-	import { Toggle } from '../../../../../../ui/toggle/index.js';
-	import { getPresentationEditorContext } from '../../../../../presentation-editor.svelte.js';
-	import type { HtmlLayer } from '../../../../../types.js';
-	import type { Editor } from '../../editor/index.js';
-	import { createEditorNotReactive } from '../../editor/utils.js';
-	import { applyHtmlToLayer } from '../../../../utils.js';
-
-	interface Props {
-		layers: HtmlLayer[];
-	}
-
-	let { layers = $bindable() }: Props = $props();
-
-	const editor = getPresentationEditorContext();
-
-	const { htmlEditor } = editor;
-
-	type ListType = 'bulletList' | 'orderedList';
-
-	const editorNotReactive = createEditorNotReactive();
-
-	const getListType = (editor: Editor): ListType | false => {
-		const listTypes: ListType[] = ['bulletList', 'orderedList'];
-		for (let type of listTypes) {
-			if (editor.isActive(type)) {
-				return type;
-			}
-		}
-		return false;
-	};
-
-	const currentListType = $derived.by(() => {
-		if (editor.activeAction?.type === 'edit') {
-			return getListType($htmlEditor);
-		} else {
-			const set = new Set<ListType | false>();
-			layers.forEach((layer) => {
-				editorNotReactive.chain().setContent(layer.html).selectAll().run();
-				set.add(getListType(editorNotReactive));
-			});
-			return set.size > 1 ? false : Array.from(set)[0];
-		}
-	});
-
-	const setNextListType = (editor: Editor, type: ListType | false) => {
-		!type
-			? editor.commands.toggleBulletList()
-			: type === 'bulletList'
-				? editor.commands.toggleOrderedList()
-				: editor.commands.toggleUnstyledList();
-	};
-
-	const switchListType = async () => {
-		if (editor.activeAction?.type === 'edit') {
-			setNextListType($htmlEditor, currentListType);
-		} else {
-			editor.historyPush({
-				type: 'layersGroup',
-				actions: await Promise.all(
-					layers.map(async (layer) => {
-						editorNotReactive.chain().setContent(layer.html).selectAll().run();
-						setNextListType(editorNotReactive, currentListType);
-
-						const undo = { html: layer.html, x: layer.x, y: layer.y, height: layer.height };
-						const redo = await applyHtmlToLayer(layer, editorNotReactive.getJSON());
-
-						return {
-							type: 'layer',
-							slideId: editor.activeSlide.id,
-							layer: { id: layer.id, type: layer.type },
-							undo,
-							redo,
-						};
-					}),
-				),
-			});
-		}
-	};
-</script>
-
-<Toggle size="xs" pressed={!!currentListType} onPressedChange={switchListType}>
-	{#if currentListType === 'orderedList'}
-		<OrderedListIcon class="h-6 w-6" />
-	{:else}
-		<BulletListIcon class="h-6 w-6" />
-	{/if}
-</Toggle>

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

@@ -1,88 +0,0 @@
-import {} from '@tiptap/core';
-import { Editor } from './Editor.js';
-import { extensions } from '../extensions.js';
-export const DEFAULT_COLOR = '#000000';
-export const createEditorNotReactive = (content) => {
-    return new Editor({
-        extensions,
-        injectCSS: false,
-        content,
-    });
-};
-export const extractSelectionFonts = (editor) => {
-    const selection = editor.view.state.selection;
-    const set = new Set();
-    editor.view.state.doc.nodesBetween(selection.from, selection.to, (node) => {
-        if (node.attrs.fontFamily) {
-            set.add(node.attrs.fontFamily);
-        }
-    });
-    return Array.from(set);
-};
-export const extractNodeFonts = (content, set = new Set()) => {
-    if (content.type !== 'text') {
-        if (content.attrs?.fontFamily) {
-            set.add(content.attrs.fontFamily);
-        }
-        content.content?.forEach((content) => extractNodeFonts(content, set));
-    }
-    return Array.from(set);
-};
-export const extractSelectionFontSizes = (editor) => {
-    const selection = editor.view.state.selection;
-    const set = new Set();
-    editor.view.state.doc.nodesBetween(selection.from, selection.to, (node) => {
-        if (node.attrs.fontSize) {
-            set.add(node.attrs.fontSize);
-        }
-    });
-    return Array.from(set);
-};
-export const extractNodeFontSizes = (content, set = new Set()) => {
-    if (content.type !== 'text') {
-        if (content.attrs?.fontSize) {
-            set.add(content.attrs.fontSize);
-        }
-        content.content?.forEach((content) => extractNodeFontSizes(content, set));
-    }
-    return Array.from(set);
-};
-export const extractSelectionColors = (editor) => {
-    const selection = editor.view.state.selection;
-    const set = new Set();
-    editor.view.state.doc.nodesBetween(selection.from, selection.to, (node) => {
-        if (node.isText && node.text?.trim().length) {
-            const color = node.marks?.find((mark) => mark.type.name === 'textStyle')?.attrs?.color;
-            set.add(color || DEFAULT_COLOR);
-        }
-    });
-    return Array.from(set);
-};
-export const extractNodeColors = (content, set = new Set()) => {
-    if (content.type === 'text') {
-        const color = content.marks?.find((mark) => mark.type === 'textStyle')?.attrs?.color;
-        set.add(color || DEFAULT_COLOR);
-    }
-    else {
-        if (content.attrs?.color) {
-            set.add(content.attrs.color);
-        }
-    }
-    content.content?.forEach((content) => extractNodeColors(content, set));
-    return Array.from(set);
-};
-export const extractUppercase = (editor) => {
-    const selection = editor.view.state.selection;
-    let uppercase = null;
-    editor.view.state.doc.nodesBetween(selection.from, selection.to, (node) => {
-        if (node.type.name !== 'text') {
-            if (uppercase !== false && node.attrs.textTransform === 'uppercase') {
-                uppercase = true;
-            }
-            else {
-                uppercase = false;
-            }
-        }
-    });
-    return !!uppercase;
-};

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

@@ -1,3 +0,0 @@
-import { UnstyledList } from './unstyled-list.js';
-export * from './unstyled-list.js';
-export default UnstyledList;

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

@@ -1,3 +0,0 @@
-import { UnstyledList } from './unstyled-list.js';
-export * from './unstyled-list.js';
-export default UnstyledList;