From b140b84ccdb1243fb1a17e6cd415cc31f0ff6f05 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 24 Nov 2021 01:02:32 +0100
Subject: [PATCH] fix(flow): check diff before re-parsing elements

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 src/container/VueFlow/VueFlow.vue | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/container/VueFlow/VueFlow.vue b/src/container/VueFlow/VueFlow.vue
index bbd652da..b3ad4f64 100644
--- a/src/container/VueFlow/VueFlow.vue
+++ b/src/container/VueFlow/VueFlow.vue
@@ -24,6 +24,7 @@ import EdgeRenderer from '../EdgeRenderer/EdgeRenderer.vue'
 import LoadingIndicator from '../../components/Loading/LoadingIndicator.vue'
 import { createHooks, initFlow, useWindow, useZoomPanHelper } from '../../composables'
 import { onLoadGetElements, onLoadProject, onLoadToObject } from '../../utils'
+import microDiff from 'microdiff'
 
 interface FlowProps extends FlowOptions {
   id?: string
@@ -166,8 +167,14 @@ invoke(async () => {
   )
 })
 
-watch(elements, store.setElements, { flush: 'post' })
-watch(() => elements.value.length, () => store.setElements(elements.value), { flush: 'post' })
+watch(props.modelValue, (val) => {
+  const diff = microDiff(val, store.elements, { cyclesFix: false })
+  if (diff.length) store.setElements(val)
+}, { flush: 'post' })
+watch(elements, (val) =>{
+  const diff = microDiff(val, store.elements, { cyclesFix: false })
+  if (diff.length) store.setElements(val)
+}, { flush: 'post' })
 watch(store.elements, (val) => (elements.value = val), { flush: 'post' })
 
 const transitionName = computed(() => {