diff --git a/src/container/NodeRenderer/index.tsx b/src/container/NodeRenderer/index.tsx
index e369dfe3..8fc90157 100644
--- a/src/container/NodeRenderer/index.tsx
+++ b/src/container/NodeRenderer/index.tsx
@@ -72,20 +72,15 @@ 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);
-
- 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
- ? getNodesInside(nodes, { x: 0, y: 0, width, height }, transform, true)
- : nodes;
+ const renderNodes = onlyRenderVisibleNodes ? getNodesInside(nodes, viewportBox, transform, true) : nodes;
return (
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;
transform: Transform;
elements: Elements;
nodes: Computed;
@@ -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 },
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;
});
};