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(() => {
+onMounted(() => useWatch(modelValue, nodes, edges, props, store))
-  modelValue && (modelValue.value = [...store.nodes, ...store.edges])
+modelValue && (modelValue.value = [...store.nodes, ...store.edges])
-  nodes && (nodes.value = store.nodes)
+nodes && (nodes.value = store.nodes)
-})
+edges && (edges.value = store.edges)
-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 },
-)
 </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 () => {

src/store/actions.ts

@@ -147,13 +147,13 @@ export default (state: FlowState, getters: FlowGetters): FlowActions => {
   }
 
   const setElements: FlowActions['setElements'] = (elements, extent) => {
+    if (!state.initialized && !elements.length) return
     setNodes(elements.filter(isNode), extent)
     setEdges(elements.filter(isEdge))
   }
 
   const setState: FlowActions['setState'] = (opts) => {
     if (typeof opts.modelValue !== 'undefined') setElements(opts.modelValue, opts.nodeExtent ?? state.nodeExtent)
-    if (typeof opts.elements !== 'undefined') setElements(opts.elements, opts.nodeExtent ?? state.nodeExtent)
     if (typeof opts.nodes !== 'undefined') setNodes(opts.nodes, opts.nodeExtent ?? state.nodeExtent)
     if (typeof opts.edges !== 'undefined') setEdges(opts.edges)
     if (typeof opts.panOnScroll !== 'undefined') state.panOnScroll = opts.panOnScroll
@@ -194,6 +194,7 @@ export default (state: FlowState, getters: FlowGetters): FlowActions => {
       if (typeof opts.minZoom !== 'undefined') setMinZoom(opts.minZoom)
       if (typeof opts.translateExtent !== 'undefined') setTranslateExtent(opts.translateExtent)
     }
+    if (!state.initialized) state.initialized = true
   }
   return {
     updateNodePosition,

src/store/state.ts

@@ -1,6 +1,7 @@
 import { createHooks } from './hooks'
 import { ConnectionMode, FlowState, PanOnScrollMode, DefaultNodeTypes, DefaultEdgeTypes, ConnectionLineType } from '~/types'
 import { DefaultNode, InputNode, OutputNode, BezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '~/components'
+import { isEdge, isNode } from '~/utils'
 
 export const defaultNodeTypes: DefaultNodeTypes = {
   input: InputNode,
@@ -15,77 +16,118 @@ export const defaultEdgeTypes: DefaultEdgeTypes = {
   smoothstep: SmoothStepEdge,
 }
 
-export default (preloadedState?: Partial<FlowState>): FlowState => ({
+export default (opts?: Partial<FlowState>): FlowState => {
-  nodes: [],
+  const state: FlowState = {
-  edges: [],
+    nodes: [],
+    edges: [],
 
-  paneReady: false,
+    paneReady: false,
-  instance: undefined,
+    initialized: false,
+    instance: undefined,
 
-  dimensions: {
+    dimensions: {
-    width: 0,
+      width: 0,
-    height: 0,
+      height: 0,
-  },
+    },
-  transform: [0, 0, 1],
+    transform: [0, 0, 1],
 
-  d3Zoom: undefined,
+    d3Zoom: undefined,
-  d3Selection: undefined,
+    d3Selection: undefined,
-  d3ZoomHandler: undefined,
+    d3ZoomHandler: undefined,
-  minZoom: 0.5,
+    minZoom: 0.5,
-  maxZoom: 2,
+    maxZoom: 2,
-  translateExtent: [
+    translateExtent: [
-    [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
+      [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
-    [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY],
+      [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY],
-  ],
+    ],
 
-  nodeExtent: [
+    nodeExtent: [
-    [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
+      [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
-    [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY],
+      [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY],
-  ],
+    ],
-  preventScrolling: true,
+    preventScrolling: true,
-  zoomOnScroll: true,
+    zoomOnScroll: true,
-  zoomOnPinch: true,
+    zoomOnPinch: true,
-  zoomOnDoubleClick: true,
+    zoomOnDoubleClick: true,
-  panOnScroll: false,
+    panOnScroll: false,
-  panOnScrollSpeed: 0.5,
+    panOnScrollSpeed: 0.5,
-  panOnScrollMode: PanOnScrollMode.Free,
+    panOnScrollMode: PanOnScrollMode.Free,
-  paneMoveable: true,
+    paneMoveable: true,
-  edgeUpdaterRadius: 10,
+    edgeUpdaterRadius: 10,
-  onlyRenderVisibleElements: false,
+    onlyRenderVisibleElements: false,
-  defaultZoom: 1,
+    defaultZoom: 1,
-  defaultPosition: [0, 0],
+    defaultPosition: [0, 0],
 
-  nodesSelectionActive: false,
+    nodesSelectionActive: false,
-  selectionActive: false,
+    selectionActive: false,
-  selectedNodesBbox: { x: 0, y: 0, width: 0, height: 0 },
+    selectedNodesBbox: { x: 0, y: 0, width: 0, height: 0 },
 
-  defaultMarkerColor: '#b1b1b7',
+    defaultMarkerColor: '#b1b1b7',
-  connectionLineStyle: {},
+    connectionLineStyle: {},
-  connectionLineType: ConnectionLineType.Bezier,
+    connectionLineType: ConnectionLineType.Bezier,
-  connectionNodeId: undefined,
+    connectionNodeId: undefined,
-  connectionHandleId: undefined,
+    connectionHandleId: undefined,
-  connectionHandleType: 'source',
+    connectionHandleType: 'source',
-  connectionPosition: { x: NaN, y: NaN },
+    connectionPosition: { x: NaN, y: NaN },
-  connectionMode: ConnectionMode.Loose,
+    connectionMode: ConnectionMode.Loose,
 
-  snapGrid: [15, 15],
+    snapGrid: [15, 15],
-  snapToGrid: false,
+    snapToGrid: false,
 
-  edgesUpdatable: false,
+    edgesUpdatable: false,
-  nodesConnectable: true,
+    nodesConnectable: true,
-  nodesDraggable: true,
+    nodesDraggable: true,
-  elementsSelectable: true,
+    elementsSelectable: true,
-  selectNodesOnDrag: true,
+    selectNodesOnDrag: true,
-  multiSelectionActive: false,
+    multiSelectionActive: false,
-  selectionKeyCode: 'Shift',
+    selectionKeyCode: 'Shift',
-  multiSelectionKeyCode: 'Meta',
+    multiSelectionKeyCode: 'Meta',
-  zoomActivationKeyCode: 'Meta',
+    zoomActivationKeyCode: 'Meta',
-  deleteKeyCode: 'Backspace',
+    deleteKeyCode: 'Backspace',
 
-  hooks: createHooks(),
+    hooks: createHooks(),
 
-  storageKey: undefined,
+    storageKey: undefined,
 
-  vueFlowVersion: typeof __VUE_FLOW_VERSION__ !== 'undefined' ? __VUE_FLOW_VERSION__ : '-',
+    vueFlowVersion: typeof __VUE_FLOW_VERSION__ !== 'undefined' ? __VUE_FLOW_VERSION__ : '-',
-  ...preloadedState,
+  }
-})
+
+  if (opts) {
+    if (typeof opts.modelValue !== 'undefined') {
+      state.nodes = opts.modelValue.filter((el) => isNode(el))
+      state.edges = opts.modelValue.filter((el) => isEdge(el))
+    }
+    if (typeof opts.nodes !== 'undefined') state.nodes = opts.nodes
+    if (typeof opts.edges !== 'undefined') state.edges = opts.edges
+    if (typeof opts.panOnScroll !== 'undefined') state.panOnScroll = opts.panOnScroll
+    if (typeof opts.panOnScrollMode !== 'undefined') state.panOnScrollMode = opts.panOnScrollMode
+    if (typeof opts.panOnScrollSpeed !== 'undefined') state.panOnScrollSpeed = opts.panOnScrollSpeed
+    if (typeof opts.paneMoveable !== 'undefined') state.paneMoveable = opts.paneMoveable
+    if (typeof opts.zoomOnScroll !== 'undefined') state.zoomOnScroll = opts.zoomOnScroll
+    if (typeof opts.preventScrolling !== 'undefined') state.preventScrolling = opts.preventScrolling
+    if (typeof opts.zoomOnDoubleClick !== 'undefined') state.zoomOnDoubleClick = opts.zoomOnDoubleClick
+    if (typeof opts.zoomOnPinch !== 'undefined') state.zoomOnPinch = opts.zoomOnPinch
+    if (typeof opts.defaultZoom !== 'undefined') state.defaultZoom = opts.defaultZoom
+    if (typeof opts.defaultPosition !== 'undefined') state.defaultPosition = opts.defaultPosition
+    if (typeof opts.storageKey !== 'undefined') state.storageKey = opts.storageKey
+    if (typeof opts.edgeUpdaterRadius !== 'undefined') state.edgeUpdaterRadius = opts.edgeUpdaterRadius
+    if (typeof opts.elementsSelectable !== 'undefined') state.elementsSelectable = opts.elementsSelectable
+    if (typeof opts.onlyRenderVisibleElements !== 'undefined') state.onlyRenderVisibleElements = opts.onlyRenderVisibleElements
+    if (typeof opts.edgesUpdatable !== 'undefined') state.edgesUpdatable = opts.edgesUpdatable
+    if (typeof opts.nodesConnectable !== 'undefined') state.nodesConnectable = opts.nodesConnectable
+    if (typeof opts.nodesDraggable !== 'undefined') state.nodesDraggable = opts.nodesDraggable
+    if (typeof opts.defaultMarkerColor !== 'undefined') state.defaultMarkerColor = opts.defaultMarkerColor
+    if (typeof opts.deleteKeyCode !== 'undefined') state.deleteKeyCode = opts.deleteKeyCode
+    if (typeof opts.selectionKeyCode !== 'undefined') state.selectionKeyCode = opts.selectionKeyCode
+    if (typeof opts.zoomActivationKeyCode !== 'undefined') state.zoomActivationKeyCode = opts.zoomActivationKeyCode
+    if (typeof opts.multiSelectionKeyCode !== 'undefined') state.multiSelectionKeyCode = opts.multiSelectionKeyCode
+    if (typeof opts.snapToGrid !== 'undefined') state.snapToGrid = opts.snapToGrid
+    if (typeof opts.snapGrid !== 'undefined') state.snapGrid = opts.snapGrid
+    if (typeof opts.nodeExtent !== 'undefined') state.nodeExtent = opts.nodeExtent
+    if (typeof opts.maxZoom !== 'undefined') state.maxZoom = opts.maxZoom
+    if (typeof opts.minZoom !== 'undefined') state.minZoom = opts.minZoom
+    if (typeof opts.translateExtent !== 'undefined') state.translateExtent = opts.translateExtent
+  }
+
+  return state
+}

src/store/store.ts

@@ -13,7 +13,8 @@ const useFlowStore = (preloadedState: FlowState): Store => {
     const name = `On${n.charAt(0).toUpperCase() + n.slice(1)}`
     hooksOn[<keyof FlowHooksOn>name] = h.on as any
   })
-  actions.setState(preloadedState)
+  actions.setState(state)
+
   return {
     state,
     hooksOn,
@@ -27,9 +28,7 @@ export default (id: string, options?: FlowOptions) => {
   const withStorage = options?.storageKey ?? false
   let storedState = ref<FlowExportObject>()
   const storageKey = id ?? options?.id
-  const preloadedState = {
+  const preloadedState = options as FlowState
-    ...(options as FlowState),
-  }
   if (withStorage) {
     storedState = useStorage<FlowExportObject>(storageKey, { edges: [], nodes: [], position: [0, 0], zoom: 0 })
     if (storedState.value) {
@@ -38,8 +37,8 @@ export default (id: string, options?: FlowOptions) => {
           ? storedState.value.nodes
           : options?.nodes
           ? options.nodes
-          : options?.elements
+          : options?.modelValue
-          ? options?.elements.filter((el) => isNode(el))
+          ? options?.modelValue.filter((el) => isNode(el))
           : []
       ) as GraphNode[]
       preloadedState.edges = (
@@ -47,8 +46,8 @@ export default (id: string, options?: FlowOptions) => {
           ? storedState.value.edges
           : options?.edges
           ? options.edges
-          : options?.elements
+          : options?.modelValue
-          ? options?.elements.filter((el) => isEdge(el))
+          ? options?.modelValue.filter((el) => isEdge(el))
           : []
       ) as GraphEdge[]
       if (storedState.value.position && storedState.value.zoom)

src/types/flow.ts

@@ -85,7 +85,6 @@ export interface FlowProps<N = any, E = N> {
   modelValue?: any[]
   nodes?: Node<N>[]
   edges?: Edge<E>[]
-  elements?: Elements
   id?: string
   connectionMode?: ConnectionMode
   connectionLineType?: ConnectionLineType

src/types/node.ts

@@ -62,13 +62,12 @@ export interface NodeProps<T = any> {
     source?: HandleElement[]
     target?: HandleElement[]
   }
-  // todo plugin not allowing for nested types currently
+  parentNode?: GraphNode[]
-  parentNode?: any
   isParent?: boolean
   computedPosition: XYZPosition
   position: XYPosition
   draggable?: boolean
   selectable?: boolean
-  children?: any[]
+  children?: Node[]
   dimensions?: Dimensions
 }

src/types/store.ts

@@ -64,6 +64,7 @@ export interface FlowState<N = any, E = N> extends Omit<FlowOptions<N, E>, 'id'
   preventScrolling: boolean
 
   paneReady: boolean
+  initialized: boolean
 
   vueFlowVersion: string
 }