diff --git a/examples/astro-xyflow/package.json b/examples/astro-xyflow/package.json index 313afc4b..4b952906 100644 --- a/examples/astro-xyflow/package.json +++ b/examples/astro-xyflow/package.json @@ -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" } } diff --git a/examples/astro-xyflow/src/components/ReactFlowExample/index.tsx b/examples/astro-xyflow/src/components/ReactFlowExample/index.tsx index 863458fb..c2957812 100644 --- a/examples/astro-xyflow/src/components/ReactFlowExample/index.tsx +++ b/examples/astro-xyflow/src/components/ReactFlowExample/index.tsx @@ -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 > diff --git a/examples/astro-xyflow/src/components/SvelteFlowExample/index.svelte b/examples/astro-xyflow/src/components/SvelteFlowExample/index.svelte index ff7e98c1..1b086c1f 100644 --- a/examples/astro-xyflow/src/components/SvelteFlowExample/index.svelte +++ b/examples/astro-xyflow/src/components/SvelteFlowExample/index.svelte @@ -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 @@
- + diff --git a/packages/react/src/store/initialState.ts b/packages/react/src/store/initialState.ts index bfc9baaa..3e561ce9 100644 --- a/packages/react/src/store/initialState.ts +++ b/packages/react/src/store/initialState.ts @@ -79,8 +79,8 @@ const getInitialState = ({ return { rfId: '1', - width: 0, - height: 0, + width: width ?? 0, + height: height ?? 0, transform, nodes: storeNodes, nodesInitialized, diff --git a/packages/system/src/utils/store.ts b/packages/system/src/utils/store.ts index 1bfd029d..642544ca 100644 --- a/packages/system/src/utils/store.ts +++ b/packages/system/src/utils/store.ts @@ -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( } } +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 = { nodeOrigin?: NodeOrigin; nodeExtent?: CoordinateExtent; @@ -109,13 +140,15 @@ export function adoptUserNodes( ..._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, }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 41555ca1..0fed4399 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -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