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; }); };