refactor(react): use vanilla helpers for zoom and pan

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

@@ -2,12 +2,34 @@
 import type { Writable } from 'svelte/store';
 import { select } from 'd3-selection';
 import { zoom as d3Zoom, zoomIdentity, type D3ZoomEvent } from 'd3-zoom';
-import type { D3SelectionInstance, D3ZoomInstance, Transform, Viewport } from '@reactflow/system';
+import type {
+  D3SelectionInstance,
+  D3ZoomInstance,
+  OnMove,
+  OnMoveEnd,
+  OnMoveStart,
+  Transform,
+  Viewport
+} from '@reactflow/system';
 import { clamp } from '@reactflow/utils';
 
 const isWrappedWithClass = (event: any, className: string | undefined) =>
   event.target.closest(`.${className}`);
 
+const eventToFlowTransform = (eventViewport: any): Viewport => ({
+  x: eventViewport.x,
+  y: eventViewport.y,
+  zoom: eventViewport.k
+});
+
+const isRightClickPan = (panOnDrag: FlowRendererProps['panOnDrag'], usedButton: number) =>
+  usedButton === 2 && Array.isArray(panOnDrag) && panOnDrag.includes(2);
+
+const viewChanged = (prevViewport: Viewport, eventViewport: any): boolean =>
+  prevViewport.x !== eventViewport.x ||
+  prevViewport.y !== eventViewport.y ||
+  prevViewport.zoom !== eventViewport.k;
+
 function filter(event: any, params: ZoomParams): boolean {
   const zoomScroll = true;
   const pinchZoom = true;
@@ -85,10 +107,15 @@ type ZoomParams = {
   minZoom: number;
   maxZoom: number;
   initialViewport: Viewport;
+  dragging: Writable<boolean>;
+  onMoveStart?: OnMoveStart;
+  onMove?: OnMove;
+  onMoveEnd?: OnMoveEnd;
 };
 
 export default function zoom(domNode: Element, params: ZoomParams) {
-  const { transform, d3, minZoom, maxZoom, initialViewport } = params;
+  const { d3, minZoom, maxZoom, initialViewport } = params;
+
   const d3ZoomInstance = d3Zoom().scaleExtent([minZoom, maxZoom]);
   const selection = select(domNode).call(d3ZoomInstance);
 
@@ -98,31 +125,93 @@ export default function zoom(domNode: Element, params: ZoomParams) {
 
   const d3ZoomHandler = selection.on('wheel.zoom');
 
-  d3ZoomInstance.on('zoom', (event: D3ZoomEvent<HTMLDivElement, any>) => {
-    transform.set([event.transform.x, event.transform.y, event.transform.k]);
-  });
+  let mouseButton = 0;
+  let isZoomingOrPanning = false;
+  let prevTransform: Viewport = { x: 0, y: 0, zoom: 0 };
+  let zoomedWithRightMouseButton = false;
+  let timerId: any;
+
+  function updateZoomHandling(_params: ZoomParams) {
+    const { transform, dragging, onMoveStart, onMove, onMoveEnd } = _params;
+    d3ZoomInstance.on('start', (event: D3ZoomEvent<HTMLDivElement, any>) => {
+      // we need to remember it here, because it's always 0 in the "zoom" event
+      mouseButton = event.sourceEvent?.button || 0;
+
+      isZoomingOrPanning = true;
+
+      if (event.sourceEvent?.type === 'mousedown') {
+        dragging.set(true);
+      }
+
+      if (onMoveStart) {
+        const flowTransform = eventToFlowTransform(event.transform);
+        prevTransform = flowTransform;
+
+        onMoveStart?.((event.sourceEvent as MouseEvent | TouchEvent) || null, flowTransform);
+      }
+    });
+
+    d3ZoomInstance.on('zoom', (event: D3ZoomEvent<HTMLDivElement, any>) => {
+      transform.set([event.transform.x, event.transform.y, event.transform.k]);
+
+      if (onMove) {
+        const flowTransform = eventToFlowTransform(event.transform);
+
+        onMove?.((event.sourceEvent as MouseEvent | TouchEvent) || null, flowTransform);
+      }
+    });
+
+    d3ZoomInstance.on('end', (event: D3ZoomEvent<HTMLDivElement, any>) => {
+      isZoomingOrPanning = false;
+      dragging.set(false);
+
+      if (
+        //onPaneContextMenu &&
+        isRightClickPan(panOnDrag, mouseButton ?? 0) &&
+        !zoomedWithRightMouseButton
+      ) {
+        // onPaneContextMenu(event.sourceEvent);
+      }
+      zoomedWithRightMouseButton = false;
+
+      if (onMoveEnd && viewChanged(prevTransform, event.transform)) {
+        const flowTransform = eventToFlowTransform(event.transform);
+        prevTransform = flowTransform;
+
+        clearTimeout(timerId);
+        timerId = setTimeout(
+          () => {
+            onMoveEnd?.(event.sourceEvent as MouseEvent | TouchEvent, flowTransform);
+          },
+          panOnScroll ? 150 : 0
+        );
+      }
+    });
+
+    selection.on('wheel.zoom', function (event: any, d: any) {
+      if (isWrappedWithClass(event, 'nowheel')) {
+        return null;
+      }
+
+      event.preventDefault();
+      d3ZoomHandler!.call(this, event, d);
+    });
+
+    d3ZoomInstance.filter((event: any) => filter(event, params));
+  }
 
   d3ZoomInstance.transform(selection, updatedTransform);
 
-  selection.on('wheel.zoom', function (event: any, d: any) {
-    if (isWrappedWithClass(event, 'nowheel')) {
-      return null;
-    }
-
-    event.preventDefault();
-    d3ZoomHandler!.call(this, event, d);
-  });
+  updateZoomHandling(params);
 
   d3.set({
     zoom: d3ZoomInstance,
     selection
   });
 
-  d3ZoomInstance.filter((event: any) => filter(event, params));
-
   return {
     update(params: ZoomParams) {
-      d3ZoomInstance.filter((event: any) => filter(event, params));
+      updateZoomHandling(params);
     }
   };
 }

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

@@ -43,22 +43,20 @@
     edges,
     transform,
     dragging,
+    elementsSelectable,
     selectionRect,
     selectionRectMode,
     selectionKeyPressed,
+    selectionMode,
     resetSelectedElements,
-    selectionMode
   } = useStore();
 
-  // @todo take from props
-  const elementsSelectable = true;
-
   let container: HTMLDivElement;
   let containerBounds: DOMRect | null = null;
   let selectedNodes: Node[] = [];
 
   $: isSelecting = $selectionKeyPressed;
-  $: hasActiveSelection = elementsSelectable && (isSelecting || $selectionRectMode === 'user');
+  $: hasActiveSelection = $elementsSelectable && (isSelecting || $selectionRectMode === 'user');
 
   function onClick(event: MouseEvent) {
     dispatch('pane:click', event);

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

@@ -33,6 +33,9 @@
   export let deleteKey: $$Props['deleteKey'] = undefined;
   export let connectionRadius: $$Props['connectionRadius'] = undefined;
   export let connectionLineType: $$Props['connectionLineType'] = undefined;
+  export let onMoveStart: $$Props['onMoveStart'] = undefined;
+  export let onMove: $$Props['onMove'] = undefined;
+  export let onMoveEnd: $$Props['onMoveEnd'] = undefined;
   export let isValidConnection: $$Props['isValidConnection'] = undefined;
   export let defaultMarkerColor = '#b1b1b7';
 
@@ -111,7 +114,7 @@
   {...$$restProps}
 >
   <KeyHandler {selectionKey} {deleteKey} />
-  <Zoom {initialViewport}>
+  <Zoom {initialViewport} {onMoveStart} {onMove} {onMoveEnd}>
     <Pane on:pane:click>
       <Viewport>
         <EdgeRenderer on:edge:click />

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

@@ -6,7 +6,10 @@ import type {
   OnConnectStartParams,
   Viewport,
   SelectionMode,
-  SnapGrid
+  SnapGrid,
+  OnMoveStart,
+  OnMove,
+  OnMoveEnd
 } from '@reactflow/system';
 
 import type {
@@ -43,6 +46,10 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
   connectionLineType?: ConnectionLineType;
   isValidConnection?: IsValidConnection;
 
+  onMoveStart?: OnMoveStart;
+  onMove?: OnMove;
+  onMoveEnd?: OnMoveEnd;
+
   'on:node:click'?: CustomEvent<Node>;
   'on:node:mouseenter'?: CustomEvent<Node>;
   'on:node:mousemove'?: CustomEvent<Node>;

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

@@ -1,18 +1,33 @@
-<script lang="ts">
-  import { get } from 'svelte/store';
-  import type { Viewport } from '@reactflow/system';
-  
+<script lang="ts"> 
   import { useStore } from '$lib/store';
   import zoom from '$lib/actions/zoom';
+  import type { ZoomProps } from './types';
 
-  export let initialViewport: Viewport = { x: 0, y: 0, zoom: 1 };
+  type $$Props = ZoomProps; 
 
-  const { transform, d3, selectionKeyPressed, selectionRectMode, minZoom, maxZoom } = useStore();
+  export let initialViewport: $$Props['initialViewport'] = undefined;
+  export let onMoveStart: $$Props['onMoveStart'] = undefined;
+  export let onMove: $$Props['onMove'] = undefined;
+  export let onMoveEnd: $$Props['onMoveEnd'] = undefined;
 
+  const { transform, d3, selectionKeyPressed, selectionRectMode, minZoom, maxZoom, dragging } = useStore();
+  
+  $: viewPort = initialViewport || { x: 0, y: 0, zoom: 1 };
   $: selecting = $selectionKeyPressed || $selectionRectMode === 'user';
 </script>
 
-<div class="svelte-flow__zoom" use:zoom={{ transform, d3, selecting, minZoom: get(minZoom), maxZoom: get(maxZoom), initialViewport }}>
+<div class="svelte-flow__zoom" use:zoom={{
+  transform,
+  d3,
+  selecting,
+  minZoom: $minZoom,
+  maxZoom: $maxZoom,
+  initialViewport: viewPort,
+  dragging,
+  onMoveStart,
+  onMove,
+  onMoveEnd
+}}>
   <slot />
 </div>
 

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

@@ -0,0 +1,8 @@
+import type { OnMove, OnMoveStart, OnMoveEnd, Viewport } from '@reactflow/system';
+
+export type ZoomProps = {
+  initialViewport?: Viewport;
+  onMove?: OnMove;
+  onMoveStart?: OnMoveStart;
+  onMoveEnd?: OnMoveEnd;
+};

packages/svelte/src/lib/plugins/Controls/Controls.svelte

@@ -21,7 +21,7 @@
     zoomIn, zoomOut, fitView, transform, minZoom, maxZoom, nodesDraggable, nodesConnectable, elementsSelectable
   } = useStore();
 
-  const isInteractive = true;
+  $: isInteractive = $nodesDraggable || $nodesConnectable || $elementsSelectable;
   $: minZoomReached = $transform[2] <= $minZoom;
   $: maxZoomReached = $transform[2] >= $maxZoom;
 
@@ -38,9 +38,11 @@
   };
 
   const onToggleInteractivity = () => {
-    nodesDraggable.set(!isInteractive);
-    nodesConnectable.set(!isInteractive);
-    elementsSelectable.set(!isInteractive);
+    isInteractive = !isInteractive;
+
+    nodesDraggable.set(isInteractive);
+    nodesConnectable.set(isInteractive);
+    elementsSelectable.set(isInteractive);
   };
 </script>