fix(core): avoid options passed to useVueFlow overwriting default state

Author: bcakmakoglu

packages/core/src/composables/useVueFlow.ts

@@ -1,7 +1,7 @@
 import { toRefs, tryOnScopeDispose } from '@vueuse/core'
 import type { EffectScope } from 'vue'
 import { computed, effectScope, getCurrentScope, inject, provide, reactive, watch } from 'vue'
-import type { EdgeChange, FlowOptions, FlowProps, NodeChange, State, VueFlowStore } from '../types'
+import type { EdgeChange, FlowOptions, FlowProps, NodeChange, VueFlowStore } from '../types'
 import { warn } from '../utils'
 import { useActions, useGetters, useState } from '../store'
 import { VueFlow } from '../context'
@@ -35,7 +35,7 @@ export class Storage {
   }
 
   public create(id: string, preloadedState?: FlowOptions): VueFlowStore {
-    const state: State = useState(preloadedState)
+    const state = useState()
 
     const reactiveState = reactive(state)
 
@@ -58,7 +58,7 @@ export class Storage {
 
     const actions = useActions(id, reactiveState, getters, nodeIds, edgeIds)
 
-    actions.setState(reactiveState)
+    actions.setState({ ...reactiveState, ...preloadedState })
 
     const flow: VueFlowStore = {
       ...hooksOn,

packages/core/src/store/actions.ts

@@ -51,7 +51,7 @@ import {
   updateConnectionLookup,
   updateEdgeAction,
 } from '../utils'
-import { useState } from './state'
+import { storeOptionsToSkip, useState } from './state'
 
 export function useActions(
   id: string,
@@ -345,7 +345,6 @@ export function useActions(
 
   const setNodeExtent: Actions['setNodeExtent'] = (nodeExtent) => {
     state.nodeExtent = nodeExtent
-
     updateNodeInternals(nodeIds.value)
   }
 
@@ -742,19 +741,6 @@ export function useActions(
   const setState: Actions['setState'] = (options) => {
     const opts = options instanceof Function ? options(state) : options
 
-    // these options will be set using the appropriate methods
-    const skip: (keyof typeof opts)[] = [
-      'modelValue',
-      'nodes',
-      'edges',
-      'maxZoom',
-      'minZoom',
-      'translateExtent',
-      'nodeExtent',
-      'hooks',
-      'defaultEdgeOptions',
-    ]
-
     // these options cannot be set after initialization
     const exclude: (keyof typeof opts)[] = [
       'd3Zoom',
@@ -799,16 +785,13 @@ export function useActions(
       if (isDef(opts.translateExtent)) {
         setTranslateExtent(opts.translateExtent)
       }
-      if (isDef(opts.nodeExtent)) {
-        setNodeExtent(opts.nodeExtent)
-      }
     }
 
     for (const o of Object.keys(opts)) {
       const key = o as keyof State
       const option = opts[key]
 
-      if (![...skip, ...exclude].includes(key) && isDef(option)) {
+      if (![...storeOptionsToSkip, ...exclude].includes(key) && isDef(option)) {
         ;(<any>state)[key] = option
       }
     }

packages/core/src/store/state.ts

@@ -10,7 +10,7 @@ import {
   StepEdge,
   StraightEdge,
 } from '../components'
-import { isDef, isMacOs } from '../utils'
+import { isMacOs } from '../utils'
 import { createHooks } from './hooks'
 
 export const defaultNodeTypes: DefaultNodeTypes = {
@@ -27,7 +27,7 @@ export const defaultEdgeTypes: DefaultEdgeTypes = {
   simplebezier: SimpleBezierEdge,
 }
 
-function defaultState(): State {
+export function useState(): State {
   return {
     vueFlowRef: null,
     viewportRef: null,
@@ -144,17 +144,18 @@ function defaultState(): State {
   }
 }
 
-export function useState(opts?: FlowOptions): State {
-  const state = defaultState()
-
-  if (opts) {
-    for (const key of Object.keys(opts)) {
-      const option = opts[key as keyof typeof opts]
-      if (isDef(option)) {
-        ;(state as any)[key] = option
-      }
-    }
-  }
-
-  return state
-}
+// these options will be set using the appropriate methods
+export const storeOptionsToSkip: (keyof Partial<FlowOptions & Omit<State, 'nodes' | 'edges' | 'modelValue'>>)[] = [
+  'id',
+  'vueFlowRef',
+  'viewportRef',
+  'initialized',
+  'modelValue',
+  'nodes',
+  'edges',
+  'maxZoom',
+  'minZoom',
+  'translateExtent',
+  'hooks',
+  'defaultEdgeOptions',
+]

packages/core/src/utils/store.ts

@@ -84,7 +84,7 @@ export function createGraphNodes(
 ) {
   const parentNodes: Record<string, true> = {}
 
-  const graphNodes = nodes.reduce((nextNodes, node, currentIndex) => {
+  const nextNodes = nodes.reduce((nextNodes, node, currentIndex) => {
     // make sure we don't try to add invalid nodes
     if (!isNode(node)) {
       triggerError(
@@ -103,10 +103,10 @@ export function createGraphNodes(
     return nextNodes.concat(parsed)
   }, [] as GraphNode[])
 
-  const nextNodes = [...graphNodes, ...currGraphNodes]
+  const allNodes = [...nextNodes, ...currGraphNodes]
 
-  for (const node of graphNodes) {
-    const parentNode = nextNodes.find((n) => n.id === node.parentNode)
+  for (const node of nextNodes) {
+    const parentNode = allNodes.find((n) => n.id === node.parentNode)
 
     if (node.parentNode && !parentNode) {
       triggerError(new VueFlowError(ErrorCode.NODE_MISSING_PARENT, node.id, node.parentNode))
@@ -123,7 +123,7 @@ export function createGraphNodes(
     }
   }
 
-  return graphNodes
+  return nextNodes
 }
 
 export function updateConnectionLookup(connectionLookup: ConnectionLookup, edges: Edge[]) {