fix(svelte): repair selection, add multi selection closes #3557

examples/svelte/src/routes/customnode/+page.svelte

@@ -23,28 +23,6 @@
 
 	const bgColor = writable('#1A192B');
 
-	const onChange: ChangeEventHandler<HTMLInputElement> = (event) => {
-		nodes.update((nds) =>
-			nds.map((node) => {
-				if (node.type !== 'colorNode') {
-					return node;
-				}
-
-				const color = (event.target as HTMLInputElement)?.value;
-
-				bgColor.set(color);
-
-				return {
-					...node,
-					data: {
-						...node.data,
-						color
-					}
-				};
-			})
-		);
-	};
-
 	const nodes = writable<Node[]>([
 		{
 			id: '1',
@@ -56,17 +34,9 @@
 		{
 			id: '2',
 			type: 'colorNode',
-			data: { onChange: onChange, color: $bgColor },
-			style: 'border: 1px solid #777; padding: 10px',
+			data: { colorStore: bgColor },
 			position: { x: 250, y: 50 }
 		},
-		{
-			id: '2a',
-			type: 'colorNode',
-			data: { onChange: onChange, color: $bgColor },
-			style: 'border: 1px solid #777; padding: 10px',
-			position: { x: 250, y: 520 }
-		},
 		{
 			id: '3',
 			type: 'output',
@@ -115,7 +85,7 @@
 	{nodes}
 	{edges}
 	{nodeTypes}
-	style="--bgcolor: {$bgColor}"
+	style="--background-color: {$bgColor}"
 	fitView
 	on:connect={onConnect}
 >
@@ -123,9 +93,3 @@
 	<Background variant={BackgroundVariant.Dots} />
 	<MiniMap />
 </SvelteFlow>
-
-<style>
-	:global(.svelte-flow) {
-		background: var(--bgcolor);
-	}
-</style>

examples/svelte/src/routes/customnode/CustomNode.svelte

@@ -1,21 +1,40 @@
 <script lang="ts">
+	import type { Writable } from 'svelte/store';
 	import { Handle, Position, type NodeProps } from '@xyflow/svelte';
 
 	type $$Props = NodeProps;
 
-	export let data: { color: string; onChange: () => void } = { color: '#111', onChange: () => {} };
+	export let data: { colorStore: Writable<string> };
+
+	const { colorStore } = data;
 </script>
 
-<Handle type="target" position={Position.Left} on:connect />
-<div>
-	Custom Color Picker Node: <strong>{data.color}</strong>
+<div class="custom">
+	<Handle type="target" position={Position.Left} on:connect />
+	<div>
+		Custom Color Picker Node: <strong>{$colorStore}</strong>
+	</div>
+	<input
+		class="nodrag"
+		type="color"
+		on:input={(evt) => colorStore.set(evt.currentTarget.value)}
+		value={$colorStore}
+	/>
+	<Handle type="source" position={Position.Right} id="a" style="top: 20px;" on:connect />
+	<Handle
+		type="source"
+		position={Position.Right}
+		id="b"
+		style="top: auto; bottom: 10px;"
+		on:connect
+	/>
 </div>
-<input class="nodrag" type="color" on:input={data.onChange} value={data.color} />
-<Handle type="source" position={Position.Right} id="a" style="top: 10px;" on:connect />
-<Handle
-	type="source"
-	position={Position.Right}
-	id="b"
-	style="top: auto; bottom: 10px;"
-	on:connect
-/>
+
+<style>
+	.custom {
+		background-color: white;
+		padding: 10px;
+		border: 1px solid #777;
+		border-radius: 20px;
+	}
+</style>