@pixerate/editor-svelte 0.15.2 → 0.16.0

package/src/canvas/createCanvasMultiDrag.svelte.ts

@@ -1,175 +0,0 @@
-import type { XYPosition } from '@xyflow/svelte';
-import type { CanvasNode } from './types.js';
-
-export interface MultiDragFollowerOffset {
-	deltaX: number;
-	deltaY: number;
-	originalPosition: XYPosition;
-	stackOffsetX: number;
-	stackOffsetY: number;
-	rotationDeg: number;
-}
-
-export interface MultiDragState {
-	leadId: string;
-	offsets: Record<string, MultiDragFollowerOffset>;
-	count: number;
-}
-
-export interface CreateCanvasMultiDragOptions {
-	/**
-	 * Base horizontal fan-out offset per stacked follower card (default: 4px).
-	 */
-	stackOffsetStepX?: number;
-	/**
-	 * Base vertical fan-out offset per stacked follower card (default: 4px).
-	 */
-	stackOffsetStepY?: number;
-	/**
-	 * Alternating angular tilt in degrees for follower cards (default: [-2, 2.5, -3, 3]).
-	 */
-	rotationAngles?: number[];
-	/**
-	 * Base z-index for stacked cards during active dragging (default: 50).
-	 */
-	baseZIndex?: number;
-}
-
-export interface FollowerTransform {
-	isFollower: boolean;
-	stackOffsetX: number;
-	stackOffsetY: number;
-	rotationDeg: number;
-	zIndex: number;
-}
-
-/**
- * Headless Svelte 5 rune orchestrating multi-node drag operations with stacked visual fanning,
- * dynamic z-index layering, and position restoration.
- */
-export function createCanvasMultiDrag(options: CreateCanvasMultiDragOptions = {}) {
-	const stepX = options.stackOffsetStepX ?? 4;
-	const stepY = options.stackOffsetStepY ?? 4;
-	const angles = options.rotationAngles ?? [-2, 2.5, -3, 3];
-	const baseZIndex = options.baseZIndex ?? 50;
-
-	let dragState = $state<MultiDragState | null>(null);
-
-	function startMultiDrag(
-		leadNodeId: string,
-		selectedNodeIds: string[] | Set<string>,
-		nodes: CanvasNode[] | Map<string, CanvasNode>
-	): MultiDragState | null {
-		const selectedSet =
-			selectedNodeIds instanceof Set ? selectedNodeIds : new Set(selectedNodeIds);
-
-		if (selectedSet.size <= 1 || !selectedSet.has(leadNodeId)) {
-			dragState = null;
-			return null;
-		}
-
-		const nodeMap =
-			nodes instanceof Map ? nodes : new Map(nodes.map((n) => [n.id, n]));
-
-		const leadNode = nodeMap.get(leadNodeId);
-		if (!leadNode) {
-			dragState = null;
-			return null;
-		}
-
-		const leadPos = leadNode.position ?? { x: 0, y: 0 };
-		const offsets: Record<string, MultiDragFollowerOffset> = {};
-		let followerIndex = 0;
-
-		for (const id of selectedSet) {
-			if (id === leadNodeId) continue;
-			const follower = nodeMap.get(id);
-			const fPos = follower?.position ?? { x: 0, y: 0 };
-
-			const angle = angles[followerIndex % angles.length];
-			offsets[id] = {
-				deltaX: fPos.x - leadPos.x,
-				deltaY: fPos.y - leadPos.y,
-				originalPosition: { ...fPos },
-				stackOffsetX: (followerIndex + 1) * stepX,
-				stackOffsetY: (followerIndex + 1) * stepY,
-				rotationDeg: angle
-			};
-			followerIndex++;
-		}
-
-		const state: MultiDragState = {
-			leadId: leadNodeId,
-			offsets,
-			count: selectedSet.size
-		};
-
-		dragState = state;
-		return state;
-	}
-
-	function getFollowerTransform(nodeId: string): FollowerTransform {
-		if (!dragState || !(nodeId in dragState.offsets)) {
-			return {
-				isFollower: false,
-				stackOffsetX: 0,
-				stackOffsetY: 0,
-				rotationDeg: 0,
-				zIndex: 0
-			};
-		}
-
-		const offset = dragState.offsets[nodeId];
-		const followerKeys = Object.keys(dragState.offsets);
-		const index = followerKeys.indexOf(nodeId);
-
-		return {
-			isFollower: true,
-			stackOffsetX: offset.stackOffsetX,
-			stackOffsetY: offset.stackOffsetY,
-			rotationDeg: offset.rotationDeg,
-			zIndex: baseZIndex - (index + 1)
-		};
-	}
-
-	function cancelMultiDrag(
-		applyRestore?: (restores: { id: string; originalPosition: XYPosition }[]) => void
-	): { id: string; originalPosition: XYPosition }[] {
-		if (!dragState) return [];
-
-		const restores = Object.entries(dragState.offsets).map(([id, offset]) => ({
-			id,
-			originalPosition: { ...offset.originalPosition }
-		}));
-
-		if (applyRestore) {
-			applyRestore(restores);
-		}
-
-		dragState = null;
-		return restores;
-	}
-
-	function commitMultiDrag(): void {
-		dragState = null;
-	}
-
-	return {
-		get dragState() {
-			return dragState;
-		},
-		get isMultiDrag() {
-			return Boolean(dragState && dragState.count > 1);
-		},
-		get count() {
-			return dragState ? dragState.count : 0;
-		},
-		get leadId() {
-			return dragState?.leadId ?? null;
-		},
-		startMultiDrag,
-		getFollowerTransform,
-		cancelMultiDrag,
-		commitMultiDrag
-	};
-}

package/src/canvas/createCanvasNodeSync.svelte.ts

@@ -1,150 +0,0 @@
-import { untrack } from 'svelte';
-import type { Position } from '@xyflow/svelte';
-import type { CanvasNode, CanvasEdge } from './types.js';
-
-export interface HandleConfig {
-	id?: string | null;
-	type: 'source' | 'target';
-	position: Position;
-	x?: number;
-	y?: number;
-	width?: number;
-	height?: number;
-}
-
-export interface NodeMeasurement {
-	width: number;
-	height: number;
-}
-
-/**
- * Preserves cached .measured dimensions from existing nodes to newly constructed nodes.
- * Resolves measurements without subscribing to reactive updates on the existing collection.
- */
-export function preserveNodeMeasurements<TNode extends CanvasNode = CanvasNode>(
-	newNodes: TNode[],
-	existingNodes: TNode[] | Map<string, TNode>
-): TNode[] {
-	const map =
-		existingNodes instanceof Map
-			? existingNodes
-			: new Map(existingNodes.map((n) => [n.id, n]));
-
-	for (const node of newNodes) {
-		const prev = map.get(node.id);
-		if (prev && (prev as any).measured) {
-			(node as any).measured = { ...(prev as any).measured };
-		}
-	}
-	return newNodes;
-}
-
-/**
- * Pre-populates handle geometry on a node to prevent @xyflow/system's getNodesInside
- * from evaluating `forceInitialRender = !node.internals.handleBounds` and triggering
- * a false full-canvas selection on the first frame of marquee drag-selection.
- */
-export function normalizeNodeHandles<TNode extends CanvasNode = CanvasNode>(
-	node: TNode,
-	handles: HandleConfig[] = []
-): TNode {
-	(node as any).handles = handles;
-	return node;
-}
-
-export interface CreateCanvasNodeSyncOptions<
-	TItem,
-	TNode extends CanvasNode = CanvasNode,
-	TEdge extends CanvasEdge = CanvasEdge
-> {
-	/**
-	 * Reactive getter returning raw domain items.
-	 */
-	items: () => TItem[];
-	/**
-	 * Factory function converting a domain item into a CanvasNode.
-	 */
-	toNode: (
-		item: TItem,
-		index: number,
-		context: { existingNode?: TNode; prevNodesMap: Map<string, TNode> }
-	) => TNode;
-	/**
-	 * Optional factory function converting domain items and generated nodes into CanvasEdges.
-	 */
-	toEdges?: (items: TItem[], nodes: TNode[]) => TEdge[];
-	/**
-	 * Optional default handle configuration provider for connectable nodes.
-	 */
-	defaultHandles?: (node: TNode) => HandleConfig[] | undefined;
-}
-
-/**
- * Headless Svelte 5 rune that synchronizes reactive domain items with SvelteFlow nodes/edges,
- * automatically untracking previous node reads, caching .measured dimensions, and normalizing
- * handle bounds to prevent Svelte 5 effect_update_depth_exceeded and marquee drag flashes.
- */
-export function createCanvasNodeSync<
-	TItem,
-	TNode extends CanvasNode = CanvasNode,
-	TEdge extends CanvasEdge = CanvasEdge
->(options: CreateCanvasNodeSyncOptions<TItem, TNode, TEdge>) {
-	let nodes = $state<TNode[]>([]);
-	let edges = $state<TEdge[]>([]);
-
-	$effect.pre(() => {
-		const rawItems = options.items();
-
-		// Untrack the read of current nodes to avoid recursive effect loops
-		const existingNodesMap = untrack(() => new Map(nodes.map((n) => [n.id, n])));
-
-		const newNodes = rawItems.map((item, index) => {
-			const existing = existingNodesMap.get((item as any)?.id);
-			const node = options.toNode(item, index, {
-				existingNode: existing,
-				prevNodesMap: existingNodesMap
-			});
-
-			// Automatically preserve measured dimensions if available
-			if (existing && (existing as any).measured && !(node as any).measured) {
-				(node as any).measured = { ...(existing as any).measured };
-			}
-
-			// Pre-populate handles if provided
-			if (options.defaultHandles && !(node as any).handles) {
-				const handles = options.defaultHandles(node);
-				if (handles) {
-					(node as any).handles = handles;
-				}
-			}
-
-			return node;
-		});
-
-		const newEdges = options.toEdges ? options.toEdges(rawItems, newNodes) : [];
-
-		nodes = newNodes;
-		edges = newEdges;
-	});
-
-	return {
-		get nodes() {
-			return nodes;
-		},
-		set nodes(value: TNode[]) {
-			nodes = value;
-		},
-		get edges() {
-			return edges;
-		},
-		set edges(value: TEdge[]) {
-			edges = value;
-		},
-		updateNodeMeasurements(id: string, width: number, height: number) {
-			const node = nodes.find((n) => n.id === id);
-			if (node) {
-				(node as any).measured = { width, height };
-			}
-		}
-	};
-}

package/src/canvas/createCanvasSelection.svelte.ts

@@ -1,51 +0,0 @@
-import type { CanvasInteractionPresetConfig } from './types.js';
-
-export interface CanvasSelectionOptions {
-	/**
-	 * Whether spacebar panning is currently active (suspends marquee selection).
-	 */
-	isSpacebarPanning?: boolean;
-	/**
-	 * Selection mode: 'partial' (default) selects nodes intersected by selection box,
-	 * 'full' requires nodes to be fully enclosed.
-	 */
-	selectionMode?: 'partial' | 'full';
-	/**
-	 * Additional keys that trigger multi-selection (default: ['Shift', 'Meta']).
-	 */
-	multiSelectionKey?: string[];
-}
-
-/**
- * Generates an interaction preset configured for left-click marquee drag-selection
- * while preserving middle-mouse and spacebar panning.
- */
-export function getMarqueeSelectionPreset(
-	options: CanvasSelectionOptions = {}
-): CanvasInteractionPresetConfig {
-	const isSpacebarPanning = options.isSpacebarPanning ?? false;
-
-	return {
-		snapGrid: [25, 25],
-		panOnDrag: isSpacebarPanning ? [0, 1, 2] : [1, 2],
-		panOnScroll: false,
-		selectionOnDrag: !isSpacebarPanning,
-		colorMode: 'system' as any,
-		multiSelectionKey: options.multiSelectionKey ?? ['Shift', 'Meta'],
-		selectionMode: (options.selectionMode ?? 'partial') as any
-	};
-}
-
-/**
- * Keyboard listener helper to deselect nodes on Escape.
- */
-export function handleDeselectOnEscape(
-	event: KeyboardEvent,
-	onDeselect: () => void
-): boolean {
-	if (event.key === 'Escape' || event.code === 'Escape') {
-		onDeselect();
-		return true;
-	}
-	return false;
-}

package/src/canvas/createCanvasShortcuts.ts

@@ -1,99 +0,0 @@
-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);
-	};
-}

package/src/canvas/createCanvasTrajectory.ts

@@ -1,207 +0,0 @@
-import { cubicOut } from 'svelte/easing';
-import type { XYPosition } from '@xyflow/svelte';
-import type {
-	CanvasNode,
-	FanOutTrajectoryOptions,
-	NodeTransition,
-	TrajectoryFunction,
-	TrajectoryPoint
-} from './types.js';
-
-/**
- * Standard linear trajectory: straight line interpolation with linear scale & opacity progression.
- */
-export const linearTrajectory: TrajectoryFunction = (
-	origin: XYPosition,
-	target: XYPosition,
-	progress: number
-): TrajectoryPoint => {
-	return {
-		position: {
-			x: origin.x + (target.x - origin.x) * progress,
-			y: origin.y + (target.y - origin.y) * progress
-		},
-		scale: progress,
-		opacity: Math.min(1, progress * 1.5)
-	};
-};
-
-/**
- * Linear position trajectory: pure position interpolation without altering scale or opacity.
- * Used for displaced sibling nodes to ensure their visibility remains unaltered.
- */
-export const linearPositionTrajectory: TrajectoryFunction = (
-	origin: XYPosition,
-	target: XYPosition,
-	progress: number
-): TrajectoryPoint => {
-	return {
-		position: {
-			x: origin.x + (target.x - origin.x) * progress,
-			y: origin.y + (target.y - origin.y) * progress
-		}
-	};
-};
-
-/**
- * Creates a fan-out trajectory where nodes arc outward from origin to target.
- * Matches the curved distribution shown in multi-node branching diagrams.
- */
-export function createFanOutTrajectory(options: FanOutTrajectoryOptions = {}): TrajectoryFunction {
-	const {
-		curvature = 0.4,
-		startScale = 0,
-		endScale = 1,
-		startOpacity = 0,
-		endOpacity = 1
-	} = options;
-
-	return (
-		origin: XYPosition,
-		target: XYPosition,
-		progress: number,
-		index: number,
-		total: number
-	): TrajectoryPoint => {
-		const dx = target.x - origin.x;
-		const dy = target.y - origin.y;
-
-		// Normalized index from -1 (top) to +1 (bottom)
-		const normIndex = total > 1 ? (index - (total - 1) / 2) / ((total - 1) / 2) : 0;
-
-		// Perpendicular control point offset to create smooth fan arc
-		const midX = origin.x + dx * 0.4;
-		const midY = origin.y + dy * 0.1 - normIndex * Math.abs(dx) * 0.15 * curvature;
-
-		// Quadratic Bezier interpolation: B(t) = (1-t)^2 * P0 + 2(1-t)t * P1 + t^2 * P2
-		const t = progress;
-		const oneMinusT = 1 - t;
-
-		const x = oneMinusT * oneMinusT * origin.x + 2 * oneMinusT * t * midX + t * t * target.x;
-		const y = oneMinusT * oneMinusT * origin.y + 2 * oneMinusT * t * midY + t * t * target.y;
-
-		const scale = startScale + (endScale - startScale) * progress;
-		const opacity = startOpacity + (endOpacity - startOpacity) * progress;
-
-		return {
-			position: { x, y },
-			scale,
-			opacity
-		};
-	};
-}
-
-/**
- * Creates a custom quadratic Bezier trajectory with a specified or dynamically calculated control point.
- */
-export function createBezierTrajectory(
-	getControlPoint: (origin: XYPosition, target: XYPosition) => XYPosition
-): TrajectoryFunction {
-	return (origin: XYPosition, target: XYPosition, progress: number): TrajectoryPoint => {
-		const cp = getControlPoint(origin, target);
-		const t = progress;
-		const oneMinusT = 1 - t;
-
-		const x = oneMinusT * oneMinusT * origin.x + 2 * oneMinusT * t * cp.x + t * t * target.x;
-		const y = oneMinusT * oneMinusT * origin.y + 2 * oneMinusT * t * cp.y + t * t * target.y;
-
-		return {
-			position: { x, y },
-			scale: progress,
-			opacity: progress
-		};
-	};
-}
-
-/**
- * Coordinates and animates multiple node transitions simultaneously with zero per-frame array allocations.
- * Directly mutates node positions and data (scale, opacity) in-place during the animation loop.
- */
-export function runMultiNodeTransition<TNode extends CanvasNode = CanvasNode>(
-	transitions: NodeTransition<TNode>[],
-	options: {
-		defaultDuration?: number;
-		defaultEasing?: (t: number) => number;
-		onUpdate?: () => void;
-		onComplete?: () => void;
-	} = {}
-): () => void {
-	if (transitions.length === 0) {
-		options.onComplete?.();
-		return () => {};
-	}
-
-	const { defaultDuration = 400, defaultEasing = cubicOut, onUpdate, onComplete } = options;
-
-	let isCancelled = false;
-	const startTime = Date.now();
-
-	const items = transitions.map((tr, i) => ({
-		...tr,
-		index: tr.index ?? i,
-		total: tr.total ?? transitions.length,
-		duration: tr.duration ?? defaultDuration,
-		easing: tr.easing ?? defaultEasing,
-		delay: tr.delay ?? 0,
-		trajectory: tr.trajectory ?? linearTrajectory
-	}));
-
-	function frame() {
-		if (isCancelled) return;
-
-		const now = Date.now();
-		let allCompleted = true;
-
-		for (let i = 0; i < items.length; i++) {
-			const item = items[i];
-			const elapsed = now - (startTime + item.delay);
-
-			if (elapsed < 0) {
-				allCompleted = false;
-				continue;
-			}
-
-			const rawProgress = item.duration <= 0 ? 1 : Math.min(elapsed / item.duration, 1);
-			const progress = item.duration <= 0 ? 1 : item.easing(rawProgress);
-
-			const point = item.trajectory(item.from, item.to, progress, item.index, item.total);
-
-			// Direct in-place mutation avoids array reconstruction during RAF
-			item.node.position = { ...point.position };
-
-			if (point.scale !== undefined || point.opacity !== undefined) {
-				if (!item.node.data) {
-					item.node.data = {} as any;
-				}
-				if (point.scale !== undefined) {
-					(item.node.data as any).scale = point.scale;
-				}
-				if (point.opacity !== undefined) {
-					(item.node.data as any).opacity = point.opacity;
-					const currentStyle = (item.node.style || '').replace(/opacity:\s*[^;]+;?/g, '').trim();
-					item.node.style = `${currentStyle ? currentStyle + '; ' : ''}opacity: ${point.opacity};`;
-				}
-			}
-
-			if (rawProgress < 1) {
-				allCompleted = false;
-			}
-		}
-
-		onUpdate?.();
-
-		if (!allCompleted) {
-			if (typeof requestAnimationFrame !== 'undefined') {
-				requestAnimationFrame(frame);
-			}
-		} else {
-			onComplete?.();
-		}
-	}
-
-	frame();
-
-	return () => {
-		isCancelled = true;
-	};
-}