From 16707eaa99cf44bd1d6f9d055bda5a5e7f0a5522 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 29 Jul 2020 10:40:15 +0200
Subject: [PATCH 1/2] fix(onlyRenderVisibleNodes): only render nodes that are
 inside the viewport

---
 src/container/NodeRenderer/index.tsx |  4 +---
 src/utils/graph.ts                   | 11 +++++++++--
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/container/NodeRenderer/index.tsx b/src/container/NodeRenderer/index.tsx
index e369dfe3..05f96543 100644
--- a/src/container/NodeRenderer/index.tsx
+++ b/src/container/NodeRenderer/index.tsx
@@ -77,10 +77,8 @@ const NodeRenderer = ({ onlyRenderVisibleNodes = true, ...props }: NodeRendererP
   const nodesDraggable = useStoreState((s) => s.nodesDraggable);
   const nodesConnectable = useStoreState((s) => s.nodesConnectable);
   const elementsSelectable = useStoreState((s) => s.elementsSelectable);
-
-  const [tX, tY, tScale] = transform;
   const transformStyle = {
-    transform: `translate(${tX}px,${tY}px) scale(${tScale})`,
+    transform: `translate(${transform[0]}px,${transform[1]}px) scale(${transform[2]})`,
   };
 
   const renderNodes = onlyRenderVisibleNodes
diff --git a/src/utils/graph.ts b/src/utils/graph.ts
index d11527eb..ad593f0b 100644
--- a/src/utils/graph.ts
+++ b/src/utils/graph.ts
@@ -169,10 +169,17 @@ export const getNodesInside = (
     const yOverlap = Math.max(0, Math.min(rBox.y2, nBox.y2) - Math.max(rBox.y, nBox.y));
     const overlappingArea = xOverlap * yOverlap;
 
-    if (partially) {
-      return overlappingArea >= 0;
+    if (width === null || height === null) {
+      // at the beginnning all nodes have width & height === 0
+      return true;
     }
+
+    if (partially) {
+      return overlappingArea > 0;
+    }
+
     const area = width * height;
+
     return overlappingArea >= area;
   });
 };

From f4d1af6589095d446a8a4e539c9aba0f0f357b7a Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 29 Jul 2020 10:48:16 +0200
Subject: [PATCH 2/2] refactor(noderenderer): add viewportBox to store

---
 src/container/NodeRenderer/index.tsx | 7 ++-----
 src/store/index.ts                   | 6 ++++--
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/container/NodeRenderer/index.tsx b/src/container/NodeRenderer/index.tsx
index 05f96543..8fc90157 100644
--- a/src/container/NodeRenderer/index.tsx
+++ b/src/container/NodeRenderer/index.tsx
@@ -72,8 +72,7 @@ const NodeRenderer = ({ onlyRenderVisibleNodes = true, ...props }: NodeRendererP
   const nodes = useStoreState((s) => s.nodes);
   const transform = useStoreState((s) => s.transform);
   const selectedElements = useStoreState((s) => s.selectedElements);
-  const width = useStoreState((s) => s.width);
-  const height = useStoreState((s) => s.height);
+  const viewportBox = useStoreState((s) => s.viewportBox);
   const nodesDraggable = useStoreState((s) => s.nodesDraggable);
   const nodesConnectable = useStoreState((s) => s.nodesConnectable);
   const elementsSelectable = useStoreState((s) => s.elementsSelectable);
@@ -81,9 +80,7 @@ const NodeRenderer = ({ onlyRenderVisibleNodes = true, ...props }: NodeRendererP
     transform: `translate(${transform[0]}px,${transform[1]}px) scale(${transform[2]})`,
   };
 
-  const renderNodes = onlyRenderVisibleNodes
-    ? getNodesInside(nodes, { x: 0, y: 0, width, height }, transform, true)
-    : nodes;
+  const renderNodes = onlyRenderVisibleNodes ? getNodesInside(nodes, viewportBox, transform, true) : nodes;
 
   return (
     <div className="react-flow__nodes" style={transformStyle}>
diff --git a/src/store/index.ts b/src/store/index.ts
index cfc9faf5..cf710ab2 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -54,6 +54,7 @@ type SetSnapGrid = {
 export interface StoreModel {
   width: number;
   height: number;
+  viewportBox: Computed<StoreModel, Rect>;
   transform: Transform;
   elements: Elements;
   nodes: Computed<StoreModel, Node[]>;
@@ -136,10 +137,11 @@ export interface StoreModel {
 export const storeModel: StoreModel = {
   width: 0,
   height: 0,
+  viewportBox: computed((state) => ({ x: 0, y: 0, width: state.width, height: state.height })),
   transform: [0, 0, 1],
   elements: [],
-  nodes: computed([(state) => state.elements], (elements) => elements.filter((el) => isNode(el)) as Node[]),
-  edges: computed([(state) => state.elements], (elements) => elements.filter((el) => isEdge(el)) as Edge[]),
+  nodes: computed((state) => state.elements.filter((el) => isNode(el)) as Node[]),
+  edges: computed((state) => state.elements.filter((el) => isEdge(el)) as Edge[]),
   selectedElements: null,
   selectedNodesBbox: { x: 0, y: 0, width: 0, height: 0 },