@pixerate/editor-svelte 0.4.0 → 0.5.0

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;
+}

package/src/canvas/createCanvasExplosion.svelte.ts

@@ -0,0 +1,368 @@
+import { cubicOut } from 'svelte/easing';
+import type { Rect, XYPosition } from '@xyflow/svelte';
+import type {
+	CanvasEdge,
+	CanvasNode,
+	CollapseNodeOptions,
+	ExplodeNodeOptions,
+	ExplosionSnapshot,
+	NodeTransition
+} from './types.js';
+import {
+	calculateDirectionalDisplacement,
+	calculateReflowDisplacement
+} from './createCanvasDisplacement.js';
+import {
+	createFanOutTrajectory,
+	linearTrajectory,
+	runMultiNodeTransition
+} from './createCanvasTrajectory.js';
+
+export interface CanvasGraphTarget<
+	TNode extends CanvasNode = CanvasNode,
+	TEdge extends CanvasEdge = CanvasEdge
+> {
+	nodes: TNode[];
+	edges: TEdge[];
+	setNodes: (nodes: TNode[], triggerCallback?: boolean) => void;
+	setEdges: (edges: TEdge[], triggerCallback?: boolean) => void;
+	addNodeOrNodes: (nodes: TNode | TNode[], animateFrom?: XYPosition, save?: boolean) => void;
+	addEdges: (edges: TEdge[], save?: boolean) => void;
+	removeNodes: (nodes: TNode[], save?: boolean) => void;
+	removeEdges: (edges: TEdge[], save?: boolean) => void;
+	createEdge?: (sourceId: string, targetId: string, options?: any) => TEdge;
+	onSave?: () => void;
+}
+
+export interface CreateCanvasExplosionOptions<TNode extends CanvasNode = CanvasNode> {
+	getNodesBounds?: (nodes: TNode[]) => Rect;
+	onSave?: () => void;
+}
+
+/**
+ * Headless Svelte 5 rune managing canvas node explosion, spatial layout displacement,
+ * coordinated multi-node animation paths, and reversible collapsing.
+ */
+export function createCanvasExplosion<
+	TNode extends CanvasNode = CanvasNode,
+	TEdge extends CanvasEdge = CanvasEdge
+>(
+	graph: CanvasGraphTarget<TNode, TEdge>,
+	options: CreateCanvasExplosionOptions<TNode> = {}
+) {
+	let explodedNodeIds = $state<string[]>([]);
+	const snapshots = new Map<string, ExplosionSnapshot<TNode, TEdge>>();
+	let activeAnimationCancel: (() => void) | null = null;
+
+	function isExploded(nodeId: string): boolean {
+		return explodedNodeIds.includes(nodeId);
+	}
+
+	function explodeNode(
+		parentId: string,
+		explodeOptions: ExplodeNodeOptions<TNode, TEdge>
+	): boolean {
+		if (isExploded(parentId)) {
+			return false;
+		}
+
+		const parentNode = graph.nodes.find((n) => n.id === parentId);
+		if (!parentNode) {
+			return false;
+		}
+
+		const {
+			childNodes,
+			childEdges = [],
+			connectParentToChildren = 'all',
+			displacementStrategy = 'directional',
+			directionalOptions = {},
+			reflowOptions = {},
+			trajectory,
+			duration = 500,
+			staggerDelay = 20,
+			easing = cubicOut,
+			onComplete
+		} = explodeOptions;
+
+		if (childNodes.length === 0) {
+			return false;
+		}
+
+		// 1. Calculate displacement for existing nodes
+		let displacementMap: Map<string, XYPosition>;
+		if (displacementStrategy === 'dagre') {
+			displacementMap = calculateReflowDisplacement({
+				existingNodes: graph.nodes,
+				existingEdges: graph.edges,
+				originNode: parentNode,
+				childNodes,
+				childEdges,
+				getNodesBounds: options.getNodesBounds,
+				options: {
+					...reflowOptions,
+					direction: (reflowOptions.direction as any) ?? 'LR'
+				}
+			});
+		} else if (displacementStrategy === 'none') {
+			displacementMap = new Map();
+		} else {
+			displacementMap = calculateDirectionalDisplacement({
+				existingNodes: graph.nodes,
+				originNode: parentNode,
+				childNodes,
+				getNodesBounds: options.getNodesBounds,
+				options: directionalOptions
+			});
+		}
+
+		// 2. Build snapshot of displaced nodes before mutating positions
+		const displacedNodesSnapshot = Array.from(displacementMap.entries()).map(([id]) => {
+			const node = graph.nodes.find((n) => n.id === id);
+			return {
+				id,
+				originalPosition: { ...(node?.position ?? { x: 0, y: 0 }) }
+			};
+		});
+
+		// 3. Prepare child edges & parent connection edges
+		const edgesToAdd: TEdge[] = [...childEdges];
+		const defaultCreateEdge = (sourceId: string, targetId: string): TEdge => {
+			if (graph.createEdge) {
+				return graph.createEdge(sourceId, targetId);
+			}
+			return {
+				id: crypto.randomUUID(),
+				type: 'default',
+				source: sourceId,
+				target: targetId
+			} as unknown as TEdge;
+		};
+
+		if (connectParentToChildren === 'all' || connectParentToChildren === true) {
+			childNodes.forEach((child) => {
+				const exists = edgesToAdd.some((e) => e.source === parentId && e.target === child.id);
+				if (!exists) {
+					edgesToAdd.push(defaultCreateEdge(parentId, child.id));
+				}
+			});
+		} else if (connectParentToChildren === 'first' && childNodes.length > 0) {
+			const firstChild = childNodes[0];
+			const exists = edgesToAdd.some((e) => e.source === parentId && e.target === firstChild.id);
+			if (!exists) {
+				edgesToAdd.push(defaultCreateEdge(parentId, firstChild.id));
+			}
+		}
+
+		const snapshot: ExplosionSnapshot<TNode, TEdge> = {
+			parentId,
+			childNodeIds: childNodes.map((n) => n.id),
+			childEdgeIds: edgesToAdd.map((e) => e.id),
+			displacedNodes: displacedNodesSnapshot,
+			timestamp: Date.now()
+		};
+		snapshots.set(parentId, snapshot);
+
+		// 4. Position child nodes initially at origin node coordinate
+		const originPos = { ...parentNode.position };
+		const targetPositions = childNodes.map((child) => ({ ...child.position }));
+
+		childNodes.forEach((child) => {
+			child.position = { ...originPos };
+			if (!child.data) child.data = {} as any;
+			(child.data as any).scale = 0;
+			(child.data as any).opacity = 0;
+		});
+
+		// Add nodes and edges to graph without saving yet
+		graph.addNodeOrNodes(childNodes, undefined, false);
+		if (edgesToAdd.length > 0) {
+			graph.addEdges(edgesToAdd, false);
+		}
+
+		// 5. Build transition list
+		const chosenTrajectory = trajectory ?? createFanOutTrajectory({ curvature: 0.35 });
+		const transitions: NodeTransition<TNode>[] = [];
+		const effectiveStagger = duration === 0 ? 0 : staggerDelay;
+
+		// Expanding child transitions
+		childNodes.forEach((child, i) => {
+			transitions.push({
+				node: child,
+				from: originPos,
+				to: targetPositions[i],
+				trajectory: chosenTrajectory,
+				delay: i * effectiveStagger,
+				duration,
+				easing,
+				index: i,
+				total: childNodes.length
+			});
+		});
+
+		// Displaced node transitions
+		displacementMap.forEach((targetPos, nodeId) => {
+			const node = graph.nodes.find((n) => n.id === nodeId);
+			if (node) {
+				transitions.push({
+					node,
+					from: { ...node.position },
+					to: targetPos,
+					trajectory: linearTrajectory,
+					duration,
+					easing
+				});
+			}
+		});
+
+		// 6. Run coordinated animation
+		if (activeAnimationCancel) {
+			activeAnimationCancel();
+		}
+
+		activeAnimationCancel = runMultiNodeTransition(transitions, {
+			defaultDuration: duration,
+			defaultEasing: easing,
+			onUpdate: () => {
+				graph.setNodes([...graph.nodes]);
+			},
+			onComplete: () => {
+				graph.setNodes([...graph.nodes]);
+				explodedNodeIds = [...explodedNodeIds, parentId];
+				activeAnimationCancel = null;
+				options.onSave?.();
+				graph.onSave?.();
+				onComplete?.();
+			}
+		});
+
+		return true;
+	}
+
+	function collapseNode(
+		parentId: string,
+		collapseOptions: CollapseNodeOptions = {}
+	): boolean {
+		const snapshot = snapshots.get(parentId);
+		if (!snapshot) {
+			return false;
+		}
+
+		const parentNode = graph.nodes.find((n) => n.id === parentId);
+		if (!parentNode) {
+			return false;
+		}
+
+		const {
+			duration = 400,
+			staggerDelay = 15,
+			easing = cubicOut,
+			trajectory,
+			onComplete
+		} = collapseOptions;
+
+		const childIdSet = new Set(snapshot.childNodeIds);
+		const activeChildNodes = graph.nodes.filter((n) => childIdSet.has(n.id));
+		const originPos = { ...parentNode.position };
+
+		// Reverse trajectory pulls nodes back toward parent while collapsing scale
+		const reverseTrajectory = trajectory ?? createFanOutTrajectory({
+			curvature: 0.2,
+			startScale: 1,
+			endScale: 0,
+			startOpacity: 1,
+			endOpacity: 0
+		});
+
+		const transitions: NodeTransition<TNode>[] = [];
+		const effectiveStagger = duration === 0 ? 0 : staggerDelay;
+
+		// Collapsing child transitions back into origin
+		activeChildNodes.forEach((child, i) => {
+			transitions.push({
+				node: child,
+				from: { ...child.position },
+				to: originPos,
+				trajectory: reverseTrajectory,
+				delay: (activeChildNodes.length - 1 - i) * effectiveStagger,
+				duration,
+				easing,
+				index: i,
+				total: activeChildNodes.length
+			});
+		});
+
+		// Displaced node restore transitions
+		snapshot.displacedNodes.forEach(({ id, originalPosition }) => {
+			const node = graph.nodes.find((n) => n.id === id);
+			if (node) {
+				transitions.push({
+					node,
+					from: { ...node.position },
+					to: originalPosition,
+					trajectory: linearTrajectory,
+					duration,
+					easing
+				});
+			}
+		});
+
+		if (activeAnimationCancel) {
+			activeAnimationCancel();
+		}
+
+		activeAnimationCancel = runMultiNodeTransition(transitions, {
+			defaultDuration: duration,
+			defaultEasing: easing,
+			onUpdate: () => {
+				graph.setNodes([...graph.nodes]);
+			},
+			onComplete: () => {
+				// Animation completed: prune child nodes and edges
+				graph.removeNodes(activeChildNodes, false);
+
+				const edgeIdSet = new Set(snapshot.childEdgeIds);
+				const edgesToRemove = graph.edges.filter((e) => edgeIdSet.has(e.id));
+				if (edgesToRemove.length > 0) {
+					graph.removeEdges(edgesToRemove, false);
+				}
+
+				snapshots.delete(parentId);
+				explodedNodeIds = explodedNodeIds.filter((id) => id !== parentId);
+				activeAnimationCancel = null;
+
+				options.onSave?.();
+				graph.onSave?.();
+				onComplete?.();
+			}
+		});
+
+		return true;
+	}
+
+	function toggleExplode(
+		parentId: string,
+		explodeOptions: ExplodeNodeOptions<TNode, TEdge>,
+		collapseOptions?: CollapseNodeOptions
+	): boolean {
+		if (isExploded(parentId)) {
+			return collapseNode(parentId, collapseOptions);
+		}
+		return explodeNode(parentId, explodeOptions);
+	}
+
+	function getSnapshot(parentId: string) {
+		return snapshots.get(parentId);
+	}
+
+	return {
+		get explodedNodeIds() {
+			return explodedNodeIds;
+		},
+		isExploded,
+		explodeNode,
+		collapseNode,
+		toggleExplode,
+		getSnapshot
+	};
+}