feat(panzoom): add paneClickDistance prop

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

@@ -35,11 +35,20 @@ type ZoomParams = {
   noWheelClassName: string;
   userSelectionActive: boolean;
   lib: string;
+  paneClickDistance: number;
 };
 
 export default function zoom(domNode: Element, params: ZoomParams) {
-  const { panZoom, minZoom, maxZoom, initialViewport, viewport, dragging, translateExtent } =
-    params;
+  const {
+    panZoom,
+    minZoom,
+    maxZoom,
+    initialViewport,
+    viewport,
+    dragging,
+    translateExtent,
+    paneClickDistance
+  } = params;
 
   const panZoomInstance = XYPanZoom({
     domNode,
@@ -47,6 +56,7 @@ export default function zoom(domNode: Element, params: ZoomParams) {
     maxZoom,
     translateExtent,
     viewport: initialViewport,
+    paneClickDistance,
     onTransformChange: (transform) =>
       viewport.set({ x: transform[0], y: transform[1], zoom: transform[2] }),
     onDraggingChange: dragging.set

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

@@ -79,6 +79,7 @@
   export let onbeforedelete: $$Props['onbeforedelete'] = undefined;
   export let oninit: $$Props['oninit'] = undefined;
   export let nodeOrigin: $$Props['nodeOrigin'] = undefined;
+  export let paneClickDistance: $$Props['paneClickDistance'] = 0;
 
   export let defaultMarkerColor = '#b1b1b7';
 
@@ -125,7 +126,8 @@
       edgeTypes,
       minZoom,
       maxZoom,
-      translateExtent
+      translateExtent,
+      paneClickDistance
     });
 
     return () => {
@@ -188,7 +190,8 @@
     edgeTypes,
     minZoom,
     maxZoom,
-    translateExtent
+    translateExtent,
+    paneClickDistance
   });
 
   $: colorModeClass = useColorModeClass(colorMode);
@@ -225,6 +228,7 @@
     zoomOnPinch={zoomOnPinch === undefined ? true : zoomOnPinch}
     panOnScroll={panOnScroll === undefined ? false : panOnScroll}
     panOnDrag={panOnDrag === undefined ? true : panOnDrag}
+    paneClickDistance={paneClickDistance === undefined ? 0 : paneClickDistance}
   >
     <Pane
       on:paneclick

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

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

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

@@ -1,7 +1,8 @@
+import type { Writable } from 'svelte/store';
+import type { CoordinateExtent } from '@xyflow/system';
+
 import type { SvelteFlowStore } from '$lib/store/types';
 import type { EdgeTypes, NodeTypes } from '$lib/types';
-import type { CoordinateExtent } from '@xyflow/system';
-import type { Writable } from 'svelte/store';
 
 // this is helper function for updating the store
 // for props where we need to call a specific store action
@@ -12,13 +13,15 @@ export function updateStore(
     edgeTypes,
     minZoom,
     maxZoom,
-    translateExtent
+    translateExtent,
+    paneClickDistance
   }: {
     nodeTypes?: NodeTypes;
     edgeTypes?: EdgeTypes;
     minZoom?: number;
     maxZoom?: number;
     translateExtent?: CoordinateExtent;
+    paneClickDistance?: number;
   }
 ) {
   if (nodeTypes !== undefined) {
@@ -40,6 +43,10 @@ export function updateStore(
   if (translateExtent !== undefined) {
     store.setTranslateExtent(translateExtent);
   }
+
+  if (paneClickDistance !== undefined) {
+    store.setPaneClickDistance(paneClickDistance);
+  }
 }
 
 const getKeys = <T extends object>(obj: T) => Object.keys(obj) as Array<keyof T>;

packages/svelte/src/lib/container/Zoom/Zoom.svelte

@@ -19,6 +19,7 @@
   export let zoomOnPinch: $$Props['zoomOnPinch'];
   export let panOnDrag: $$Props['panOnDrag'];
   export let panOnScroll: $$Props['panOnScroll'];
+  export let paneClickDistance: $$Props['paneClickDistance'];
 
   const {
     viewport,
@@ -68,7 +69,8 @@
     noWheelClassName: 'nowheel',
     userSelectionActive: !!$selectionRect,
     translateExtent: $translateExtent,
-    lib: $lib
+    lib: $lib,
+    paneClickDistance
   }}
 >
   <slot />

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

@@ -12,4 +12,5 @@ export type ZoomProps = {
   zoomOnPinch: boolean;
   panOnScroll: boolean;
   panOnDrag: boolean | number[];
+  paneClickDistance: number;
 };

packages/svelte/src/lib/store/index.ts

@@ -248,6 +248,10 @@ export function createStore({
     return elementsChanged;
   }
 
+  function setPaneClickDistance(distance: number) {
+    get(store.panZoom)?.setClickDistance(distance);
+  }
+
   function unselectNodesAndEdges(params?: { nodes?: Node[]; edges?: Edge[] }) {
     const resetNodes = resetSelectedElements(params?.nodes || get(store.nodes));
     if (resetNodes) store.nodes.set(get(store.nodes));
@@ -448,6 +452,7 @@ export function createStore({
     setMinZoom,
     setMaxZoom,
     setTranslateExtent,
+    setPaneClickDistance,
     unselectNodesAndEdges,
     addSelectedNodes,
     addSelectedEdges,

packages/svelte/src/lib/store/types.ts

@@ -25,6 +25,7 @@ export type SvelteFlowStoreActions = {
   setMinZoom: (minZoom: number) => void;
   setMaxZoom: (maxZoom: number) => void;
   setTranslateExtent: (extent: CoordinateExtent) => void;
+  setPaneClickDistance: (distance: number) => void;
   fitView: (options?: FitViewOptions) => Promise<boolean>;
   updateNodePositions: UpdateNodePositions;
   updateNodeInternals: (updates: Map<string, InternalNodeUpdate>) => void;