@peteai/presentation-editor 0.0.6 → 0.0.8

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/editor/active-layers.svelte

@@ -0,0 +1,237 @@
+<script lang="ts">
+	import { getEditorContext } from './editor.svelte.js';
+	import {
+		calculateGroupRotatedBoundingBox,
+		calculateRelativeRects,
+		isRotatedVertically,
+	} from './layers/utils.js';
+	import { SideScaleControl } from './layers/controls/side-scale-control/index.js';
+	import { SideResizeControl } from './layers/controls/side-resize-control/index.js';
+	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 { ImageLayerCrop, TextLayerEdit } from './layers/index.js';
+	import type { GroupLayer, ImageLayer, Layer, TextLayer } from './types.js';
+
+	interface Props {
+		viewportRef: HTMLDivElement;
+		wrapperRef: HTMLDivElement;
+		pageRef: HTMLDivElement;
+	}
+	const { viewportRef, wrapperRef, pageRef }: Props = $props();
+
+	const editor = getEditorContext();
+
+	let textLayerEditData: { 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 };
+						}
+					}
+				}
+			}
+		},
+	);
+
+	let imageLayerCropData: { layer: ImageLayer } | undefined = $derived.by(() => {
+		if (editor.imageCropLayer) {
+			return { layer: editor.imageCropLayer };
+		}
+	});
+
+	const group = $derived.by(() => {
+		if (editor.activeSelection.type === 'background') {
+			return {
+				bbox: {
+					x: 0,
+					y: 0,
+					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: editor.activeLayers[0],
+				padding: 0,
+				items: [],
+			};
+		} else if (editor.activeLayers.length > 1) {
+			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 = (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 = 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 = textLayersRotations.every(
+			(rotate) => isRotatedVertically(rotate - groupRotate) === firstLayerRotatedVertically,
+		);
+		if (!allLayersHaveSameRotationDirection) return false; // If not all layers have the same rotation direction, resizing is not forbidden
+
+		// Based on the rotation direction, determine the direction in which resizing should be forbidden
+		return firstLayerRotatedVertically ? 'horizontal' : 'vertical';
+	};
+</script>
+
+{#if textLayerEditData}
+	<TextLayerEdit {...textLayerEditData} />
+{/if}
+
+{#if imageLayerCropData}
+	<ImageLayerCrop {...imageLayerCropData} {viewportRef} {wrapperRef} {pageRef} />
+{:else if group}
+	<div
+		class="pointer-events-none absolute left-0 top-0 h-full w-full"
+		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}
+			<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)"
+			></div>
+		{:else}
+			<div class="group-border absolute -inset-px"></div>
+			{#each group.items as item}
+				<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 * 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.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 && editor.activeLayers[0].type === 'text'}
+						{@const layer = editor.activeLayers[0]}
+						<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(
+							editor.activeLayers,
+							group.bbox.rotate,
+						)}
+						{#if constrainedResizeAxis !== 'horizontal'}
+							<GroupResizeControl origin="left" />
+							<GroupResizeControl origin="right" />
+						{/if}
+						{#if constrainedResizeAxis !== 'vertical'}
+							<GroupResizeControl origin="top" />
+							<GroupResizeControl origin="bottom" />
+						{/if}
+					{/if}
+					<CornerScaleControl origin="bottom-right" />
+					<CornerScaleControl origin="bottom-left" />
+					<CornerScaleControl origin="top-right" />
+					<CornerScaleControl origin="top-left" />
+					<RotateControl {pageRef} />
+				</div>
+			</div>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.group-border {
+		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),
+			linear-gradient(90deg, rgba(57, 76, 96, 0.15), rgba(57, 76, 96, 0.15)),
+			linear-gradient(180deg, rgba(57, 76, 96, 0.15), rgba(57, 76, 96, 0.15)),
+			linear-gradient(90deg, rgba(57, 76, 96, 0.15), rgba(57, 76, 96, 0.15)),
+			linear-gradient(180deg, rgba(57, 76, 96, 0.15), rgba(57, 76, 96, 0.15));
+		background-position:
+			top,
+			100%,
+			bottom,
+			0,
+			center 2px,
+			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-size:
+			6px 2px,
+			2px 6px,
+			6px 2px,
+			2px 6px,
+			calc(100% - 6px) 1px,
+			1px calc(100% - 4px),
+			calc(100% - 6px) 1px,
+			1px calc(100% - 4px);
+		box-shadow: 0 0 0 1px rgba(57, 76, 96, 0.15);
+	}
+</style>

package/dist/components/editor/active-layers.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    viewportRef: HTMLDivElement;
+    wrapperRef: HTMLDivElement;
+    pageRef: HTMLDivElement;
+}
+declare const ActiveLayers: import("svelte").Component<Props, {}, "">;
+type ActiveLayers = ReturnType<typeof ActiveLayers>;
+export default ActiveLayers;

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;