;
- const selected = state.selectedElements
- .filter(isNode)
- .map((e: Node) => e.id)
- .includes(node.id);
+ const isSelected = selectedElements.some(({ id }) => id === node.id);
return (
);
}
-const NodeRenderer = memo((props: NodeRendererProps) => {
- const state: NodeRendererState = useStoreState(s => ({
- nodes: s.nodes,
- transform: s.transform,
- selectedElements: s.selectedElements,
- }));
+const NodeRenderer = memo(({ onlyRenderVisibleNodes = true, ...props }: NodeRendererProps) => {
+ const { nodes, transform, selectedElements, width, height } = useStoreState(s => s);
- const { transform, nodes } = state;
+ const [tx, ty, tScale] = transform;
const transformStyle = {
- transform: `translate(${transform[0]}px,${transform[1]}px) scale(${transform[2]})`,
+ transform: `translate(${tx}px,${ty}px) scale(${tScale})`,
};
+ const renderNodes = onlyRenderVisibleNodes ? getNodesInside(nodes, { x: 0, y: 0, width, height }, transform, true) : nodes;
+
return (
- {nodes.map(node => renderNode(node, props, state))}
+ {renderNodes.map(node => renderNode(node, props, transform, selectedElements))}
);
});
diff --git a/src/container/ReactFlow/index.tsx b/src/container/ReactFlow/index.tsx
index f4bd86e5..83ef29ca 100644
--- a/src/container/ReactFlow/index.tsx
+++ b/src/container/ReactFlow/index.tsx
@@ -48,7 +48,8 @@ export interface ReactFlowProps
backgroundColor: string;
backgroundType: GridType;
snapToGrid: boolean;
- snapGrid: [16, 16];
+ snapGrid: [number, number];
+ onlyRenderVisibleNodes: boolean
}
const ReactFlow = ({
@@ -73,6 +74,7 @@ const ReactFlow = ({
backgroundColor,
snapToGrid,
snapGrid,
+ onlyRenderVisibleNodes
}: ReactFlowProps) => {
const nodeTypesParsed = useMemo(() => createNodeTypes(nodeTypes), []);
const edgeTypesParsed = useMemo(() => createEdgeTypes(edgeTypes), []);
@@ -100,6 +102,7 @@ const ReactFlow = ({
backgroundType={backgroundType}
snapToGrid={snapToGrid}
snapGrid={snapGrid}
+ onlyRenderVisibleNodes={onlyRenderVisibleNodes}
/>
{children}
@@ -136,6 +139,7 @@ ReactFlow.defaultProps = {
backgroundType: GridType.Dots,
snapToGrid: false,
snapGrid: [16, 16],
+ onlyRenderVisibleNodes: true
};
export default ReactFlow;
diff --git a/src/utils/graph.ts b/src/utils/graph.ts
index 01b03265..70670dbd 100644
--- a/src/utils/graph.ts
+++ b/src/utils/graph.ts
@@ -157,10 +157,10 @@ export const getNodesInside = (
const overlappingArea =
(Math.max(rBox.x, nBox.x) - Math.min(rBox.x2, nBox.x2)) * (Math.max(rBox.y, nBox.y) - Math.min(rBox.y2, nBox.y2));
if (partially) {
- return overlappingArea > 0;
+ return overlappingArea >= 0;
}
const area = width * height;
- return overlappingArea === area;
+ return overlappingArea >= area;
});
};