From 04658b2c0d78dfe08b18b845365475019d2f5698 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Sun, 4 Feb 2024 18:00:54 +0100 Subject: [PATCH] fix(core): avoid options passed to `useVueFlow` overwriting default state --- packages/core/src/composables/useVueFlow.ts | 6 ++-- packages/core/src/store/actions.ts | 21 ++----------- packages/core/src/store/state.ts | 33 +++++++++++---------- packages/core/src/utils/store.ts | 10 +++---- 4 files changed, 27 insertions(+), 43 deletions(-) diff --git a/packages/core/src/composables/useVueFlow.ts b/packages/core/src/composables/useVueFlow.ts index d432a3cd..8794bab3 100644 --- a/packages/core/src/composables/useVueFlow.ts +++ b/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, diff --git a/packages/core/src/store/actions.ts b/packages/core/src/store/actions.ts index 2150829c..a1536812 100644 --- a/packages/core/src/store/actions.ts +++ b/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)) { ;(state)[key] = option } } diff --git a/packages/core/src/store/state.ts b/packages/core/src/store/state.ts index b6b2ca92..8ad29652 100644 --- a/packages/core/src/store/state.ts +++ b/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>)[] = [ + 'id', + 'vueFlowRef', + 'viewportRef', + 'initialized', + 'modelValue', + 'nodes', + 'edges', + 'maxZoom', + 'minZoom', + 'translateExtent', + 'hooks', + 'defaultEdgeOptions', +] diff --git a/packages/core/src/utils/store.ts b/packages/core/src/utils/store.ts index 00affcee..ae2c6dd9 100644 --- a/packages/core/src/utils/store.ts +++ b/packages/core/src/utils/store.ts @@ -84,7 +84,7 @@ export function createGraphNodes( ) { const parentNodes: Record = {} - 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[]) {