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

feat(react/svelte): controlled viewport (#3461)

Browse Source 
* feat(react): controlled viewport

* refactor(react): cleanup viewport

* feat(svelte): two way data binding for viewport, cleanup transform <> viewport stuff

* refactor(svelte): viewport stuff
This commit is contained in:
Moritz Klack
2023-09-28 16:19:03 +02:00
committed by GitHub
parent 2215b68438
commit ae33cba887
35 changed files with 351 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/svelte/src/lib/store/visible-nodes.ts
+4 -3
View File
@@ -1,13 +1,14 @@
import { derived } from 'svelte/store';
import { getNodesInside } from '@xyflow/system';
import { getNodesInside, type Transform } from '@xyflow/system';
import type { Node } from '$lib/types';
import type { SvelteFlowStoreState } from './types';
export function getVisibleNodes(store: SvelteFlowStoreState) {
return derived(
[store.nodes, store.onlyRenderVisibleElements, store.width, store.height, store.transform],
([nodes, onlyRenderVisibleElements, width, height, transform]) => {
[store.nodes, store.onlyRenderVisibleElements, store.width, store.height, store.viewport],
([nodes, onlyRenderVisibleElements, width, height, viewport]) => {
const transform: Transform = [viewport.x, viewport.y, viewport.zoom];
return onlyRenderVisibleElements
? getNodesInside<Node>(nodes, { x: 0, y: 0, width, height }, transform, true)
: nodes;