streamline initialized

packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { EdgeWrapper } from '$lib/components/EdgeWrapper';
-  import { CallOnMount } from '$lib/components/CallOnMount';
   import { MarkerDefinition } from '$lib/container/EdgeRenderer/MarkerDefinition';
   import type { EdgeEvents } from '$lib/types';
   import type { SvelteFlowStore } from '$lib/store/types';
@@ -29,16 +28,4 @@
       {onedgepointerleave}
     />
   {/each}
-
-  {#if !store.edgesInitialized && store.visible.edges.size > 0}
-    <CallOnMount
-      onMount={() => {
-        store.edgesInitialized = true;
-      }}
-      onDestroy={() => {
-        // TODO: this needs to be handled differently
-        // store.edgesInitialized = false;
-      }}
-    />
-  {/if}
 </div>

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

@@ -32,6 +32,7 @@
     onMoveStart,
     onMoveEnd,
     onMove,
+    oninit,
     onnodeclick,
     onnodecontextmenu,
     onnodedrag,
@@ -162,6 +163,7 @@
     {panOnScroll}
     {panOnDrag}
     {paneClickDistance}
+    {oninit}
   >
     <Pane {store} {onpaneclick} {onpanecontextmenu} {panOnDrag} {selectionOnDrag}>
       <ViewportComponent {store}>

packages/svelte/src/lib/container/Zoom/Zoom.svelte

@@ -17,6 +17,7 @@
     panOnDrag = true,
     panOnScroll = false,
     paneClickDistance = 1,
+    oninit,
     children
   }: ZoomProps = $props();
 
@@ -25,6 +26,14 @@
 
   // We extract the initial value by destructuring
   const { viewport: initialViewport } = store;
+
+  let onInitCalled = false;
+  $effect(() => {
+    if (!onInitCalled && store.viewportInitialized) {
+      oninit?.();
+      onInitCalled = true;
+    }
+  });
 </script>
 
 <div

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

@@ -16,4 +16,5 @@ export type ZoomProps = {
   panOnDrag: boolean | number[];
   paneClickDistance: number;
   children: Snippet;
+  oninit?: () => void;
 };