feat(svelte): add onlyRenderVisibleElements option

packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte

@@ -5,8 +5,13 @@
   import { NodeWrapper } from '$lib/components/NodeWrapper';
   import { useStore } from '$lib/store';
 
-  const { nodes, nodesDraggable, nodesConnectable, elementsSelectable, updateNodeDimensions } =
-    useStore();
+  const {
+    visibleNodes,
+    nodesDraggable,
+    nodesConnectable,
+    elementsSelectable,
+    updateNodeDimensions
+  } = useStore();
 
   const resizeObserver: ResizeObserver | null =
     typeof ResizeObserver === 'undefined'
@@ -26,7 +31,7 @@
 </script>
 
 <div class="svelte-flow__nodes">
-  {#each $nodes as node (node.id)}
+  {#each $visibleNodes as node (node.id)}
     {@const posOrigin = getPositionWithOrigin({
       x: node.positionAbsolute?.x ?? 0,
       y: node.positionAbsolute?.y ?? 0,

packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte

@@ -42,6 +42,7 @@
   export let onMoveEnd: $$Props['onMoveEnd'] = undefined;
   export let isValidConnection: $$Props['isValidConnection'] = undefined;
   export let translateExtent: $$Props['translateExtent'] = undefined;
+  export let onlyRenderVisibleElements: $$Props['onlyRenderVisibleElements'] = undefined;
   export let panOnScrollMode: PanOnScrollMode = PanOnScrollMode.Free;
   export let preventScrolling: boolean = true;
   export let zoomOnScroll: boolean = true;
@@ -99,6 +100,7 @@
       nodesDraggable,
       nodesConnectable,
       elementsSelectable,
+      onlyRenderVisibleElements,
       isValidConnection
     };
 

packages/svelte/src/lib/container/SvelteFlow/types.ts

@@ -46,6 +46,7 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
   zoomOnPinch?: boolean;
   panOnScroll?: boolean;
   panOnDrag?: boolean | number[];
+  onlyRenderVisibleElements?: boolean;
 
   class?: string;
   style?: string;

packages/svelte/src/lib/container/SvelteFlow/utils.ts

@@ -57,6 +57,7 @@ export type UpdatableStoreProps = {
   nodesDraggable?: UnwrapWritable<SvelteFlowStore['nodesDraggable']>;
   nodesConnectable?: UnwrapWritable<SvelteFlowStore['nodesConnectable']>;
   elementsSelectable?: UnwrapWritable<SvelteFlowStore['elementsSelectable']>;
+  onlyRenderVisibleElements?: UnwrapWritable<SvelteFlowStore['onlyRenderVisibleElements']>;
   isValidConnection?: UnwrapWritable<SvelteFlowStore['isValidConnection']>;
 };