feat(svelte): add fitViewOptions for Controls closes #4201

examples/svelte/src/routes/examples/overview/+page.svelte

@@ -13,8 +13,8 @@
 		type Node,
 		type Edge,
 		ConnectionMode,
-		useSvelteFlow,
-		ControlButton
+		ControlButton,
+		type FitViewOptions
 	} from '@xyflow/svelte';
 
 	import CustomNode from './CustomNode.svelte';
@@ -33,6 +33,11 @@
 		custom: CustomEdge
 	};
 
+	const fitViewOptions: FitViewOptions = {
+		padding: 0.2,
+		nodes: [{ id: '1' }, { id: '2' }]
+	};
+
 	const nodes = writable<Node[]>([
 		{
 			id: '1',
@@ -191,7 +196,7 @@
 	attributionPosition={'top-center'}
 	deleteKey={['Backspace', 'd']}
 >
-	<Controls orientation="horizontal">
+	<Controls orientation="horizontal" {fitViewOptions}>
 		<ControlButton slot="before">xy</ControlButton>
 		<ControlButton aria-label="log" on:click={() => console.log('control button')}
 			>log</ControlButton

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

@@ -26,6 +26,7 @@
   export let ariaLabel: $$Props['aria-label'] = undefined;
   export let style: $$Props['style'] = undefined;
   export let orientation: $$Props['orientation'] = 'vertical';
+  export let fitViewOptions: $$Props['fitViewOptions'] = undefined;
 
   let className: $$Props['class'] = '';
   export { className as class };
@@ -63,7 +64,7 @@
   };
 
   const onFitViewHandler = () => {
-    fitView();
+    fitView(fitViewOptions);
   };
 
   const onToggleInteractivity = () => {

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

@@ -1,6 +1,8 @@
 import type { HTMLButtonAttributes } from 'svelte/elements';
 import type { PanelPosition } from '@xyflow/system';
 
+import type { FitViewOptions } from '$lib/types';
+
 export type ControlsProps = {
   /** Position of the controls on the pane
    * @example PanelPosition.TopLeft, PanelPosition.TopRight,
@@ -21,6 +23,7 @@ export type ControlsProps = {
   style?: string;
   class?: string;
   orientation?: 'horizontal' | 'vertical';
+  fitViewOptions?: FitViewOptions;
 };
 
 export type ControlButtonProps = HTMLButtonAttributes & {

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

@@ -2,7 +2,7 @@ import { getContext, setContext } from 'svelte';
 import { derived, get, writable } from 'svelte/store';
 import {
   createMarkerIds,
-  fitView as fitViewUtil,
+  fitView as fitViewSystem,
   getElementsToRemove,
   panBy as panBySystem,
   updateNodeInternals as updateNodeInternalsSystem,
@@ -140,7 +140,7 @@ export function createStore({
       return false;
     }
 
-    return fitViewUtil(
+    return fitViewSystem(
       {
         nodeLookup: get(store.nodeLookup),
         width: get(store.width),

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

@@ -53,7 +53,7 @@ export type HandleComponentProps = {
   ondisconnect?: (connections: Connection[]) => void;
 };
 
-export type FitViewOptions = FitViewOptionsBase<Node>;
+export type FitViewOptions<NodeType extends Node = Node> = FitViewOptionsBase<NodeType>;
 
 export type OnDelete = (params: { nodes: Node[]; edges: Edge[] }) => void;
 export type OnEdgeCreate = (connection: Connection) => Edge | Connection | void;

packages/system/src/types/general.ts

@@ -61,13 +61,13 @@ export type FitViewParamsBase<NodeType extends NodeBase> = {
   nodeOrigin?: NodeOrigin;
 };
 
-export type FitViewOptionsBase<NodeType extends NodeBase> = {
+export type FitViewOptionsBase<NodeType extends NodeBase = NodeBase> = {
   padding?: number;
   includeHiddenNodes?: boolean;
   minZoom?: number;
   maxZoom?: number;
   duration?: number;
-  nodes?: (NodeType | { id: NodeType['id'] })[];
+  nodes?: (NodeType | { id: string })[];
 };
 
 export type Viewport = {