@pixerate/editor-svelte 0.3.11 → 0.4.0

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

@@ -0,0 +1,86 @@
+import { describe, it, expect, vi } from 'vitest';
+import {
+  createCanvasInteractions,
+  defaultSvelteFlowPreset,
+  miroCompatiblePreset,
+  restorePanelPointerEvents
+} from '../createCanvasInteractions.svelte.js';
+
+describe('createCanvasInteractions', () => {
+  it('exposes valid default presets', () => {
+    expect(defaultSvelteFlowPreset.snapGrid).toEqual([25, 25]);
+    expect(defaultSvelteFlowPreset.panOnScroll).toBe(false);
+    expect(defaultSvelteFlowPreset.selectionOnDrag).toBe(false);
+
+    expect(miroCompatiblePreset.selectionOnDrag).toBe(true);
+    expect(miroCompatiblePreset.panOnDrag).toEqual([1, 2]);
+  });
+
+  it('toggles spacebar panning mode on Space keydown and keyup', () => {
+    const target = new EventTarget();
+    const onPanModeChange = vi.fn();
+
+    const interactions = createCanvasInteractions({
+      targetElement: target as unknown as HTMLElement,
+      onPanModeChange
+    });
+
+    const cleanup = interactions.attachListeners(target as unknown as HTMLElement);
+
+    // Press Space
+    const downEvent = new KeyboardEvent('keydown', { key: ' ' });
+    target.dispatchEvent(downEvent);
+
+    expect(interactions.isSpacebarPanning).toBe(true);
+    expect(onPanModeChange).toHaveBeenCalledWith(true);
+
+    // Release Space
+    const upEvent = new KeyboardEvent('keyup', { key: ' ' });
+    target.dispatchEvent(upEvent);
+
+    expect(interactions.isSpacebarPanning).toBe(false);
+    expect(onPanModeChange).toHaveBeenCalledWith(false);
+
+    cleanup();
+  });
+
+  it('detects trackpad pinch on wheel event with ctrlKey', () => {
+    const target = new EventTarget();
+    const onTrackpadDetected = vi.fn();
+
+    const interactions = createCanvasInteractions({
+      targetElement: target as unknown as HTMLElement,
+      onTrackpadDetected
+    });
+
+    const cleanup = interactions.attachListeners(target as unknown as HTMLElement);
+
+    expect(interactions.trackpadDetected).toBe(false);
+
+    // Normal wheel without ctrlKey
+    const wheelEvent = new WheelEvent('wheel', { ctrlKey: false });
+    target.dispatchEvent(wheelEvent);
+    expect(interactions.trackpadDetected).toBe(false);
+    expect(onTrackpadDetected).not.toHaveBeenCalled();
+
+    // Trackpad pinch with ctrlKey
+    const pinchEvent = new WheelEvent('wheel', { ctrlKey: true });
+    target.dispatchEvent(pinchEvent);
+    expect(interactions.trackpadDetected).toBe(true);
+    expect(onTrackpadDetected).toHaveBeenCalledTimes(1);
+
+    cleanup();
+  });
+
+  it('restores pointer events on DOM panels', () => {
+    const panel = document.createElement('div');
+    panel.className = 'svelte-flow__panel';
+    panel.style.pointerEvents = 'none';
+    document.body.appendChild(panel);
+
+    restorePanelPointerEvents();
+
+    expect(panel.style.pointerEvents).toBe('auto');
+    document.body.removeChild(panel);
+  });
+});

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/createCanvasDocking.svelte.ts

@@ -0,0 +1,145 @@
+import type { XYPosition } from '@xyflow/svelte';
+import type { CanvasNode, CanvasDockingCallbacks } from './types.js';
+
+export interface CreateCanvasDockingOptions<TNode extends CanvasNode = CanvasNode>
+	extends CanvasDockingCallbacks<TNode> {
+	isDockTarget?: (target: TNode) => boolean;
+	restorePositionOnDock?: boolean;
+	onSave?: () => void;
+}
+
+/**
+ * Headless Svelte 5 rune managing canvas node dragging, docking intersection, and connection tracking.
+ */
+export function createCanvasDocking<TNode extends CanvasNode = CanvasNode>(
+	options: CreateCanvasDockingOptions<TNode> = {}
+) {
+	let draggedNode = $state.raw<TNode | null>(null);
+	let draggedInitialPosition = $state.raw<XYPosition | null>(null);
+	let connectingHandle = $state.raw<string>('');
+	let connectingNode = $state.raw<TNode | null>(null);
+	let currentHoverTargets = $state.raw<Set<string>>(new Set());
+
+	const isDockTarget = options.isDockTarget ?? ((target: TNode) => (target as any).type === 'boardNode');
+
+	function handleNodeDragStart(params: {
+		targetNode: TNode | null;
+		event?: MouseEvent | TouchEvent;
+	}): void {
+		draggedNode = params.targetNode;
+		draggedInitialPosition = params.targetNode?.position ? { ...params.targetNode.position } : null;
+		currentHoverTargets = new Set();
+	}
+
+	function handleNodeDrag(
+		params: {
+			targetNode: TNode | null;
+			event?: MouseEvent | TouchEvent;
+		},
+		getIntersectingNodes: (node: TNode) => TNode[]
+	): void {
+		draggedNode = params.targetNode;
+		if (!draggedNode) return;
+
+		const intersecting = getIntersectingNodes(draggedNode);
+		const currentDockTargets = intersecting.filter(isDockTarget);
+		const newHoverSet = new Set(currentDockTargets.map((t) => t.id));
+
+		// Check for left targets
+		currentHoverTargets.forEach((targetId) => {
+			if (!newHoverSet.has(targetId)) {
+				const leftNode = intersecting.find((n) => n.id === targetId) ?? ({ id: targetId } as TNode);
+				options.onDockLeave?.(leftNode, draggedNode!);
+			}
+		});
+
+		// Check for newly entered targets
+		currentDockTargets.forEach((target) => {
+			if (!currentHoverTargets.has(target.id)) {
+				options.onDockHover?.(target, draggedNode!);
+			}
+		});
+
+		currentHoverTargets = newHoverSet;
+	}
+
+	function handleNodeDragStop(
+		params: {
+			targetNode: TNode | null;
+			event?: MouseEvent | TouchEvent;
+		},
+		getIntersectingNodes: (node: TNode) => TNode[],
+		updateNodePosition?: (nodeId: string, position: XYPosition) => void
+	): void {
+		draggedNode = params.targetNode;
+
+		if (draggedNode) {
+			const intersecting = getIntersectingNodes(draggedNode);
+			const dockTarget = intersecting.find(isDockTarget);
+
+			if (dockTarget) {
+				options.onDockDrop?.(dockTarget, draggedNode);
+
+				if (options.restorePositionOnDock !== false && draggedInitialPosition && updateNodePosition) {
+					updateNodePosition(draggedNode.id, draggedInitialPosition);
+				}
+			}
+		}
+
+		// Reset state
+		draggedNode = null;
+		draggedInitialPosition = null;
+		currentHoverTargets = new Set();
+
+		options.onSave?.();
+	}
+
+	function handleConnectStart(
+		params: {
+			nodeId: string | null;
+			handleId?: string | null;
+			handleType: 'source' | 'target' | null;
+		},
+		getNode: (id: string) => TNode | undefined
+	): void {
+		connectingHandle = params.handleType ?? '';
+		connectingNode = params.nodeId ? (getNode(params.nodeId) ?? null) : null;
+	}
+
+	function handleConnectEnd(): void {
+		connectingHandle = '';
+		connectingNode = null;
+	}
+
+	function reset(): void {
+		draggedNode = null;
+		draggedInitialPosition = null;
+		connectingHandle = '';
+		connectingNode = null;
+		currentHoverTargets = new Set();
+	}
+
+	return {
+		get draggedNode() {
+			return draggedNode;
+		},
+		get draggedInitialPosition() {
+			return draggedInitialPosition;
+		},
+		get connectingHandle() {
+			return connectingHandle;
+		},
+		get connectingNode() {
+			return connectingNode;
+		},
+		get isDragging() {
+			return draggedNode !== null;
+		},
+		handleNodeDragStart,
+		handleNodeDrag,
+		handleNodeDragStop,
+		handleConnectStart,
+		handleConnectEnd,
+		reset
+	};
+}