Svelte NodeToolbar with E2E (#3643)

* Added NodeToolbar

* Added comments & fixed default behaviour in svelte

* Added e2e-tests for NodeToolbar component & added data-id to react NodeToolbar

* refactor(svelte/NodeToolbar): cleanup

* refactor(node-toolbar): add system utils

---------

Co-authored-by: moklick <info@moritzklack.com>

examples/svelte/src/generic-tests/node-toolbar/components/ToolbarNode.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { NodeToolbar, type NodeProps, Handle, Position } from '@xyflow/svelte';
+
+	type $$Props = NodeProps;
+
+	export let data: $$Props['data'];
+</script>
+
+<NodeToolbar
+	isVisible={data.toolbarVisible}
+	position={data.toolbarPosition}
+	align={data.toolbarAlign}
+>
+	<button>delete</button>
+	<button>copy</button>
+	<button>expand</button>
+</NodeToolbar>
+<div class="node">
+	<div>{data.label}</div>
+	<Handle type="target" position={Position.Left} />
+	<Handle type="source" position={Position.Right} />
+</div>
+
+<style>
+	.node {
+		width: 200px;
+		height: 50px;
+		border: solid 1px black;
+	}
+</style>

examples/svelte/src/generic-tests/node-toolbar/general.ts

@@ -0,0 +1,50 @@
+import { Position, type Node } from '@xyflow/svelte';
+import ToolbarNode from './components/ToolbarNode.svelte';
+
+const positions = ['top', 'right', 'bottom', 'left'];
+const alignments = ['start', 'center', 'end'];
+
+const nodes: Node[] = [
+	{
+		id: 'default-node',
+		type: 'ToolbarNode',
+		data: { label: 'toolbar top', toolbarPosition: Position.Top },
+		position: { x: 0, y: -200 },
+		class: 'react-flow__node-default'
+	}
+];
+
+positions.forEach((position, posIndex) => {
+	alignments.forEach((align, alignIndex) => {
+		const id = `node-${align}-${position}`;
+		nodes.push({
+			id,
+			type: 'ToolbarNode',
+			data: {
+				label: `toolbar ${position} ${align}`,
+				toolbarPosition: position as Position,
+				toolbarAlign: align,
+				toolbarVisible: true
+			},
+			class: 'react-flow__node-default',
+			position: { x: posIndex * 300, y: alignIndex * 100 }
+		});
+	});
+});
+
+export default {
+	flowProps: {
+		fitView: true,
+		nodeTypes: {
+			ToolbarNode
+		},
+		nodes,
+		edges: [
+			{
+				id: 'first-edge',
+				source: 'default-node',
+				target: 'node-start-top'
+			}
+		]
+	}
+} satisfies FlowConfig;