Merge pull request #5428 from Karl255/#5273-handle-click-target-fix

Allow detached handles

examples/svelte/src/components/Header/Header.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 
 	const routes = [
 		'a11y',
@@ -9,6 +9,7 @@
 		'custom-connection-line',
 		'customnode',
 		'dagre',
+		'detached-handle',
 		'drag-n-drop',
 		'edges',
 		'figma',
@@ -36,7 +37,7 @@
 
 <header>
 	<div class="logo">Svelte Flow</div>
-	<select onchange={onChange} value={$page.route.id}>
+	<select onchange={onChange} value={page.route.id}>
 		{#each routes as route}
 			<option value={`/examples/${route}`}>{route}</option>
 		{/each}

examples/svelte/src/routes/examples/detached-handle/+page.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import {
+		SvelteFlow,
+		Background,
+		MiniMap,
+		Position,
+		type Node,
+		type NodeTypes,
+		type Edge
+	} from '@xyflow/svelte';
+	import CustomNode from './CustomNode.svelte';
+
+	import '@xyflow/svelte/dist/style.css';
+
+	const nodeTypes: NodeTypes = {
+		custom: CustomNode
+	};
+
+	let nodes = $state.raw<Node[]>([
+		{
+			id: '1',
+			type: 'custom',
+			data: { label: 'node 1' },
+			position: { x: 0, y: 0 },
+			sourcePosition: Position.Right
+		},
+		{
+			id: '2',
+			type: 'custom',
+			data: { label: 'node 2' },
+			position: { x: 250, y: 250 }
+		}
+	]);
+
+	let edges = $state.raw<Edge[]>([]);
+</script>
+
+<SvelteFlow bind:nodes bind:edges {nodeTypes} fitView>
+	<Background />
+	<MiniMap />
+</SvelteFlow>

examples/svelte/src/routes/examples/detached-handle/CustomNode.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { Handle, Position, type NodeProps, type Node } from '@xyflow/svelte';
+
+	let { data }: NodeProps<Node> = $props();
+</script>
+
+<div class="custom">
+	<div>
+		{data.label}
+	</div>
+
+	<Handle type="target" position={Position.Left} />
+	<Handle type="source" position={Position.Right}>
+		<button class="detached-handle">➡️</button>
+	</Handle>
+</div>
+
+<style>
+	.custom {
+		background-color: white;
+		padding: 10px;
+		border: 1px solid #777;
+		border-radius: 20px;
+	}
+
+	.detached-handle {
+		position: absolute;
+		top: 50%;
+		left: 1rem;
+		transform: translateY(-50%);
+		width: 2rem;
+		height: 2rem;
+		border: none;
+		border-radius: 50%;
+	}
+</style>