feat(props): add nodeClickDistance

packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte

@@ -4,6 +4,11 @@
 
   import { NodeWrapper } from '$lib/components/NodeWrapper';
   import { useStore } from '$lib/store';
+  import type { NodeRendererProps } from './types';
+
+  type $$Props = NodeRendererProps;
+
+  export let nodeClickDistance: $$Props['nodeClickDistance'] = 0;
 
   const {
     visibleNodes,
@@ -76,6 +81,7 @@
       measuredHeight={node.measured.height}
       parentId={node.parentId}
       {resizeObserver}
+      {nodeClickDistance}
       on:nodeclick
       on:nodemouseenter
       on:nodemousemove

packages/svelte/src/lib/container/NodeRenderer/types.ts

@@ -0,0 +1,3 @@
+export type NodeRendererProps = {
+  nodeClickDistance?: number;
+};

packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte

@@ -80,6 +80,7 @@
   export let oninit: $$Props['oninit'] = undefined;
   export let nodeOrigin: $$Props['nodeOrigin'] = undefined;
   export let paneClickDistance: $$Props['paneClickDistance'] = 0;
+  export let nodeClickDistance: $$Props['nodeClickDistance'] = 0;
 
   export let defaultMarkerColor = '#b1b1b7';
 
@@ -254,6 +255,7 @@
         <div class="svelte-flow__edgelabel-renderer" />
         <div class="svelte-flow__viewport-portal" />
         <NodeRenderer
+          {nodeClickDistance}
           on:nodeclick
           on:nodemouseenter
           on:nodemousemove

packages/svelte/src/lib/container/SvelteFlow/types.ts

@@ -138,6 +138,10 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
    * @default 0
    */
   paneClickDistance?: number;
+  /** Distance that the mouse can move between mousedown/up that will trigger a click
+   * @default 0
+   */
+  nodeClickDistance?: number;
   /** Minimum zoom level
    * @default 0.5
    */