feat(react/svelte): controlled viewport (#3461)

* feat(react): controlled viewport * refactor(react): cleanup viewport * feat(svelte): two way data binding for viewport, cleanup transform <> viewport stuff * refactor(svelte): viewport stuff
2023-09-28 16:19:03 +02:00
parent 2215b68438
commit ae33cba887
35 changed files with 351 additions and 95 deletions
--- a/examples/react/src/App/index.tsx
+++ b/examples/react/src/App/index.tsx
@@ -4,6 +4,7 @@ import { BrowserRouter, Route, Routes, useLocation, useNavigate } from 'react-ro
 import Basic from '../examples/Basic';
 import Backgrounds from '../examples/Backgrounds';
 import ControlledUncontrolled from '../examples/ControlledUncontrolled';
+import ControlledViewport from '../examples/ControlledViewport';
 import CustomConnectionLine from '../examples/CustomConnectionLine';
 import CustomMiniMapNode from '../examples/CustomMiniMapNode';
 import CustomNode from '../examples/CustomNode';
@@ -74,6 +75,11 @@ const routes: IRoute[] = [
    path: '/controlled-uncontrolled',
    component: ControlledUncontrolled,
  },
+  {
+    name: 'Controlled Viewport',
+    path: '/controlled-viewport',
+    component: ControlledViewport,
+  },
  {
    name: 'Custom Connection Line',
    path: '/custom-connectionline',
--- a/examples/react/src/examples/ControlledViewport/index.tsx
+++ b/examples/react/src/examples/ControlledViewport/index.tsx
@@ -0,0 +1,88 @@
+import { MouseEvent, useCallback, useState } from 'react';
+import {
+  ReactFlow,
+  addEdge,
+  Node,
+  Connection,
+  Edge,
+  useNodesState,
+  useEdgesState,
+  Viewport,
+  Panel,
+  MiniMap,
+  Background,
+  ReactFlowProvider,
+  useReactFlow,
+  Controls,
+} from '@xyflow/react';
+
+const initNodes: Node[] = [
+  {
+    id: '1a',
+    type: 'input',
+    data: { label: 'Node 1' },
+    position: { x: 250, y: 5 },
+    className: 'light',
+    ariaLabel: 'Input Node 1',
+  },
+  {
+    id: '2a',
+    data: { label: 'Node 2' },
+    position: { x: 100, y: 100 },
+    className: 'light',
+    ariaLabel: 'Default Node 2',
+  },
+  {
+    id: '3a',
+    data: { label: 'Node 3' },
+    position: { x: 400, y: 100 },
+    className: 'light',
+  },
+  {
+    id: '4a',
+    data: { label: 'Node 4' },
+    position: { x: 400, y: 200 },
+    className: 'light',
+  },
+];
+
+const initEdges: Edge[] = [
+  { id: 'e1-2', source: '1a', target: '2a', ariaLabel: undefined },
+  { id: 'e1-3', source: '1a', target: '3a' },
+];
+
+const Flow = () => {
+  const [nodes, setNodes, onNodesChange] = useNodesState(initNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initEdges);
+  const [viewport, setViewport] = useState<Viewport>({ x: 0, y: 0, zoom: 1 });
+  const { fitView } = useReactFlow();
+
+  const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
+
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      onConnect={onConnect}
+      viewport={viewport}
+      onViewportChange={setViewport}
+    >
+      <Panel position="top-left">
+        <button onClick={() => setViewport((vp) => ({ ...vp, y: vp.y + 10 }))}>update viewport</button>
+        <button onClick={() => fitView()}>fitView</button>
+      </Panel>
+
+      <MiniMap />
+      <Background />
+      <Controls />
+    </ReactFlow>
+  );
+};
+
+export default () => (
+  <ReactFlowProvider>
+    <Flow />
+  </ReactFlowProvider>
+);
--- a/examples/svelte/src/components/Header/Header.svelte
+++ b/examples/svelte/src/components/Header/Header.svelte
@@ -3,6 +3,7 @@
 	import { page } from '$app/stores';

 	const routes = [
+		'custom-connection-line',
 		'customnode',
 		'drag-n-drop',
 		'edges',
@@ -11,10 +12,10 @@
 		'overview',
 		'stress',
 		'subflows',
+		'two-way-viewport',
 		'usesvelteflow',
 		'useupdatenodeinternals',
-		'validation',
-		'custom-connection-line'
+		'validation'
 	];

 	const onChange = (event: Event) => {
--- a/examples/svelte/src/routes/two-way-viewport/+page.svelte
+++ b/examples/svelte/src/routes/two-way-viewport/+page.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { SvelteFlowProvider } from '@xyflow/svelte';
+
+	import Flow from './Flow.svelte';
+</script>
+
+<SvelteFlowProvider>
+	<Flow />
+</SvelteFlowProvider>
--- a/examples/svelte/src/routes/two-way-viewport/Flow.svelte
+++ b/examples/svelte/src/routes/two-way-viewport/Flow.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { writable } from 'svelte/store';
+	import {
+		SvelteFlow,
+		Controls,
+		Background,
+		BackgroundVariant,
+		Panel,
+		useSvelteFlow,
+		type Viewport
+	} from '@xyflow/svelte';
+
+	import '@xyflow/svelte/dist/style.css';
+
+	const nodes = writable([
+		{
+			id: 'A',
+			position: { x: 0, y: 0 },
+			data: { label: 'A' }
+		},
+		{ id: 'B', position: { x: 0, y: 100 }, data: { label: 'B' } }
+	]);
+	const edges = writable([{ id: 'ab', source: 'A', target: 'B' }]);
+	const viewport = writable<Viewport>({ x: 0, y: 10, zoom: 1.25 });
+
+	const { fitView } = useSvelteFlow();
+
+	const updateViewport = () => {
+		$viewport.x += 10;
+		$viewport = $viewport;
+	};
+
+	viewport.subscribe((vp) => {
+		console.log('viewport update', vp);
+	});
+</script>
+
+<SvelteFlow {nodes} {edges} fitView {viewport}>
+	<Controls />
+	<Background variant={BackgroundVariant.Dots} />
+
+	<Panel>
+		<button on:click={updateViewport}>update viewport</button>
+		<button on:click={() => fitView()}>fitView</button>
+	</Panel>
+</SvelteFlow>
--- a/packages/react/src/container/FlowRenderer/index.tsx
+++ b/packages/react/src/container/FlowRenderer/index.tsx
@@ -24,6 +24,7 @@ export type FlowRendererProps = Omit<
  | 'rfId'
  | 'nodeOrigin'
 > & {
+  isControlledViewport: boolean;
  children: ReactNode;
 };

@@ -63,6 +64,8 @@ const FlowRenderer = ({
  noWheelClassName,
  noPanClassName,
  disableKeyboardA11y,
+  onViewportChange,
+  isControlledViewport,
 }: FlowRendererProps) => {
  const nodesSelectionActive = useStore(selector);
  const selectionKeyPressed = useKeyPress(selectionKeyCode);
@@ -92,6 +95,8 @@ const FlowRenderer = ({
      preventScrolling={preventScrolling}
      noWheelClassName={noWheelClassName}
      noPanClassName={noPanClassName}
+      onViewportChange={onViewportChange}
+      isControlledViewport={isControlledViewport}
    >
      <Pane
        onSelectionStart={onSelectionStart}
--- a/packages/react/src/container/GraphView/index.tsx
+++ b/packages/react/src/container/GraphView/index.tsx
@@ -5,8 +5,9 @@ import NodeRenderer from '../NodeRenderer';
 import EdgeRenderer from '../EdgeRenderer';
 import ViewportWrapper from '../Viewport';
 import useOnInitHandler from '../../hooks/useOnInitHandler';
+import useViewportSync from '../../hooks/useViewportSync';
 import ConnectionLine from '../../components/ConnectionLine';
-import type { NodeTypesWrapped, ReactFlowProps } from '../../types';
+import type { ReactFlowProps } from '../../types';
 import { createNodeTypes } from '../NodeRenderer/utils';
 import { createEdgeTypes } from '../EdgeRenderer/utils';
 import { useNodeOrEdgeTypes } from './utils';
@@ -104,11 +105,14 @@ const GraphView = ({
  nodeOrigin,
  nodeExtent,
  rfId,
+  viewport,
+  onViewportChange,
 }: GraphViewProps) => {
  const nodeTypesWrapped = useNodeOrEdgeTypes(nodeTypes, createNodeTypes);
  const edgeTypesWrapped = useNodeOrEdgeTypes(edgeTypes, createEdgeTypes);

  useOnInitHandler(onInit);
+  useViewportSync(viewport);

  return (
    <FlowRenderer
@@ -145,6 +149,8 @@ const GraphView = ({
      noWheelClassName={noWheelClassName}
      noPanClassName={noPanClassName}
      disableKeyboardA11y={disableKeyboardA11y}
+      onViewportChange={onViewportChange}
+      isControlledViewport={!!viewport}
    >
      <ViewportWrapper>
        <EdgeRenderer
--- a/packages/react/src/container/ReactFlow/index.tsx
+++ b/packages/react/src/container/ReactFlow/index.tsx
@@ -164,6 +164,8 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
      style,
      id,
      nodeDragThreshold,
+      viewport,
+      onViewportChange,
      ...rest
    },
    ref
@@ -242,6 +244,8 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
            disableKeyboardA11y={disableKeyboardA11y}
            nodeOrigin={nodeOrigin}
            nodeExtent={nodeExtent}
+            viewport={viewport}
+            onViewportChange={onViewportChange}
          />
          <StoreUpdater
            nodes={nodes}
--- a/packages/react/src/container/Viewport/index.tsx
+++ b/packages/react/src/container/Viewport/index.tsx
@@ -2,6 +2,7 @@ import type { ReactNode } from 'react';

 import { useStore } from '../../hooks/useStore';
 import type { ReactFlowState } from '../../types';
+import { Viewport } from '@xyflow/system';

 const selector = (s: ReactFlowState) => `translate(${s.transform[0]}px,${s.transform[1]}px) scale(${s.transform[2]})`;

--- a/packages/react/src/container/ZoomPane/index.tsx
+++ b/packages/react/src/container/ZoomPane/index.tsx
@@ -18,7 +18,9 @@ type ZoomPaneProps = Omit<
  | 'noDragClassName'
  | 'disableKeyboardA11y'
  | 'selectionOnDrag'
->;
+> & {
+  isControlledViewport: boolean;
+};

 const selector = (s: ReactFlowState) => ({
  userSelectionActive: s.userSelectionActive,
@@ -43,6 +45,8 @@ const ZoomPane = ({
  children,
  noWheelClassName,
  noPanClassName,
+  onViewportChange,
+  isControlledViewport,
 }: ZoomPaneProps) => {
  const store = useStoreApi();
  const zoomPane = useRef<HTMLDivElement>(null);
@@ -60,7 +64,13 @@ const ZoomPane = ({
        maxZoom,
        translateExtent,
        viewport: defaultViewport,
-        onTransformChange: (transform: Transform) => store.setState({ transform }),
+        onTransformChange: (transform: Transform) => {
+          onViewportChange?.({ x: transform[0], y: transform[1], zoom: transform[2] });
+
+          if (!isControlledViewport) {
+            store.setState({ transform });
+          }
+        },
        onDraggingChange: (paneDragging: boolean) => store.setState({ paneDragging }),
        onPanZoomStart: (event, vp) => {
          const { onViewportChangeStart, onMoveStart } = store.getState();
--- a/packages/react/src/hooks/useViewportSync.ts
+++ b/packages/react/src/hooks/useViewportSync.ts
@@ -0,0 +1,21 @@
+import { useEffect } from 'react';
+import type { Viewport } from '@xyflow/system';
+
+import { useStore, useStoreApi } from './useStore';
+import type { ReactFlowState } from '../types';
+
+const selector = (state: ReactFlowState) => state.panZoom?.syncViewport;
+
+export default function useViewportSync(viewport?: Viewport) {
+  const syncViewport = useStore(selector);
+  const store = useStoreApi();
+
+  useEffect(() => {
+    if (viewport) {
+      syncViewport?.(viewport);
+      store.setState({ transform: [viewport.x, viewport.y, viewport.zoom] });
+    }
+  }, [viewport, syncViewport]);
+
+  return null;
+}
--- a/packages/react/src/types/component-props.ts
+++ b/packages/react/src/types/component-props.ts
@@ -120,7 +120,9 @@ export type ReactFlowProps = HTMLAttributes<HTMLDivElement> & {
  panOnDrag?: boolean | number[];
  minZoom?: number;
  maxZoom?: number;
+  viewport?: Viewport;
  defaultViewport?: Viewport;
+  onViewportChange?: (viewport: Viewport) => void;
  translateExtent?: CoordinateExtent;
  preventScrolling?: boolean;
  nodeExtent?: CoordinateExtent;
--- a/packages/svelte/src/lib/actions/drag/index.ts
+++ b/packages/svelte/src/lib/actions/drag/index.ts
@@ -24,6 +24,7 @@ export default function drag(domNode: Element, params: UseDragParams) {
    onDragStop,
    getStoreItems: () => {
      const snapGrid = get(store.snapGrid);
+      const vp = get(store.viewport);

      return {
        nodes: get(store.nodes),
@@ -34,7 +35,7 @@ export default function drag(domNode: Element, params: UseDragParams) {
        nodeOrigin: [0, 0],
        multiSelectionActive: false,
        domNode: get(store.domNode),
-        transform: get(store.transform),
+        transform: [vp.x, vp.y, vp.zoom],
        autoPanOnNodeDrag: get(store.autoPanOnNodeDrag),
        nodesDraggable: get(store.nodesDraggable),
        selectNodesOnDrag: get(store.selectNodesOnDrag),
--- a/packages/svelte/src/lib/actions/zoom/index.ts
+++ b/packages/svelte/src/lib/actions/zoom/index.ts
@@ -5,15 +5,14 @@ import {
  type CoordinateExtent,
  type OnPanZoom,
  type PanZoomInstance,
-  type Transform,
  type Viewport
 } from '@xyflow/system';

 type ZoomParams = {
-  transform: Writable<Transform>;
+  viewport: Writable<Viewport>;
+  initialViewport: Viewport;
  minZoom: number;
  maxZoom: number;
-  initialViewport: Viewport;
  dragging: Writable<boolean>;
  onPanZoomStart?: OnPanZoom;
  onPanZoom?: OnPanZoom;
@@ -39,7 +38,7 @@ type ZoomParams = {
 };

 export default function zoom(domNode: Element, params: ZoomParams) {
-  const { panZoom, minZoom, maxZoom, initialViewport, transform, dragging, translateExtent } =
+  const { panZoom, minZoom, maxZoom, initialViewport, viewport, dragging, translateExtent } =
    params;

  const panZoomInstance = XYPanZoom({
@@ -48,11 +47,12 @@ export default function zoom(domNode: Element, params: ZoomParams) {
    maxZoom,
    translateExtent,
    viewport: initialViewport,
-    onTransformChange: transform.set,
+    onTransformChange: (transform) =>
+      viewport.set({ x: transform[0], y: transform[1], zoom: transform[2] }),
    onDraggingChange: dragging.set
  });
-  const { x, y, zoom } = panZoomInstance.getViewport();
-  transform.set([x, y, zoom]);
+  const currentViewport = panZoomInstance.getViewport();
+  viewport.set(currentViewport);
  panZoom.set(panZoomInstance);

  panZoomInstance.update(params);
--- a/packages/svelte/src/lib/components/Handle/Handle.svelte
+++ b/packages/svelte/src/lib/components/Handle/Handle.svelte
@@ -34,7 +34,7 @@
    domNode,
    nodes,
    connectionRadius,
-    transform,
+    viewport,
    isValidConnection,
    lib,
    addEdge,
@@ -80,7 +80,7 @@
        onConnectEnd: (event) => {
          dispatch('connectend', { event });
        },
-        getTransform: () => $transform
+        getTransform: () => [$viewport.x, $viewport.y, $viewport.zoom]
      });
    }
  }
--- a/packages/svelte/src/lib/container/Pane/Pane.svelte
+++ b/packages/svelte/src/lib/container/Pane/Pane.svelte
@@ -45,7 +45,7 @@
  const {
    nodes,
    edges,
-    transform,
+    viewport,
    dragging,
    elementsSelectable,
    selectionRect,
@@ -120,7 +120,7 @@
    selectedNodes = getNodesInside<Node>(
      $nodes,
      nextUserSelectRect,
-      $transform,
+      [$viewport.x, $viewport.y, $viewport.zoom],
      $selectionMode === SelectionMode.Partial,
      true
    );
--- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
@@ -27,6 +27,7 @@
  export let minZoom: $$Props['minZoom'] = undefined;
  export let maxZoom: $$Props['maxZoom'] = undefined;
  export let initialViewport: Viewport = { x: 0, y: 0, zoom: 1 };
+  export let viewport: $$Props['viewport'] = undefined;
  export let nodeTypes: $$Props['nodeTypes'] = undefined;
  export let edgeTypes: $$Props['edgeTypes'] = undefined;
  export let selectionKey: $$Props['selectionKey'] = undefined;
@@ -81,6 +82,7 @@

    store.syncNodeStores(nodes);
    store.syncEdgeStores(edges);
+    store.syncViewport(viewport);

    if (fitView !== undefined) {
      store.fitViewOnInit.set(fitView);
--- a/packages/svelte/src/lib/container/SvelteFlow/types.ts
+++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts
@@ -47,6 +47,7 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
  minZoom?: number;
  maxZoom?: number;
  initialViewport?: Viewport;
+  viewport?: Writable<Viewport>;
  connectionRadius?: number;
  connectionMode?: ConnectionMode;
  connectionLineStyle?: string;
--- a/packages/svelte/src/lib/container/Viewport/Viewport.svelte
+++ b/packages/svelte/src/lib/container/Viewport/Viewport.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
  import { useStore } from '$lib/store';

-  const { transform } = useStore();
+  const { viewport } = useStore();
 </script>

 <div
  class="svelte-flow__viewport xyflow__viewport"
-  style="transform: translate({$transform[0]}px, {$transform[1]}px) scale({$transform[2]})"
+  style="transform: translate({$viewport.x}px, {$viewport.y}px) scale({$viewport.zoom})"
 >
  <slot />
 </div>
--- a/packages/svelte/src/lib/container/Zoom/Zoom.svelte
+++ b/packages/svelte/src/lib/container/Zoom/Zoom.svelte
@@ -20,7 +20,7 @@
  export let panOnScroll: $$Props['panOnScroll'];

  const {
-    transform,
+    viewport,
    panZoom,
    selectionKeyPressed,
    minZoom,
@@ -38,7 +38,7 @@
 <div
  class="svelte-flow__zoom"
  use:zoom={{
-    transform,
+    viewport,
    minZoom: $minZoom,
    maxZoom: $maxZoom,
    initialViewport: viewPort,
--- a/packages/svelte/src/lib/hooks/useSvelteFlow.ts
+++ b/packages/svelte/src/lib/hooks/useSvelteFlow.ts
@@ -1,4 +1,4 @@
-import { get, writable, type Writable } from 'svelte/store';
+import { get, type Writable } from 'svelte/store';
 import {
  pointToRendererPoint,
  type Project,
@@ -32,7 +32,7 @@ export function useSvelteFlow(): {
    zoomOut,
    fitView,
    snapGrid,
-    transform,
+    viewport,
    width,
    height,
    maxZoom,
@@ -41,44 +41,26 @@ export function useSvelteFlow(): {
    edges
  } = useStore();

-  const transformValues = get(transform);
-  const viewportWritable = writable({
-    x: transformValues[0],
-    y: transformValues[1],
-    zoom: transformValues[2]
-  });
-
-  transform.subscribe((ts) =>
-    viewportWritable.set({
-      x: ts[0],
-      y: ts[1],
-      zoom: ts[2]
-    })
-  );
-
  return {
    zoomIn,
    zoomOut,
    setZoom: (zoomLevel, options) => {
      get(panZoom)?.scaleTo(zoomLevel, { duration: options?.duration });
    },
-    getZoom: () => get(transform)[2],
-    setViewport: (viewport, options) => {
-      const [x, y, zoom] = get(transform);
+    getZoom: () => get(viewport).zoom,
+    setViewport: (vieport, options) => {
+      const currentViewport = get(viewport);

      get(panZoom)?.setViewport(
        {
-          x: viewport.x ?? x,
-          y: viewport.y ?? y,
-          zoom: viewport.zoom ?? zoom
+          x: vieport.x ?? currentViewport.x,
+          y: vieport.y ?? currentViewport.y,
+          zoom: vieport.zoom ?? currentViewport.zoom
        },
        { duration: options?.duration }
      );
    },
-    getViewport: () => {
-      const [x, y, zoom] = get(transform);
-      return { x, y, zoom };
-    },
+    getViewport: () => get(viewport),
    setCenter: (x, y, options) => {
      const _width = get(width);
      const _height = get(height);
@@ -98,15 +80,12 @@ export function useSvelteFlow(): {
    fitView,
    project: (position: XYPosition) => {
      const _snapGrid = get(snapGrid);
-      return pointToRendererPoint(
-        position,
-        get(transform),
-        _snapGrid !== null,
-        _snapGrid || [1, 1]
-      );
+      const { x, y, zoom } = get(viewport);
+
+      return pointToRendererPoint(position, [x, y, zoom], _snapGrid !== null, _snapGrid || [1, 1]);
    },
    nodes,
    edges,
-    viewport: viewportWritable
+    viewport: viewport
  };
 }
--- a/packages/svelte/src/lib/plugins/Background/Background.svelte
+++ b/packages/svelte/src/lib/plugins/Background/Background.svelte
@@ -26,15 +26,15 @@
  let className: $$Props['class'] = '';
  export { className as class };

-  const { transform, flowId } = useStore();
+  const { viewport, flowId } = useStore();
  const patternSize = size || defaultSize[variant!];
  const isDots = variant === BackgroundVariant.Dots;
  const isCross = variant === BackgroundVariant.Cross;
  const gapXY: number[] = Array.isArray(gap!) ? gap! : [gap!, gap!];

  $: patternId = `background-pattern-${$flowId}`;
-  $: scaledGap = [gapXY[0] * $transform[2] || 1, gapXY[1] * $transform[2] || 1];
-  $: scaledSize = patternSize * $transform[2];
+  $: scaledGap = [gapXY[0] * $viewport.zoom || 1, gapXY[1] * $viewport.zoom || 1];
+  $: scaledSize = patternSize * $viewport.zoom;
  $: patternDimensions = (isCross ? [scaledSize, scaledSize] : scaledGap) as [number, number];
  $: patternOffset = isDots
    ? [scaledSize / 2, scaledSize / 2]
@@ -49,8 +49,8 @@
 >
  <pattern
    id={patternId}
-    x={$transform[0] % scaledGap[0]}
-    y={$transform[1] % scaledGap[1]}
+    x={$viewport.x % scaledGap[0]}
+    y={$viewport.y % scaledGap[1]}
    width={scaledGap[0]}
    height={scaledGap[1]}
    patternUnits="userSpaceOnUse"
--- a/packages/svelte/src/lib/plugins/Controls/Controls.svelte
+++ b/packages/svelte/src/lib/plugins/Controls/Controls.svelte
@@ -26,7 +26,7 @@
    zoomIn,
    zoomOut,
    fitView,
-    transform,
+    viewport,
    minZoom,
    maxZoom,
    nodesDraggable,
@@ -43,8 +43,8 @@
  };

  $: isInteractive = $nodesDraggable || $nodesConnectable || $elementsSelectable;
-  $: minZoomReached = $transform[2] <= $minZoom;
-  $: maxZoomReached = $transform[2] >= $maxZoom;
+  $: minZoomReached = $viewport.zoom <= $minZoom;
+  $: maxZoomReached = $viewport.zoom >= $maxZoom;

  const onZoomInHandler = () => {
    zoomIn();
--- a/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
+++ b/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
@@ -43,7 +43,7 @@
  const defaultHeight = 150;
  const {
    nodes,
-    transform,
+    viewport,
    width: containerWidth,
    height: containerHeight,
    flowId,
@@ -59,10 +59,10 @@
  const labelledBy = `svelte-flow__minimap-desc-${$flowId}`;

  $: viewBB = {
-    x: -$transform[0] / $transform[2],
-    y: -$transform[1] / $transform[2],
-    width: $containerWidth / $transform[2],
-    height: $containerHeight / $transform[2]
+    x: -$viewport.x / $viewport.zoom,
+    y: -$viewport.y / $viewport.zoom,
+    width: $containerWidth / $viewport.zoom,
+    height: $containerHeight / $viewport.zoom
  };
  $: boundingRect = $nodes.length > 0 ? getBoundsOfRects(getRectOfNodes($nodes), viewBB) : viewBB;
  $: elementWidth = width ?? defaultWidth;
@@ -100,7 +100,7 @@
      style:--minimap-mask-stroke-width-props={maskStrokeWidth}
      use:interactive={{
        panZoom: $panZoom,
-        transform,
+        viewport,
        getViewScale,
        translateExtent: $translateExtent,
        width: $containerWidth,
--- a/packages/svelte/src/lib/plugins/Minimap/interactive.ts
+++ b/packages/svelte/src/lib/plugins/Minimap/interactive.ts
@@ -2,13 +2,13 @@ import { get, type Writable } from 'svelte/store';
 import {
  XYMinimap,
  type PanZoomInstance,
-  type Transform,
+  type Viewport,
  type XYMinimapUpdate
 } from '@xyflow/system';

 export type UseInteractiveParams = {
  panZoom: PanZoomInstance;
-  transform: Writable<Transform>;
+  viewport: Writable<Viewport>;
  getViewScale: () => number;
 } & XYMinimapUpdate;

@@ -16,7 +16,10 @@ export default function interactive(domNode: Element, params: UseInteractivePara
  const minimap = XYMinimap({
    domNode,
    panZoom: params.panZoom,
-    getTransform: () => get(params.transform),
+    getTransform: () => {
+      const viewport = get(params.viewport);
+      return [viewport.x, viewport.y, viewport.zoom];
+    },
    getViewScale: params.getViewScale
  });

--- a/packages/svelte/src/lib/store/derived-connection-props.ts
+++ b/packages/svelte/src/lib/store/derived-connection-props.ts
@@ -57,9 +57,9 @@ export function getDerivedConnectionProps(
      store.connectionLineType,
      store.connectionMode,
      store.nodes,
-      store.transform
+      store.viewport
    ],
-    ([connection, connectionLineType, connectionMode, nodes, transform]) => {
+    ([connection, connectionLineType, connectionMode, nodes, viewport]) => {
      if (!connection.connectionStartHandle?.nodeId) {
        return initConnectionProps;
      }
@@ -91,8 +91,8 @@ export function getDerivedConnectionProps(
        sourceX: fromX,
        sourceY: fromY,
        sourcePosition: fromPosition,
-        targetX: ((connection.connectionPosition?.x ?? 0) - transform[0]) / transform[2],
-        targetY: ((connection.connectionPosition?.y ?? 0) - transform[1]) / transform[2],
+        targetX: ((connection.connectionPosition?.x ?? 0) - viewport.x) / viewport.zoom,
+        targetY: ((connection.connectionPosition?.y ?? 0) - viewport.y) / viewport.zoom,
        targetPosition: toPosition
      };

--- a/packages/svelte/src/lib/store/edge-tree.ts
+++ b/packages/svelte/src/lib/store/edge-tree.ts
@@ -10,11 +10,11 @@ export function getEdgeTree(store: SvelteFlowStoreState) {
      store.edges,
      store.nodes,
      store.onlyRenderVisibleElements,
-      store.transform,
+      store.viewport,
      store.width,
      store.height
    ],
-    ([edges, nodes, onlyRenderVisibleElements, transform, width, height]) => {
+    ([edges, nodes, onlyRenderVisibleElements, viewport, width, height]) => {
      const visibleEdges =
        onlyRenderVisibleElements && width && height
          ? edges.filter((edge) => {
@@ -29,7 +29,7 @@ export function getEdgeTree(store: SvelteFlowStoreState) {
                  targetNode,
                  width,
                  height,
-                  transform
+                  transform: [viewport.x, viewport.y, viewport.zoom]
                })
              );
            })
--- a/packages/svelte/src/lib/store/index.ts
+++ b/packages/svelte/src/lib/store/index.ts
@@ -22,7 +22,7 @@ import { addEdge as addEdgeUtil } from '$lib/utils';
 import type { EdgeTypes, NodeTypes, Node, Edge, FitViewOptions, ConnectionData } from '$lib/types';
 import { initialEdgeTypes, initialNodeTypes, getInitialStore } from './initial-store';
 import type { SvelteFlowStore } from './types';
-import { syncNodeStores, syncEdgeStores } from './utils';
+import { syncNodeStores, syncEdgeStores, syncViewportStores } from './utils';
 import { getEdgeTree } from './edge-tree';
 import { getVisibleNodes } from './visible-nodes';
 import { getDerivedConnectionProps } from './derived-connection-props';
@@ -241,10 +241,11 @@ export function createStore(): SvelteFlowStore {
  }

  function panBy(delta: XYPosition) {
+    const viewport = get(store.viewport);
    return panBySystem({
      delta,
      panZoom: get(store.panZoom),
-      transform: get(store.transform),
+      transform: [viewport.x, viewport.y, viewport.zoom],
      translateExtent: get(store.translateExtent),
      width: get(store.width),
      height: get(store.height)
@@ -298,6 +299,7 @@ export function createStore(): SvelteFlowStore {
    // actions
    syncNodeStores: (nodes) => syncNodeStores(store.nodes, nodes),
    syncEdgeStores: (edges) => syncEdgeStores(store.edges, edges),
+    syncViewport: (viewport) => syncViewportStores(store.panZoom, store.viewport, viewport),
    setNodeTypes,
    setEdgeTypes,
    addEdge,
@@ -305,9 +307,7 @@ export function createStore(): SvelteFlowStore {
    updateNodeDimensions,
    zoomIn,
    zoomOut,
-    fitView: (options?: FitViewOptions) => {
-      return fitView(get(store.nodes), options);
-    },
+    fitView: (options?: FitViewOptions) => fitView(get(store.nodes), options),
    setMinZoom,
    setMaxZoom,
    setTranslateExtent,
--- a/packages/svelte/src/lib/store/initial-store.ts
+++ b/packages/svelte/src/lib/store/initial-store.ts
@@ -5,7 +5,6 @@ import {
  ConnectionMode,
  ConnectionLineType,
  type SelectionRect,
-  type Transform,
  type SnapGrid,
  type MarkerProps,
  type PanZoomInstance,
@@ -14,7 +13,8 @@ import {
  type GroupedEdges,
  type NodeOrigin,
  type OnError,
-  devWarn
+  devWarn,
+  type Viewport
 } from '@xyflow/system';

 import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
@@ -72,7 +72,7 @@ export const getInitialStore = () => ({
  selectionMode: writable<SelectionMode>(SelectionMode.Partial),
  nodeTypes: writable<NodeTypes>(initialNodeTypes),
  edgeTypes: writable<EdgeTypes>(initialEdgeTypes),
-  transform: writable<Transform>([0, 0, 1]),
+  viewport: writable<Viewport>({ x: 0, y: 0, zoom: 1 }),
  connectionMode: writable<ConnectionMode>(ConnectionMode.Strict),
  domNode: writable<HTMLDivElement | null>(null),
  connection: readable<ConnectionProps>(initConnectionProps),
--- a/packages/svelte/src/lib/store/types.ts
+++ b/packages/svelte/src/lib/store/types.ts
@@ -6,7 +6,8 @@ import type {
  Connection,
  UpdateNodePositions,
  CoordinateExtent,
-  UpdateConnection
+  UpdateConnection,
+  Viewport
 } from '@xyflow/system';

 import type { getInitialStore } from './initial-store';
@@ -15,6 +16,7 @@ import type { Node, Edge, NodeTypes, EdgeTypes, FitViewOptions } from '$lib/type
 export type SvelteFlowStoreActions = {
  syncNodeStores: (nodesStore: Writable<Node[]>) => void;
  syncEdgeStores: (edgeStore: Writable<Edge[]>) => void;
+  syncViewport: (viewportStore?: Writable<Viewport>) => void;
  setNodeTypes: (nodeTypes: NodeTypes) => void;
  setEdgeTypes: (edgeTypes: EdgeTypes) => void;
  addEdge: (edge: Edge | Connection) => void;
--- a/packages/svelte/src/lib/store/utils.ts
+++ b/packages/svelte/src/lib/store/utils.ts
@@ -6,7 +6,7 @@ import {
  type Writable,
  get
 } from 'svelte/store';
-import { updateNodes } from '@xyflow/system';
+import { updateNodes, type Transform, type Viewport, type PanZoomInstance } from '@xyflow/system';

 import type { DefaultEdgeOptions, DefaultNodeOptions, Edge, Node } from '$lib/types';

@@ -56,6 +56,54 @@ export function syncEdgeStores(
  edgesStore.update = userEdgesStore.update = (fn: (nds: Edge[]) => Edge[]) => _set(fn(val));
 }

+// it is possible to pass a viewport store to SvelteFlow for having more control
+// if that's the case we need to sync the internal viewport with the user viewport
+export const syncViewportStores = (
+  panZoomStore: Writable<PanZoomInstance | null>,
+  viewportStore: Writable<Viewport>,
+  userViewportStore?: Writable<Viewport>
+) => {
+  if (!userViewportStore) {
+    return;
+  }
+
+  const panZoom = get(panZoomStore);
+
+  const viewportStoreSetter = viewportStore.set;
+  const userViewportStoreSetter = userViewportStore.set;
+
+  let val = userViewportStore ? get(userViewportStore) : { x: 0, y: 0, zoom: 1 };
+  viewportStore.set(val);
+
+  viewportStore.set = (vp: Viewport) => {
+    viewportStoreSetter(vp);
+    userViewportStoreSetter(vp);
+
+    val = vp;
+
+    return vp;
+  };
+
+  userViewportStore.set = (vp: Viewport) => {
+    panZoom?.syncViewport(vp);
+
+    viewportStoreSetter(vp);
+    userViewportStoreSetter(vp);
+
+    val = vp;
+
+    return vp;
+  };
+
+  viewportStore.update = (fn: (vp: Viewport) => Viewport) => {
+    viewportStore.set(fn(val));
+  };
+
+  userViewportStore.update = (fn: (vp: Viewport) => Viewport) => {
+    userViewportStore.set(fn(val));
+  };
+};
+
 export type NodeStoreOptions = {
  elevateNodesOnSelect?: boolean;
 };
--- a/packages/svelte/src/lib/store/visible-nodes.ts
+++ b/packages/svelte/src/lib/store/visible-nodes.ts
@@ -1,13 +1,14 @@
 import { derived } from 'svelte/store';
-import { getNodesInside } from '@xyflow/system';
+import { getNodesInside, type Transform } from '@xyflow/system';

 import type { Node } from '$lib/types';
 import type { SvelteFlowStoreState } from './types';

 export function getVisibleNodes(store: SvelteFlowStoreState) {
  return derived(
-    [store.nodes, store.onlyRenderVisibleElements, store.width, store.height, store.transform],
-    ([nodes, onlyRenderVisibleElements, width, height, transform]) => {
+    [store.nodes, store.onlyRenderVisibleElements, store.width, store.height, store.viewport],
+    ([nodes, onlyRenderVisibleElements, width, height, viewport]) => {
+      const transform: Transform = [viewport.x, viewport.y, viewport.zoom];
      return onlyRenderVisibleElements
        ? getNodesInside<Node>(nodes, { x: 0, y: 0, width, height }, transform, true)
        : nodes;
--- a/packages/system/src/types/panzoom.ts
+++ b/packages/system/src/types/panzoom.ts
@@ -1,6 +1,6 @@
-import { ZoomTransform } from 'd3-zoom';
+import type { ZoomTransform } from 'd3-zoom';

-import { CoordinateExtent, PanOnScrollMode, Transform, Viewport } from './';
+import { PanOnScrollMode, type CoordinateExtent, type Transform, type Viewport } from './';

 export type OnDraggingChange = (dragging: boolean) => void;
 export type OnTransformChange = (transform: Transform) => void;
@@ -55,4 +55,5 @@ export type PanZoomInstance = {
  setTranslateExtent: (translateExtent: CoordinateExtent) => void;
  scaleTo: (scale: number, options?: PanZoomTransformOptions) => void;
  scaleBy: (factor: number, options?: PanZoomTransformOptions) => void;
+  syncViewport: (viewport: Viewport) => void;
 };
--- a/packages/system/src/xypanzoom/XYPanZoom.ts
+++ b/packages/system/src/xypanzoom/XYPanZoom.ts
@@ -194,6 +194,22 @@ export function XYPanZoom({
    return nextTransform;
  }

+  function syncViewport(viewport: Viewport) {
+    if (d3Selection) {
+      const nextTransform = viewportToTransform(viewport);
+      const currentTransform = d3Selection.property('__zoom');
+
+      if (
+        currentTransform.k !== viewport.zoom ||
+        currentTransform.x !== viewport.x ||
+        currentTransform.y !== viewport.y
+      ) {
+        // @ts-ignore
+        d3ZoomInstance?.transform(d3Selection, nextTransform, null, { sync: true });
+      }
+    }
+  }
+
  function getViewport(): Viewport {
    const transform = d3Selection ? zoomTransform(d3Selection.node() as Element) : { x: 0, y: 0, k: 1 };
    return { x: transform.x, y: transform.y, zoom: transform.k };
@@ -229,5 +245,6 @@ export function XYPanZoom({
    scaleBy,
    setScaleExtent,
    setTranslateExtent,
+    syncViewport,
  };
 }
--- a/packages/system/src/xypanzoom/eventhandler.ts
+++ b/packages/system/src/xypanzoom/eventhandler.ts
@@ -183,7 +183,9 @@ export function createPanZoomHandler({
      onPaneContextMenu && isRightClickPan(panOnDrag, zoomPanValues.mouseButton ?? 0)
    );

-    onTransformChange([event.transform.x, event.transform.y, event.transform.k]);
+    if (!event.sourceEvent?.sync) {
+      onTransformChange([event.transform.x, event.transform.y, event.transform.k]);
+    }

    if (onPanZoom && !event.sourceEvent?.internal) {
      onPanZoom?.(event.sourceEvent as MouseEvent | TouchEvent, transformToViewport(event.transform));