alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

skip force rendering nodes that have handles defined

Browse Source
This commit is contained in:
peterkogo
2025-09-08 16:48:02 +02:00
parent 2d871bd3e6
commit d329702df9
6 changed files with 117 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
examples/astro-xyflow/package.json
View File

@@ -17,9 +17,9 @@
"@types/react-dom": "^18.2.8",
"@xyflow/react": "workspace:^",
"@xyflow/svelte": "workspace:^",
"astro": "^5.9.2",
"astro": "^5.13.5",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"svelte": "^5.33.18"
"svelte": "^5.38.7"
}
}

5
examples/astro-xyflow/src/components/ReactFlowExample/index.tsx
View File

@@ -60,7 +60,7 @@ const initialNodes: Node[] = [
{
id: '3',
data: { label: 'Node 3' },
position: { x: 400, y: 100 },
position: { x: 900, y: 100 },
...nodeSize,
handles: [
{
@@ -110,9 +110,10 @@ function Flow() {
onEdgesChange={onEdgesChange}
onConnect={onConnect}
nodeTypes={nodeTypes}
fitView
// fitView
width={700}
height={400}
onlyRenderVisibleElements
>
<Background />
<Controls />

4
examples/astro-xyflow/src/components/SvelteFlowExample/index.svelte
View File

@@ -54,7 +54,7 @@
},
{
id: 'C',
position: { x: 250, y: 300 },
position: { x: 950, y: 300 },
data: { label: 'C' },
sourcePosition: Position.Right,
targetPosition: Position.Left,
@@ -79,7 +79,7 @@
</script>
<div style="height: 400px; width: 700px;">
<SvelteFlow bind:nodes bind:edges fitView {defaultEdgeOptions} width={700} height={400}>
<SvelteFlow bind:nodes bind:edges onlyRenderVisibleElements {defaultEdgeOptions} width={700} height={400}>
<Controls />
<Background variant={BackgroundVariant.Dots} />
<ViewportPortal target="front">

4
packages/react/src/store/initialState.ts
View File

@@ -79,8 +79,8 @@ const getInitialState = ({
return {
rfId: '1',
width: 0,
height: 0,
width: width ?? 0,
height: height ?? 0,
transform,
nodes: storeNodes,
nodesInitialized,

41
packages/system/src/utils/store.ts
View File

@@ -1,4 +1,4 @@
import { HandleConnection, infiniteExtent } from '..';
import { Handle, HandleConnection, infiniteExtent, NodeHandle, NodeHandleBounds } from '..';
import {
NodeBase,
CoordinateExtent,
@@ -72,6 +72,37 @@ export function updateAbsolutePositions<NodeType extends NodeBase>(
}
}
function parseHandles(nodeId: string, handles?: NodeHandle[]): NodeHandleBounds | null {
if (!handles) {
return null;
}
const source: Handle[] = [];
const target: Handle[] = [];
for (const handle of handles) {
const handleBounds = {
width: handle.width ?? 1,
height: handle.height ?? 1,
nodeId: nodeId,
x: handle.x,
y: handle.y,
position: handle.position,
type: handle.type,
};
if (handle.type === 'source') {
source.push(handleBounds);
} else if (handle.type === 'target') {
target.push(handleBounds);
}
}
return {
source,
target,
};
}
type UpdateNodesOptions<NodeType extends NodeBase> = {
nodeOrigin?: NodeOrigin;
nodeExtent?: CoordinateExtent;
@@ -109,13 +140,15 @@ export function adoptUserNodes<NodeType extends NodeBase>(
..._options.defaults,
...userNode,
measured: {
width: userNode.measured?.width,
height: userNode.measured?.height,
width: userNode.width ?? userNode.measured?.width,
height: userNode.height ?? userNode.measured?.height,
},
internals: {
positionAbsolute: clampedPosition,
// if user re-initializes the node or removes `measured` for whatever reason, we reset the handleBounds so that the node gets re-measured
handleBounds: !userNode.measured ? undefined : internalNode?.internals.handleBounds,
handleBounds:
parseHandles(userNode.id, userNode.handles) ??
(!userNode.measured ? undefined : internalNode?.internals.handleBounds),
z: calculateZ(userNode, selectedNodeZ),
userNode,
},

126
pnpm-lock.yaml generated
View File

@@ -52,7 +52,7 @@ importers:
version: 4.3.0(@types/node@20.14.6)(@types/react-dom@18.2.8)(@types/react@18.2.24)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(terser@5.31.0)
'@astrojs/svelte':
specifier: ^7.1.0
version: 7.1.0(@types/node@20.14.6)(astro@5.9.2(@types/node@20.14.6)(rollup@4.39.0)(terser@5.31.0)(typescript@5.8.3))(svelte@5.33.18)(terser@5.31.0)(typescript@5.8.3)
version: 7.1.0(@types/node@20.14.6)(astro@5.13.5(@types/node@20.14.6)(rollup@4.39.0)(terser@5.31.0)(typescript@5.8.3))(svelte@5.38.7)(terser@5.31.0)(typescript@5.8.3)
'@types/react':
specifier: ^18.2.24
version: 18.2.24
@@ -66,8 +66,8 @@ importers:
specifier: workspace:^
version: link:../../packages/svelte
astro:
specifier: ^5.9.2
version: 5.9.2(@types/node@20.14.6)(rollup@4.39.0)(terser@5.31.0)(typescript@5.8.3)
specifier: ^5.13.5
version: 5.13.5(@types/node@20.14.6)(rollup@4.39.0)(terser@5.31.0)(typescript@5.8.3)
react:
specifier: ^18.2.0
version: 18.2.0
@@ -75,8 +75,8 @@ importers:
specifier: ^18.2.0
version: 18.2.0(react@18.2.0)
svelte:
specifier: ^5.33.18
version: 5.33.18
specifier: ^5.38.7
version: 5.38.7
examples/react:
dependencies:
@@ -508,11 +508,11 @@ packages:
'@astrojs/compiler@2.12.2':
resolution: {integrity: sha512-w2zfvhjNCkNMmMMOn5b0J8+OmUaBL1o40ipMvqcG6NRpdC+lKxmTi48DT8Xw0SzJ3AfmeFLB45zXZXtmbsjcgw==}
'@astrojs/internal-helpers@0.6.1':
resolution: {integrity: sha512-l5Pqf6uZu31aG+3Lv8nl/3s4DbUzdlxTWDof4pEpto6GUJNhhCbelVi9dEyurOVyqaelwmS9oSyOWOENSfgo9A==}
'@astrojs/internal-helpers@0.7.2':
resolution: {integrity: sha512-KCkCqR3Goym79soqEtbtLzJfqhTWMyVaizUi35FLzgGSzBotSw8DB1qwsu7U96ihOJgYhDk2nVPz+3LnXPeX6g==}
'@astrojs/markdown-remark@6.3.2':
resolution: {integrity: sha512-bO35JbWpVvyKRl7cmSJD822e8YA8ThR/YbUsciWNA7yTcqpIAL2hJDToWP5KcZBWxGT6IOdOkHSXARSNZc4l/Q==}
'@astrojs/markdown-remark@6.3.6':
resolution: {integrity: sha512-bwylYktCTsLMVoCOEHbn2GSUA3c5KT/qilekBKA3CBng0bo1TYjNZPr761vxumRk9kJGqTOtU+fgCAp5Vwokug==}
'@astrojs/prism@3.3.0':
resolution: {integrity: sha512-q8VwfU/fDZNoDOf+r7jUnMC2//H2l0TuQ6FkGJL8vD8nw/q5KiL3DS1KKBI3QhI9UQhpJ5dc7AtqfbXWuOgLCQ==}
@@ -1441,6 +1441,9 @@ packages:
resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==}
engines: {node: '>=6.0.0'}
'@jridgewell/remapping@2.3.5':
resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
'@jridgewell/resolve-uri@3.1.1':
resolution: {integrity: sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==}
engines: {node: '>=6.0.0'}
@@ -2319,8 +2322,8 @@ packages:
resolution: {integrity: sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==}
engines: {node: '>=8'}
astro@5.9.2:
resolution: {integrity: sha512-K/zZlQOWMpamfLDOls5jvG7lrsjH1gkk3ESRZyZDCkVBtKHMF4LbjwCicm/iBb3mX3V/PerqRYzLbOy3/4JLCQ==}
astro@5.13.5:
resolution: {integrity: sha512-XmBzkl13XU97+n/QiOM5uXQdAVe0yKt5gO+Wlgc8dHRwHR499qhMQ5sMFckLJweUINLzcNGjP3F5nG4wV8a2XA==}
engines: {node: 18.20.8 || ^20.3.0 || >=22.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0'}
hasBin: true
@@ -3274,6 +3277,9 @@ packages:
esrap@1.4.9:
resolution: {integrity: sha512-3OMlcd0a03UGuZpPeUC1HxR3nA23l+HEyCiZw3b3FumJIN9KphoGzDJKMXI1S72jVS1dsenDyQC0kJlO1U9E1g==}
esrap@2.1.0:
resolution: {integrity: sha512-yzmPNpl7TBbMRC5Lj2JlJZNPml0tzqoqP5B1JXycNUwtqma9AKCO0M2wHrdgsHcy1WRW7S9rJknAMtByg3usgA==}
esrecurse@4.3.0:
resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
engines: {node: '>=4.0'}
@@ -5959,14 +5965,14 @@ packages:
resolution: {integrity: sha512-Uai13Ydt1ZE+bUHme6b9U38PCYVNCqBRoBMkUKbFbKiD7kHWjdUUrklYAQZJxyKK81qII4mrBwe/YmvEMSlC9w==}
engines: {node: '>=18'}
svelte@5.33.18:
resolution: {integrity: sha512-GVAhi8vi8pGne/wlEdnfWIJvSR9eKvEknxjfL5Sr8gQALiyk8Ey+H0lhUYLpjW+MrqgH9h4dgh2NF6/BTFprRg==}
engines: {node: '>=18'}
svelte@5.33.19:
resolution: {integrity: sha512-udmgc1nnGeAgnfVJjOMfSOAqPAKv8N65MWN2kDuxo6BZthTaUcsLh4vP8bdZC0bMXLGn69smSZXgQOeuZBOn4Q==}
engines: {node: '>=18'}
svelte@5.38.7:
resolution: {integrity: sha512-1ld9TPZSdUS3EtYGQzisU2nhwXoIzNQcZ71IOU9fEmltaUofQnVfW5CQuhgM/zFsZ43arZXS1BRKi0MYgUV91w==}
engines: {node: '>=18'}
svgo@3.0.2:
resolution: {integrity: sha512-Z706C1U2pb1+JGP48fbazf3KxHrWOsLme6Rv7imFBn5EnuanDW1GPaA/P1/dvObE670JDePC3mnj0k0B7P0jjQ==}
engines: {node: '>=14.0.0'}
@@ -6713,11 +6719,11 @@ snapshots:
'@astrojs/compiler@2.12.2': {}
'@astrojs/internal-helpers@0.6.1': {}
'@astrojs/internal-helpers@0.7.2': {}
'@astrojs/markdown-remark@6.3.2':
'@astrojs/markdown-remark@6.3.6':
dependencies:
'@astrojs/internal-helpers': 0.6.1
'@astrojs/internal-helpers': 0.7.2
'@astrojs/prism': 3.3.0
github-slugger: 2.0.0
hast-util-from-html: 2.0.3
@@ -6768,12 +6774,12 @@ snapshots:
- tsx
- yaml
'@astrojs/svelte@7.1.0(@types/node@20.14.6)(astro@5.9.2(@types/node@20.14.6)(rollup@4.39.0)(terser@5.31.0)(typescript@5.8.3))(svelte@5.33.18)(terser@5.31.0)(typescript@5.8.3)':
'@astrojs/svelte@7.1.0(@types/node@20.14.6)(astro@5.13.5(@types/node@20.14.6)(rollup@4.39.0)(terser@5.31.0)(typescript@5.8.3))(svelte@5.38.7)(terser@5.31.0)(typescript@5.8.3)':
dependencies:
'@sveltejs/vite-plugin-svelte': 5.0.3(svelte@5.33.18)(vite@6.3.5(@types/node@20.14.6)(terser@5.31.0))
astro: 5.9.2(@types/node@20.14.6)(rollup@4.39.0)(terser@5.31.0)(typescript@5.8.3)
svelte: 5.33.18
svelte2tsx: 0.7.39(svelte@5.33.18)(typescript@5.8.3)
'@sveltejs/vite-plugin-svelte': 5.0.3(svelte@5.38.7)(vite@6.3.5(@types/node@20.14.6)(terser@5.31.0))
astro: 5.13.5(@types/node@20.14.6)(rollup@4.39.0)(terser@5.31.0)(typescript@5.8.3)
svelte: 5.38.7
svelte2tsx: 0.7.39(svelte@5.38.7)(typescript@5.8.3)
typescript: 5.8.3
vite: 6.3.5(@types/node@20.14.6)(terser@5.31.0)
transitivePeerDependencies:
@@ -6793,7 +6799,7 @@ snapshots:
'@astrojs/telemetry@3.3.0':
dependencies:
ci-info: 4.2.0
debug: 4.4.0
debug: 4.4.1
dlv: 1.1.3
dset: 3.1.4
is-docker: 3.0.0
@@ -7803,6 +7809,11 @@ snapshots:
'@jridgewell/sourcemap-codec': 1.5.0
'@jridgewell/trace-mapping': 0.3.25
'@jridgewell/remapping@2.3.5':
dependencies:
'@jridgewell/gen-mapping': 0.3.5
'@jridgewell/trace-mapping': 0.3.25
'@jridgewell/resolve-uri@3.1.1': {}
'@jridgewell/resolve-uri@3.1.2': {}
@@ -8211,11 +8222,11 @@ snapshots:
transitivePeerDependencies:
- supports-color
'@sveltejs/vite-plugin-svelte-inspector@4.0.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.33.18)(vite@6.3.5(@types/node@20.14.6)(terser@5.31.0)))(svelte@5.33.18)(vite@6.3.5(@types/node@20.14.6)(terser@5.31.0))':
'@sveltejs/vite-plugin-svelte-inspector@4.0.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.38.7)(vite@6.3.5(@types/node@20.14.6)(terser@5.31.0)))(svelte@5.38.7)(vite@6.3.5(@types/node@20.14.6)(terser@5.31.0))':
dependencies:
'@sveltejs/vite-plugin-svelte': 5.0.3(svelte@5.33.18)(vite@6.3.5(@types/node@20.14.6)(terser@5.31.0))
'@sveltejs/vite-plugin-svelte': 5.0.3(svelte@5.38.7)(vite@6.3.5(@types/node@20.14.6)(terser@5.31.0))
debug: 4.4.0
svelte: 5.33.18
svelte: 5.38.7
vite: 6.3.5(@types/node@20.14.6)(terser@5.31.0)
transitivePeerDependencies:
- supports-color
@@ -8242,14 +8253,14 @@ snapshots:
transitivePeerDependencies:
- supports-color
'@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.33.18)(vite@6.3.5(@types/node@20.14.6)(terser@5.31.0))':
'@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.38.7)(vite@6.3.5(@types/node@20.14.6)(terser@5.31.0))':
dependencies:
'@sveltejs/vite-plugin-svelte-inspector': 4.0.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.33.18)(vite@6.3.5(@types/node@20.14.6)(terser@5.31.0)))(svelte@5.33.18)(vite@6.3.5(@types/node@20.14.6)(terser@5.31.0))
'@sveltejs/vite-plugin-svelte-inspector': 4.0.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.38.7)(vite@6.3.5(@types/node@20.14.6)(terser@5.31.0)))(svelte@5.38.7)(vite@6.3.5(@types/node@20.14.6)(terser@5.31.0))
debug: 4.4.0
deepmerge: 4.3.1
kleur: 4.1.5
magic-string: 0.30.17
svelte: 5.33.18
svelte: 5.38.7
vite: 6.3.5(@types/node@20.14.6)(terser@5.31.0)
vitefu: 1.0.4(vite@6.3.5(@types/node@20.14.6)(terser@5.31.0))
transitivePeerDependencies:
@@ -8871,11 +8882,11 @@ snapshots:
astral-regex@2.0.0: {}
astro@5.9.2(@types/node@20.14.6)(rollup@4.39.0)(terser@5.31.0)(typescript@5.8.3):
astro@5.13.5(@types/node@20.14.6)(rollup@4.39.0)(terser@5.31.0)(typescript@5.8.3):
dependencies:
'@astrojs/compiler': 2.12.2
'@astrojs/internal-helpers': 0.6.1
'@astrojs/markdown-remark': 6.3.2
'@astrojs/internal-helpers': 0.7.2
'@astrojs/markdown-remark': 6.3.6
'@astrojs/telemetry': 3.3.0
'@capsizecss/unpack': 2.4.0
'@oslojs/encoding': 1.1.0
@@ -8889,7 +8900,7 @@ snapshots:
common-ancestor-path: 1.0.1
cookie: 1.0.2
cssesc: 3.0.0
debug: 4.4.0
debug: 4.4.1
deterministic-object-hash: 2.0.2
devalue: 5.1.1
diff: 5.2.0
@@ -8918,8 +8929,9 @@ snapshots:
rehype: 13.0.2
semver: 7.7.2
shiki: 3.6.0
smol-toml: 1.3.4
tinyexec: 0.3.2
tinyglobby: 0.2.12
tinyglobby: 0.2.14
tsconfck: 3.1.6(typescript@5.8.3)
ultrahtml: 1.6.0
unifont: 0.5.0
@@ -10254,6 +10266,10 @@ snapshots:
dependencies:
'@jridgewell/sourcemap-codec': 1.5.0
esrap@2.1.0:
dependencies:
'@jridgewell/sourcemap-codec': 1.5.0
esrecurse@4.3.0:
dependencies:
estraverse: 5.3.0
@@ -11617,7 +11633,7 @@ snapshots:
micromark@4.0.2:
dependencies:
'@types/debug': 4.1.10
debug: 4.4.0
debug: 4.4.1
decode-named-character-reference: 1.0.2
devlop: 1.1.0
micromark-core-commonmark: 2.0.3
@@ -13335,11 +13351,11 @@ snapshots:
svelte: 5.33.19
typescript: 5.8.3
svelte2tsx@0.7.39(svelte@5.33.18)(typescript@5.8.3):
svelte2tsx@0.7.39(svelte@5.38.7)(typescript@5.8.3):
dependencies:
dedent-js: 1.0.1
pascal-case: 3.1.2
svelte: 5.33.18
svelte: 5.38.7
typescript: 5.8.3
svelte@5.27.0:
@@ -13359,23 +13375,6 @@ snapshots:
magic-string: 0.30.17
zimmerframe: 1.1.2
svelte@5.33.18:
dependencies:
'@ampproject/remapping': 2.3.0
'@jridgewell/sourcemap-codec': 1.5.0
'@sveltejs/acorn-typescript': 1.0.5(acorn@8.14.0)
'@types/estree': 1.0.7
acorn: 8.14.0
aria-query: 5.3.2
axobject-query: 4.1.0
clsx: 2.1.1
esm-env: 1.2.2
esrap: 1.4.9
is-reference: 3.0.3
locate-character: 3.0.0
magic-string: 0.30.17
zimmerframe: 1.1.2
svelte@5.33.19:
dependencies:
'@ampproject/remapping': 2.3.0
@@ -13393,6 +13392,23 @@ snapshots:
magic-string: 0.30.17
zimmerframe: 1.1.2
svelte@5.38.7:
dependencies:
'@jridgewell/remapping': 2.3.5
'@jridgewell/sourcemap-codec': 1.5.0
'@sveltejs/acorn-typescript': 1.0.5(acorn@8.15.0)
'@types/estree': 1.0.7
acorn: 8.15.0
aria-query: 5.3.2
axobject-query: 4.1.0
clsx: 2.1.1
esm-env: 1.2.2
esrap: 2.1.0
is-reference: 3.0.3
locate-character: 3.0.0
magic-string: 0.30.17
zimmerframe: 1.1.2
svgo@3.0.2:
dependencies:
'@trysound/sax': 0.2.0