@pixerate/editor-svelte 0.3.12 → 0.5.0

package/src/canvas/__tests__/canvas-layout.test.ts

@@ -0,0 +1,75 @@
+import { describe, it, expect } from 'vitest';
+import {
+	getCenteredNodePosition,
+	centerNodes,
+	getLayoutedNodes
+} from '../createCanvasLayout.js';
+import type { CanvasNode, CanvasEdge } from '../types.js';
+
+describe('createCanvasLayout & Geometry Helpers', () => {
+	it('calculates centered node position correctly', () => {
+		const screenDimensions = { width: 1000, height: 800 };
+		const screenToFlowPosition = (pos: { x: number; y: number }) => ({ x: pos.x, y: pos.y });
+
+		const pos = getCenteredNodePosition(200, 100, screenToFlowPosition, screenDimensions);
+		// Center of 1000x800 is (500, 400). Top-left of 200x100 is (500 - 100, 400 - 50) = (400, 350)
+		expect(pos.x).toBe(400);
+		expect(pos.y).toBe(350);
+	});
+
+	it('centers multiple nodes using centerNodes', () => {
+		const screenDimensions = { width: 1000, height: 800 };
+		const screenToFlowPosition = (pos: { x: number; y: number }) => pos;
+
+		const nodes: CanvasNode[] = [
+			{ id: '1', position: { x: 0, y: 0 }, data: {} },
+			{ id: '2', position: { x: 200, y: 100 }, data: {} }
+		];
+
+		const getNodesBounds = () => ({ x: 0, y: 0, width: 300, height: 200 });
+
+		const centered = centerNodes(nodes, screenToFlowPosition, getNodesBounds, screenDimensions);
+
+		// Center of viewport is (500, 400). Upper left for 300x200 bounding box is (350, 300).
+		// DeltaX = 350 - 0 = 350, DeltaY = 300 - 0 = 300.
+		expect(centered[0].position.x).toBe(350);
+		expect(centered[0].position.y).toBe(300);
+		expect(centered[1].position.x).toBe(550);
+		expect(centered[1].position.y).toBe(400);
+	});
+
+	it('computes Dagre hierarchical layout positions for nodes and edges', () => {
+		const nodes: CanvasNode[] = [
+			{ id: 'root', position: { x: 0, y: 0 }, data: {}, measured: { width: 100, height: 100 } },
+			{ id: 'child1', position: { x: 0, y: 0 }, data: {}, measured: { width: 100, height: 100 } },
+			{ id: 'child2', position: { x: 0, y: 0 }, data: {}, measured: { width: 100, height: 100 } }
+		];
+
+		const edges: CanvasEdge[] = [
+			{ id: 'e1', source: 'root', target: 'child1' },
+			{ id: 'e2', source: 'root', target: 'child2' }
+		];
+
+		const getNodesBounds = () => ({ x: 100, y: 100, width: 400, height: 400 });
+
+		const layouted = getLayoutedNodes(nodes, edges, getNodesBounds, {
+			direction: 'LR',
+			ranksep: 80,
+			nodesep: 40
+		});
+
+		expect(layouted).toHaveLength(3);
+
+		const root = layouted.find((n) => n.id === 'root')!;
+		const child1 = layouted.find((n) => n.id === 'child1')!;
+		const child2 = layouted.find((n) => n.id === 'child2')!;
+
+		// Root should be to the left of child nodes in 'LR' layout
+		expect(root.position.x).toBeLessThan(child1.position.x);
+		expect(root.position.x).toBeLessThan(child2.position.x);
+
+		// Target and source positions should be configured for horizontal layout
+		expect(root.sourcePosition).toBe('right');
+		expect(child1.targetPosition).toBe('left');
+	});
+});

package/src/canvas/__tests__/canvas-shortcuts.test.ts

@@ -0,0 +1,59 @@
+import { describe, it, expect, vi } from 'vitest';
+import { createCanvasShortcuts } from '../createCanvasShortcuts.js';
+import type { CanvasNode } from '../types.js';
+
+describe('createCanvasShortcuts', () => {
+	it('attaches listener, handles hotkeys, and cleans up', () => {
+		const target = new EventTarget();
+		const onDelete = vi.fn();
+		const onDuplicate = vi.fn();
+		const onSelectAll = vi.fn();
+
+		const selectedNodes: CanvasNode[] = [{ id: 'node-1', position: { x: 0, y: 0 }, data: {} }];
+
+		const destroy = createCanvasShortcuts({
+			targetElement: target as unknown as HTMLElement,
+			getSelectedNodes: () => selectedNodes,
+			onDelete,
+			onDuplicate,
+			onSelectAll
+		});
+
+		// Trigger Backspace -> onDelete
+		const deleteEvent = new CustomEvent('keydown', { cancelable: true });
+		Object.assign(deleteEvent, { key: 'Backspace' });
+		target.dispatchEvent(deleteEvent);
+
+		expect(onDelete).toHaveBeenCalledWith(selectedNodes);
+
+		// Trigger Meta + D -> onDuplicate
+		const dupEvent = new CustomEvent('keydown', { cancelable: true });
+		Object.assign(dupEvent, { key: 'd', metaKey: true });
+		target.dispatchEvent(dupEvent);
+
+		expect(onDuplicate).toHaveBeenCalledWith(selectedNodes);
+
+		// Trigger Meta + A -> onSelectAll
+		const allEvent = new CustomEvent('keydown', { cancelable: true });
+		Object.assign(allEvent, { key: 'a', metaKey: true });
+		target.dispatchEvent(allEvent);
+
+		expect(onSelectAll).toHaveBeenCalledTimes(1);
+
+		// Trigger shortcut while targeting an input -> should be ignored
+		const inputEl = { tagName: 'INPUT' } as unknown as HTMLElement;
+		const ignoredEvent = new CustomEvent('keydown', { cancelable: true });
+		Object.defineProperty(ignoredEvent, 'target', { value: inputEl });
+		Object.assign(ignoredEvent, { key: 'Backspace' });
+		target.dispatchEvent(ignoredEvent);
+
+		expect(onDelete).toHaveBeenCalledTimes(1); // Not called again
+
+		// Destroy listeners
+		destroy();
+
+		// Dispatching after destroy should do nothing
+		target.dispatchEvent(deleteEvent);
+		expect(onDelete).toHaveBeenCalledTimes(1);
+	});
+});

package/src/canvas/createCanvasClipboard.svelte.ts

@@ -0,0 +1,219 @@
+import { tick } from 'svelte';
+import type { XYPosition } from '@xyflow/svelte';
+import type { CanvasNode, CanvasEdge, CanvasClipboardPayload } from './types.js';
+
+/**
+ * Checks if an event originated from a text input, textarea, contenteditable element, or rich editor.
+ */
+export function isEventFromTextInput(event: Event | { target: EventTarget | null }): boolean {
+	const target = event.target as HTMLElement | null;
+	if (!target) return false;
+	if (
+		target.tagName === 'INPUT' ||
+		target.tagName === 'TEXTAREA' ||
+		target.tagName === 'SELECT' ||
+		target.isContentEditable ||
+		target.closest?.('[contenteditable="true"]') ||
+		target.closest?.('.ProseMirror')
+	) {
+		return true;
+	}
+	return false;
+}
+
+/**
+ * Validates that an object conforms to minimal CanvasNode shape.
+ */
+export function isValidCanvasNode(obj: unknown): obj is CanvasNode {
+	return (
+		typeof obj === 'object' &&
+		obj !== null &&
+		'id' in obj &&
+		typeof (obj as any).id === 'string' &&
+		'position' in obj &&
+		typeof (obj as any).position === 'object' &&
+		(obj as any).position !== null &&
+		'x' in (obj as any).position &&
+		'y' in (obj as any).position
+	);
+}
+
+/**
+ * Checks if a string is a valid HTTP/HTTPS URL.
+ */
+export function isValidUrl(url: string): boolean {
+	try {
+		const parsed = new URL(url);
+		return parsed.protocol === 'http:' || parsed.protocol === 'https:';
+	} catch {
+		return false;
+	}
+}
+
+export interface CreateCanvasClipboardOptions<
+	TNode extends CanvasNode = CanvasNode,
+	TEdge extends CanvasEdge = CanvasEdge
+> {
+	onPasteNodes?: (nodes: TNode[], edges?: TEdge[]) => void | Promise<void>;
+	onPasteUrl?: (url: string, position?: XYPosition) => void;
+	onPasteText?: (text: string, position?: XYPosition) => void;
+	onPasteImage?: (blob: File) => void | Promise<void>;
+	screenToFlowPosition?: (position: XYPosition) => XYPosition;
+}
+
+/**
+ * Headless Svelte 5 rune managing canvas copy, cut, and paste interactions.
+ */
+export function createCanvasClipboard<
+	TNode extends CanvasNode = CanvasNode,
+	TEdge extends CanvasEdge = CanvasEdge
+>(options: CreateCanvasClipboardOptions<TNode, TEdge> = {}) {
+	function copySelectedNodes(
+		selectedNodes: TNode[],
+		connectedEdges?: TEdge[],
+		event?: ClipboardEvent
+	): boolean {
+		if (event && isEventFromTextInput(event)) {
+			return false;
+		}
+
+		if (selectedNodes.length === 0) return false;
+
+		const payload: CanvasClipboardPayload<TNode, TEdge> = {
+			version: 1,
+			nodes: selectedNodes,
+			edges: connectedEdges
+		};
+
+		const serialized = JSON.stringify(payload);
+
+		if (event?.clipboardData) {
+			event.clipboardData.setData('application/json', serialized);
+			event.clipboardData.setData('text/plain', serialized);
+			event.preventDefault();
+		} else if (typeof navigator !== 'undefined' && navigator.clipboard) {
+			navigator.clipboard.writeText(serialized).catch(() => {});
+		}
+
+		return true;
+	}
+
+	function cutSelectedNodes(
+		selectedNodes: TNode[],
+		connectedEdges?: TEdge[],
+		onRemove?: (nodes: TNode[]) => void,
+		event?: ClipboardEvent
+	): boolean {
+		if (event && isEventFromTextInput(event)) {
+			return false;
+		}
+
+		const copied = copySelectedNodes(selectedNodes, connectedEdges, event);
+		if (copied && onRemove) {
+			onRemove(selectedNodes);
+		}
+		return copied;
+	}
+
+	async function handlePasteEvent(event: ClipboardEvent): Promise<boolean> {
+		if (isEventFromTextInput(event)) {
+			return false;
+		}
+
+		const clipboardData = event.clipboardData;
+		if (!clipboardData) return false;
+
+		// 1. Check for files (images)
+		const files = clipboardData.files;
+		if (files && files.length > 0) {
+			const imageFile = Array.from(files).find((f) => f.type.startsWith('image/'));
+			if (imageFile && options.onPasteImage) {
+				event.preventDefault();
+				await options.onPasteImage(imageFile);
+				return true;
+			}
+		}
+
+		// 2. Check for serialized nodes (application/json or json in text/plain)
+		const rawJson =
+			clipboardData.getData('application/json') || clipboardData.getData('text/plain');
+
+		if (rawJson) {
+			try {
+				const parsed = JSON.parse(rawJson);
+				let rawNodes: TNode[] | undefined;
+				let rawEdges: TEdge[] | undefined;
+
+				if (Array.isArray(parsed) && parsed.every(isValidCanvasNode)) {
+					rawNodes = parsed as TNode[];
+				} else if (
+					typeof parsed === 'object' &&
+					parsed !== null &&
+					Array.isArray((parsed as any).nodes) &&
+					(parsed as any).nodes.every(isValidCanvasNode)
+				) {
+					rawNodes = (parsed as any).nodes;
+					rawEdges = (parsed as any).edges;
+				}
+
+				if (rawNodes && rawNodes.length > 0) {
+					event.preventDefault();
+
+					// Create ID mapping for cloned nodes
+					const idMap = new Map<string, string>();
+					const newNodes: TNode[] = rawNodes.map((node) => {
+						const newId = crypto.randomUUID();
+						idMap.set(node.id, newId);
+						return {
+							...node,
+							id: newId,
+							selected: true,
+							position: {
+								x: node.position.x + 40,
+								y: node.position.y + 40
+							}
+						};
+					});
+
+					// Clone edges mapping them to the newly generated node IDs
+					const newEdges: TEdge[] | undefined = rawEdges?.map((edge) => ({
+						...edge,
+						id: crypto.randomUUID(),
+						source: idMap.get(edge.source) ?? edge.source,
+						target: idMap.get(edge.target) ?? edge.target
+					}));
+
+					if (options.onPasteNodes) {
+						await options.onPasteNodes(newNodes, newEdges);
+						await tick();
+					}
+					return true;
+				}
+			} catch {
+				// Not JSON, fall through to text/URL processing
+			}
+		}
+
+		// 3. Check for URLs or plain text
+		const text = clipboardData.getData('text/plain')?.trim();
+		if (text) {
+			if (isValidUrl(text) && options.onPasteUrl) {
+				event.preventDefault();
+				options.onPasteUrl(text);
+				return true;
+			} else if (options.onPasteText) {
+				event.preventDefault();
+				options.onPasteText(text);
+				return true;
+			}
+		}
+
+		return false;
+	}
+
+	return {
+		copySelectedNodes,
+		cutSelectedNodes,
+		handlePasteEvent
+	};
+}

package/src/canvas/createCanvasDisplacement.ts

@@ -0,0 +1,226 @@
+import dagre from '@dagrejs/dagre';
+import type { Rect, XYPosition } from '@xyflow/svelte';
+import type {
+	CanvasEdge,
+	CanvasLayoutOptions,
+	CanvasNode,
+	DirectionalDisplacementOptions
+} from './types.js';
+
+/**
+ * Calculates a bounding rectangle for a set of nodes if not provided by getNodesBounds.
+ */
+export function computeNodesBoundingBox<TNode extends CanvasNode = CanvasNode>(
+	nodes: TNode[],
+	defaultWidth = 200,
+	defaultHeight = 60
+): Rect {
+	if (nodes.length === 0) {
+		return { x: 0, y: 0, width: 0, height: 0 };
+	}
+
+	let minX = Infinity;
+	let minY = Infinity;
+	let maxX = -Infinity;
+	let maxY = -Infinity;
+
+	for (const node of nodes) {
+		const width = node.measured?.width ?? (node as any).width ?? defaultWidth;
+		const height = node.measured?.height ?? (node as any).height ?? defaultHeight;
+
+		minX = Math.min(minX, node.position.x);
+		minY = Math.min(minY, node.position.y);
+		maxX = Math.max(maxX, node.position.x + width);
+		maxY = Math.max(maxY, node.position.y + height);
+	}
+
+	return {
+		x: minX,
+		y: minY,
+		width: maxX - minX,
+		height: maxY - minY
+	};
+}
+
+/**
+ * Pure directional displacement calculation.
+ * Shifts downstream or surrounding nodes along an axis to clear space for newly inserted child nodes.
+ */
+export function calculateDirectionalDisplacement<TNode extends CanvasNode = CanvasNode>(params: {
+	existingNodes: TNode[];
+	originNode: TNode;
+	childNodes: TNode[];
+	getNodesBounds?: (nodes: TNode[]) => Rect;
+	options?: DirectionalDisplacementOptions;
+}): Map<string, XYPosition> {
+	const {
+		existingNodes,
+		originNode,
+		childNodes,
+		getNodesBounds,
+		options = {}
+	} = params;
+
+	const {
+		direction = 'right',
+		gap = 40,
+		spreadSiblingLanes = false,
+		siblingTolerance = 50
+	} = options;
+
+	const displacedMap = new Map<string, XYPosition>();
+	if (childNodes.length === 0 || existingNodes.length === 0) {
+		return displacedMap;
+	}
+
+	const childBounds = getNodesBounds
+		? getNodesBounds(childNodes)
+		: computeNodesBoundingBox(childNodes);
+
+	const originWidth = originNode.measured?.width ?? (originNode as any).width ?? 200;
+	const originHeight = originNode.measured?.height ?? (originNode as any).height ?? 60;
+
+	// The delta space required along primary axis
+	const deltaPrimary = (direction === 'right' || direction === 'left')
+		? childBounds.width + gap
+		: childBounds.height + gap;
+
+	for (const node of existingNodes) {
+		if (node.id === originNode.id) continue;
+
+		let newX = node.position.x;
+		let newY = node.position.y;
+		let moved = false;
+
+		if (direction === 'right') {
+			// Downstream nodes strictly to the right of the origin
+			if (node.position.x >= originNode.position.x + originWidth * 0.5) {
+				newX += deltaPrimary;
+				moved = true;
+			} else if (spreadSiblingLanes) {
+				// Sibling nodes occupying the same vertical space as the exploded cluster
+				const isVerticallyOverlapping =
+					node.position.y + ((node as any).height ?? 60) >= childBounds.y - gap &&
+					node.position.y <= childBounds.y + childBounds.height + gap;
+
+				if (isVerticallyOverlapping && Math.abs(node.position.x - originNode.position.x) <= siblingTolerance) {
+					const pushDirection = node.position.y >= originNode.position.y ? 1 : -1;
+					newY += pushDirection * (childBounds.height * 0.5 + gap);
+					moved = true;
+				}
+			}
+		} else if (direction === 'left') {
+			if (node.position.x <= originNode.position.x) {
+				newX -= deltaPrimary;
+				moved = true;
+			}
+		} else if (direction === 'down') {
+			if (node.position.y >= originNode.position.y + originHeight * 0.5) {
+				newY += deltaPrimary;
+				moved = true;
+			}
+		} else if (direction === 'up') {
+			if (node.position.y <= originNode.position.y) {
+				newY -= deltaPrimary;
+				moved = true;
+			}
+		}
+
+		if (moved) {
+			displacedMap.set(node.id, { x: newX, y: newY });
+		}
+	}
+
+	return displacedMap;
+}
+
+/**
+ * Pure hierarchical Dagre reflow displacement calculation.
+ * Calculates new coordinates for surrounding nodes using Dagre hierarchical layout,
+ * anchoring the origin node at its current position to eliminate layout jumping.
+ */
+export function calculateReflowDisplacement<
+	TNode extends CanvasNode = CanvasNode,
+	TEdge extends CanvasEdge = CanvasEdge
+>(params: {
+	existingNodes: TNode[];
+	existingEdges: TEdge[];
+	originNode: TNode;
+	childNodes: TNode[];
+	childEdges?: TEdge[];
+	getNodesBounds?: (nodes: TNode[]) => Rect;
+	options?: CanvasLayoutOptions;
+}): Map<string, XYPosition> {
+	const {
+		existingNodes,
+		existingEdges,
+		originNode,
+		childNodes,
+		childEdges = [],
+		options = {}
+	} = params;
+
+	const {
+		direction = 'LR',
+		ranksep = 80,
+		nodesep = 30,
+		defaultNodeWidth = 200,
+		defaultNodeHeight = 60
+	} = options;
+
+	const displacedMap = new Map<string, XYPosition>();
+	if (existingNodes.length === 0) return displacedMap;
+
+	const allNodes = [...existingNodes, ...childNodes];
+	const allEdges = [...existingEdges, ...childEdges];
+
+	const dagreGraph = new dagre.graphlib.Graph();
+	dagreGraph.setDefaultEdgeLabel(() => ({}));
+	dagreGraph.setGraph({ rankdir: direction, ranksep, nodesep });
+
+	const allNodeIds = new Set(allNodes.map((n) => n.id));
+
+	allNodes.forEach((node) => {
+		const nodeWidth = node.measured?.width ?? (node as any).width ?? defaultNodeWidth;
+		const nodeHeight = node.measured?.height ?? (node as any).height ?? defaultNodeHeight;
+		dagreGraph.setNode(node.id, { width: nodeWidth, height: nodeHeight });
+	});
+
+	allEdges.forEach((edge) => {
+		if (allNodeIds.has(edge.source) && allNodeIds.has(edge.target)) {
+			dagreGraph.setEdge(edge.source, edge.target);
+		}
+	});
+
+	dagre.layout(dagreGraph);
+
+	const dagreOrigin = dagreGraph.node(originNode.id);
+	if (!dagreOrigin) return displacedMap;
+
+	const originWidth = originNode.measured?.width ?? (originNode as any).width ?? defaultNodeWidth;
+	const originHeight = originNode.measured?.height ?? (originNode as any).height ?? defaultNodeHeight;
+
+	// Calculate offset so origin node remains anchored at its exact initial coordinates
+	const anchorOffsetX = originNode.position.x - (dagreOrigin.x - originWidth / 2);
+	const anchorOffsetY = originNode.position.y - (dagreOrigin.y - originHeight / 2);
+
+	existingNodes.forEach((node) => {
+		if (node.id === originNode.id) return;
+
+		const dagreNode = dagreGraph.node(node.id);
+		if (!dagreNode) return;
+
+		const nodeWidth = node.measured?.width ?? (node as any).width ?? defaultNodeWidth;
+		const nodeHeight = node.measured?.height ?? (node as any).height ?? defaultNodeHeight;
+
+		const targetX = dagreNode.x - nodeWidth / 2 + anchorOffsetX;
+		const targetY = dagreNode.y - nodeHeight / 2 + anchorOffsetY;
+
+		// Only include if position actually shifted
+		if (Math.abs(targetX - node.position.x) > 0.5 || Math.abs(targetY - node.position.y) > 0.5) {
+			displacedMap.set(node.id, { x: targetX, y: targetY });
+		}
+	});
+
+	return displacedMap;
+}