diff --git a/examples/svelte/src/routes/examples/overview/+page.svelte b/examples/svelte/src/routes/examples/overview/+page.svelte index 301730f6..92a353bb 100644 --- a/examples/svelte/src/routes/examples/overview/+page.svelte +++ b/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([ { id: '1', @@ -191,7 +196,7 @@ attributionPosition={'top-center'} deleteKey={['Backspace', 'd']} > - + xy console.log('control button')} >log { - fitView(); + fitView(fitViewOptions); }; const onToggleInteractivity = () => { diff --git a/packages/svelte/src/lib/plugins/Controls/types.ts b/packages/svelte/src/lib/plugins/Controls/types.ts index 1de8dee9..a4e5f9d7 100644 --- a/packages/svelte/src/lib/plugins/Controls/types.ts +++ b/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 & { diff --git a/packages/svelte/src/lib/store/index.ts b/packages/svelte/src/lib/store/index.ts index f37d8e47..e02573ad 100644 --- a/packages/svelte/src/lib/store/index.ts +++ b/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), diff --git a/packages/svelte/src/lib/types/general.ts b/packages/svelte/src/lib/types/general.ts index 71e2047a..8aaa9a0a 100644 --- a/packages/svelte/src/lib/types/general.ts +++ b/packages/svelte/src/lib/types/general.ts @@ -53,7 +53,7 @@ export type HandleComponentProps = { ondisconnect?: (connections: Connection[]) => void; }; -export type FitViewOptions = FitViewOptionsBase; +export type FitViewOptions = FitViewOptionsBase; export type OnDelete = (params: { nodes: Node[]; edges: Edge[] }) => void; export type OnEdgeCreate = (connection: Connection) => Edge | Connection | void; diff --git a/packages/system/src/types/general.ts b/packages/system/src/types/general.ts index 0ab0fa03..6ff1dd45 100644 --- a/packages/system/src/types/general.ts +++ b/packages/system/src/types/general.ts @@ -61,13 +61,13 @@ export type FitViewParamsBase = { nodeOrigin?: NodeOrigin; }; -export type FitViewOptionsBase = { +export type FitViewOptionsBase = { padding?: number; includeHiddenNodes?: boolean; minZoom?: number; maxZoom?: number; duration?: number; - nodes?: (NodeType | { id: NodeType['id'] })[]; + nodes?: (NodeType | { id: string })[]; }; export type Viewport = {