streamline initialized

packages/svelte/src/lib/components/CallOnMount/CallOnMount.svelte

@@ -1,14 +0,0 @@
-<script lang="ts">
-  import { onMount } from 'svelte';
-
-  let _onMount: (() => void) | undefined = undefined;
-  export { _onMount as onMount };
-
-  let _onDestroy: (() => void) | undefined = undefined;
-  export { _onDestroy as onDestroy };
-
-  onMount(() => {
-    _onMount?.();
-    return _onDestroy;
-  });
-</script>

packages/svelte/src/lib/components/CallOnMount/index.ts

@@ -1 +0,0 @@
-export { default as CallOnMount } from './CallOnMount.svelte';

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;
 };

packages/svelte/src/lib/hooks/useInitialized.svelte.ts

@@ -14,14 +14,14 @@ export function useNodesInitialized() {
 }
 
 /**
- * Hook for seeing if the flow is initialized
- * @returns - reactive initialized
+ * Hook for seeing if the viewport is initialized
+ * @returns - reactive viewportInitialized
  */
-export function useInitialized() {
-  const { initialized } = $derived(useStore());
+export function useViewportInitialized() {
+  const { viewportInitialized } = $derived(useStore());
   return {
     get current() {
-      return initialized;
+      return viewportInitialized;
     }
   };
 }

packages/svelte/src/lib/index.ts

@@ -38,7 +38,7 @@ export * from '$lib/hooks/useNodesEdgesViewport.svelte';
 export * from '$lib/hooks/useNodeConnections.svelte';
 export * from '$lib/hooks/useNodesData.svelte';
 export * from '$lib/hooks/useInternalNode.svelte';
-export { useInitialized, useNodesInitialized } from '$lib/hooks/useInitialized.svelte';
+export * from '$lib/hooks/useInitialized.svelte';
 
 // types
 export type {

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

@@ -108,26 +108,8 @@ export const getInitialStore = (signals: StoreSignals) => {
 
       return nodesInitialized;
     });
-    edgesInitialized: boolean = $state(false);
     viewportInitialized: boolean = $derived(this.panZoom !== null);
 
-    // TODO: Figure out initialized
-    _initialNodesLength: number = signals.nodes?.length ?? 0;
-    _initialEdgesLength: number = signals.edges?.length ?? 0;
-    initialized: boolean = $derived.by(() => {
-      let initialized = false;
-      // if it hasn't been initialised check if it's now
-      if (this._initialNodesLength === 0) {
-        initialized = this.viewportInitialized;
-      } else if (this._initialEdgesLength === 0) {
-        initialized = this.viewportInitialized && this.nodesInitialized;
-      } else {
-        initialized = this.viewportInitialized && this.nodesInitialized && this.edgesInitialized;
-      }
-
-      return initialized;
-    });
-
     _edges: Edge[] = $derived.by(() => {
       updateConnectionLookup(this.connectionLookup, this.edgeLookup, signals.edges);
       return signals.edges;