skip force rendering nodes that have handles defined

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
       >
         <Background />
         <Controls />

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 @@
 </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">