feat(viewport-options): add ease #3189

examples/react/src/examples/UseReactFlow/index.tsx

@@ -170,7 +170,6 @@ const UseZoomPanHelperFlow = () => {
       onConnect={onConnect}
       onPaneClick={onPaneClick}
       fitView
-      fitViewOptions={{ duration: 1200, padding: 0.2 }}
       maxZoom={Infinity}
     >
       <Panel position="top-right">
@@ -183,7 +182,16 @@ const UseZoomPanHelperFlow = () => {
             console.log('fit view success');
           }}
         >
-          fitView
+          fitView default
+        </button>
+        <button
+          onClick={async () => {
+            console.log('fit view start');
+            await fitView({ duration: 1200, padding: 0.3, ease: (t) => +t });
+            console.log('fit view success');
+          }}
+        >
+          fitView linear
         </button>
         <button onClick={onAddNode}>add node</button>
         <button onClick={onResetNodes}>reset nodes</button>

examples/svelte/src/routes/examples/usesvelteflow/Flow.svelte

@@ -44,7 +44,7 @@
 </script>
 
 <main>
-	<SvelteFlow bind:nodes bind:edges fitView>
+	<SvelteFlow bind:nodes bind:edges fitView maxZoom={4}>
 		<Controls />
 		<Background variant={BackgroundVariant.Dots} />
 		<MiniMap />

examples/svelte/src/routes/examples/usesvelteflow/Sidebar.svelte

@@ -30,7 +30,8 @@
 	<button onclick={() => zoomIn()}>zoom in</button>
 	<button onclick={() => zoomOut({ duration: 1000 })}>zoom out transition</button>
 	<button onclick={() => setZoom(2)}>set zoom</button>
-	<button onclick={() => fitView()}>fitView</button>
+	<button onclick={() => fitView({ duration: 600 })}>fitView</button>
+	<button onclick={() => fitView({ duration: 600, ease: (t) => +t })}>fitView linear</button>
 	<button onclick={() => setCenter(0, 0)}>setCenter 0, 0</button>
 	<button onclick={() => setViewport({ x: 100, y: 100, zoom: 2 })}>setViewport</button>
 	<button onclick={() => console.log(getViewport())}>getViewport</button>