@peteai/presentation-editor 0.0.6 → 0.0.7

package/README.md

@@ -31,8 +31,8 @@ interface BaseLayer {
 	sortOrder: number;
 }
 
-interface HtmlLayer extends BaseLayer {
-	type: 'html';
+interface TextLayer extends BaseLayer {
+	type: 'text';
 	scale: number | null;
 	html: JSONContent;
 }
@@ -54,9 +54,9 @@ interface ImageLayer extends BaseLayer, LayerBorder {
 	flipY: boolean;
 }
 
-type Layer = HtmlLayer | ImageLayer;
+type Layer = TextLayer | ImageLayer;
 
-type Slide = {
+type Page = {
 	id: string;
 	backgroundColor: string | null;
 	layers: Layer[];
@@ -66,9 +66,9 @@ type Slide = {
 
 ### Html editor
 
-PresentationEditor is using `Tiptap` editor for `HtmlLayer` content editing.
+PresentationEditor is using `Tiptap` editor for `TextLayer` content editing.
 
-`JSONContent` type provided by `@tiptap/core` is used for html content of `HtmlLayer` to store data in json format.
+`JSONContent` type provided by `@tiptap/core` is used for html content of `TextLayer` to store data in json format.
 
 ## Settings
 
@@ -81,22 +81,22 @@ interface BaseOptions {
 	height?: number;
 	generateId?: () => string;
 	onImageUpload?: (file: File) => Promise<Image>;
-	onLayerAdd?: (slideId: string, layer: Layer) => Promise<Layer>;
-	onLayerUpdate?: (slideId: string, layerId: string, layerType: string, changes: object) => void;
-	onLayerRemove?: (slideId: string, layerId: string, layerType: string) => Promise<void>;
+	onLayerAdd?: (pageId: string, layer: Layer) => Promise<Layer>;
+	onLayerUpdate?: (pageId: string, layerId: string, layerType: string, changes: object) => void;
+	onLayerRemove?: (pageId: string, layerId: string, layerType: string) => Promise<void>;
 }
 
 interface MultipleModeOption extends BaseOptions {
 	mode?: 'multiple';
-	slides?: Slide[];
-	onSlideAdd?: (slide: Slide) => Promise<Slide>;
-	onSlideUpdate?: (slideId: string, changes: object) => void;
-	onSlideRemove?: (slideId: string) => Promise<void>;
+	pages?: Page[];
+	onPageAdd?: (page: Page) => Promise<Page>;
+	onPageUpdate?: (pageId: string, changes: object) => void;
+	onPageRemove?: (pageId: string) => Promise<void>;
 }
 
 interface SingleModeOption extends BaseOptions {
 	mode: 'single';
-	slide?: Slide;
+	page?: Page;
 }
 
 export type PresentationEditorOptions = MultipleModeOption | SingleModeOption;
@@ -109,82 +109,82 @@ import { createEditor } from '@peteai/presentation-editor';
 
 // images list
 const images: Image[];
-// slides list
-const slides: Slide[];
+// pages list
+const pages: Page[];
 
 const editor = new createEditor({
 	target: document.querySelector('.target'),
 	props: {
-		// function for new slides and layers ids generation
+		// function for new pages and layers ids generation
 		generateId: () => crypto.randomUUID(),
 		images,
-		slides,
+		pages,
 		onImageUpload: async (file) => {
 			// called when user uploads image
 			// callback to store file and return Image
 			// which will be added to the images list
-			// new ImageLayer gonna be created if image file was dropped on slide
+			// new ImageLayer gonna be created if image file was dropped on page
 			// ...
 			return image;
 		},
-		onSlideAdd: async (slide) => {
-			// called when new slide is added
-			// expect Slide to be returned to overwrite newly created slide
+		onPageAdd: async (page) => {
+			// called when new page is added
+			// expect Page to be returned to overwrite newly created page
 		},
-		onSlideUpdate: async (slideId, values) => {
-			// called when slide is updated
+		onPageUpdate: async (pageId, values) => {
+			// called when page is updated
 		},
-		onSlideRemove: async (slideId) => {
-			// called when slide is removed
+		onPageRemove: async (pageId) => {
+			// called when page is removed
 		},
-		onLayerAdd: async (slideId, layer) => {
+		onLayerAdd: async (pageId, layer) => {
 			// called when new layer is added
 			// expect Layer to be returned to overwrite newly created layer
 		},
-		onLayerUpdate: async (slideId, layerId, layerType, values) => {
+		onLayerUpdate: async (pageId, layerId, layerType, values) => {
 			// called when layer is updated
 		},
-		onLayerRemove: async (slideId, layerId, layerType) => {
+		onLayerRemove: async (pageId, layerId, layerType) => {
 			// called when layer is removed
 		},
 	},
 });
 ```
 
-## Single Slide Mode
+## Single Page Mode
 
 ```typescript
 import { createEditor } from '@peteai/presentation-editor';
 
 // images list
 const images: Image[];
-// slides list
-const slide: Slide;
+// pages list
+const page: Page;
 
 const editor = new createEditor({
 	target: document.querySelector('.target'),
 	props: {
 		mode: 'single',
-		// function for new slides and layers ids generation
+		// function for new pages and layers ids generation
 		generateId: () => crypto.randomUUID(),
 		images,
-		slide,
+		page,
 		onImageUpload: async (file) => {
 			// called when user uploads image
 			// callback to store file and return Image
 			// which will be added to the images list
-			// new ImageLayer gonna be created if image file was dropped on slide
+			// new ImageLayer gonna be created if image file was dropped on page
 			// ...
 			return image;
 		},
-		onLayerAdd: async (slideId, layer) => {
+		onLayerAdd: async (pageId, layer) => {
 			// called when new layer is added
 			// expect Layer to be returned to overwrite newly created layer
 		},
-		onLayerUpdate: async (slideId, layerId, layerType, values) => {
+		onLayerUpdate: async (pageId, layerId, layerType, values) => {
 			// called when layer is updated
 		},
-		onLayerRemove: async (slideId, layerId, layerType) => {
+		onLayerRemove: async (pageId, layerId, layerType) => {
 			// called when layer is removed
 		},
 	},

package/dist/components/editor/active-layers-buttons.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { Separator } from '../ui/separator/index.js';
+	import { BorderButton } from './layers/buttons/border-button/index.js';
+	import { CornerRadiusButton } from './layers/buttons/corner-radius-button/index.js';
+	import { FlipButton } from './layers/buttons/flip-button/index.js';
+	import { OpacityButton } from './layers/buttons/opacity-button/index.js';
+	import { AlignmentButton } from './layers/types/text/buttons/alignment-button/index.js';
+	import { BoldButton } from './layers/types/text/buttons/bold-button/index.js';
+	import { CaseButton } from './layers/types/text/buttons/case-button/index.js';
+	import { ColorButton } from './layers/types/text/buttons/color-button/index.js';
+	import { FontFamilyButton } from './layers/types/text/buttons/font-family-button/index.js';
+	import { FontSizeButton } from './layers/types/text/buttons/font-size-button/index.js';
+	import { ItalicButton } from './layers/types/text/buttons/italic-button/index.js';
+	import { ListButton } from './layers/types/text/buttons/list-button/index.js';
+	import { StrikethroughButton } from './layers/types/text/buttons/strikethrough-button/index.js';
+	import { UnderlineButton } from './layers/types/text/buttons/underline-button/index.js';
+	import { getEditorContext } from './editor.svelte.js';
+
+	const editor = getEditorContext();
+
+	let imageLayers = $derived(
+		editor.selectedSimpleLayersNotLocked.filter((layer) => layer.type === 'image'),
+	);
+	let textLayers = $derived(
+		editor.selectedSimpleLayersNotLocked.filter((layer) => layer.type === 'text'),
+	);
+</script>
+
+{#if editor.activeLayers.length}
+	{#if imageLayers.length}
+		<Separator orientation="vertical" />
+		<BorderButton bind:layers={imageLayers} />
+		<CornerRadiusButton bind:layers={imageLayers} />
+		{#if textLayers.length === 0}
+			<Separator orientation="vertical" />
+			<FlipButton bind:layers={imageLayers} />
+		{/if}
+	{/if}
+	{#if textLayers.length}
+		<Separator orientation="vertical" />
+		<FontFamilyButton bind:layers={textLayers} />
+		<FontSizeButton bind:layers={textLayers} />
+		<ColorButton bind:layers={textLayers} />
+		<BoldButton bind:layers={textLayers} />
+		<ItalicButton bind:layers={textLayers} />
+		<UnderlineButton bind:layers={textLayers} />
+		<StrikethroughButton bind:layers={textLayers} />
+		<CaseButton bind:layers={textLayers} />
+		<AlignmentButton bind:layers={textLayers} />
+		<ListButton bind:layers={textLayers} />
+	{/if}
+	{#if editor.selectedLayersNotLocked.length}
+		<Separator orientation="vertical" />
+		<OpacityButton bind:layers={editor.selectedLayersNotLocked} />
+	{/if}
+{/if}

package/dist/components/{presentation-editor → editor}/active-layers.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-	import { getPresentationEditorContext } from './presentation-editor.svelte.js';
+	import { getEditorContext } from './editor.svelte.js';
 	import {
-		calculateLayerTransform,
 		calculateGroupRotatedBoundingBox,
 		calculateRelativeRects,
 		isRotatedVertically,
@@ -11,22 +10,35 @@
 	import { GroupResizeControl } from './layers/controls/group-resize-control/index.js';
 	import { CornerScaleControl } from './layers/controls/corner-scale-control/index.js';
 	import { RotateControl } from './layers/controls/rotate-control/index.js';
-	import { HtmlLayerEdit } from './layers/index.js';
-	import type { HtmlLayer } from './types.js';
+	import { TextLayerEdit } from './layers/index.js';
+	import type { GroupLayer, Layer, TextLayer } from './types.js';
 
-	const editor = getPresentationEditorContext();
+	const editor = getEditorContext();
 
-	let htmlLayerEditing: HtmlLayer | undefined = $derived.by(() => {
-		if (editor.activeAction?.type === 'edit' && editor.activeLayers.length === 1) {
-			const layer = editor.activeLayers[0];
-			if (editor.activeAction.id == layer.id && layer.type === 'html') {
-				return layer;
+	let textLayerEditing: { layer: TextLayer; groupLayer?: GroupLayer } | undefined = $derived.by(
+		() => {
+			if (editor.activeAction?.type === 'edit') {
+				if (editor.activeSelection.type === 'root-layers') {
+					if (editor.activeLayers.length === 1) {
+						const layer = editor.activeLayers[0];
+						if (editor.activeAction.id == layer.id && layer.type === 'text') {
+							return { layer };
+						}
+					}
+				} else if (editor.activeSelection.type === 'child-layer') {
+					if (editor.activeGroupAndChild) {
+						const { childLayer, groupLayer } = editor.activeGroupAndChild;
+						if (editor.activeAction.id == childLayer.id && childLayer.type === 'text') {
+							return { layer: childLayer, groupLayer };
+						}
+					}
+				}
 			}
-		}
-	});
+		},
+	);
 
 	const group = $derived.by(() => {
-		if (editor.activeBackground) {
+		if (editor.activeSelection.type === 'background') {
 			return {
 				bbox: {
 					x: 0,
@@ -34,45 +46,71 @@
 					width: editor.width,
 					height: editor.height,
 					rotate: 0,
+					scale: 1,
 				},
 				padding: 3,
 				items: [],
 			};
+		} else if (editor.activeGroupAndChild) {
+			const { groupLayer, childLayer } = editor.activeGroupAndChild;
+			return {
+				bbox: groupLayer,
+				padding: 0,
+				items: [
+					{
+						...childLayer,
+						...{
+							x: childLayer.x * groupLayer.scale,
+							y: childLayer.y * groupLayer.scale,
+							width: childLayer.width * groupLayer.scale,
+							height: childLayer.height * groupLayer.scale,
+						},
+					},
+				],
+			};
 		} else if (editor.activeLayers.length === 1) {
 			return {
-				bbox: calculateLayerTransform(editor.activeLayers[0]),
+				bbox: editor.activeLayers[0],
 				padding: 0,
 				items: [],
 			};
 		} else if (editor.activeLayers.length > 1) {
-			const transforms = editor.activeLayers.map(calculateLayerTransform);
-			const bbox = calculateGroupRotatedBoundingBox(transforms, editor.activeGroupRotate);
-			const items = calculateRelativeRects(bbox, transforms);
+			const bbox = calculateGroupRotatedBoundingBox(editor.activeLayers, editor.activeGroupRotate);
+			const items = calculateRelativeRects(bbox, editor.activeLayers);
 
 			return { bbox, padding: 0, items };
 		}
 	});
-
 	/**
 	 * Determines if resizing should be forbidden based on the rotation of the group and its layers.
 	 *
+	 * @param {Layer[]} layers - The layers to check.
 	 * @param {number} groupRotate - The rotation of the group in degrees.
 	 * @returns {(boolean|string)} - Returns 'horizontal' or 'vertical' if resizing should be forbidden in that direction, otherwise returns false.
 	 */
-	const getConstrainedResizeAxis = (groupRotate: number) => {
-		// Check if all active layers are of type 'html'
-		const htmlLayersOnly = editor.activeLayers.every((layer) => layer.type === 'html');
-		if (!htmlLayersOnly) return false; // If not all layers are 'html', resizing is not forbidden
+	const getConstrainedResizeAxis = (layers: Layer[], groupRotate: number) => {
+		// Check if all active layers are of type 'text'
+		const textLayersOnly = layers.every((layer) =>
+			layer.type === 'group'
+				? editor.findGroupChildren(editor.activePage, layer.id).every((l) => l.type === 'text')
+				: layer.type === 'text',
+		);
+		if (!textLayersOnly) return false; // If not all layers are 'text', resizing is not forbidden
+
+		const textLayersRotations = editor.activeLayers.flatMap((layer) =>
+			layer.type === 'group'
+				? editor.findGroupChildren(editor.activePage, layer.id).map((l) => l.rotate + layer.rotate)
+				: layer.rotate,
+		);
 
 		// Calculate the rotation of the first layer relative to the group rotation
-		const firstLayerRelativeRotate = (editor.activeLayers[0].rotate || 0) - groupRotate;
+		const firstLayerRelativeRotate = textLayersRotations[0] - groupRotate;
 		// Determine if the first layer is rotated vertically
 		const firstLayerRotatedVertically = isRotatedVertically(firstLayerRelativeRotate);
 
 		// Check if all layers have the same rotation direction relative to the group rotation
-		const allLayersHaveSameRotationDirection = editor.activeLayers.every(
-			(layer) =>
-				isRotatedVertically((layer.rotate || 0) - groupRotate) === firstLayerRotatedVertically,
+		const allLayersHaveSameRotationDirection = textLayersRotations.every(
+			(rotate) => isRotatedVertically(rotate - groupRotate) === firstLayerRotatedVertically,
 		);
 		if (!allLayersHaveSameRotationDirection) return false; // If not all layers have the same rotation direction, resizing is not forbidden
 
@@ -81,18 +119,18 @@
 	};
 </script>
 
-{#if htmlLayerEditing}
-	<HtmlLayerEdit bind:layer={htmlLayerEditing} />
+{#if textLayerEditing}
+	<TextLayerEdit {...textLayerEditing} />
 {/if}
 
 {#if group}
 	<div
 		class="pointer-events-none absolute left-0 top-0 h-full w-full"
-		style:width={`${group.bbox.width * editor.zoom + group.padding * 2}px`}
-		style:height={`${group.bbox.height * editor.zoom + group.padding * 2}px`}
+		style:width={`${group.bbox.width * group.bbox.scale * editor.zoom + group.padding * 2}px`}
+		style:height={`${group.bbox.height * group.bbox.scale * editor.zoom + group.padding * 2}px`}
 		style:transform={`translate(${group.bbox.x * editor.zoom - group.padding}px, ${group.bbox.y * editor.zoom - group.padding}px) rotate(${group.bbox.rotate}deg)`}
 	>
-		{#if group.items.length < 2}
+		{#if !group.items.length}
 			<div
 				class="border-primary absolute -inset-px border-2"
 				style:box-shadow="0 0 0 1px hsla(0, 0%, 100%, .07), inset 0 0 0 1px hsla(0, 0%, 100%, .07)"
@@ -103,29 +141,31 @@
 				<div
 					class="border-primary absolute -left-px -top-px border-2"
 					style:box-shadow="0 0 0 1px hsla(0, 0%, 100%, .07), inset 0 0 0 1px hsla(0, 0%, 100%, .07)"
-					style:width={`${item.width * editor.zoom + 2}px`}
-					style:height={`${item.height * editor.zoom + 2}px`}
+					style:width={`${item.width * item.scale * editor.zoom + 2}px`}
+					style:height={`${item.height * item.scale * editor.zoom + 2}px`}
 					style:transform={`translate(${item.x * editor.zoom}px, ${item.y * editor.zoom}px) rotate(${item.rotate}deg)`}
 				></div>
 			{/each}
 		{/if}
 
-		{#if editor.activeLayers.length > 0 && !editor.activeSlide.locked && !editor.activeLayers.some((l) => l.locked)}
+		{#if editor.activeLayers.length > 0 && !editor.activePage.locked && !editor.activeLayers.some((l) => l.locked)}
 			<div class="h-full w-full outline-none transition-opacity duration-300">
 				<div class="flex h-full w-full items-center justify-center">
-					{#if editor.activeLayers.length === 1}
+					{#if editor.activeLayers.length === 1 && editor.activeLayers[0].type === 'text'}
 						{@const layer = editor.activeLayers[0]}
-						{#if layer.type === 'html'}
-							<SideScaleControl origin="left" {layer} />
-							<SideScaleControl origin="right" {layer} />
-						{:else if layer.type === 'image'}
-							<SideResizeControl origin="left" {layer} />
-							<SideResizeControl origin="right" {layer} />
-							<SideResizeControl origin="top" {layer} />
-							<SideResizeControl origin="bottom" {layer} />
-						{/if}
+						<SideScaleControl origin="left" {layer} />
+						<SideScaleControl origin="right" {layer} />
+					{:else if editor.activeLayers.length === 1 && editor.activeLayers[0].type === 'image'}
+						{@const layer = editor.activeLayers[0]}
+						<SideResizeControl origin="left" {layer} />
+						<SideResizeControl origin="right" {layer} />
+						<SideResizeControl origin="top" {layer} />
+						<SideResizeControl origin="bottom" {layer} />
 					{:else}
-						{@const constrainedResizeAxis = getConstrainedResizeAxis(group.bbox.rotate)}
+						{@const constrainedResizeAxis = getConstrainedResizeAxis(
+							editor.activeLayers,
+							group.bbox.rotate,
+						)}
 						{#if constrainedResizeAxis !== 'horizontal'}
 							<GroupResizeControl origin="left" />
 							<GroupResizeControl origin="right" />
@@ -148,7 +188,8 @@
 
 <style>
 	.group-border {
-		background-image: linear-gradient(90deg, #fff 60%, rgba(53, 71, 90, 0.2) 0),
+		background-image:
+			linear-gradient(90deg, #fff 60%, rgba(53, 71, 90, 0.2) 0),
 			linear-gradient(180deg, #fff 60%, rgba(53, 71, 90, 0.2) 0),
 			linear-gradient(90deg, #fff 60%, rgba(53, 71, 90, 0.2) 0),
 			linear-gradient(180deg, #fff 60%, rgba(53, 71, 90, 0.2) 0),
@@ -165,8 +206,8 @@
 			calc(100% - 2px),
 			center calc(100% - 2px),
 			2px;
-		background-repeat: repeat-x, repeat-y, repeat-x, repeat-y, no-repeat, no-repeat, no-repeat,
-			no-repeat;
+		background-repeat:
+			repeat-x, repeat-y, repeat-x, repeat-y, no-repeat, no-repeat, no-repeat, no-repeat;
 		background-size:
 			6px 2px,
 			2px 6px,

package/dist/components/{presentation-editor/cognition-slides.d.ts → editor/cognition-pages.d.ts}

@@ -4,7 +4,7 @@ export declare const cognitionImages: {
     width: number;
     height: number;
 }[];
-export declare const cognitionSlides: ({
+export declare const cognitionPages: ({
     slide_layout_plan: string;
     type: string;
     headline: string;

package/dist/components/{presentation-editor/cognition-slides.js → editor/cognition-pages.js}

@@ -25,7 +25,7 @@ export const cognitionImages = [
         height: 800,
     },
 ];
-export const cognitionSlides = [
+export const cognitionPages = [
     {
         slide_layout_plan: "For the first slide, I want to introduce the topic and provide a brief overview of what's to come. A title slide is appropriate here, with a headline that clearly indicates the subject matter and a subheadline that gives some additional context. The image should reflect the high-level topic of AI in acquiring banks. This slide sets the stage for the deeper dive into the statistics and insights that will be covered in subsequent slides.",
         type: 'title',

package/dist/components/{presentation-editor → editor}/cursor-tooltip.svelte

@@ -1,8 +1,12 @@
 <script lang="ts">
 	import * as Tooltip from '../ui/tooltip/index.js';
-	import { getPresentationEditorContext } from './presentation-editor.svelte.js';
+	import type { Editor } from './editor.svelte.js';
 
-	const editor = getPresentationEditorContext();
+	interface Props {
+		editor: Editor;
+	}
+
+	const { editor }: Props = $props();
 </script>
 
 {#if editor.activeAction?.tooltip}

package/dist/components/editor/cursor-tooltip.svelte.d.ts

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

package/dist/components/{presentation-editor → editor}/dragged.svelte

@@ -1,8 +1,12 @@
 <script lang="ts">
-	import { HtmlContent } from './layers/types/html/index.js';
-	import { getPresentationEditorContext } from './presentation-editor.svelte.js';
+	import { HtmlContent } from './layers/types/text/index.js';
+	import type { Editor } from './editor.svelte.js';
 
-	const editor = getPresentationEditorContext();
+	interface Props {
+		editor: Editor;
+	}
+
+	const { editor }: Props = $props();
 </script>
 
 {#if editor.dragged}

package/dist/components/editor/dragged.svelte.d.ts

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