@peteai/presentation-editor 0.0.2 → 0.0.4

package/README.md

@@ -139,7 +139,7 @@ const editor = new createEditor({
 		},
 		onLayerAdd: async (slideId, layer) => {
 			// called when new layer is added
-			// expect Slide to be returned to overwrite newly created layer
+			// expect Layer to be returned to overwrite newly created layer
 		},
 		onLayerUpdate: async (slideId, layerId, layerType, values) => {
 			// called when layer is updated
@@ -179,7 +179,7 @@ const editor = new createEditor({
 		},
 		onLayerAdd: async (slideId, layer) => {
 			// called when new layer is added
-			// expect Slide to be returned to overwrite newly created layer
+			// expect Layer to be returned to overwrite newly created layer
 		},
 		onLayerUpdate: async (slideId, layerId, layerType, values) => {
 			// called when layer is updated

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

@@ -0,0 +1,53 @@
+<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/html/buttons/alignment-button/index.js';
+	import { BoldButton } from './layers/types/html/buttons/bold-button/index.js';
+	import { CaseButton } from './layers/types/html/buttons/case-button/index.js';
+	import { ColorButton } from './layers/types/html/buttons/color-button/index.js';
+	import { FontFamilyButton } from './layers/types/html/buttons/font-family-button/index.js';
+	import { FontSizeButton } from './layers/types/html/buttons/font-size-button/index.js';
+	import { ItalicButton } from './layers/types/html/buttons/italic-button/index.js';
+	import { ListButton } from './layers/types/html/buttons/list-button/index.js';
+	import { StrikethroughButton } from './layers/types/html/buttons/strikethrough-button/index.js';
+	import { UnderlineButton } from './layers/types/html/buttons/underline-button/index.js';
+	import { getPresentationEditorContext } from './presentation-editor.svelte.js';
+
+	const editor = getPresentationEditorContext();
+
+	let noLockedLayers = $derived(editor.activeLayers.filter((layer) => !layer.locked));
+	let imageLayers = $derived(noLockedLayers.filter((layer) => layer.type === 'image'));
+	let htmlLayers = $derived(noLockedLayers.filter((layer) => layer.type === 'html'));
+</script>
+
+{#if editor.activeLayers.length}
+	{#if imageLayers.length}
+		<Separator orientation="vertical" />
+		<BorderButton bind:layers={imageLayers} />
+		<CornerRadiusButton bind:layers={imageLayers} />
+		{#if htmlLayers.length === 0}
+			<Separator orientation="vertical" />
+			<FlipButton bind:layers={imageLayers} />
+		{/if}
+	{/if}
+	{#if htmlLayers.length}
+		<Separator orientation="vertical" />
+		<FontFamilyButton bind:layers={htmlLayers} />
+		<FontSizeButton bind:layers={htmlLayers} />
+		<ColorButton bind:layers={htmlLayers} />
+		<BoldButton bind:layers={htmlLayers} />
+		<ItalicButton bind:layers={htmlLayers} />
+		<UnderlineButton bind:layers={htmlLayers} />
+		<StrikethroughButton bind:layers={htmlLayers} />
+		<CaseButton bind:layers={htmlLayers} />
+		<AlignmentButton bind:layers={htmlLayers} />
+		<ListButton bind:layers={htmlLayers} />
+	{/if}
+	{#if noLockedLayers.length}
+		<Separator orientation="vertical" />
+		<OpacityButton bind:layers={noLockedLayers} />
+	{/if}
+{/if}

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

@@ -0,0 +1,3 @@
+declare const ActiveLayersButtons: import("svelte").Component<Record<string, never>, {}, "">;
+type ActiveLayersButtons = ReturnType<typeof ActiveLayersButtons>;
+export default ActiveLayersButtons;

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

@@ -0,0 +1,181 @@
+<script lang="ts">
+	import { getPresentationEditorContext } from './presentation-editor.svelte.js';
+	import {
+		calculateLayerTransform,
+		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 { HtmlLayerEdit } from './layers/index.js';
+	import type { HtmlLayer } from './types.js';
+
+	const editor = getPresentationEditorContext();
+
+	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;
+			}
+		}
+	});
+
+	const group = $derived.by(() => {
+		if (editor.activeBackground) {
+			return {
+				bbox: {
+					x: 0,
+					y: 0,
+					width: editor.width,
+					height: editor.height,
+					rotate: 0,
+				},
+				padding: 3,
+				items: [],
+			};
+		} else if (editor.activeLayers.length === 1) {
+			return {
+				bbox: calculateLayerTransform(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);
+
+			return { bbox, padding: 0, items };
+		}
+	});
+
+	/**
+	 * Determines if resizing should be forbidden based on the rotation of the group and its layers.
+	 *
+	 * @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
+
+		// Calculate the rotation of the first layer relative to the group rotation
+		const firstLayerRelativeRotate = (editor.activeLayers[0].rotate || 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,
+		);
+		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 htmlLayerEditing}
+	<HtmlLayerEdit bind:layer={htmlLayerEditing} />
+{/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: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}
+			<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 * editor.zoom + 2}px`}
+					style:height={`${item.height * 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)}
+			<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}
+						{@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}
+					{:else}
+						{@const constrainedResizeAxis = getConstrainedResizeAxis(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 />
+				</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/presentation-editor/active-layers.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const ActiveLayers: import("svelte").Component<Record<string, never>, {}, "">;
+type ActiveLayers = ReturnType<typeof ActiveLayers>;
+export default ActiveLayers;

package/dist/components/presentation-editor/color-indicator/color-indicator-gradient-def.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+	import { stringToGradient } from '../utils.js';
+
+	interface Props {
+		id: string;
+		color: string;
+		width: number;
+		height: number;
+	}
+
+	const { id, color, width, height }: Props = $props();
+
+	const hexToNumber = (hex: string) => Math.round((parseInt(hex, 16) / 255) * 100) / 100;
+
+	let gradient = $derived(stringToGradient(color));
+	let tag = $derived.by(() => {
+		const name = gradient.type.startsWith('linear') ? 'linearGradient' : 'radialGradient';
+
+		const baseAttrs = { id, gradientUnits: 'userSpaceOnUse' };
+
+		const calculateRadialAttributes = (cx: number, cy: number, multiplier: number = 1) => ({
+			r: Math.hypot(width / 2, height / 2) * multiplier,
+			cx,
+			cy,
+			fx: cx,
+			fy: cy,
+		});
+
+		let attributes;
+		switch (gradient.type) {
+			case 'linear90':
+				attributes = { x1: 0, y1: 0, x2: width, y2: 0 };
+				break;
+			case 'linear180':
+				attributes = { x1: 0, y1: 0, x2: 0, y2: height };
+				break;
+			case 'linear135':
+				const halfDiagonal = (width + height) / 2;
+				const offsetX = (width - halfDiagonal) / 2;
+				const offsetY = (height - halfDiagonal) / 2;
+				attributes = {
+					x1: offsetX,
+					y1: offsetY,
+					x2: width - offsetX,
+					y2: height - offsetY,
+				};
+				break;
+			case 'radialCenter':
+				attributes = calculateRadialAttributes(width / 2, height / 2);
+				break;
+			case 'radialTopLeft':
+				attributes = calculateRadialAttributes(0, 0, 2);
+				break;
+		}
+
+		return { name, attrs: { ...baseAttrs, ...attributes } };
+	});
+</script>
+
+<!-- NOTE: <svelte:element this={tag.name}> making lowercase tag like lineargradient -->
+{#if tag.name === 'linearGradient'}
+	<linearGradient {...tag.attrs}>
+		{#each gradient.colors as color, index}
+			<stop
+				stop-color={color.slice(0, 7)}
+				stop-opacity={hexToNumber(color.slice(-2))}
+				offset={Math.round((index / (gradient.colors.length - 1)) * 1000) / 1000}
+			></stop>
+		{/each}
+	</linearGradient>
+{:else}
+	<radialGradient {...tag.attrs}>
+		{#each gradient.colors as color, index}
+			<stop
+				stop-color={color.slice(0, 7)}
+				stop-opacity={hexToNumber(color.slice(-2))}
+				offset={Math.round((index / (gradient.colors.length - 1)) * 1000) / 1000}
+			></stop>
+		{/each}
+	</radialGradient>
+{/if}

package/dist/components/presentation-editor/color-indicator/color-indicator-gradient-def.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    id: string;
+    color: string;
+    width: number;
+    height: number;
+}
+declare const ColorIndicatorGradientDef: import("svelte").Component<Props, {}, "">;
+type ColorIndicatorGradientDef = ReturnType<typeof ColorIndicatorGradientDef>;
+export default ColorIndicatorGradientDef;

package/dist/components/presentation-editor/color-indicator/color-indicator-gradient.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { generateId } from '../../../utils.js';
+	import ColorGradientDef from './color-indicator-gradient-def.svelte';
+
+	interface Props {
+		color: string;
+		width: number;
+		height: number;
+	}
+
+	const { color, width, height }: Props = $props();
+
+	const gradientId = generateId();
+</script>
+
+<svg class="h-full w-full" viewBox="0 0 {width} {height}">
+	<defs>
+		<ColorGradientDef id={gradientId} {color} {width} {height} />
+	</defs>
+	<rect x="0" y="0" {width} {height} fill="url(#{gradientId})"></rect>
+</svg>

package/dist/components/presentation-editor/color-indicator/color-indicator-gradient.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    color: string;
+    width: number;
+    height: number;
+}
+declare const ColorIndicatorGradient: import("svelte").Component<Props, {}, "">;
+type ColorIndicatorGradient = ReturnType<typeof ColorIndicatorGradient>;
+export default ColorIndicatorGradient;

package/dist/components/presentation-editor/color-indicator/color-indicator.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import Gradient from './color-indicator-gradient.svelte';
+
+	interface Props {
+		color: string;
+	}
+
+	let { color }: Props = $props();
+
+	let isGradient = $derived(~color.indexOf(':'));
+
+	let ref = $state<HTMLElement | null>(null);
+</script>
+
+{#if isGradient}
+	<div bind:this={ref} class="absolute inset-0">
+		{#if ref}
+			<Gradient {color} width={ref.clientWidth} height={ref.clientHeight} />
+		{/if}
+	</div>
+{:else}
+	<div class="absolute inset-0" style:background-color={color}></div>
+{/if}

package/dist/components/presentation-editor/color-indicator/color-indicator.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    color: string;
+}
+declare const ColorIndicator: import("svelte").Component<Props, {}, "">;
+type ColorIndicator = ReturnType<typeof ColorIndicator>;
+export default ColorIndicator;

package/dist/components/presentation-editor/color-indicator/index.d.ts

@@ -0,0 +1,4 @@
+import Root from './color-indicator.svelte';
+import Gradient from './color-indicator-gradient.svelte';
+import GradientDef from './color-indicator-gradient-def.svelte';
+export { Root, Gradient, GradientDef, Root as ColorIndicator, Gradient as ColorIndicatorGradient, GradientDef as ColorIndicatorGradientDef, };

package/dist/components/presentation-editor/color-indicator/index.js

@@ -0,0 +1,6 @@
+import Root from './color-indicator.svelte';
+import Gradient from './color-indicator-gradient.svelte';
+import GradientDef from './color-indicator-gradient-def.svelte';
+export { Root, Gradient, GradientDef, 
+//
+Root as ColorIndicator, Gradient as ColorIndicatorGradient, GradientDef as ColorIndicatorGradientDef, };

package/dist/components/presentation-editor/cursor-tooltip.svelte

@@ -12,7 +12,7 @@
 		style:transform="translate({tooltip.x}px, {tooltip.y}px)"
 	>
 		<Tooltip.Provider>
-			<Tooltip.Root controlledOpen open={true}>
+			<Tooltip.Root open={true}>
 				<Tooltip.Trigger class="absolute"></Tooltip.Trigger>
 				<Tooltip.Content
 					side="bottom"

package/dist/components/presentation-editor/dragged.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { HtmlContent } from './layers/types/html/index.js';
 	import { getPresentationEditorContext } from './presentation-editor.svelte.js';
 
 	const editor = getPresentationEditorContext();
@@ -8,24 +9,33 @@
 	{@const dragged = editor.dragged}
 	{@const translateX = dragged.x - dragged.offsetX}
 	{@const translateY = dragged.y - dragged.offsetY}
+	{@const scale =
+		dragged.customScale ?? (dragged.inside ? dragged.scale * editor.zoom : dragged.initialScale)}
 	<div
 		class="pointer-events-none fixed left-0 top-0 z-10"
 		style:opacity={dragged.hidden ? 0 : null}
 		style:transform="translate({translateX}px, {translateY}px)"
 	>
 		<div
-			class="origin-top-left opacity-50 transition-transform"
-			style:transform="scale({dragged.scale || dragged.initialScale})"
+			class="origin-top-left transition-transform"
+			style:transform="scale({scale})"
+			style:opacity={dragged.opacity}
 		>
-			<img
-				crossorigin="anonymous"
-				src={dragged.image.src}
-				alt=""
-				class="pointer-events-none max-w-max bg-contain bg-center bg-no-repeat"
-				draggable="false"
-				style:width="{dragged.image.width}px"
-				style:height="{dragged.image.height}px"
-			/>
+			<div bind:this={dragged.ref}>
+				{#if 'image' in dragged}
+					<img
+						crossorigin="anonymous"
+						src={dragged.image.src}
+						alt=""
+						class="max-w-max bg-contain bg-center bg-no-repeat"
+						draggable="false"
+						style:width="{dragged.image.width}px"
+						style:height="{dragged.image.height}px"
+					/>
+				{:else}
+					<HtmlContent html={dragged.html} />
+				{/if}
+			</div>
 		</div>
 	</div>
 {/if}

package/dist/components/presentation-editor/fonts.d.ts

@@ -0,0 +1,3 @@
+import type { Fonts } from './types.js';
+declare const defaultFonts: Fonts;
+export { defaultFonts };