@pixerate/editor-svelte 0.15.3 → 0.16.0

package/src/canvas/__tests__/canvas-graph.test.ts

@@ -1,159 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import {
-	createCanvasGraph,
-	calculateGraphDifferences,
-	replaceNodeInGraph
-} from '../createCanvasGraph.svelte.js';
-import type { CanvasNode, CanvasEdge } from '../types.js';
-
-describe('createCanvasGraph & Graph Operations', () => {
-	const createSampleNode = (id: string, x = 0, y = 0): CanvasNode => ({
-		id,
-		position: { x, y },
-		data: { label: `Node ${id}` }
-	});
-
-	const createSampleEdge = (id: string, source: string, target: string): CanvasEdge => ({
-		id,
-		source,
-		target
-	});
-
-	it('initializes with default empty or provided nodes and edges', () => {
-		const graph = createCanvasGraph({
-			initialNodes: [createSampleNode('1')],
-			initialEdges: [createSampleEdge('e1', '1', '2')]
-		});
-
-		expect(graph.nodes).toHaveLength(1);
-		expect(graph.edges).toHaveLength(1);
-		expect(graph.nodes[0].id).toBe('1');
-	});
-
-	it('adds nodes and ignores duplicates', () => {
-		const onNodesChange = vi.fn();
-		const graph = createCanvasGraph({ onNodesChange });
-
-		graph.addNodeOrNodes(createSampleNode('1'));
-		expect(graph.nodes).toHaveLength(1);
-		expect(onNodesChange).toHaveBeenCalledTimes(1);
-
-		// Adding existing node does not duplicate
-		graph.addNodeOrNodes(createSampleNode('1'));
-		expect(graph.nodes).toHaveLength(1);
-
-		// Adding multiple nodes
-		graph.addNodeOrNodes([createSampleNode('2'), createSampleNode('3')]);
-		expect(graph.nodes).toHaveLength(3);
-	});
-
-	it('adds and removes edges cleanly', () => {
-		const onEdgesChange = vi.fn();
-		const graph = createCanvasGraph({ onEdgesChange });
-
-		const e1 = createSampleEdge('e1', '1', '2');
-		const e2 = createSampleEdge('e2', '2', '3');
-
-		graph.addEdge(e1);
-		expect(graph.edges).toHaveLength(1);
-
-		graph.addEdges([e2]);
-		expect(graph.edges).toHaveLength(2);
-
-		graph.removeEdges([e1]);
-		expect(graph.edges).toHaveLength(1);
-		expect(graph.edges[0].id).toBe('e2');
-	});
-
-	it('removes nodes by reference or ID matching', () => {
-		const n1 = createSampleNode('1');
-		const n2 = createSampleNode('2');
-		const graph = createCanvasGraph({ initialNodes: [n1, n2] });
-
-		graph.removeNodes([n1]);
-		expect(graph.nodes).toHaveLength(1);
-		expect(graph.nodes[0].id).toBe('2');
-	});
-
-	it('replaces a node and preserves connected edges when keepEdges is true', () => {
-		const n1 = createSampleNode('1');
-		const n2 = createSampleNode('2');
-		const e1 = createSampleEdge('e1', '1', '2');
-		const n1Replacement = createSampleNode('new-1', 10, 10);
-
-		const result = replaceNodeInGraph([n1, n2], [e1], n1, n1Replacement, true);
-		expect(result.nodes.some((n) => n.id === 'new-1')).toBe(true);
-		expect(result.nodes.some((n) => n.id === '1')).toBe(false);
-
-		// Edge should have updated source to new-1
-		expect(result.edges).toHaveLength(1);
-		expect(result.edges[0].source).toBe('new-1');
-		expect(result.edges[0].target).toBe('2');
-	});
-
-	it('replaces a node without preserving edges when keepEdges is false', () => {
-		const n1 = createSampleNode('1');
-		const n2 = createSampleNode('2');
-		const e1 = createSampleEdge('e1', '1', '2');
-		const n1Replacement = createSampleNode('new-1', 10, 10);
-
-		const result = replaceNodeInGraph([n1, n2], [e1], n1, n1Replacement, false);
-		expect(result.nodes.some((n) => n.id === 'new-1')).toBe(true);
-		expect(result.edges).toHaveLength(1);
-		expect(result.edges[0].source).toBe('1'); // Unchanged
-	});
-
-	it('adds connected nodes connecting inbound and outbound targets', () => {
-		const graph = createCanvasGraph();
-		const inNode = createSampleNode('in');
-		const outNode = createSampleNode('out');
-		const midNode = createSampleNode('mid');
-
-		graph.addNodeOrNodes([inNode, outNode]);
-
-		graph.addConnectedNodes({
-			nodesToAdd: [midNode],
-			inboundNodes: [inNode],
-			outboundNodes: [outNode],
-			getEdgeLabel: (src, tgt) => `${src.id}->${tgt.id}`
-		});
-
-		expect(graph.nodes).toHaveLength(3);
-		expect(graph.edges).toHaveLength(2);
-		expect(graph.edges.find((e) => e.source === 'in' && e.target === 'mid')?.label).toBe('in->mid');
-		expect(graph.edges.find((e) => e.source === 'mid' && e.target === 'out')?.label).toBe('mid->out');
-	});
-
-	it('accurately calculates graph differences against a baseline', () => {
-		const n1 = createSampleNode('1', 0, 0);
-		const n2 = createSampleNode('2', 50, 50);
-		const e1 = createSampleEdge('e1', '1', '2');
-
-		const baseline = {
-			nodes: [n1, n2],
-			edges: [e1]
-		};
-
-		// Node 2 position changed, node 3 added, edge 1 removed, edge 2 added
-		const n2Changed = createSampleNode('2', 100, 100);
-		const n3Added = createSampleNode('3', 200, 200);
-		const e2Added = createSampleEdge('e2', '2', '3');
-
-		const current = {
-			nodes: [n1, n2Changed, n3Added],
-			edges: [e2Added]
-		};
-
-		const diff = calculateGraphDifferences(current, baseline);
-
-		expect(diff.changedNodes).toHaveLength(2); // n2 changed + n3 newly added
-		expect(diff.changedNodes.map((n) => n.id)).toContain('2');
-		expect(diff.changedNodes.map((n) => n.id)).toContain('3');
-		expect(diff.removedNodes).toHaveLength(0);
-
-		expect(diff.removedEdges).toHaveLength(1);
-		expect(diff.removedEdges[0].id).toBe('e1');
-		expect(diff.changedEdges).toHaveLength(1);
-		expect(diff.changedEdges[0].id).toBe('e2');
-	});
-});

package/src/canvas/__tests__/canvas-interactions.test.ts

@@ -1,86 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import {
-  createCanvasInteractions,
-  defaultSvelteFlowPreset,
-  miroCompatiblePreset,
-  restorePanelPointerEvents
-} from '../createCanvasInteractions.svelte.js';
-
-describe('createCanvasInteractions', () => {
-  it('exposes valid default presets', () => {
-    expect(defaultSvelteFlowPreset.snapGrid).toEqual([25, 25]);
-    expect(defaultSvelteFlowPreset.panOnScroll).toBe(false);
-    expect(defaultSvelteFlowPreset.selectionOnDrag).toBe(false);
-
-    expect(miroCompatiblePreset.selectionOnDrag).toBe(true);
-    expect(miroCompatiblePreset.panOnDrag).toEqual([1, 2]);
-  });
-
-  it('toggles spacebar panning mode on Space keydown and keyup', () => {
-    const target = new EventTarget();
-    const onPanModeChange = vi.fn();
-
-    const interactions = createCanvasInteractions({
-      targetElement: target as unknown as HTMLElement,
-      onPanModeChange
-    });
-
-    const cleanup = interactions.attachListeners(target as unknown as HTMLElement);
-
-    // Press Space
-    const downEvent = new KeyboardEvent('keydown', { key: ' ' });
-    target.dispatchEvent(downEvent);
-
-    expect(interactions.isSpacebarPanning).toBe(true);
-    expect(onPanModeChange).toHaveBeenCalledWith(true);
-
-    // Release Space
-    const upEvent = new KeyboardEvent('keyup', { key: ' ' });
-    target.dispatchEvent(upEvent);
-
-    expect(interactions.isSpacebarPanning).toBe(false);
-    expect(onPanModeChange).toHaveBeenCalledWith(false);
-
-    cleanup();
-  });
-
-  it('detects trackpad pinch on wheel event with ctrlKey', () => {
-    const target = new EventTarget();
-    const onTrackpadDetected = vi.fn();
-
-    const interactions = createCanvasInteractions({
-      targetElement: target as unknown as HTMLElement,
-      onTrackpadDetected
-    });
-
-    const cleanup = interactions.attachListeners(target as unknown as HTMLElement);
-
-    expect(interactions.trackpadDetected).toBe(false);
-
-    // Normal wheel without ctrlKey
-    const wheelEvent = new WheelEvent('wheel', { ctrlKey: false });
-    target.dispatchEvent(wheelEvent);
-    expect(interactions.trackpadDetected).toBe(false);
-    expect(onTrackpadDetected).not.toHaveBeenCalled();
-
-    // Trackpad pinch with ctrlKey
-    const pinchEvent = new WheelEvent('wheel', { ctrlKey: true });
-    target.dispatchEvent(pinchEvent);
-    expect(interactions.trackpadDetected).toBe(true);
-    expect(onTrackpadDetected).toHaveBeenCalledTimes(1);
-
-    cleanup();
-  });
-
-  it('restores pointer events on DOM panels', () => {
-    const panel = document.createElement('div');
-    panel.className = 'svelte-flow__panel';
-    panel.style.pointerEvents = 'none';
-    document.body.appendChild(panel);
-
-    restorePanelPointerEvents();
-
-    expect(panel.style.pointerEvents).toBe('auto');
-    document.body.removeChild(panel);
-  });
-});

package/src/canvas/__tests__/canvas-layout.test.ts

@@ -1,75 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import {
-	getCenteredNodePosition,
-	centerNodes,
-	getLayoutedNodes
-} from '../createCanvasLayout.js';
-import type { CanvasNode, CanvasEdge } from '../types.js';
-
-describe('createCanvasLayout & Geometry Helpers', () => {
-	it('calculates centered node position correctly', () => {
-		const screenDimensions = { width: 1000, height: 800 };
-		const screenToFlowPosition = (pos: { x: number; y: number }) => ({ x: pos.x, y: pos.y });
-
-		const pos = getCenteredNodePosition(200, 100, screenToFlowPosition, screenDimensions);
-		// Center of 1000x800 is (500, 400). Top-left of 200x100 is (500 - 100, 400 - 50) = (400, 350)
-		expect(pos.x).toBe(400);
-		expect(pos.y).toBe(350);
-	});
-
-	it('centers multiple nodes using centerNodes', () => {
-		const screenDimensions = { width: 1000, height: 800 };
-		const screenToFlowPosition = (pos: { x: number; y: number }) => pos;
-
-		const nodes: CanvasNode[] = [
-			{ id: '1', position: { x: 0, y: 0 }, data: {} },
-			{ id: '2', position: { x: 200, y: 100 }, data: {} }
-		];
-
-		const getNodesBounds = () => ({ x: 0, y: 0, width: 300, height: 200 });
-
-		const centered = centerNodes(nodes, screenToFlowPosition, getNodesBounds, screenDimensions);
-
-		// Center of viewport is (500, 400). Upper left for 300x200 bounding box is (350, 300).
-		// DeltaX = 350 - 0 = 350, DeltaY = 300 - 0 = 300.
-		expect(centered[0].position.x).toBe(350);
-		expect(centered[0].position.y).toBe(300);
-		expect(centered[1].position.x).toBe(550);
-		expect(centered[1].position.y).toBe(400);
-	});
-
-	it('computes Dagre hierarchical layout positions for nodes and edges', () => {
-		const nodes: CanvasNode[] = [
-			{ id: 'root', position: { x: 0, y: 0 }, data: {}, measured: { width: 100, height: 100 } },
-			{ id: 'child1', position: { x: 0, y: 0 }, data: {}, measured: { width: 100, height: 100 } },
-			{ id: 'child2', position: { x: 0, y: 0 }, data: {}, measured: { width: 100, height: 100 } }
-		];
-
-		const edges: CanvasEdge[] = [
-			{ id: 'e1', source: 'root', target: 'child1' },
-			{ id: 'e2', source: 'root', target: 'child2' }
-		];
-
-		const getNodesBounds = () => ({ x: 100, y: 100, width: 400, height: 400 });
-
-		const layouted = getLayoutedNodes(nodes, edges, getNodesBounds, {
-			direction: 'LR',
-			ranksep: 80,
-			nodesep: 40
-		});
-
-		expect(layouted).toHaveLength(3);
-
-		const root = layouted.find((n) => n.id === 'root')!;
-		const child1 = layouted.find((n) => n.id === 'child1')!;
-		const child2 = layouted.find((n) => n.id === 'child2')!;
-
-		// Root should be to the left of child nodes in 'LR' layout
-		expect(root.position.x).toBeLessThan(child1.position.x);
-		expect(root.position.x).toBeLessThan(child2.position.x);
-
-		// Target and source positions should be configured for horizontal layout
-		expect(root.sourcePosition).toBe('right');
-		expect(child1.targetPosition).toBe('left');
-	});
-});

package/src/canvas/__tests__/canvas-multi-drag.test.ts

@@ -1,112 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { createCanvasMultiDrag } from '../createCanvasMultiDrag.svelte.js';
-import {
-	getMarqueeSelectionPreset,
-	handleDeselectOnEscape
-} from '../createCanvasSelection.svelte.js';
-import type { CanvasNode } from '../types.js';
-
-describe('createCanvasMultiDrag & Selection Helpers', () => {
-	const sampleNodes: CanvasNode[] = [
-		{ id: 'node-lead', position: { x: 100, y: 100 }, data: {} },
-		{ id: 'node-sub-1', position: { x: 100, y: 180 }, data: {} },
-		{ id: 'node-sub-2', position: { x: 100, y: 260 }, data: {} }
-	];
-
-	it('returns null and does not activate multi-drag if only 1 node is selected', () => {
-		const multiDrag = createCanvasMultiDrag();
-		const state = multiDrag.startMultiDrag('node-lead', ['node-lead'], sampleNodes);
-
-		expect(state).toBeNull();
-		expect(multiDrag.isMultiDrag).toBe(false);
-		expect(multiDrag.count).toBe(0);
-	});
-
-	it('computes relative follower offsets, stack fan-out, and rotational tilt for multi-selection', () => {
-		const multiDrag = createCanvasMultiDrag({
-			stackOffsetStepX: 5,
-			stackOffsetStepY: 6,
-			rotationAngles: [-2, 3]
-		});
-
-		const state = multiDrag.startMultiDrag(
-			'node-lead',
-			['node-lead', 'node-sub-1', 'node-sub-2'],
-			sampleNodes
-		);
-
-		expect(state).not.toBeNull();
-		expect(multiDrag.isMultiDrag).toBe(true);
-		expect(multiDrag.count).toBe(3);
-		expect(multiDrag.leadId).toBe('node-lead');
-
-		// Check follower 1
-		const f1 = multiDrag.getFollowerTransform('node-sub-1');
-		expect(f1.isFollower).toBe(true);
-		expect(f1.stackOffsetX).toBe(5);
-		expect(f1.stackOffsetY).toBe(6);
-		expect(f1.rotationDeg).toBe(-2);
-		expect(f1.zIndex).toBe(49); // baseZIndex (50) - 1
-
-		// Check follower 2
-		const f2 = multiDrag.getFollowerTransform('node-sub-2');
-		expect(f2.isFollower).toBe(true);
-		expect(f2.stackOffsetX).toBe(10);
-		expect(f2.stackOffsetY).toBe(12);
-		expect(f2.rotationDeg).toBe(3);
-		expect(f2.zIndex).toBe(48); // baseZIndex (50) - 2
-
-		// Non-follower check
-		const fLead = multiDrag.getFollowerTransform('node-lead');
-		expect(fLead.isFollower).toBe(false);
-	});
-
-	it('restores original positions upon drag cancellation', () => {
-		const multiDrag = createCanvasMultiDrag();
-		multiDrag.startMultiDrag(
-			'node-lead',
-			['node-lead', 'node-sub-1'],
-			sampleNodes
-		);
-
-		let restoredItems: any[] = [];
-		const restores = multiDrag.cancelMultiDrag((items) => {
-			restoredItems = items;
-		});
-
-		expect(restores).toHaveLength(1);
-		expect(restores[0].id).toBe('node-sub-1');
-		expect(restores[0].originalPosition).toEqual({ x: 100, y: 180 });
-		expect(restoredItems).toEqual(restores);
-		expect(multiDrag.isMultiDrag).toBe(false);
-	});
-
-	it('generates marquee selection preset with spacebar panning awareness', () => {
-		const normalPreset = getMarqueeSelectionPreset({ isSpacebarPanning: false });
-		expect(normalPreset.selectionOnDrag).toBe(true);
-		expect(normalPreset.panOnDrag).toEqual([1, 2]);
-
-		const panPreset = getMarqueeSelectionPreset({ isSpacebarPanning: true });
-		expect(panPreset.selectionOnDrag).toBe(false);
-		expect(panPreset.panOnDrag).toEqual([0, 1, 2]);
-	});
-
-	it('handles deselect on Escape key press', () => {
-		let deselected = false;
-		const handled = handleDeselectOnEscape(
-			{ key: 'Escape', code: 'Escape' } as KeyboardEvent,
-			() => {
-				deselected = true;
-			}
-		);
-
-		expect(handled).toBe(true);
-		expect(deselected).toBe(true);
-
-		const ignored = handleDeselectOnEscape(
-			{ key: 'Enter', code: 'Enter' } as KeyboardEvent,
-			() => {}
-		);
-		expect(ignored).toBe(false);
-	});
-});

package/src/canvas/__tests__/canvas-node-sync.svelte.test.ts

@@ -1,104 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { flushSync } from 'svelte';
-import { Position } from '@xyflow/svelte';
-import {
-	preserveNodeMeasurements,
-	normalizeNodeHandles,
-	createCanvasNodeSync,
-	type HandleConfig
-} from '../createCanvasNodeSync.svelte.js';
-import type { CanvasNode } from '../types.js';
-
-describe('createCanvasNodeSync & Node Measurement Caching', () => {
-	it('preserves measured dimensions from existing nodes to newly created nodes', () => {
-		const existingNodes: CanvasNode[] = [
-			{
-				id: 'node-1',
-				position: { x: 100, y: 100 },
-				data: {},
-				measured: { width: 280, height: 160 }
-			} as any,
-			{
-				id: 'node-2',
-				position: { x: 200, y: 200 },
-				data: {}
-			} as any
-		];
-
-		const freshNodes: CanvasNode[] = [
-			{ id: 'node-1', position: { x: 100, y: 100 }, data: { title: 'Updated' } } as any,
-			{ id: 'node-2', position: { x: 200, y: 200 }, data: { title: 'Fresh' } } as any,
-			{ id: 'node-3', position: { x: 300, y: 300 }, data: { title: 'Brand New' } } as any
-		];
-
-		const preserved = preserveNodeMeasurements(freshNodes, existingNodes);
-
-		expect((preserved[0] as any).measured).toEqual({ width: 280, height: 160 });
-		expect((preserved[1] as any).measured).toBeUndefined();
-		expect((preserved[2] as any).measured).toBeUndefined();
-	});
-
-	it('normalizes node handles to prevent xyflow forceInitialRender selection flash', () => {
-		const rawNode: CanvasNode = {
-			id: 'node-1',
-			position: { x: 0, y: 0 },
-			data: {}
-		};
-
-		const defaultHandles: HandleConfig[] = [
-			{ id: null, type: 'target', position: Position.Left, x: 0, y: 50, width: 12, height: 12 },
-			{ id: null, type: 'source', position: Position.Right, x: 260, y: 50, width: 12, height: 12 }
-		];
-
-		const normalized = normalizeNodeHandles(rawNode, defaultHandles);
-
-		expect((normalized as any).handles).toHaveLength(2);
-		expect((normalized as any).handles[0].position).toBe(Position.Left);
-		expect((normalized as any).handles[1].position).toBe(Position.Right);
-	});
-
-	it('synchronizes domain items to nodes and edges while caching measurements across ticks', () => {
-		let domainItems = [
-			{ id: 'item-1', name: 'Task 1', dependencies: [] },
-			{ id: 'item-2', name: 'Task 2', dependencies: ['item-1'] }
-		];
-
-		let sync: ReturnType<typeof createCanvasNodeSync<any>>;
-
-		const cleanup = $effect.root(() => {
-			sync = createCanvasNodeSync({
-				items: () => domainItems,
-				toNode: (item) => ({
-					id: item.id,
-					position: { x: 10, y: 20 },
-					data: { label: item.name }
-				}),
-				toEdges: (items) =>
-					items.flatMap((item) =>
-						item.dependencies.map((depId) => ({
-							id: `edge-${depId}-${item.id}`,
-							source: depId,
-							target: item.id
-						}))
-					),
-				defaultHandles: () => [
-					{ id: 'in', type: 'target', position: Position.Left },
-					{ id: 'out', type: 'source', position: Position.Right }
-				]
-			});
-		});
-
-		flushSync();
-
-		expect(sync!.nodes).toHaveLength(2);
-		expect(sync!.edges).toHaveLength(1);
-		expect(sync!.edges[0].id).toBe('edge-item-1-item-2');
-		expect((sync!.nodes[0] as any).handles).toHaveLength(2);
-
-		// Simulate xyflow measuring node-1
-		sync!.updateNodeMeasurements('item-1', 250, 120);
-		expect((sync!.nodes[0] as any).measured).toEqual({ width: 250, height: 120 });
-
-		cleanup();
-	});
-});

package/src/canvas/__tests__/canvas-shortcuts.test.ts

@@ -1,59 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { createCanvasShortcuts } from '../createCanvasShortcuts.js';
-import type { CanvasNode } from '../types.js';
-
-describe('createCanvasShortcuts', () => {
-	it('attaches listener, handles hotkeys, and cleans up', () => {
-		const target = new EventTarget();
-		const onDelete = vi.fn();
-		const onDuplicate = vi.fn();
-		const onSelectAll = vi.fn();
-
-		const selectedNodes: CanvasNode[] = [{ id: 'node-1', position: { x: 0, y: 0 }, data: {} }];
-
-		const destroy = createCanvasShortcuts({
-			targetElement: target as unknown as HTMLElement,
-			getSelectedNodes: () => selectedNodes,
-			onDelete,
-			onDuplicate,
-			onSelectAll
-		});
-
-		// Trigger Backspace -> onDelete
-		const deleteEvent = new CustomEvent('keydown', { cancelable: true });
-		Object.assign(deleteEvent, { key: 'Backspace' });
-		target.dispatchEvent(deleteEvent);
-
-		expect(onDelete).toHaveBeenCalledWith(selectedNodes);
-
-		// Trigger Meta + D -> onDuplicate
-		const dupEvent = new CustomEvent('keydown', { cancelable: true });
-		Object.assign(dupEvent, { key: 'd', metaKey: true });
-		target.dispatchEvent(dupEvent);
-
-		expect(onDuplicate).toHaveBeenCalledWith(selectedNodes);
-
-		// Trigger Meta + A -> onSelectAll
-		const allEvent = new CustomEvent('keydown', { cancelable: true });
-		Object.assign(allEvent, { key: 'a', metaKey: true });
-		target.dispatchEvent(allEvent);
-
-		expect(onSelectAll).toHaveBeenCalledTimes(1);
-
-		// Trigger shortcut while targeting an input -> should be ignored
-		const inputEl = { tagName: 'INPUT' } as unknown as HTMLElement;
-		const ignoredEvent = new CustomEvent('keydown', { cancelable: true });
-		Object.defineProperty(ignoredEvent, 'target', { value: inputEl });
-		Object.assign(ignoredEvent, { key: 'Backspace' });
-		target.dispatchEvent(ignoredEvent);
-
-		expect(onDelete).toHaveBeenCalledTimes(1); // Not called again
-
-		// Destroy listeners
-		destroy();
-
-		// Dispatching after destroy should do nothing
-		target.dispatchEvent(deleteEvent);
-		expect(onDelete).toHaveBeenCalledTimes(1);
-	});
-});