@peteai/presentation-editor 0.0.7 → 0.0.8

package/dist/components/editor/layers/types/image/controls/image-rotate-control/index.d.ts

@@ -0,0 +1,2 @@
+import Root from './image-rotate-control.svelte';
+export { Root, Root as ImageRotateControl, };

package/dist/components/editor/layers/types/image/controls/image-rotate-control/index.js

@@ -0,0 +1,4 @@
+import Root from './image-rotate-control.svelte';
+export { Root, 
+//
+Root as ImageRotateControl, };

package/dist/components/editor/layers/types/image/controls/image-scale-control/image-scale-control.svelte

@@ -0,0 +1,154 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from 'tailwind-variants';
+	import type { ImageLayer } from '../../../../../types.js';
+
+	const cornerScaleControlVariants = tv({
+		slots: {
+			base: 'group absolute w-8 h-8 flex items-center justify-center pointer-events-none',
+			handler: 'absolute w-4 h-4 pointer-events-auto',
+			cursor: '',
+		},
+		variants: {
+			origin: {
+				'bottom-right': {
+					base: '-top-4 -left-4',
+					handler: '-translate-x-0.5 -translate-y-0.5 rounded-tl-full',
+					cursor: 'cursor-nwse-resize',
+				},
+				'bottom-left': {
+					base: '-top-4 -right-4',
+					handler: 'translate-x-0.5 -translate-y-0.5 rounded-tr-full',
+					cursor: 'cursor-nesw-resize',
+				},
+				'top-right': {
+					base: '-bottom-4 -left-4',
+					handler: '-translate-x-0.5 translate-y-0.5 rounded-bl-full',
+					cursor: 'cursor-nesw-resize',
+				},
+				'top-left': {
+					base: '-bottom-4 -right-4',
+					handler: 'translate-x-0.5 translate-y-0.5 rounded-br-full',
+					cursor: 'cursor-nwse-resize',
+				},
+			},
+		},
+	});
+
+	type Variants = VariantProps<typeof cornerScaleControlVariants>;
+
+	interface Props extends Omit<Variants, 'origin'>, Required<Pick<Variants, 'origin'>> {
+		layer: ImageLayer;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from '../../../../../../../utils.js';
+	import {
+		getImageLayerBboxRelativeToImageCenter,
+		calculateNewPosition,
+		degToRad,
+		rotatePoint,
+	} from '../../../../utils.js';
+	import { getEditorContext } from '../../../../../editor.svelte.js';
+
+	let { origin, layer }: Props = $props();
+
+	const type = `${origin}-origin-scale`;
+
+	const editor = getEditorContext();
+
+	let initial: {
+		clientX: number;
+		clientY: number;
+		layer: ImageLayer;
+		minScaleFactor: number;
+	} | null = null;
+
+	const { base, handler, cursor } = cornerScaleControlVariants({ origin });
+
+	const onMouseDown = (e: MouseEvent) => {
+		if (e.button !== 0) return;
+		e.preventDefault();
+		e.stopPropagation();
+		console.log(type, 'mousedown', e);
+
+		const { minX, minY, maxX, maxY } = getImageLayerBboxRelativeToImageCenter(layer);
+
+		const minScaleFactor = Math.max(
+			~origin.indexOf('left') ? 0.5 + maxX / layer.image.width : 0.5 - minX / layer.image.width,
+			~origin.indexOf('top') ? 0.5 + maxY / layer.image.height : 0.5 - minY / layer.image.height,
+		);
+
+		initial = {
+			clientX: e.clientX,
+			clientY: e.clientY,
+			layer: $state.snapshot(layer),
+			minScaleFactor,
+		};
+		addEventListener('mousemove', onMouseMove);
+		addEventListener('mouseup', onMouseUp);
+	};
+
+	const onMouseUp = (e: MouseEvent) => {
+		console.log(type, 'mouseup', e);
+		removeEventListener('mousemove', onMouseMove);
+		removeEventListener('mouseup', onMouseUp);
+		initial = null;
+	};
+
+	const onMouseMove = (e: MouseEvent) => {
+		if (!initial) return;
+
+		const { x, y, width, height, scale, rotate, image, imageRotate, offsetX, offsetY } =
+			initial.layer;
+		const imageX = x + offsetX * scale;
+		const imageY = y + offsetY * scale;
+		const rad = degToRad(rotate + imageRotate);
+		const xDiff = (e.clientX - initial.clientX) / editor.zoom;
+		const yDiff = (e.clientY - initial.clientY) / editor.zoom;
+		const adjustedXDiff = xDiff * Math.cos(rad) + yDiff * Math.sin(rad);
+		const adjustedYDiff = -xDiff * Math.sin(rad) + yDiff * Math.cos(rad);
+
+		// Define the new x2 and y2 coordinates based on the variant (corner being dragged)
+		const x2 = imageX + image.width * scale + adjustedXDiff * (~origin.indexOf('left') ? 1 : -1);
+		const y2 = imageY + image.height * scale + adjustedYDiff * (~origin.indexOf('top') ? 1 : -1);
+
+		// Calculate the slope of the rectangle
+		const slope = image.height / image.width;
+
+		// Calculate the x-coordinate of the intersection point
+		const xIntersect = (y2 + x2 / slope - imageY + imageX * slope) / (slope + 1 / slope);
+
+		let scaleFactor = Math.max(
+			(xIntersect - imageX) / (image.width * scale),
+			initial.minScaleFactor,
+		);
+
+		if (scaleFactor > 0) {
+			const { newX, newY } = calculateNewPosition(
+				origin,
+				{ ...image, x: offsetX, y: offsetY, rotate: imageRotate, scale: 1 },
+				image.width * scaleFactor,
+				image.height * scaleFactor,
+			);
+
+			const newProps = {
+				scale: scale * scaleFactor,
+				width: width / scaleFactor,
+				height: height / scaleFactor,
+				offsetX: newX / scaleFactor,
+				offsetY: newY / scaleFactor,
+			};
+			Object.assign(layer, newProps);
+		}
+	};
+</script>
+
+<div class={base()}>
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div class={cn(handler(), cursor())} onmousedown={onMouseDown}></div>
+	<div
+		class="group-hover:bg-primary group-active:bg-primary h-3 w-3 rounded-full bg-white transition-colors"
+		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/editor/layers/types/image/controls/image-scale-control/image-scale-control.svelte.d.ts

@@ -0,0 +1,91 @@
+import { type VariantProps } from 'tailwind-variants';
+import type { ImageLayer } from '../../../../../types.js';
+declare const cornerScaleControlVariants: import("tailwind-variants").TVReturnType<{
+    origin: {
+        'bottom-right': {
+            base: string;
+            handler: string;
+            cursor: string;
+        };
+        'bottom-left': {
+            base: string;
+            handler: string;
+            cursor: string;
+        };
+        'top-right': {
+            base: string;
+            handler: string;
+            cursor: string;
+        };
+        'top-left': {
+            base: string;
+            handler: string;
+            cursor: string;
+        };
+    };
+}, {
+    base: string;
+    handler: string;
+    cursor: string;
+}, undefined, {
+    origin: {
+        'bottom-right': {
+            base: string;
+            handler: string;
+            cursor: string;
+        };
+        'bottom-left': {
+            base: string;
+            handler: string;
+            cursor: string;
+        };
+        'top-right': {
+            base: string;
+            handler: string;
+            cursor: string;
+        };
+        'top-left': {
+            base: string;
+            handler: string;
+            cursor: string;
+        };
+    };
+}, {
+    base: string;
+    handler: string;
+    cursor: string;
+}, import("tailwind-variants").TVReturnType<{
+    origin: {
+        'bottom-right': {
+            base: string;
+            handler: string;
+            cursor: string;
+        };
+        'bottom-left': {
+            base: string;
+            handler: string;
+            cursor: string;
+        };
+        'top-right': {
+            base: string;
+            handler: string;
+            cursor: string;
+        };
+        'top-left': {
+            base: string;
+            handler: string;
+            cursor: string;
+        };
+    };
+}, {
+    base: string;
+    handler: string;
+    cursor: string;
+}, undefined, unknown, unknown, undefined>>;
+type Variants = VariantProps<typeof cornerScaleControlVariants>;
+interface Props extends Omit<Variants, 'origin'>, Required<Pick<Variants, 'origin'>> {
+    layer: ImageLayer;
+}
+declare const ImageScaleControl: import("svelte").Component<Props, {}, "">;
+type ImageScaleControl = ReturnType<typeof ImageScaleControl>;
+export default ImageScaleControl;

package/dist/components/editor/layers/types/image/controls/image-scale-control/index.d.ts

@@ -0,0 +1,2 @@
+import Root from './image-scale-control.svelte';
+export { Root, Root as ImageScaleControl, };

package/dist/components/editor/layers/types/image/controls/image-scale-control/index.js

@@ -0,0 +1,4 @@
+import Root from './image-scale-control.svelte';
+export { Root, 
+//
+Root as ImageScaleControl, };

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

@@ -32,7 +32,7 @@
 		layer.flipX || layer.flipY ? `scale(${layer.flipX ? -1 : 1}, ${layer.flipY ? -1 : 1})` : null,
 	);
 
-	let cornderRadius = $derived(layer.cornerRadius * thumbScale);
+	let cornderRadius = $derived(Math.min(layer.cornerRadius * thumbScale, width / 2, height / 2));
 
 	const bezier = 0.447715;
 	let roundedClipPath = $derived(
@@ -51,7 +51,7 @@
 			class="relative"
 			style:width="{layer.image.width * scale}px"
 			style:height="{layer.image.height * scale}px"
-			style:transform={`translate(${-layer.offsetX * scale}px, ${-layer.offsetY * scale}px)`}
+			style:transform={`translate(${layer.offsetX * scale}px, ${layer.offsetY * scale}px) rotate(${layer.imageRotate}deg)`}
 		>
 			{#if imageLoaded}
 				<img
@@ -85,7 +85,7 @@
 						<ColorIndicatorGradientDef id={gradientId} color={borderColor} {width} {height} />
 					{/if}
 					<clipPath id={layerBorderId}>
-						<path d={path}></path>
+						<path d={roundedClipPath || path}></path>
 					</clipPath>
 				</defs>
 				<path

package/dist/components/editor/layers/types/image/image-layer-crop.svelte

@@ -0,0 +1,182 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import type { ImageLayer } from '../../../types.js';
+	import { getEditorContext } from '../../../editor.svelte.js';
+	import ImageLayerContent from './image-layer-content.svelte';
+	import { ImageScaleControl } from './controls/image-scale-control/index.js';
+	import { ImageRotateControl } from './controls/image-rotate-control/index.js';
+	import { getImageLayerBboxRelativeToImageCenter, degToRad, rotatePoint } from '../../utils.js';
+
+	interface Props {
+		layer: ImageLayer;
+		viewportRef: HTMLDivElement;
+		wrapperRef: HTMLDivElement;
+		pageRef: HTMLDivElement;
+	}
+
+	const { layer, viewportRef, wrapperRef, pageRef }: Props = $props();
+
+	const editor = getEditorContext();
+
+	let overlayRef: HTMLDivElement | null = $state(null);
+
+	let imageTransform = $derived.by(() => {
+		const rad = degToRad(layer.rotate);
+
+		const layerCenter = {
+			x: layer.x + (layer.width * layer.scale) / 2,
+			y: layer.y + (layer.height * layer.scale) / 2,
+		};
+
+		const relativeCenter = {
+			x: layer.x + (layer.offsetX + layer.image.width / 2) * layer.scale,
+			y: layer.y + (layer.offsetY + layer.image.height / 2) * layer.scale,
+		};
+
+		const center = rotatePoint(rad, relativeCenter, layerCenter);
+
+		return {
+			x: center.x - (layer.image.width * layer.scale) / 2,
+			y: center.y - (layer.image.height * layer.scale) / 2,
+			width: layer.image.width,
+			height: layer.image.height,
+			rotate: layer.imageRotate + layer.rotate,
+			scale: layer.scale,
+		};
+	});
+
+	const updateOverlay = () => {
+		if (overlayRef) {
+			const viewportRect = viewportRef.getBoundingClientRect();
+			const wrapperRect = wrapperRef.getBoundingClientRect();
+			const pageRect = pageRef.getBoundingClientRect();
+
+			overlayRef.style.left = `${viewportRect.left - viewportRef.scrollLeft - pageRect.left}px`;
+			overlayRef.style.top = `${viewportRect.top - viewportRef.scrollTop - pageRect.top}px`;
+			overlayRef.style.width = `${wrapperRect.width > viewportRect.width ? wrapperRect.width : viewportRect.width}px`;
+			overlayRef.style.height = `${wrapperRect.height > viewportRect.height ? wrapperRect.height : viewportRect.height}px`;
+		}
+	};
+
+	$effect(() => {
+		editor.zoom;
+		updateOverlay();
+	});
+
+	onMount(() => {
+		const observer = new ResizeObserver(updateOverlay);
+
+		if (viewportRef) observer.observe(viewportRef);
+
+		return () => observer.disconnect();
+	});
+
+	let initial: {
+		clientX: number;
+		clientY: number;
+		layer: ImageLayer;
+		minImageXDiff: number;
+		minImageYDiff: number;
+		maxImageXDiff: number;
+		maxImageYDiff: number;
+	} | null = null;
+
+	const onMouseDown = (e: MouseEvent) => {
+		e.preventDefault();
+		e.stopPropagation();
+
+		const { minX, minY, maxX, maxY } = getImageLayerBboxRelativeToImageCenter(layer);
+
+		initial = {
+			clientX: e.clientX,
+			clientY: e.clientY,
+			layer: $state.snapshot(layer),
+			minImageXDiff: maxX - layer.image.width / 2,
+			minImageYDiff: maxY - layer.image.height / 2,
+			maxImageXDiff: layer.image.width / 2 + minX,
+			maxImageYDiff: layer.image.height / 2 + minY,
+		};
+		addEventListener('mousemove', onMouseMove);
+		addEventListener('mouseup', onMouseUp);
+	};
+
+	const onMouseUp = (e: MouseEvent) => {
+		removeEventListener('mousemove', onMouseMove);
+		removeEventListener('mouseup', onMouseUp);
+		initial = null;
+	};
+
+	const onMouseMove = (e: MouseEvent) => {
+		if (!initial) return;
+		const { scale, rotate, imageRotate, offsetX, offsetY } = initial.layer;
+
+		const xDiff = (e.clientX - initial.clientX) / scale / editor.zoom;
+		const yDiff = (e.clientY - initial.clientY) / scale / editor.zoom;
+
+		const imageRad = degToRad(rotate + imageRotate);
+
+		const imageXDiff2 = Math.min(
+			Math.max(xDiff * Math.cos(imageRad) + yDiff * Math.sin(imageRad), initial.minImageXDiff),
+			initial.maxImageXDiff,
+		);
+		const imageYDiff2 = Math.min(
+			Math.max(-xDiff * Math.sin(imageRad) + yDiff * Math.cos(imageRad), initial.minImageYDiff),
+			initial.maxImageYDiff,
+		);
+
+		const rad = degToRad(-imageRotate);
+
+		const adjustedXDiff = imageXDiff2 * Math.cos(rad) + imageYDiff2 * Math.sin(rad);
+		const adjustedYDiff = -imageXDiff2 * Math.sin(rad) + imageYDiff2 * Math.cos(rad);
+
+		Object.assign(layer, {
+			offsetX: offsetX + adjustedXDiff,
+			offsetY: offsetY + adjustedYDiff,
+		});
+	};
+</script>
+
+<div class="select-none">
+	<div bind:this={overlayRef} class="absolute bg-slate-500/50"></div>
+	<div
+		class="absolute opacity-50"
+		style:width={`${layer.image.width * layer.scale * editor.zoom}px`}
+		style:height={`${layer.image.height * layer.scale * editor.zoom}px`}
+		style:transform={`translate(${imageTransform.x * editor.zoom}px, ${imageTransform.y * editor.zoom}px) rotate(${imageTransform.rotate}deg)`}
+	>
+		<img class="pointer-events-none h-full w-full" src={layer.image.src} alt="" />
+	</div>
+	<div
+		class="absolute overflow-hidden"
+		style:width={`${layer.width * layer.scale * editor.zoom}px`}
+		style:height={`${layer.height * layer.scale * editor.zoom}px`}
+		style:transform={`translate(${layer.x * editor.zoom}px, ${layer.y * editor.zoom}px) rotate(${layer.rotate}deg)`}
+	>
+		<ImageLayerContent {layer} thumbScale={editor.zoom} />
+	</div>
+	<div class="pointer-events-auto">
+		<div
+			class="shadow-inner-1 outline-primary/50 pointer-events-none absolute outline outline-2"
+			style:width={`${layer.image.width * layer.scale * editor.zoom}px`}
+			style:height={`${layer.image.height * layer.scale * editor.zoom}px`}
+			style:transform={`translate(${imageTransform.x * editor.zoom}px, ${imageTransform.y * editor.zoom}px) rotate(${imageTransform.rotate}deg)`}
+		>
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<div
+				class="pointer-events-auto absolute -inset-3 cursor-move"
+				onmousedown={onMouseDown}
+			></div>
+			<ImageScaleControl origin="bottom-right" {layer} />
+			<ImageScaleControl origin="bottom-left" {layer} />
+			<ImageScaleControl origin="top-right" {layer} />
+			<ImageScaleControl origin="top-left" {layer} />
+			<ImageRotateControl {pageRef} {layer} />
+		</div>
+		<div
+			class="outline-primary pointer-events-none absolute outline outline-2"
+			style:width={`${layer.width * layer.scale * editor.zoom}px`}
+			style:height={`${layer.height * layer.scale * editor.zoom}px`}
+			style:transform={`translate(${layer.x * editor.zoom}px, ${layer.y * editor.zoom}px) rotate(${layer.rotate}deg)`}
+		></div>
+	</div>
+</div>

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

@@ -0,0 +1,10 @@
+import type { ImageLayer } from '../../../types.js';
+interface Props {
+    layer: ImageLayer;
+    viewportRef: HTMLDivElement;
+    wrapperRef: HTMLDivElement;
+    pageRef: HTMLDivElement;
+}
+declare const ImageLayerCrop: import("svelte").Component<Props, {}, "">;
+type ImageLayerCrop = ReturnType<typeof ImageLayerCrop>;
+export default ImageLayerCrop;

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

@@ -12,6 +12,8 @@
 
 	const editor = getEditorContext();
 
+	let isCropping = $derived(editor.imageCropLayer?.id === layer.id);
+
 	let layerSubstitute: ImageLayer | null = $state(null);
 
 	let ref: HTMLDivElement;
@@ -19,6 +21,7 @@
 	const buildImageDropChanges = (image: Image) => {
 		return {
 			image,
+			imageRotate: 0,
 			...calculateImageCover(image, {
 				width: layer.width * layer.scale,
 				height: layer.height * layer.scale,
@@ -89,12 +92,25 @@
 		}
 		layerSubstitute = null;
 	};
+
+	const onDoubleClick = () => {
+		if (editor.activeLayers.length > 1) return;
+		editor.imageCropLayer = $state.snapshot(
+			editor.activeGroupAndChild
+				? (editor.getAbsoluteGroupLayers(editor.activeGroupAndChild.groupLayer, [
+						layer,
+					])[0] as ImageLayer)
+				: layer,
+		);
+	};
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	bind:this={ref}
 	class="h-full w-full"
+	style:opacity={isCropping ? 0 : null}
+	ondblclick={onDoubleClick}
 	ondragenter={onDragEnter}
 	ondragover={onDragOver}
 	ondragleave={onDragLeave}

package/dist/components/editor/layers/types/image/index.d.ts

@@ -1,3 +1,4 @@
 import Root from './image-layer.svelte';
 import ImageLayerContent from './image-layer-content.svelte';
-export { Root, Root as ImageLayer, ImageLayerContent };
+import ImageLayerCrop from './image-layer-crop.svelte';
+export { Root, Root as ImageLayer, ImageLayerContent, ImageLayerCrop };

package/dist/components/editor/layers/types/image/index.js

@@ -1,3 +1,4 @@
 import Root from './image-layer.svelte';
 import ImageLayerContent from './image-layer-content.svelte';
-export { Root, Root as ImageLayer, ImageLayerContent };
+import ImageLayerCrop from './image-layer-crop.svelte';
+export { Root, Root as ImageLayer, ImageLayerContent, ImageLayerCrop };

package/dist/components/editor/layers/types/text/extensions/list-item/list-item.js

@@ -28,7 +28,6 @@ export const ListItem = TiptapNode.create({
     addCommands() {
         return {
             splitListItem: (typeOrName, overrideAttrs) => ({ editor, tr, state, dispatch }) => {
-                console.log('splitListItem overwritten');
                 const type = getNodeType(typeOrName, state.schema);
                 const { $from, $to } = state.selection;
                 // @ts-ignore
@@ -160,7 +159,6 @@ export const ListItem = TiptapNode.create({
                         // Check if selection is in first list item
                         const firstListItem = findParentNodeClosestToPos(tr.selection.$from, (node) => node.type.name === this.name);
                         if (firstListItem && newParentList.node.firstChild === firstListItem.node) {
-                            console.log('firstListItem', firstListItem);
                             const attrs = {
                                 ...newParentList.node.attrs,
                                 ...oldParentList.node.attrs,

package/dist/components/editor/layers/utils.d.ts

@@ -12,13 +12,6 @@ export type Transform = {
     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, groupScale?: number) => Transform;
 export declare const calculateNewPosition: (origin: Origin, transform: Transform, newWidth: number, newHeight: number) => {
     newX: number;
@@ -31,7 +24,7 @@ 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 isRotatedVertically(rotate: number): boolean;
 interface ScaleResult {
@@ -51,9 +44,9 @@ export declare function calculateRelativeRects(bbox: Transform, absoluteRects: T
     x: number;
     y: number;
     rotate: number;
+    scale: number;
     width: number;
     height: number;
-    scale: number;
 }[];
 export declare function calculateAbsoluteRects(bbox: Transform, rects: Transform[]): Transform[];
 export declare const checkPolygonsIntersect: (a: {
@@ -68,6 +61,7 @@ export declare function calculateImageCover(image: {
     width: number;
     height: number;
     rotate?: number | null;
+    imageRotate?: number | null;
 }, bbox: {
     width: number;
     height: number;
@@ -81,4 +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 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 {};