From 1fb668d93651b1c2cd9152bf4b1d71ec69aa4179 Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Thu, 18 Jan 2024 12:14:12 +0100
Subject: [PATCH] Added onInit and useInitialized hooks

---
 .../components/CallOnMount/CallOnMount.svelte | 14 +++++++++
 .../src/lib/components/CallOnMount/index.ts   |  1 +
 .../EdgeRenderer/EdgeRenderer.svelte          | 14 ++++++++-
 .../container/SvelteFlow/SvelteFlow.svelte    | 11 +++++++
 .../src/lib/container/SvelteFlow/types.ts     |  2 ++
 .../svelte/src/lib/container/Zoom/Zoom.svelte |  8 ++++-
 .../svelte/src/lib/hooks/useInitialized.ts    | 28 +++++++++++++++++
 packages/svelte/src/lib/index.ts              |  1 +
 packages/svelte/src/lib/store/index.ts        | 31 +++++++++++++++++++
 .../svelte/src/lib/store/initial-store.ts     |  6 +++-
 10 files changed, 113 insertions(+), 3 deletions(-)
 create mode 100644 packages/svelte/src/lib/components/CallOnMount/CallOnMount.svelte
 create mode 100644 packages/svelte/src/lib/components/CallOnMount/index.ts
 create mode 100644 packages/svelte/src/lib/hooks/useInitialized.ts

diff --git a/packages/svelte/src/lib/components/CallOnMount/CallOnMount.svelte b/packages/svelte/src/lib/components/CallOnMount/CallOnMount.svelte
new file mode 100644
index 00000000..4184da6f
--- /dev/null
+++ b/packages/svelte/src/lib/components/CallOnMount/CallOnMount.svelte
@@ -0,0 +1,14 @@
+<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>
diff --git a/packages/svelte/src/lib/components/CallOnMount/index.ts b/packages/svelte/src/lib/components/CallOnMount/index.ts
new file mode 100644
index 00000000..3dee0d92
--- /dev/null
+++ b/packages/svelte/src/lib/components/CallOnMount/index.ts
@@ -0,0 +1 @@
+export { default as CallOnMount } from './CallOnMount.svelte';
diff --git a/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte b/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte
index 663b72ea..420259c3 100644
--- a/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte
+++ b/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import { EdgeWrapper } from '$lib/components/EdgeWrapper';
+  import { CallOnMount } from '$lib/components/CallOnMount';
   import { MarkerDefinition } from '$lib/container/EdgeRenderer/MarkerDefinition';
   import { useStore } from '$lib/store';
   import type { DefaultEdgeOptions } from '$lib/types';
@@ -10,6 +11,7 @@
   const {
     elementsSelectable,
     visibleEdges,
+    edgesInitialized,
     edges: { setDefaultOptions }
   } = useStore();
 
@@ -29,7 +31,6 @@
       edge.selectable ||
       ($elementsSelectable && typeof edge.selectable === 'undefined')
     )}
-
     <EdgeWrapper
       id={edge.id}
       source={edge.source}
@@ -61,4 +62,15 @@
       on:edgecontextmenu
     />
   {/each}
+
+  {#if $visibleEdges.length > 0}
+    <CallOnMount
+      onMount={() => {
+        $edgesInitialized = true;
+      }}
+      onDestroy={() => {
+        $edgesInitialized = false;
+      }}
+    />
+  {/if}
 </div>
diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
index 2d2df3a6..7f3baf36 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
@@ -77,6 +77,7 @@
   export let onconnectstart: $$Props['onconnectstart'] = undefined;
   export let onconnectend: $$Props['onconnectend'] = undefined;
   export let onbeforedelete: $$Props['onbeforedelete'] = undefined;
+  export let oninit: $$Props['oninit'] = undefined;
 
   export let defaultMarkerColor = '#b1b1b7';
 
@@ -130,6 +131,16 @@
     }
   }
 
+  // Call oninit once when flow is intialized
+  const { initialized } = store;
+  let onInitCalled = false;
+  $: {
+    if (!onInitCalled && $initialized) {
+      oninit?.();
+      onInitCalled = true;
+    }
+  }
+
   // this updates the store for simple changes
   // where the prop names equals the store name
   $: {
diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts
index c6b71671..aefa6f6e 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/types.ts
+++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts
@@ -333,4 +333,6 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
   onconnectstart?: OnConnectStart;
   /** When a user stops dragging a connection line, this event gets fired. */
   onconnectend?: OnConnectEnd;
+  /** This handler gets called when the flow is finished initializing */
+  oninit?: () => void;
 };
diff --git a/packages/svelte/src/lib/container/Zoom/Zoom.svelte b/packages/svelte/src/lib/container/Zoom/Zoom.svelte
index a00199a1..459e73b5 100644
--- a/packages/svelte/src/lib/container/Zoom/Zoom.svelte
+++ b/packages/svelte/src/lib/container/Zoom/Zoom.svelte
@@ -4,6 +4,7 @@
   import { useStore } from '$lib/store';
   import zoom from '$lib/actions/zoom';
   import type { ZoomProps } from './types';
+  import { onMount } from 'svelte';
 
   type $$Props = ZoomProps;
 
@@ -29,12 +30,17 @@
     translateExtent,
     lib,
     panActivationKeyPressed,
-    zoomActivationKeyPressed
+    zoomActivationKeyPressed,
+    viewportInitialized
   } = useStore();
 
   $: viewPort = initialViewport || { x: 0, y: 0, zoom: 1 };
   $: _panOnDrag = $panActivationKeyPressed || panOnDrag;
   $: _panOnScroll = $panActivationKeyPressed || panOnScroll;
+
+  onMount(() => {
+    $viewportInitialized = true;
+  });
 </script>
 
 <div
diff --git a/packages/svelte/src/lib/hooks/useInitialized.ts b/packages/svelte/src/lib/hooks/useInitialized.ts
new file mode 100644
index 00000000..93e6921b
--- /dev/null
+++ b/packages/svelte/src/lib/hooks/useInitialized.ts
@@ -0,0 +1,28 @@
+import { useStore } from '$lib/store';
+
+/**
+ * Hook for seeing if nodes are initialized
+ * @returns - nodesInitialized Writable
+ */
+export function useNodesInitialized() {
+  const { nodesInitialized } = useStore();
+  return nodesInitialized;
+}
+
+/**
+ * Hook for seeing if edges are initialized
+ * @returns - edgesInitialized Writable
+ */
+export function useEdgesInitialized() {
+  const { edgesInitialized } = useStore();
+  return edgesInitialized;
+}
+
+/**
+ * Hook for seeing if the flow is initialized
+ * @returns - initialized Writable
+ */
+export function useInitialized() {
+  const { initialized } = useStore();
+  return initialized;
+}
diff --git a/packages/svelte/src/lib/index.ts b/packages/svelte/src/lib/index.ts
index 4c3737ea..c88059b7 100644
--- a/packages/svelte/src/lib/index.ts
+++ b/packages/svelte/src/lib/index.ts
@@ -31,6 +31,7 @@ export * from '$lib/hooks/useConnection';
 export * from '$lib/hooks/useNodesEdges';
 export * from '$lib/hooks/useHandleConnections';
 export * from '$lib/hooks/useNodesData';
+export * from '$lib/hooks/useInitialized';
 
 // types
 export type {
diff --git a/packages/svelte/src/lib/store/index.ts b/packages/svelte/src/lib/store/index.ts
index 18941bc6..52665614 100644
--- a/packages/svelte/src/lib/store/index.ts
+++ b/packages/svelte/src/lib/store/index.ts
@@ -112,6 +112,10 @@ export function createStore({
     }
 
     store.nodes.set(nextNodes);
+
+    if (!get(store.nodesInitialized)) {
+      store.nodesInitialized.set(true);
+    }
   }
 
   function fitView(nodes: Node[], options?: FitViewOptions) {
@@ -354,6 +358,33 @@ export function createStore({
       [store.edges, store.defaultMarkerColor, store.flowId],
       ([edges, defaultColor, id]) => createMarkerIds(edges, { defaultColor, id })
     ),
+    initialized: (() => {
+      console.log('This closure gets called');
+      let initialized = false;
+      const initialNodesLength = get(store.nodes).length;
+      const initialEdgesLength = get(store.edges).length;
+      return derived(
+        [store.nodesInitialized, store.edgesInitialized, store.viewportInitialized],
+        ([nodesInitialized, edgesInitialized, viewportInitialized]) => {
+          console.log('Get the derived store even called?');
+          // If it was already initialized once return true from then on
+          if (initialized) return initialized;
+
+          // if it hasn't been initialised check if is now
+          if (initialNodesLength === 0) {
+            initialized = viewportInitialized;
+            return initialized;
+          }
+          if (initialEdgesLength === 0) {
+            initialized = viewportInitialized && nodesInitialized;
+            return initialized;
+          }
+
+          initialized = viewportInitialized && nodesInitialized && edgesInitialized;
+          return initialized;
+        }
+      );
+    })(),
 
     // actions
     syncNodeStores: (nodes) => syncNodeStores(store.nodes, nodes),
diff --git a/packages/svelte/src/lib/store/initial-store.ts b/packages/svelte/src/lib/store/initial-store.ts
index 26c57c86..85d5e84b 100644
--- a/packages/svelte/src/lib/store/initial-store.ts
+++ b/packages/svelte/src/lib/store/initial-store.ts
@@ -152,6 +152,10 @@ export const getInitialStore = ({
     onconnect: writable<OnConnect>(undefined),
     onconnectstart: writable<OnConnectStart>(undefined),
     onconnectend: writable<OnConnectEnd>(undefined),
-    onbeforedelete: writable<OnBeforeDelete>(undefined)
+    onbeforedelete: writable<OnBeforeDelete>(undefined),
+    nodesInitialized: writable<boolean>(false),
+    edgesInitialized: writable<boolean>(false),
+    viewportInitialized: writable<boolean>(false),
+    initialized: readable<boolean>(false)
   };
 };