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

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',
+]