diff --git a/.changeset/tidy-swans-clap.md b/.changeset/tidy-swans-clap.md new file mode 100644 index 00000000..77c34e60 --- /dev/null +++ b/.changeset/tidy-swans-clap.md @@ -0,0 +1,5 @@ +--- +'@xyflow/system': patch +--- + +fix(onlyRenderVisible) edges to offscreen nodes with fixed width & height displayed correctly diff --git a/packages/system/src/utils/graph.ts b/packages/system/src/utils/graph.ts index 62c3d9da..207799bc 100644 --- a/packages/system/src/utils/graph.ts +++ b/packages/system/src/utils/graph.ts @@ -191,21 +191,22 @@ export const getNodesInside = ( const visibleNodes: InternalNodeBase[] = []; - for (const [, node] of nodes) { + for (const node of nodes.values()) { const { measured, selectable = true, hidden = false } = node; - const width = measured.width ?? node.width ?? node.initialWidth ?? null; - const height = measured.height ?? node.height ?? node.initialHeight ?? null; if ((excludeNonSelectableNodes && !selectable) || hidden) { continue; } + const width = measured.width ?? node.width ?? node.initialWidth ?? null; + const height = measured.height ?? node.height ?? node.initialHeight ?? null; + const overlappingArea = getOverlappingArea(paneRect, nodeToRect(node)); - const notInitialized = width === null || height === null; + const area = (width ?? 0) * (height ?? 0); const partiallyVisible = partially && overlappingArea > 0; - const area = (width ?? 0) * (height ?? 0); - const isVisible = notInitialized || partiallyVisible || overlappingArea >= area; + const forceInitialRender = !node.internals.handleBounds; + const isVisible = forceInitialRender || partiallyVisible || overlappingArea >= area; if (isVisible || node.dragging) { visibleNodes.push(node);