From fff558fbc313d422716d8e5c9ec7255360cbb102 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sat, 27 Jul 2024 20:21:33 +0200
Subject: [PATCH] fix(core): check if injected state matches options and scope
 id (#1562)

* fix(core): prefer options id when finding state

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

* fix(core): check if injected state matches options id

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

* chore(changeset): add

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

---------

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 .changeset/beige-shoes-fold.md              |  5 +++++
 .changeset/funny-jokes-lie.md               |  5 +++++
 packages/core/src/composables/useVueFlow.ts | 10 +++++-----
 3 files changed, 15 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/beige-shoes-fold.md
 create mode 100644 .changeset/funny-jokes-lie.md

diff --git a/.changeset/beige-shoes-fold.md b/.changeset/beige-shoes-fold.md
new file mode 100644
index 00000000..9473875c
--- /dev/null
+++ b/.changeset/beige-shoes-fold.md
@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": patch
+---
+
+Check if injected vue flow state matches options id, otherwise create new state
diff --git a/.changeset/funny-jokes-lie.md b/.changeset/funny-jokes-lie.md
new file mode 100644
index 00000000..c8099b7f
--- /dev/null
+++ b/.changeset/funny-jokes-lie.md
@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": patch
+---
+
+Prefer options id over scope id when finding vue flow internal state by id
diff --git a/packages/core/src/composables/useVueFlow.ts b/packages/core/src/composables/useVueFlow.ts
index c4f7427a..5368a7f9 100644
--- a/packages/core/src/composables/useVueFlow.ts
+++ b/packages/core/src/composables/useVueFlow.ts
@@ -33,7 +33,7 @@ export function useVueFlow(idOrOpts?: any): VueFlowStore {
   const options = isOptsObj ? idOrOpts : { id: idOrOpts }
 
   const id = options.id
-  const vueFlowId = scope?.vueFlowId || id
+  const vueFlowId = id ?? scope?.vueFlowId
 
   let vueFlow: Injection
 
@@ -42,9 +42,9 @@ export function useVueFlow(idOrOpts?: any): VueFlowStore {
    * this should be the regular way after initialization
    */
   if (scope) {
-    const injection = inject(VueFlow, null)
-    if (typeof injection !== 'undefined' && injection !== null) {
-      vueFlow = injection
+    const injectedState = inject(VueFlow, null)
+    if (typeof injectedState !== 'undefined' && injectedState !== null && (!vueFlowId || injectedState.id === vueFlowId)) {
+      vueFlow = injectedState
     }
   }
 
@@ -63,7 +63,7 @@ export function useVueFlow(idOrOpts?: any): VueFlowStore {
    * _or_ if the store instance we found does not match up with provided ids
    * create a new store instance and register it in storage
    */
-  if (!vueFlow || (vueFlow && id && id !== vueFlow.id)) {
+  if (!vueFlow || (vueFlowId && vueFlow.id !== vueFlowId)) {
     const name = id ?? storage.getId()
 
     const state = storage.create(name, options)