@pixerate/editor-svelte 0.15.2 → 0.16.0

package/src/canvas/createCanvasClipboard.svelte.ts

@@ -1,219 +0,0 @@
-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/createCanvasDisplacement.ts

@@ -1,253 +0,0 @@
-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,
-		minY
-	} = 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;
-
-	// Vertical displacement parameters: upward and downward row clearance
-	const deltaUp = Math.max(0, originNode.position.y - childBounds.y + gap);
-	const deltaDown = Math.max(
-		0,
-		childBounds.y + childBounds.height - (originNode.position.y + originHeight) + gap
-	);
-
-	// Both above and below displace equally so the row expands symmetrically
-	const equalDelta = Math.max(deltaUp, deltaDown);
-
-	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;
-			}
-		} else if (direction === 'vertical') {
-			// Row grows vertically:
-			// Nodes strictly above the origin node move up by equalDelta
-			// Nodes strictly below the origin node move down by equalDelta
-			// Both above and below displace equally; horizontal position (x) is strictly preserved
-			if (node.position.y < originNode.position.y) {
-				if (equalDelta > 0) {
-					newY -= equalDelta;
-					moved = true;
-				}
-			} else if (node.position.y >= originNode.position.y + originHeight * 0.5) {
-				if (equalDelta > 0) {
-					newY += equalDelta;
-					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;
-}