diff --git a/examples/react/src/examples/Overview/index.tsx b/examples/react/src/examples/Overview/index.tsx index 6dbe2663..eb8a8b95 100644 --- a/examples/react/src/examples/Overview/index.tsx +++ b/examples/react/src/examples/Overview/index.tsx @@ -221,7 +221,7 @@ const OverviewFlow = () => { onEdgeMouseLeave={onEdgeMouseLeave} onEdgeDoubleClick={onEdgeDoubleClick} fitView - fitViewOptions={{ padding: 0.1, nodes: [{ id: '1' }] }} + fitViewOptions={{ padding: 0.1 /*nodes: [{ id: '1' }]*/ }} attributionPosition="top-right" maxZoom={Infinity} onNodesDelete={onNodesDelete} diff --git a/examples/svelte/src/routes/overview/+page.svelte b/examples/svelte/src/routes/overview/+page.svelte index 6ca40dee..dc3bbbc4 100644 --- a/examples/svelte/src/routes/overview/+page.svelte +++ b/examples/svelte/src/routes/overview/+page.svelte @@ -131,7 +131,7 @@ {edgeTypes} fitView fitViewOptions={{ - padding: 10, + padding: 0.1, nodes: [ { id: '1' diff --git a/packages/react/src/store/index.ts b/packages/react/src/store/index.ts index a2a597f6..2f27da45 100644 --- a/packages/react/src/store/index.ts +++ b/packages/react/src/store/index.ts @@ -82,7 +82,7 @@ const createRFStore = () => let nextFitViewDone = fitViewDone; if (!fitViewDone && fitViewOnInit) { - nextFitViewDone = fitView({ + nextFitViewDone = fitView(nextNodes, { ...fitViewOnInitOptions, nodes: fitViewOnInitOptions?.nodes || nextNodes, }); @@ -241,8 +241,8 @@ const createRFStore = () => const { transform, width, height, panZoom, translateExtent } = get(); return panBySystem({ delta, panZoom, transform, translateExtent, width, height }); }, - fitView: (options?: FitViewOptions): boolean => { - const { panZoom, nodes, width, height, minZoom, maxZoom, nodeOrigin } = get(); + fitView: (nodes: Node[], options?: FitViewOptions): boolean => { + const { panZoom, width, height, minZoom, maxZoom, nodeOrigin } = get(); if (!panZoom) { return false; diff --git a/packages/react/src/types/store.ts b/packages/react/src/types/store.ts index 7fff1f73..36e79220 100644 --- a/packages/react/src/types/store.ts +++ b/packages/react/src/types/store.ts @@ -155,7 +155,7 @@ export type ReactFlowActions = { reset: () => void; triggerNodeChanges: (changes: NodeChange[]) => void; panBy: PanBy; - fitView: (options?: FitViewOptions) => boolean; + fitView: (nodes: Node[], options?: FitViewOptions) => boolean; }; export type ReactFlowState = ReactFlowStore & ReactFlowActions; diff --git a/packages/system/src/utils/graph.ts b/packages/system/src/utils/graph.ts index b5e61562..3da50ebc 100644 --- a/packages/system/src/utils/graph.ts +++ b/packages/system/src/utils/graph.ts @@ -171,7 +171,7 @@ export function fitView, Options exte options?: Options ) { const filteredNodes = nodes.filter((n) => { - const isVisible = options?.includeHiddenNodes ? n.width && n.height : !n.hidden; + const isVisible = n.width && n.height && (options?.includeHiddenNodes || !n.hidden); if (options?.nodes?.length) { return isVisible && options?.nodes.some((optionNode) => optionNode.id === n.id); @@ -180,11 +180,8 @@ export function fitView, Options exte return isVisible; }); - console.log(filteredNodes); - if (filteredNodes.length > 0) { const bounds = getRectOfNodes(filteredNodes, nodeOrigin); - console.log(bounds); const [x, y, zoom] = getTransformForBounds( bounds,