feat(props): add nodeClickDistance

packages/svelte/src/lib/actions/drag/index.ts

@@ -10,6 +10,7 @@ export type UseDragParams = {
   handleSelector?: string;
   nodeId?: string;
   isSelectable?: boolean;
+  nodeClickDistance?: number;
   onDrag?: OnDrag;
   onDragStart?: OnDrag;
   onDragStop?: OnDrag;
@@ -60,7 +61,8 @@ export default function drag(domNode: Element, params: UseDragParams) {
       noDragClassName: params.noDragClass,
       handleSelector: params.handleSelector,
       nodeId: params.nodeId,
-      isSelectable: params.isSelectable
+      isSelectable: params.isSelectable,
+      nodeClickDistance: params.nodeClickDistance
     });
   }
 

packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte

@@ -43,6 +43,7 @@
   export let dragHandle: $$Props['dragHandle'] = undefined;
   export let initialized: $$Props['initialized'] = false;
   export let parentId: $$Props['parentId'] = undefined;
+  export let nodeClickDistance: $$Props['nodeClickDistance'] = undefined;
 
   let className: string = '';
   export { className as class };
@@ -156,6 +157,7 @@
       disabled: false,
       handleSelector: dragHandle,
       noDragClass: 'nodrag',
+      nodeClickDistance,
       onNodeMouseDown: handleNodeSelection,
       onDrag: (event, _, targetNode, nodes) => {
         dispatchNodeEvent('nodedrag', { event, targetNode, nodes });

packages/svelte/src/lib/components/NodeWrapper/types.ts

@@ -34,4 +34,5 @@ export type NodeWrapperProps = Pick<
   zIndex: number;
   node: InternalNode;
   initialized: boolean;
+  nodeClickDistance?: number;
 };

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
    */