refactor(flow): remove separate apply changes function and add them to useNodesState useEdgesState

* immedatiely execute props watcher

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

src/composables/useElementsState.ts

@@ -58,21 +58,16 @@ const updateEdge = (edge: GraphEdge, newConnection: Connection, edges: GraphEdge
   return edge
 }
 
-export const applyEdgeChanges = (changes: EdgeChange[]) => {
-  const { store } = useVueFlow()
-  applyChanges(changes, store.edges)
-}
-export const applyNodeChanges = (changes: NodeChange[]) => {
-  const { store } = useVueFlow()
-  applyChanges(changes, store.nodes)
-}
+const applyEdgeChanges = (changes: EdgeChange[], edges: GraphEdge[]) => applyChanges(changes, edges)
+const applyNodeChanges = (changes: NodeChange[], nodes: GraphNode[]) => applyChanges(changes, nodes)
 
 export const useEdgesState = ({ edges, applyDefault }: UseEdgesStateOptions = { applyDefault: true }): UseEdgesState => {
   const { store } = useVueFlow()
   if (edges && edges.length) store.setEdges(edges)
-  if (applyDefault) store.hooksOn.OnEdgesChange(applyEdgeChanges)
+  if (applyDefault) store.hooksOn.OnEdgesChange((e) => applyEdgeChanges(e, store.edges))
   return {
     edges: store.edges,
+    applyEdgeChanges: (changes) => applyEdgeChanges(changes, store.edges),
     setEdges: store.setEdges,
     addEdges: (params) => {
       params.forEach((param) => {
@@ -102,10 +97,10 @@ export const useEdgesState = ({ edges, applyDefault }: UseEdgesStateOptions = {
 export const useNodesState = ({ nodes, applyDefault }: UseNodesStateOptions = { applyDefault: true }): UseNodesState => {
   const { store } = useVueFlow()
   if (nodes && nodes.length) store.setNodes(nodes)
-  if (applyDefault) store.hooksOn.OnNodesChange(applyNodeChanges)
-
+  if (applyDefault) store.hooksOn.OnNodesChange((c) => applyNodeChanges(c, store.nodes))
   return {
     nodes: store.nodes,
+    applyNodeChanges: (changes) => applyNodeChanges(changes, store.nodes),
     setNodes: store.setNodes,
     addNodes: (nodes, extent) => {
       const parsed = nodes.flatMap((node) => {

src/container/VueFlow/watch.ts

@@ -40,121 +40,151 @@ export default (
   watch(
     () => props.maxZoom,
     (v) => isDef(v) && store.setMaxZoom(v),
+    { immediate: true },
   )
   watch(
     () => props.minZoom,
     (v) => isDef(v) && store.setMinZoom(v),
+    { immediate: true },
   )
   watch(
     () => props.edgesUpdatable,
     (v) => isDef(v) && (store.edgesUpdatable = v),
+    { immediate: true },
   )
   watch(
     () => props.elementsSelectable,
     (v) => isDef(v) && (store.elementsSelectable = v),
+    { immediate: true },
   )
   watch(
     () => props.nodesDraggable,
     (v) => isDef(v) && (store.nodesDraggable = v),
+    { immediate: true },
   )
   watch(
     () => props.nodesConnectable,
     (v) => isDef(v) && (store.nodesConnectable = v),
+    { immediate: true },
   )
   watch(
     () => props.onlyRenderVisibleElements,
     (v) => isDef(v) && (store.onlyRenderVisibleElements = v),
+    { immediate: true },
   )
   watch(
     () => props.snapToGrid,
     (v) => isDef(v) && (store.snapToGrid = v),
+    { immediate: true },
   )
   watch(
     () => props.snapGrid,
     (v) => isDef(v) && (store.snapGrid = v),
+    { immediate: true },
   )
   watch(
     () => props.paneMoveable,
     (v) => isDef(v) && (store.paneMoveable = v),
+    { immediate: true },
   )
   watch(
     () => props.panOnScroll,
     (v) => isDef(v) && (store.panOnScroll = v),
+    { immediate: true },
   )
   watch(
     () => props.panOnScrollMode,
     (v) => isDef(v) && (store.panOnScrollMode = v),
+    { immediate: true },
   )
   watch(
     () => props.panOnScrollSpeed,
     (v) => isDef(v) && (store.panOnScrollSpeed = v),
+    { immediate: true },
   )
   watch(
     () => props.zoomOnPinch,
     (v) => isDef(v) && (store.zoomOnPinch = v),
+    { immediate: true },
   )
   watch(
     () => props.zoomOnDoubleClick,
     (v) => isDef(v) && (store.zoomOnDoubleClick = v),
+    { immediate: true },
   )
   watch(
     () => props.zoomOnScroll,
     (v) => isDef(v) && (store.zoomOnScroll = v),
+    { immediate: true },
   )
   watch(
     () => props.deleteKeyCode,
     (v) => isDef(v) && (store.deleteKeyCode = v),
+    { immediate: true },
   )
   watch(
     () => props.zoomActivationKeyCode,
     (v) => isDef(v) && (store.zoomActivationKeyCode = v),
+    { immediate: true },
   )
   watch(
     () => props.selectionKeyCode,
     (v) => isDef(v) && (store.selectionKeyCode = v),
+    { immediate: true },
   )
   watch(
     () => props.multiSelectionKeyCode,
     (v) => isDef(v) && (store.multiSelectionKeyCode = v),
+    { immediate: true },
   )
   watch(
     () => props.connectionLineStyle,
     (v) => isDef(v) && (store.connectionLineStyle = v),
+    { immediate: true },
   )
   watch(
     () => props.connectionMode,
     (v) => isDef(v) && (store.connectionMode = v),
+    { immediate: true },
   )
   watch(
     () => props.connectionLineType,
     (v) => isDef(v) && (store.connectionLineType = v),
+    { immediate: true },
   )
   watch(
     () => props.defaultMarkerColor,
     (v) => isDef(v) && (store.defaultMarkerColor = v),
+    { immediate: true },
   )
   watch(
     () => props.defaultPosition,
     (v) => isDef(v) && (store.defaultPosition = v),
+    { immediate: true },
   )
   watch(
     () => props.defaultZoom,
     (v) => isDef(v) && (store.defaultZoom = v),
+    { immediate: true },
   )
   watch(
     () => props.translateExtent,
     (v) => isDef(v) && (store.translateExtent = v),
+    { immediate: true },
   )
   watch(
     () => props.nodeExtent,
     (v) => isDef(v) && (store.nodeExtent = v),
+    { immediate: true },
   )
   watch(
     () => props.selectNodesOnDrag,
     (v) => isDef(v) && (store.selectNodesOnDrag = v),
+    { immediate: true },
   )
   watch(
     () => props.edgeUpdaterRadius,
     (v) => isDef(v) && (store.edgeUpdaterRadius = v),
+    { immediate: true },
   )
 }

src/types/flow.ts

@@ -4,7 +4,7 @@ import { GraphNode, CoordinateExtent, Node } from './node'
 import { Connection, ConnectionLineType, ConnectionMode } from './connection'
 import { KeyCode, PanOnScrollMode, UseZoomPanHelper } from './zoom'
 import { FlowActions, FlowStore } from './store'
-import { FlowHooksOn } from './hooks'
+import { EdgeChange, FlowHooksOn, NodeChange } from './hooks'
 
 export type FlowElement<N = any, E = any> = GraphNode<N> | GraphEdge<E>
 export type FlowElements<N = any, E = any> = FlowElement<N, E>[]
@@ -136,22 +136,24 @@ export interface UseElementsStateOptions extends UseStateOptions {
   edges?: Edge[]
   nodes?: Node[]
 }
-export type UseNodesState = {
-  nodes: GraphNode[]
+export type UseNodesState<N = any> = {
+  nodes: GraphNode<N>[]
+  applyNodeChanges: <ND = N>(changes: NodeChange[]) => GraphNode<ND>[]
   setNodes: FlowActions['setNodes']
-  addNodes: (nodes: Node[], extent?: CoordinateExtent) => GraphNode[]
+  addNodes: <NA = N>(nodes: Node<NA>[], extent?: CoordinateExtent) => GraphNode<NA>[]
   OnNodesChange: FlowHooksOn['OnNodesChange']
 }
-export type UseEdgesState = {
+export type UseEdgesState<E = any> = {
   edges: GraphEdge[]
+  applyEdgeChanges: <ED = E>(changes: EdgeChange[]) => GraphEdge<ED>[]
   setEdges: FlowActions['setEdges']
-  addEdges: (params: (Edge | Connection)[]) => GraphEdge[]
-  updateEdge: (oldEdge: GraphEdge, newConnection: Connection) => GraphEdge | false
+  addEdges: <EA = E>(params: (Edge<EA> | Connection)[]) => GraphEdge<EA>[]
+  updateEdge: <EU = E>(oldEdge: GraphEdge<EU>, newConnection: Connection) => GraphEdge<EU> | false
   OnEdgesChange: FlowHooksOn['OnEdgesChange']
 }
-export type UseElementsState = UseNodesState & UseEdgesState
-export type UseVueFlow = {
+export type UseElementsState<N = any, E = N> = UseNodesState<N> & UseEdgesState<E>
+export type UseVueFlow<N = any, E = N> = {
   id: string
-  store: FlowStore
-} & FlowHooksOn &
-  ToRefs<FlowStore>
+  store: FlowStore<N, E>
+} & FlowHooksOn<N, E> &
+  ToRefs<FlowStore<N, E>>