@pixerate/editor-svelte 0.15.2 → 0.16.0

package/src/canvas/createCanvasGraph.svelte.ts

@@ -1,330 +0,0 @@
-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

@@ -1,112 +0,0 @@
-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

@@ -1,129 +0,0 @@
-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
-			}
-		};
-	});
-}
-
-// Re-export incremental layout and collision-aware placement from core
-export {
-	ensureLayout,
-	placeBeside,
-	estimateNodeSize,
-	flowSide
-} from '@pixerate/editor/canvas';
-