@pixerate/editor-svelte 0.3.12 → 0.5.0

package/src/canvas/createCanvasGraph.svelte.ts

@@ -0,0 +1,330 @@
+import { getConnectedEdges, type XYPosition } from '@xyflow/svelte';
+import { cubicOut } from 'svelte/easing';
+import type { CanvasNode, CanvasEdge, GraphDifferences } from './types.js';
+
+/**
+ * Pure calculation of graph differences between a current state and a baseline state.
+ */
+export function calculateGraphDifferences<
+	TNode extends CanvasNode = CanvasNode,
+	TEdge extends CanvasEdge = CanvasEdge
+>(
+	currentState: { nodes?: TNode[]; edges?: TEdge[] },
+	baselineState: { nodes?: TNode[]; edges?: TEdge[] }
+): GraphDifferences<TNode, TEdge> {
+	const currentNodes = currentState.nodes ?? [];
+	const currentEdges = currentState.edges ?? [];
+	const baselineNodes = baselineState.nodes ?? [];
+	const baselineEdges = baselineState.edges ?? [];
+
+	// Map baseline for fast O(1) lookup
+	const baselineNodeMap = new Map(baselineNodes.map((n) => [n.id, n]));
+	const baselineEdgeMap = new Map(baselineEdges.map((e) => [e.id, e]));
+	const currentNodeMap = new Map(currentNodes.map((n) => [n.id, n]));
+	const currentEdgeMap = new Map(currentEdges.map((e) => [e.id, e]));
+
+	const removedNodes = baselineNodes.filter((oldNode) => !currentNodeMap.has(oldNode.id));
+	const removedEdges = baselineEdges.filter((oldEdge) => !currentEdgeMap.has(oldEdge.id));
+
+	const changedNodes = currentNodes.filter((newNode) => {
+		const oldNode = baselineNodeMap.get(newNode.id);
+		if (!oldNode) return true;
+		return JSON.stringify(newNode) !== JSON.stringify(oldNode);
+	});
+
+	const changedEdges = currentEdges.filter((newEdge) => {
+		const oldEdge = baselineEdgeMap.get(newEdge.id);
+		if (!oldEdge) return true;
+		return JSON.stringify(newEdge) !== JSON.stringify(oldEdge);
+	});
+
+	return { changedNodes, changedEdges, removedNodes, removedEdges };
+}
+
+/**
+ * Pure function to replace a node in a graph, optionally preserving its connected edges.
+ */
+export function replaceNodeInGraph<
+	TNode extends CanvasNode = CanvasNode,
+	TEdge extends CanvasEdge = CanvasEdge
+>(
+	nodes: TNode[],
+	edges: TEdge[],
+	oldNode: TNode,
+	newNode: TNode,
+	keepEdges = false
+): { nodes: TNode[]; edges: TEdge[] } {
+	const updatedNodes = nodes.map((n) => (n.id === oldNode.id ? newNode : n));
+
+	if (!keepEdges) {
+		return { nodes: updatedNodes, edges };
+	}
+
+	const updatedEdges = edges.map((edge) => {
+		if (edge.source === oldNode.id || edge.target === oldNode.id) {
+			return {
+				...edge,
+				id: crypto.randomUUID(),
+				source: edge.source === oldNode.id ? newNode.id : edge.source,
+				target: edge.target === oldNode.id ? newNode.id : edge.target
+			};
+		}
+		return edge;
+	});
+
+	return {
+		nodes: updatedNodes,
+		edges: updatedEdges
+	};
+}
+
+export interface CreateCanvasGraphOptions<
+	TNode extends CanvasNode = CanvasNode,
+	TEdge extends CanvasEdge = CanvasEdge
+> {
+	initialNodes?: TNode[];
+	initialEdges?: TEdge[];
+	onNodesChange?: (nodes: TNode[]) => void;
+	onEdgesChange?: (edges: TEdge[]) => void;
+	onSave?: () => void;
+	createEdge?: (
+		sourceId: string,
+		targetId: string,
+		options?: { label?: string; animated?: boolean; data?: any }
+	) => TEdge;
+}
+
+/**
+ * Headless Svelte 5 rune managing canvas graph state and operations.
+ */
+export function createCanvasGraph<
+	TNode extends CanvasNode = CanvasNode,
+	TEdge extends CanvasEdge = CanvasEdge
+>(options: CreateCanvasGraphOptions<TNode, TEdge> = {}) {
+	let nodes = $state.raw<TNode[]>(options.initialNodes ?? []);
+	let edges = $state.raw<TEdge[]>(options.initialEdges ?? []);
+
+	function setNodes(newNodes: TNode[], triggerCallback = true) {
+		nodes = newNodes;
+		if (triggerCallback) {
+			options.onNodesChange?.(nodes);
+		}
+	}
+
+	function setEdges(newEdges: TEdge[], triggerCallback = true) {
+		edges = newEdges;
+		if (triggerCallback) {
+			options.onEdgesChange?.(edges);
+		}
+	}
+
+	function animateNodePosition(
+		node: TNode,
+		targetPosition: XYPosition,
+		duration = 400,
+		easing: (t: number) => number = cubicOut
+	) {
+		const delay = (node.data as any)?.animationDelay ?? 0;
+		const startPosition = { ...node.position };
+		const startTime = Date.now() + delay;
+
+		function step() {
+			const currentTime = Date.now();
+			if (currentTime < startTime) {
+				if (typeof requestAnimationFrame !== 'undefined') {
+					requestAnimationFrame(step);
+				}
+				return;
+			}
+
+			const progress = Math.min((currentTime - startTime) / duration, 1);
+			const eased = easing(progress);
+
+			const currentPos = {
+				x: startPosition.x + (targetPosition.x - startPosition.x) * eased,
+				y: startPosition.y + (targetPosition.y - startPosition.y) * eased
+			};
+
+			// Mutate position in place without recreating the entire array every frame
+			const targetNode = nodes.find((n) => n.id === node.id);
+			if (targetNode) {
+				targetNode.position = currentPos;
+			}
+
+			if (progress < 1) {
+				if (typeof requestAnimationFrame !== 'undefined') {
+					requestAnimationFrame(step);
+				}
+			} else {
+				// Animation completed: trigger final reactive update and change event
+				setNodes([...nodes]);
+			}
+		}
+
+		step();
+	}
+
+	function addNodeOrNodes(
+		nodeOrNodesToAdd: TNode | TNode[],
+		animateFromPosition?: XYPosition,
+		save = true
+	): void {
+		const toAdd = Array.isArray(nodeOrNodesToAdd) ? nodeOrNodesToAdd : [nodeOrNodesToAdd];
+		const existingMap = new Map(nodes.map((n) => [n.id, n]));
+
+		toAdd.forEach((node) => {
+			if (!existingMap.has(node.id)) {
+				existingMap.set(node.id, node);
+			}
+		});
+
+		setNodes(Array.from(existingMap.values()));
+
+		if (animateFromPosition) {
+			toAdd.forEach((node) => {
+				const target = { ...node.position };
+				node.position = { ...animateFromPosition };
+				animateNodePosition(node, target);
+			});
+		}
+
+		if (save) options.onSave?.();
+	}
+
+	function addEdge(edgeToAdd: TEdge, save = true): void {
+		setEdges([...edges, edgeToAdd]);
+		if (save) options.onSave?.();
+	}
+
+	function addEdges(edgesToAdd: TEdge[], save = true): void {
+		setEdges([...edges, ...edgesToAdd]);
+		if (save) options.onSave?.();
+	}
+
+	function removeNodes(nodesToRemove: TNode[], save = true): void {
+		const idsToRemove = new Set(nodesToRemove.map((n) => n.id));
+		setNodes(nodes.filter((n) => !idsToRemove.has(n.id)));
+		if (save) options.onSave?.();
+	}
+
+	function removeEdges(edgesToRemove: TEdge[], save = true): void {
+		const idsToRemove = new Set(edgesToRemove.map((e) => e.id));
+		setEdges(edges.filter((e) => !idsToRemove.has(e.id)));
+		if (save) options.onSave?.();
+	}
+
+	function replaceNode(
+		oldNode: TNode,
+		newNode: TNode,
+		save = true,
+		keepEdges = false
+	): void {
+		const result = replaceNodeInGraph(nodes, edges, oldNode, newNode, keepEdges);
+		setNodes(result.nodes);
+		if (result.edges !== edges) {
+			setEdges(result.edges);
+		}
+		if (save) options.onSave?.();
+	}
+
+	function addConnectedNodes(params: {
+		nodesToAdd: TNode[];
+		inboundNodes?: TNode[];
+		outboundNodes?: TNode[];
+		animatedEdges?: boolean;
+		animateFromPosition?: XYPosition;
+		inboundEdgeData?: any;
+		outboundEdgeData?: any;
+		getEdgeLabel?: (source: TNode, target: TNode) => string;
+	}): void {
+		const {
+			nodesToAdd,
+			inboundNodes = [],
+			outboundNodes = [],
+			animatedEdges = false,
+			animateFromPosition,
+			inboundEdgeData = {},
+			outboundEdgeData = {},
+			getEdgeLabel
+		} = params;
+
+		const defaultCreateEdge = (
+			sourceId: string,
+			targetId: string,
+			opt?: { label?: string; animated?: boolean; data?: any }
+		): TEdge => {
+			if (options.createEdge) {
+				return options.createEdge(sourceId, targetId, opt);
+			}
+			return {
+				id: crypto.randomUUID(),
+				type: 'default',
+				source: sourceId,
+				target: targetId,
+				label: opt?.label ?? '',
+				animated: opt?.animated ?? false,
+				data: opt?.data ?? {}
+			} as unknown as TEdge;
+		};
+
+		nodesToAdd.forEach((addedNode) => {
+			addNodeOrNodes(addedNode, animateFromPosition, false);
+
+			inboundNodes.forEach((sourceNode) => {
+				const label = getEdgeLabel ? getEdgeLabel(sourceNode, addedNode) : '';
+				addEdge(
+					defaultCreateEdge(sourceNode.id, addedNode.id, {
+						label,
+						animated: animatedEdges,
+						data: inboundEdgeData
+					}),
+					false
+				);
+			});
+
+			outboundNodes.forEach((targetNode) => {
+				const label = getEdgeLabel ? getEdgeLabel(addedNode, targetNode) : '';
+				addEdge(
+					defaultCreateEdge(addedNode.id, targetNode.id, {
+						label,
+						animated: animatedEdges,
+						data: outboundEdgeData
+					}),
+					false
+				);
+			});
+		});
+
+		options.onSave?.();
+	}
+
+	function getDifferences(baseline: { nodes?: TNode[]; edges?: TEdge[] }) {
+		return calculateGraphDifferences({ nodes, edges }, baseline);
+	}
+
+	return {
+		get nodes() {
+			return nodes;
+		},
+		set nodes(val: TNode[]) {
+			setNodes(val);
+		},
+		get edges() {
+			return edges;
+		},
+		set edges(val: TEdge[]) {
+			setEdges(val);
+		},
+		setNodes,
+		setEdges,
+		addNodeOrNodes,
+		addEdge,
+		addEdges,
+		removeNodes,
+		removeEdges,
+		replaceNode,
+		addConnectedNodes,
+		animateNodePosition,
+		getDifferences
+	};
+}

package/src/canvas/createCanvasInteractions.svelte.ts

@@ -0,0 +1,112 @@
+import type { ColorMode } from '@xyflow/svelte';
+import { isEventFromTextInput } from './createCanvasClipboard.svelte.js';
+import type { CanvasInteractionPresetConfig } from './types.js';
+
+export interface CreateCanvasInteractionsOptions {
+	targetElement?: HTMLElement | Window;
+	onPanModeChange?: (active: boolean) => void;
+	onTrackpadDetected?: () => void;
+}
+
+/**
+ * Headless Svelte 5 rune managing canvas pan interactions (spacebar panning, trackpad pinch detection).
+ */
+export function createCanvasInteractions(options: CreateCanvasInteractionsOptions = {}) {
+	let isSpacebarPanning = $state.raw(false);
+	let trackpadDetected = $state.raw(false);
+	let toggledPanMode = false;
+
+	function handleKeyDown(event: KeyboardEvent) {
+		if (event.key === ' ' || event.code === 'Space') {
+			if (isSpacebarPanning || isEventFromTextInput(event)) return;
+			isSpacebarPanning = true;
+			toggledPanMode = true;
+			options.onPanModeChange?.(true);
+
+			if (typeof document !== 'undefined') {
+				document.body.classList.add('cursor-grab');
+			}
+		}
+	}
+
+	function handleKeyUp(event: KeyboardEvent) {
+		if (event.key === ' ' || event.code === 'Space') {
+			if (!isSpacebarPanning && !toggledPanMode) return;
+			isSpacebarPanning = false;
+			toggledPanMode = false;
+			options.onPanModeChange?.(false);
+
+			if (typeof document !== 'undefined') {
+				document.body.classList.remove('cursor-grab');
+			}
+		}
+	}
+
+	function handleWheel(event: WheelEvent) {
+		if (event.ctrlKey && !trackpadDetected) {
+			trackpadDetected = true;
+			options.onTrackpadDetected?.();
+		}
+	}
+
+	function attachListeners(target?: HTMLElement | Window): () => void {
+		const el = target ?? options.targetElement ?? (typeof window !== 'undefined' ? window : null);
+		if (!el) return () => {};
+
+		el.addEventListener('keydown', handleKeyDown as EventListener);
+		el.addEventListener('keyup', handleKeyUp as EventListener);
+		el.addEventListener('wheel', handleWheel as EventListener, { passive: true });
+
+		return () => {
+			el.removeEventListener('keydown', handleKeyDown as EventListener);
+			el.removeEventListener('keyup', handleKeyUp as EventListener);
+			el.removeEventListener('wheel', handleWheel as EventListener);
+			if (typeof document !== 'undefined') {
+				document.body.classList.remove('cursor-grab');
+			}
+		};
+	}
+
+	return {
+		get isSpacebarPanning() {
+			return isSpacebarPanning;
+		},
+		get trackpadDetected() {
+			return trackpadDetected;
+		},
+		attachListeners,
+		destroy: attachListeners()
+	};
+}
+
+/**
+ * Default interaction configuration presets for SvelteFlow.
+ */
+export const defaultSvelteFlowPreset: CanvasInteractionPresetConfig = {
+	snapGrid: [25, 25],
+	panOnDrag: [0, 1, 2, 3, 4],
+	panOnScroll: false,
+	selectionOnDrag: false,
+	colorMode: 'system' as ColorMode,
+	multiSelectionKey: ['Shift', 'Meta']
+};
+
+/**
+ * Miro-compatible interaction preset (middle/right drag to pan, left drag to select).
+ */
+export const miroCompatiblePreset: CanvasInteractionPresetConfig = {
+	...defaultSvelteFlowPreset,
+	panOnDrag: [1, 2],
+	selectionOnDrag: true
+};
+
+/**
+ * Helper to ensure panels restore pointer events after selection rectangle releases.
+ */
+export function restorePanelPointerEvents(panelSelector = '.svelte-flow__panel'): void {
+	if (typeof document === 'undefined') return;
+	const panels = document.querySelectorAll(panelSelector);
+	panels.forEach((panel) => {
+		(panel as HTMLElement).style.pointerEvents = 'auto';
+	});
+}

package/src/canvas/createCanvasLayout.ts

@@ -0,0 +1,120 @@
+import dagre from '@dagrejs/dagre';
+import { Position, type XYPosition, type Rect } from '@xyflow/svelte';
+import type { CanvasNode, CanvasEdge, CanvasLayoutOptions } from './types.js';
+
+/**
+ * Calculates upper-left flow coordinate for an element to be centered in the viewport.
+ */
+export function getCenteredNodePosition(
+	width = 0,
+	height = 0,
+	screenToFlowPosition: (position: XYPosition) => XYPosition,
+	screenDimensions?: { width: number; height: number }
+): XYPosition {
+	const rect = screenDimensions ?? (typeof document !== 'undefined'
+		? { width: document.documentElement.clientWidth, height: document.documentElement.clientHeight }
+		: { width: 1920, height: 1080 });
+
+	const flowPos = screenToFlowPosition({ x: rect.width / 2, y: rect.height / 2 });
+	return {
+		x: flowPos.x - width / 2,
+		y: flowPos.y - height / 2
+	};
+}
+
+/**
+ * Updates positions of nodes so their collective bounding box is centered in the current viewport.
+ */
+export function centerNodes<TNode extends CanvasNode = CanvasNode>(
+	nodes: TNode[],
+	screenToFlowPosition: (position: XYPosition) => XYPosition,
+	getNodesBounds: (nodes: TNode[]) => Rect,
+	screenDimensions?: { width: number; height: number }
+): TNode[] {
+	if (nodes.length === 0) {
+		return [];
+	}
+
+	const bounds = getNodesBounds(nodes);
+	const boundingBoxOrigin = { x: bounds.x, y: bounds.y };
+
+	const centeredPosition = getCenteredNodePosition(
+		bounds.width,
+		bounds.height,
+		screenToFlowPosition,
+		screenDimensions
+	);
+
+	const deltaX = centeredPosition.x - boundingBoxOrigin.x;
+	const deltaY = centeredPosition.y - boundingBoxOrigin.y;
+
+	return nodes.map((node) => ({
+		...node,
+		position: {
+			x: node.position.x + deltaX,
+			y: node.position.y + deltaY
+		}
+	}));
+}
+
+/**
+ * Automatically calculates directed hierarchical layout of nodes and edges using Dagre.
+ */
+export function getLayoutedNodes<
+	TNode extends CanvasNode = CanvasNode,
+	TEdge extends CanvasEdge = CanvasEdge
+>(
+	nodes: TNode[],
+	edges: TEdge[],
+	getNodesBounds: (nodes: TNode[]) => Rect,
+	options: CanvasLayoutOptions = {}
+): TNode[] {
+	if (nodes.length === 0) return [];
+
+	const {
+		direction = 'LR',
+		ranksep = 100,
+		nodesep = 25,
+		defaultNodeWidth = 200,
+		defaultNodeHeight = 200
+	} = options;
+
+	const isHorizontal = direction === 'LR' || direction === 'RL';
+	const bounds = getNodesBounds(nodes);
+
+	const dagreGraph = new dagre.graphlib.Graph();
+	dagreGraph.setDefaultEdgeLabel(() => ({}));
+	dagreGraph.setGraph({ rankdir: direction, ranksep, nodesep });
+
+	const nodeIds = new Set(nodes.map((node) => node.id));
+
+	nodes.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 });
+	});
+
+	edges.forEach((edge) => {
+		if (nodeIds.has(edge.source) && nodeIds.has(edge.target)) {
+			dagreGraph.setEdge(edge.source, edge.target);
+		}
+	});
+
+	dagre.layout(dagreGraph);
+
+	return nodes.map((node) => {
+		const nodeWithPosition = dagreGraph.node(node.id);
+		const nodeWidth = node.measured?.width ?? (node as any).width ?? defaultNodeWidth;
+		const nodeHeight = node.measured?.height ?? (node as any).height ?? defaultNodeHeight;
+
+		return {
+			...node,
+			targetPosition: isHorizontal ? Position.Left : Position.Top,
+			sourcePosition: isHorizontal ? Position.Right : Position.Bottom,
+			position: {
+				x: bounds.x + (nodeWithPosition?.x ?? 0) - nodeWidth / 2,
+				y: bounds.y + (nodeWithPosition?.y ?? 0) - nodeHeight / 2
+			}
+		};
+	});
+}

package/src/canvas/createCanvasShortcuts.ts

@@ -0,0 +1,99 @@
+import { isEventFromTextInput } from './createCanvasClipboard.svelte.js';
+import type { CanvasNode, CanvasShortcutsOptions } from './types.js';
+
+/**
+ * Attaches keyboard shortcut handlers for canvas interaction.
+ * Automatically ignores shortcuts when the user is typing into text inputs, textareas, or rich editors.
+ *
+ * @returns A cleanup function to remove event listeners.
+ */
+export function createCanvasShortcuts<TNode extends CanvasNode = CanvasNode>(
+	options: CanvasShortcutsOptions<TNode>
+): () => void {
+	const target = options.targetElement ?? (typeof window !== 'undefined' ? window : null);
+	if (!target) return () => {};
+
+	function handleKeyDown(event: Event) {
+		const keyboardEvent = event as KeyboardEvent;
+		if (isEventFromTextInput(keyboardEvent)) {
+			return;
+		}
+
+		const isMod = keyboardEvent.metaKey || keyboardEvent.ctrlKey;
+		const isShift = keyboardEvent.shiftKey;
+		const key = keyboardEvent.key;
+
+		const selectedNodes = options.getSelectedNodes ? options.getSelectedNodes() : [];
+
+		if (key === 'Backspace' || key === 'Delete') {
+			if (options.onDelete && selectedNodes.length > 0) {
+				keyboardEvent.preventDefault();
+				options.onDelete(selectedNodes);
+			}
+			return;
+		}
+
+		if (isMod) {
+			const lowerKey = key.toLowerCase();
+
+			if (lowerKey === 'c' && !isShift) {
+				if (options.onCopy) {
+					// We let the native copy event fire or call onCopy
+					options.onCopy();
+				}
+			} else if (lowerKey === 'x' && !isShift) {
+				if (options.onCut) {
+					options.onCut();
+				}
+			} else if (lowerKey === 'd' && !isShift) {
+				if (options.onDuplicate && selectedNodes.length > 0) {
+					keyboardEvent.preventDefault();
+					options.onDuplicate(selectedNodes);
+				}
+			} else if (lowerKey === 'a' && !isShift) {
+				if (options.onSelectAll) {
+					keyboardEvent.preventDefault();
+					options.onSelectAll();
+				}
+			} else if (lowerKey === 'g') {
+				if (isShift) {
+					if (options.onUngroup && selectedNodes.length > 0) {
+						keyboardEvent.preventDefault();
+						options.onUngroup(selectedNodes);
+					}
+				} else {
+					if (options.onGroup && selectedNodes.length > 0) {
+						keyboardEvent.preventDefault();
+						options.onGroup(selectedNodes);
+					}
+				}
+			} else if (key === '=' || key === '+') {
+				if (options.onZoomIn) {
+					keyboardEvent.preventDefault();
+					options.onZoomIn();
+				}
+			} else if (key === '-') {
+				if (options.onZoomOut) {
+					keyboardEvent.preventDefault();
+					options.onZoomOut();
+				}
+			} else if (key === '0') {
+				if (options.onFitView) {
+					keyboardEvent.preventDefault();
+					options.onFitView();
+				}
+			} else if (lowerKey === 'f') {
+				if (options.onSearch) {
+					keyboardEvent.preventDefault();
+					options.onSearch();
+				}
+			}
+		}
+	}
+
+	target.addEventListener('keydown', handleKeyDown as EventListener);
+
+	return () => {
+		target.removeEventListener('keydown', handleKeyDown as EventListener);
+	};
+}