From 087ef82618cb3b560e22ce6a5131120857277d01 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 18 Sep 2023 14:19:16 +0200
Subject: [PATCH] fix(svelte): pass dragHandle #3398

---
 .../svelte/src/routes/overview/+page.svelte   | 11 ++++++++++-
 .../overview/CustomNodeDragHandle.svelte      | 19 +++++++++++++++++++
 .../components/NodeWrapper/NodeWrapper.svelte |  2 +-
 3 files changed, 30 insertions(+), 2 deletions(-)
 create mode 100644 examples/svelte/src/routes/overview/CustomNodeDragHandle.svelte

diff --git a/examples/svelte/src/routes/overview/+page.svelte b/examples/svelte/src/routes/overview/+page.svelte
index 36027a67..5fdd7d47 100644
--- a/examples/svelte/src/routes/overview/+page.svelte
+++ b/examples/svelte/src/routes/overview/+page.svelte
@@ -15,12 +15,14 @@
 	} from '@xyflow/svelte';
 
 	import CustomNode from './CustomNode.svelte';
+	import CustomNodeDragHandle from './CustomNodeDragHandle.svelte';
 	import CustomEdge from './CustomEdge.svelte';
 
 	import '@xyflow/svelte/dist/style.css';
 
 	const nodeTypes: NodeTypes = {
-		custom: CustomNode
+		custom: CustomNode,
+		dragHandle: CustomNodeDragHandle
 	};
 
 	const edgeTypes: EdgeTypes = {
@@ -68,6 +70,13 @@
 			style: 'border: 2px solid #ff5050;',
 			position: { x: 450, y: 150 }
 		},
+		{
+			id: 'C',
+			type: 'dragHandle',
+			data: { label: 'custom drag handle' },
+			dragHandle: '.custom-drag-handle',
+			position: { x: 450, y: 250 }
+		},
 		{
 			id: '4',
 			type: 'custom',
diff --git a/examples/svelte/src/routes/overview/CustomNodeDragHandle.svelte b/examples/svelte/src/routes/overview/CustomNodeDragHandle.svelte
new file mode 100644
index 00000000..dcdddfc8
--- /dev/null
+++ b/examples/svelte/src/routes/overview/CustomNodeDragHandle.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import type { NodeProps } from '@xyflow/svelte';
+
+	type $$Props = NodeProps;
+
+	export let data: { label: string } = { label: 'Node' };
+</script>
+
+<div class="custom">
+	<div>{data.label}</div>
+	<div class="custom-drag-handle" style="width:15px;height:15px;background:#222;" />
+</div>
+
+<style>
+	.custom {
+		background: white;
+		padding: 10px;
+	}
+</style>
diff --git a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
index a629c107..8730b9e0 100644
--- a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
+++ b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
@@ -95,7 +95,7 @@
       nodeId: id,
       isSelectable: selectable,
       disabled: false,
-      handleSelector: undefined,
+      handleSelector: dragHandle,
       noDragClassName: 'nodrag',
       store
     }}