feat(svelte): add onlyRenderVisibleElements option

packages/svelte/src/lib/store/index.ts

@@ -29,6 +29,7 @@ import {
 import type { SvelteFlowStore } from './types';
 import { syncNodeStores, syncEdgeStores } from './utils';
 import { getEdgeTree } from './edge-tree';
+import { getVisibleNodes } from './visible-nodes';
 
 export const key = Symbol();
 
@@ -343,6 +344,7 @@ export function createStore(): SvelteFlowStore {
     // derived state
     edgeTree: getEdgeTree(store, onError),
     connectionPath: getConnectionPath(store),
+    visibleNodes: getVisibleNodes(store),
     markers: derived(
       [store.edges, store.defaultMarkerColor, store.flowId],
       ([edges, defaultColor, id]) => createMarkerIds(edges, { defaultColor, id })

packages/svelte/src/lib/store/initial-store.ts

@@ -21,7 +21,7 @@ import BezierEdge from '$lib/components/edges/BezierEdge.svelte';
 import StraightEdge from '$lib/components/edges/StraightEdge.svelte';
 import SmoothStepEdge from '$lib/components/edges/SmoothStepEdge.svelte';
 import StepEdge from '$lib/components/edges/StepEdge.svelte';
-import type { ConnectionData, NodeTypes, EdgeTypes, EdgeLayouted } from '$lib/types';
+import type { ConnectionData, NodeTypes, EdgeTypes, EdgeLayouted, Node } from '$lib/types';
 import { createNodes, createEdges } from './utils';
 
 export const initConnectionData = {
@@ -47,6 +47,7 @@ export const initialEdgeTypes = {
 export const getInitialStore = () => ({
   flowId: writable<string | null>(null),
   nodes: createNodes([]),
+  visibleNodes: readable<Node[]>([]),
   edges: createEdges([]),
   edgeTree: readable<GroupedEdges<EdgeLayouted>[]>([]),
   height: writable<number>(500),

packages/svelte/src/lib/store/visible-nodes.ts

@@ -0,0 +1,16 @@
+import { derived } from 'svelte/store';
+import { getNodesInside } 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]) => {
+      return onlyRenderVisibleElements
+        ? getNodesInside<Node>(nodes, { x: 0, y: 0, width, height }, transform, true)
+        : nodes;
+    }
+  );
+}