alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(core): avoid re-setting elements twice on mount

Browse Source 
Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
braks
2023-01-19 09:21:55 +01:00
committed by Braks
parent 449a3f2a51
commit a54a88539a
1 changed files with 27 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/utils/watch.ts
+27 -42
View File
@@ -16,25 +16,20 @@ export const useWatch = (
let pauseModel: WatchPausableReturn let pauseModel: WatchPausableReturn
let pauseStore: WatchPausableReturn let pauseStore: WatchPausableReturn
const immediate = !!(models.modelValue && models.modelValue.value)
let immediateStore = !!(store.nodes.value.length || store.edges.value.length) let immediateStore = !!(store.nodes.value.length || store.edges.value.length)
// eslint-disable-next-line prefer-const // eslint-disable-next-line prefer-const
pauseModel = watchPausable( pauseModel = watchPausable([models.modelValue, () => models.modelValue?.value?.length], ([elements]) => {
[models.modelValue, () => models.modelValue?.value?.length], if (elements && Array.isArray(elements)) {
([elements]) => { pauseStore?.pause()
if (elements && Array.isArray(elements)) {
pauseStore?.pause()
store.setElements(elements) store.setElements(elements)
// only trigger store watcher immediately if we actually set any elements to the store // only trigger store watcher immediately if we actually set any elements to the store
if (!pauseStore && !immediateStore && elements.length) immediateStore = true if (!pauseStore && !immediateStore && elements.length) immediateStore = true
else pauseStore?.resume() else pauseStore?.resume()
} }
}, })
{ immediate },
)
pauseStore = watchPausable( pauseStore = watchPausable(
[store.nodes, store.edges, () => store.edges.value.length, () => store.nodes.value.length], [store.nodes, store.edges, () => store.edges.value.length, () => store.nodes.value.length],
@@ -64,25 +59,20 @@ export const useWatch = (
let pauseModel: WatchPausableReturn let pauseModel: WatchPausableReturn
let pauseStore: WatchPausableReturn let pauseStore: WatchPausableReturn
const immediate = !!(models.nodes && models.nodes.value)
let immediateStore = !!store.nodes.value.length let immediateStore = !!store.nodes.value.length
// eslint-disable-next-line prefer-const // eslint-disable-next-line prefer-const
pauseModel = watchPausable( pauseModel = watchPausable([models.nodes, () => models.nodes?.value?.length], ([nodes]) => {
[models.nodes, () => models.nodes?.value?.length], if (nodes && Array.isArray(nodes)) {
([nodes]) => { pauseStore?.pause()
if (nodes && Array.isArray(nodes)) {
pauseStore?.pause()
store.setNodes(nodes) store.setNodes(nodes)
// only trigger store watcher immediately if we actually set any elements to the store // only trigger store watcher immediately if we actually set any elements to the store
if (!pauseStore && !immediateStore && nodes.length) immediateStore = true if (!pauseStore && !immediateStore && nodes.length) immediateStore = true
else pauseStore?.resume() else pauseStore?.resume()
} }
}, })
{ immediate },
)
pauseStore = watchPausable( pauseStore = watchPausable(
[store.nodes, () => store.nodes.value.length], [store.nodes, () => store.nodes.value.length],
@@ -112,25 +102,20 @@ export const useWatch = (
let pauseModel: WatchPausableReturn let pauseModel: WatchPausableReturn
let pauseStore: WatchPausableReturn let pauseStore: WatchPausableReturn
const immediate = !!(models.edges && models.edges.value)
let immediateStore = !!store.edges.value.length let immediateStore = !!store.edges.value.length
// eslint-disable-next-line prefer-const // eslint-disable-next-line prefer-const
pauseModel = watchPausable( pauseModel = watchPausable([models.edges, () => models.edges?.value?.length], ([edges]) => {
[models.edges, () => models.edges?.value?.length], if (edges && Array.isArray(edges)) {
([edges]) => { pauseStore?.pause()
if (edges && Array.isArray(edges)) {
pauseStore?.pause()
store.setEdges(edges) store.setEdges(edges)
// only trigger store watcher immediately if we actually set any elements to the store // only trigger store watcher immediately if we actually set any elements to the store
if (!pauseStore && !immediateStore && edges.length) immediateStore = true if (!pauseStore && !immediateStore && edges.length) immediateStore = true
else pauseStore?.resume() else pauseStore?.resume()
} }
}, })
{ immediate },
)
pauseStore = watchPausable( pauseStore = watchPausable(
[store.edges, () => store.edges.value.length], [store.edges, () => store.edges.value.length],