From 1fb668d93651b1c2cd9152bf4b1d71ec69aa4179 Mon Sep 17 00:00:00 2001 From: peterkogo Date: Thu, 18 Jan 2024 12:14:12 +0100 Subject: [PATCH 1/6] 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 @@ + 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 @@
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(undefined), onconnectstart: writable(undefined), onconnectend: writable(undefined), - onbeforedelete: writable(undefined) + onbeforedelete: writable(undefined), + nodesInitialized: writable(false), + edgesInitialized: writable(false), + viewportInitialized: writable(false), + initialized: readable(false) }; }; From a4145a33bd8daa7b13f43746aa2dba06abca8e28 Mon Sep 17 00:00:00 2001 From: peterkogo Date: Thu, 18 Jan 2024 12:28:01 +0100 Subject: [PATCH 2/6] Optimized useNodesInitialized selector --- packages/react/src/hooks/useNodesInitialized.ts | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/react/src/hooks/useNodesInitialized.ts b/packages/react/src/hooks/useNodesInitialized.ts index e70ba7cd..3a278f6c 100644 --- a/packages/react/src/hooks/useNodesInitialized.ts +++ b/packages/react/src/hooks/useNodesInitialized.ts @@ -12,9 +12,15 @@ const selector = (options: UseNodesInitializedOptions) => (s: ReactFlowState) => return false; } - return s.nodes - .filter((n) => (options.includeHiddenNodes ? true : !n.hidden)) - .every((n) => n[internalsSymbol]?.handleBounds !== undefined); + for (const node of s.nodes) { + if (options.includeHiddenNodes || !node.hidden) { + if (node[internalsSymbol]?.handleBounds === undefined) { + return false; + } + } + } + + return true; }; const defaultOptions = { From efbf2b35824cdf68f82d1d4332602cb9785f5368 Mon Sep 17 00:00:00 2001 From: peterkogo Date: Mon, 22 Jan 2024 16:34:01 +0100 Subject: [PATCH 3/6] useInitialized and useNodesInitialized now return a readable, useEdgesInitialized is not exported --- packages/svelte/src/lib/hooks/useInitialized.ts | 9 +++++++-- packages/svelte/src/lib/index.ts | 2 +- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/svelte/src/lib/hooks/useInitialized.ts b/packages/svelte/src/lib/hooks/useInitialized.ts index 93e6921b..09b0307c 100644 --- a/packages/svelte/src/lib/hooks/useInitialized.ts +++ b/packages/svelte/src/lib/hooks/useInitialized.ts @@ -1,4 +1,5 @@ import { useStore } from '$lib/store'; +import type { Readable } from 'svelte/store'; /** * Hook for seeing if nodes are initialized @@ -6,7 +7,9 @@ import { useStore } from '$lib/store'; */ export function useNodesInitialized() { const { nodesInitialized } = useStore(); - return nodesInitialized; + return { + subscribe: nodesInitialized.subscribe + } as Readable; } /** @@ -24,5 +27,7 @@ export function useEdgesInitialized() { */ export function useInitialized() { const { initialized } = useStore(); - return initialized; + return { + subscribe: initialized.subscribe + } as Readable; } diff --git a/packages/svelte/src/lib/index.ts b/packages/svelte/src/lib/index.ts index c88059b7..75f0092b 100644 --- a/packages/svelte/src/lib/index.ts +++ b/packages/svelte/src/lib/index.ts @@ -31,7 +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'; +export { useInitialized, useNodesInitialized } from '$lib/hooks/useInitialized'; // types export type { From 7348490e4c616c0ae1b20269f394599a7d99c4bf Mon Sep 17 00:00:00 2001 From: moklick Date: Tue, 23 Jan 2024 15:28:13 +0100 Subject: [PATCH 4/6] chore(svelte): cleanup init derived store --- .../src/routes/examples/overview/+page.svelte | 4 ++++ .../examples/overview/InitTracker.svelte | 18 ++++++++++++++++++ packages/svelte/src/lib/store/index.ts | 14 +++++--------- 3 files changed, 27 insertions(+), 9 deletions(-) create mode 100644 examples/svelte/src/routes/examples/overview/InitTracker.svelte diff --git a/examples/svelte/src/routes/examples/overview/+page.svelte b/examples/svelte/src/routes/examples/overview/+page.svelte index 586af3b9..2f21107d 100644 --- a/examples/svelte/src/routes/examples/overview/+page.svelte +++ b/examples/svelte/src/routes/examples/overview/+page.svelte @@ -22,6 +22,7 @@ import CustomEdge from './CustomEdge.svelte'; import '@xyflow/svelte/dist/style.css'; + import InitTracker from './InitTracker.svelte'; const nodeTypes: NodeTypes = { custom: CustomNode, @@ -148,6 +149,7 @@ selectionMode={SelectionMode.Full} initialViewport={{ x: 100, y: 100, zoom: 2 }} snapGrid={[25, 25]} + oninit={() => console.log('on init')} on:nodeclick={(event) => console.log('on node click', event)} on:nodemouseenter={(event) => console.log('on node enter', event)} on:nodemouseleave={(event) => console.log('on node leave', event)} @@ -207,6 +209,8 @@ }}>hide/unhide + +