From 439916e619ebf603529c76ba4e3817c9696160a7 Mon Sep 17 00:00:00 2001
From: Peter <p.korcsak@googlemail.com>
Date: Mon, 25 Sep 2023 13:46:22 +0200
Subject: [PATCH] fix(react) fitViewOptions.nodes are now working as intended

---
 examples/react/src/examples/Overview/index.tsx   | 2 +-
 examples/svelte/src/routes/overview/+page.svelte | 2 +-
 packages/react/src/store/index.ts                | 6 +++---
 packages/react/src/types/store.ts                | 2 +-
 packages/system/src/utils/graph.ts               | 5 +----
 5 files changed, 7 insertions(+), 10 deletions(-)

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<Params extends FitViewParamsBase<NodeBase>, 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<Params extends FitViewParamsBase<NodeBase>, 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,