refactor(flow)!: Use watcher to change every prop as a single item

* instead of replacing the whole state on each watch trigger, split into multiple watchers that set a single state
* improve reacitivty and two-way binding for v-models
* remove elements option -> only modelValue (old api) or nodes/edges

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

src/container/VueFlow/VueFlow.vue

@@ -3,6 +3,7 @@ import { createHooks, useHooks } from '../../store'
 import type { FlowProps } from '../../types/flow'
 import ZoomPane from '../ZoomPane/ZoomPane.vue'
 import { useVueFlow } from '../../composables'
+import useWatch from './watch'
 
 const props = withDefaults(defineProps<FlowProps>(), {
   snapToGrid: false,
@@ -25,19 +26,10 @@ const { modelValue, nodes, edges } = useVModels(props, emit)
 const { store } = useVueFlow(props)
 useHooks(store.hooks, emit)
 
-nextTick(() => {
-  modelValue && (modelValue.value = [...store.nodes, ...store.edges])
-  nodes && (nodes.value = store.nodes)
-})
-nextTick(() => {
-  modelValue && (modelValue.value = [...store.nodes, ...store.edges])
-  edges && (edges.value = store.edges)
-})
-watch(
-  () => props,
-  (v) => nextTick(() => store.setState(v)),
-  { flush: 'sync', deep: true, immediate: true },
-)
+onMounted(() => useWatch(modelValue, nodes, edges, props, store))
+modelValue && (modelValue.value = [...store.nodes, ...store.edges])
+nodes && (nodes.value = store.nodes)
+edges && (edges.value = store.edges)
 </script>
 <script lang="ts">
 export default {

src/container/VueFlow/watch.ts

@@ -0,0 +1,160 @@
+import { Ref } from 'vue'
+import { FlowProps, FlowStore } from '~/types'
+
+const isDef = <T>(val: T): val is NonNullable<T> => typeof val !== 'undefined'
+export default (
+  modelValue: Ref<any[] | undefined> | undefined,
+  nodes: Ref<any[] | undefined> | undefined,
+  edges: Ref<any[] | undefined> | undefined,
+  props: FlowProps,
+  store: FlowStore,
+) => {
+  if (isDefined(modelValue)) {
+    const { pause, resume } = pausableWatch(modelValue, (v) => {
+      if (v) {
+        pause()
+        store.setElements(v)
+        resume()
+      }
+    })
+  }
+  if (isDefined(nodes)) {
+    const { pause, resume } = pausableWatch(nodes, (v) => {
+      if (v) {
+        pause()
+        store.setNodes(v)
+        resume()
+      }
+    })
+  }
+  if (isDefined(edges)) {
+    const { pause, resume } = pausableWatch(edges, (v) => {
+      if (v) {
+        pause()
+        store.setEdges(v)
+        resume()
+      }
+    })
+  }
+
+  watch(
+    () => props.maxZoom,
+    (v) => isDef(v) && store.setMaxZoom(v),
+  )
+  watch(
+    () => props.minZoom,
+    (v) => isDef(v) && store.setMinZoom(v),
+  )
+  watch(
+    () => props.edgesUpdatable,
+    (v) => isDef(v) && (store.edgesUpdatable = v),
+  )
+  watch(
+    () => props.elementsSelectable,
+    (v) => isDef(v) && (store.elementsSelectable = v),
+  )
+  watch(
+    () => props.nodesDraggable,
+    (v) => isDef(v) && (store.nodesDraggable = v),
+  )
+  watch(
+    () => props.nodesConnectable,
+    (v) => isDef(v) && (store.nodesConnectable = v),
+  )
+  watch(
+    () => props.onlyRenderVisibleElements,
+    (v) => isDef(v) && (store.onlyRenderVisibleElements = v),
+  )
+  watch(
+    () => props.snapToGrid,
+    (v) => isDef(v) && (store.snapToGrid = v),
+  )
+  watch(
+    () => props.snapGrid,
+    (v) => isDef(v) && (store.snapGrid = v),
+  )
+  watch(
+    () => props.paneMoveable,
+    (v) => isDef(v) && (store.paneMoveable = v),
+  )
+  watch(
+    () => props.panOnScroll,
+    (v) => isDef(v) && (store.panOnScroll = v),
+  )
+  watch(
+    () => props.panOnScrollMode,
+    (v) => isDef(v) && (store.panOnScrollMode = v),
+  )
+  watch(
+    () => props.panOnScrollSpeed,
+    (v) => isDef(v) && (store.panOnScrollSpeed = v),
+  )
+  watch(
+    () => props.zoomOnPinch,
+    (v) => isDef(v) && (store.zoomOnPinch = v),
+  )
+  watch(
+    () => props.zoomOnDoubleClick,
+    (v) => isDef(v) && (store.zoomOnDoubleClick = v),
+  )
+  watch(
+    () => props.zoomOnScroll,
+    (v) => isDef(v) && (store.zoomOnScroll = v),
+  )
+  watch(
+    () => props.deleteKeyCode,
+    (v) => isDef(v) && (store.deleteKeyCode = v),
+  )
+  watch(
+    () => props.zoomActivationKeyCode,
+    (v) => isDef(v) && (store.zoomActivationKeyCode = v),
+  )
+  watch(
+    () => props.selectionKeyCode,
+    (v) => isDef(v) && (store.selectionKeyCode = v),
+  )
+  watch(
+    () => props.multiSelectionKeyCode,
+    (v) => isDef(v) && (store.multiSelectionKeyCode = v),
+  )
+  watch(
+    () => props.connectionLineStyle,
+    (v) => isDef(v) && (store.connectionLineStyle = v),
+  )
+  watch(
+    () => props.connectionMode,
+    (v) => isDef(v) && (store.connectionMode = v),
+  )
+  watch(
+    () => props.connectionLineType,
+    (v) => isDef(v) && (store.connectionLineType = v),
+  )
+  watch(
+    () => props.defaultMarkerColor,
+    (v) => isDef(v) && (store.defaultMarkerColor = v),
+  )
+  watch(
+    () => props.defaultPosition,
+    (v) => isDef(v) && (store.defaultPosition = v),
+  )
+  watch(
+    () => props.defaultZoom,
+    (v) => isDef(v) && (store.defaultZoom = v),
+  )
+  watch(
+    () => props.translateExtent,
+    (v) => isDef(v) && (store.translateExtent = v),
+  )
+  watch(
+    () => props.nodeExtent,
+    (v) => isDef(v) && (store.nodeExtent = v),
+  )
+  watch(
+    () => props.selectNodesOnDrag,
+    (v) => isDef(v) && (store.selectNodesOnDrag = v),
+  )
+  watch(
+    () => props.edgeUpdaterRadius,
+    (v) => isDef(v) && (store.edgeUpdaterRadius = v),
+  )
+}

src/container/ZoomPane/ZoomPane.vue

@@ -175,7 +175,7 @@ onMounted(() => {
         store.dimensions.height = newHeight
       })
     },
-    { flush: 'sync', immediate: true },
+    { flush: 'post', immediate: true },
   )
   watch(
     transform,
@@ -183,7 +183,7 @@ onMounted(() => {
       const { x, y } = clampPosition(val, store.translateExtent)
       nextTick(() => (store.transform = [x, y, clamp(val.zoom, store.minZoom, store.maxZoom)]))
     },
-    { flush: 'pre', immediate: true },
+    { flush: 'post', immediate: true },
   )
 })
 nextTick(async () => {