remove setPaneClickDistance from store and update it declaritively

examples/react/src/examples/Figma/index.tsx

@@ -34,6 +34,7 @@ const BasicFlow = () => {
       selectionMode={SelectionMode.Partial}
       panOnDrag={panOnDrag}
       panOnScroll
+      paneClickDistance={2}
       zoomActivationKeyCode="Meta"
       multiSelectionKeyCode={MULTI_SELECT_KEY}
       onPaneContextMenu={onPaneContextMenu}

packages/react/src/components/StoreUpdater/index.tsx

@@ -69,7 +69,6 @@ const reactFlowFieldsToTrack = [
   'onBeforeDelete',
   'debug',
   'autoPanSpeed',
-  'paneClickDistance',
   'ariaLabelConfig',
 ] as const;
 
@@ -93,7 +92,6 @@ const selector = (s: ReactFlowState) => ({
   setNodeExtent: s.setNodeExtent,
   reset: s.reset,
   setDefaultNodesAndEdges: s.setDefaultNodesAndEdges,
-  setPaneClickDistance: s.setPaneClickDistance,
 });
 
 const initPrevValues = {
@@ -124,7 +122,6 @@ export function StoreUpdater<NodeType extends Node = Node, EdgeType extends Edge
     setNodeExtent,
     reset,
     setDefaultNodesAndEdges,
-    setPaneClickDistance,
   } = useStore(selector, shallow);
   const store = useStoreApi<NodeType, EdgeType>();
 
@@ -155,7 +152,6 @@ export function StoreUpdater<NodeType extends Node = Node, EdgeType extends Edge
         else if (fieldName === 'maxZoom') setMaxZoom(fieldValue as number);
         else if (fieldName === 'translateExtent') setTranslateExtent(fieldValue as CoordinateExtent);
         else if (fieldName === 'nodeExtent') setNodeExtent(fieldValue as CoordinateExtent);
-        else if (fieldName === 'paneClickDistance') setPaneClickDistance(fieldValue as number);
         else if (fieldName === 'ariaLabelConfig')
           store.setState({ ariaLabelConfig: mergeAriaLabelConfig(fieldValue as AriaLabelConfig) });
         // Renamed fields

packages/react/src/container/FlowRenderer/index.tsx

@@ -105,6 +105,7 @@ function FlowRendererComponent<NodeType extends Node = Node>({
       onViewportChange={onViewportChange}
       isControlledViewport={isControlledViewport}
       paneClickDistance={paneClickDistance}
+      selectionOnDrag={_selectionOnDrag}
     >
       <Pane
         onSelectionStart={onSelectionStart}
@@ -119,6 +120,7 @@ function FlowRendererComponent<NodeType extends Node = Node>({
         isSelecting={!!isSelecting}
         selectionMode={selectionMode}
         selectionKeyPressed={selectionKeyPressed}
+        paneClickDistance={paneClickDistance}
         selectionOnDrag={_selectionOnDrag}
       >
         {children}

packages/react/src/container/Pane/index.tsx

@@ -39,6 +39,7 @@ type PaneProps = {
     | 'onPaneMouseMove'
     | 'onPaneMouseLeave'
     | 'selectionOnDrag'
+    | 'paneClickDistance'
   >
 >;
 

packages/react/src/container/ReactFlow/index.tsx

@@ -309,7 +309,6 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
           nodeDragThreshold={nodeDragThreshold}
           connectionDragThreshold={connectionDragThreshold}
           onBeforeDelete={onBeforeDelete}
-          paneClickDistance={paneClickDistance}
           debug={debug}
           ariaLabelConfig={ariaLabelConfig}
         />

packages/react/src/container/ZoomPane/index.tsx

@@ -12,12 +12,7 @@ import type { ReactFlowState } from '../../types';
 
 type ZoomPaneProps = Omit<
   FlowRendererProps,
-  | 'deleteKeyCode'
-  | 'selectionKeyCode'
-  | 'multiSelectionKeyCode'
-  | 'noDragClassName'
-  | 'disableKeyboardA11y'
-  | 'selectionOnDrag'
+  'deleteKeyCode' | 'selectionKeyCode' | 'multiSelectionKeyCode' | 'noDragClassName' | 'disableKeyboardA11y'
 > & {
   isControlledViewport: boolean;
 };
@@ -49,6 +44,7 @@ export function ZoomPane({
   onViewportChange,
   isControlledViewport,
   paneClickDistance,
+  selectionOnDrag,
 }: ZoomPaneProps) {
   const store = useStoreApi();
   const zoomPane = useRef<HTMLDivElement>(null);
@@ -77,7 +73,6 @@ export function ZoomPane({
         maxZoom,
         translateExtent,
         viewport: defaultViewport,
-        paneClickDistance,
         onDraggingChange: (paneDragging: boolean) => store.setState({ paneDragging }),
         onPanZoomStart: (event, vp) => {
           const { onViewportChangeStart, onMoveStart } = store.getState();
@@ -128,6 +123,8 @@ export function ZoomPane({
       lib,
       onTransformChange,
       connectionInProgress,
+      selectionOnDrag,
+      paneClickDistance,
     });
   }, [
     onPaneContextMenu,
@@ -146,6 +143,8 @@ export function ZoomPane({
     lib,
     onTransformChange,
     connectionInProgress,
+    selectionOnDrag,
+    paneClickDistance,
   ]);
 
   return (

packages/react/src/store/index.ts

@@ -312,9 +312,6 @@ const createStore = ({
 
         set({ translateExtent });
       },
-      setPaneClickDistance: (clickDistance) => {
-        get().panZoom?.setClickDistance(clickDistance);
-      },
       resetSelectedElements: () => {
         const { edges, nodes, triggerNodeChanges, triggerEdgeChanges, elementsSelectable } = get();
 

packages/react/src/types/store.ts

@@ -175,7 +175,6 @@ export type ReactFlowActions<NodeType extends Node, EdgeType extends Edge> = {
   triggerEdgeChanges: (changes: EdgeChange<EdgeType>[]) => void;
   panBy: PanBy;
   setCenter: SetCenter;
-  setPaneClickDistance: (distance: number) => void;
 };
 
 export type ReactFlowState<NodeType extends Node = Node, EdgeType extends Edge = Edge> = ReactFlowStore<

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

@@ -35,6 +35,7 @@ type ZoomParams = {
   userSelectionActive: boolean;
   lib: string;
   paneClickDistance: number;
+  selectionOnDrag?: boolean;
   onTransformChange: (transform: Transform) => void;
   onDraggingChange: (dragging: boolean) => void;
   connectionInProgress: boolean;
@@ -49,7 +50,6 @@ export default function zoom(domNode: Element, params: ZoomParams) {
     onPanZoom,
     onPanZoomEnd,
     translateExtent,
-    paneClickDistance,
     setPanZoomInstance,
     onDraggingChange,
     onTransformChange
@@ -61,7 +61,6 @@ export default function zoom(domNode: Element, params: ZoomParams) {
     maxZoom,
     translateExtent,
     viewport: initialViewport,
-    paneClickDistance,
     onPanZoom,
     onPanZoomStart,
     onPanZoomEnd,

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

@@ -5,6 +5,7 @@ import type { SvelteFlowStore } from '$lib/store/types';
 export type PaneProps<NodeType extends Node = Node, EdgeType extends Edge = Edge> = {
   store: SvelteFlowStore<NodeType, EdgeType>;
   panOnDrag?: boolean | number[];
+  paneClickDistance: number;
   selectionOnDrag?: boolean;
   onselectionstart?: (event: PointerEvent) => void;
   onselectionend?: (event: PointerEvent) => void;

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

@@ -156,6 +156,7 @@
     {panOnScrollSpeed}
     {panOnDrag}
     {paneClickDistance}
+    {selectionOnDrag}
     {onmovestart}
     {onmove}
     {onmoveend}
@@ -168,6 +169,7 @@
       {onselectionstart}
       {onselectionend}
       {panOnDrag}
+      {paneClickDistance}
       {selectionOnDrag}
     >
       <ViewportComponent bind:store>

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

@@ -16,6 +16,7 @@
     panOnScroll,
     panOnScrollSpeed,
     paneClickDistance,
+    selectionOnDrag,
     onmovestart,
     onmove,
     onmoveend,
@@ -69,6 +70,7 @@
     translateExtent: store.translateExtent,
     lib: 'svelte',
     paneClickDistance,
+    selectionOnDrag,
     onTransformChange: (transform: Transform) => {
       store.viewport = { x: transform[0], y: transform[1], zoom: transform[2] };
     },

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

@@ -14,6 +14,7 @@ export type ZoomProps<NodeType extends Node = Node, EdgeType extends Edge = Edge
   panOnScroll: boolean;
   panOnDrag: boolean | number[];
   paneClickDistance: number;
+  selectionOnDrag?: boolean;
   onmove?: OnMove;
   onmovestart?: OnMoveStart;
   onmoveend?: OnMoveEnd;

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

@@ -191,10 +191,6 @@ export function createStore<NodeType extends Node = Node, EdgeType extends Edge
     }
   }
 
-  function setPaneClickDistance(distance: number) {
-    store.panZoom?.setClickDistance(distance);
-  }
-
   function deselect<T extends Node | Edge>(
     elements: T[],
     elementsToDeselect: Set<string> | null = null
@@ -393,7 +389,6 @@ export function createStore<NodeType extends Node = Node, EdgeType extends Edge
     setMinZoom,
     setMaxZoom,
     setTranslateExtent,
-    setPaneClickDistance,
     unselectNodesAndEdges,
     addSelectedNodes,
     addSelectedEdges,

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

@@ -23,7 +23,6 @@ export type SvelteFlowStoreActions<NodeType extends Node = Node, EdgeType extend
   setMinZoom: (minZoom: number) => void;
   setMaxZoom: (maxZoom: number) => void;
   setTranslateExtent: (extent: CoordinateExtent) => void;
-  setPaneClickDistance: (distance: number) => void;
   fitView: (options?: FitViewOptions) => Promise<boolean>;
   setCenter: SetCenter;
   updateNodePositions: UpdateNodePositions;

packages/system/src/types/panzoom.ts

@@ -9,7 +9,6 @@ export type PanZoomParams = {
   domNode: Element;
   minZoom: number;
   maxZoom: number;
-  paneClickDistance: number;
   viewport: Viewport;
   translateExtent: CoordinateExtent;
   onDraggingChange: OnDraggingChange;
@@ -43,6 +42,8 @@ export type PanZoomUpdateOptions = {
   lib: string;
   onTransformChange: OnTransformChange;
   connectionInProgress: boolean;
+  paneClickDistance: number;
+  selectionOnDrag?: boolean;
 };
 
 export type PanZoomInstance = {

packages/system/src/xypanzoom/XYPanZoom.ts

@@ -37,7 +37,6 @@ export function XYPanZoom({
   domNode,
   minZoom,
   maxZoom,
-  paneClickDistance,
   translateExtent,
   viewport,
   onPanZoom,
@@ -55,10 +54,7 @@ export function XYPanZoom({
     isPanScrolling: false,
   };
   const bbox = domNode.getBoundingClientRect();
-  const d3ZoomInstance = zoom()
-    .clickDistance(!isNumeric(paneClickDistance) || paneClickDistance < 0 ? 0 : paneClickDistance)
-    .scaleExtent([minZoom, maxZoom])
-    .translateExtent(translateExtent);
+  const d3ZoomInstance = zoom().scaleExtent([minZoom, maxZoom]).translateExtent(translateExtent);
   const d3Selection = select(domNode).call(d3ZoomInstance);
 
   setViewportConstrained(
@@ -109,6 +105,8 @@ export function XYPanZoom({
     lib,
     onTransformChange,
     connectionInProgress,
+    paneClickDistance,
+    selectionOnDrag,
   }: PanZoomUpdateOptions) {
     if (userSelectionActive && !zoomPanValues.isZoomingOrPanning) {
       destroy();
@@ -116,6 +114,10 @@ export function XYPanZoom({
 
     const isPanOnScroll = panOnScroll && !zoomActivationKeyPressed && !userSelectionActive;
 
+    d3ZoomInstance.clickDistance(
+      selectionOnDrag ? Infinity : !isNumeric(paneClickDistance) || paneClickDistance < 0 ? 0 : paneClickDistance
+    );
+
     const wheelHandler = isPanOnScroll
       ? createPanOnScrollHandler({
           zoomPanValues,