fix(onlyRenderVisibleNodes): only render nodes that are inside the viewport
This commit is contained in:
@@ -77,10 +77,8 @@ const NodeRenderer = ({ onlyRenderVisibleNodes = true, ...props }: NodeRendererP
|
|||||||
const nodesDraggable = useStoreState((s) => s.nodesDraggable);
|
const nodesDraggable = useStoreState((s) => s.nodesDraggable);
|
||||||
const nodesConnectable = useStoreState((s) => s.nodesConnectable);
|
const nodesConnectable = useStoreState((s) => s.nodesConnectable);
|
||||||
const elementsSelectable = useStoreState((s) => s.elementsSelectable);
|
const elementsSelectable = useStoreState((s) => s.elementsSelectable);
|
||||||
|
|
||||||
const [tX, tY, tScale] = transform;
|
|
||||||
const transformStyle = {
|
const transformStyle = {
|
||||||
transform: `translate(${tX}px,${tY}px) scale(${tScale})`,
|
transform: `translate(${transform[0]}px,${transform[1]}px) scale(${transform[2]})`,
|
||||||
};
|
};
|
||||||
|
|
||||||
const renderNodes = onlyRenderVisibleNodes
|
const renderNodes = onlyRenderVisibleNodes
|
||||||
|
|||||||
+9
-2
@@ -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 yOverlap = Math.max(0, Math.min(rBox.y2, nBox.y2) - Math.max(rBox.y, nBox.y));
|
||||||
const overlappingArea = xOverlap * yOverlap;
|
const overlappingArea = xOverlap * yOverlap;
|
||||||
|
|
||||||
if (partially) {
|
if (width === null || height === null) {
|
||||||
return overlappingArea >= 0;
|
// at the beginnning all nodes have width & height === 0
|
||||||
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (partially) {
|
||||||
|
return overlappingArea > 0;
|
||||||
|
}
|
||||||
|
|
||||||
const area = width * height;
|
const area = width * height;
|
||||||
|
|
||||||
return overlappingArea >= area;
|
return overlappingArea >= area;
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user