feat(store, flow)!: Add apply changes handlers

* flow will not update changes unless a handler to apply changes is passed
* a default handler is available in the useVueFlow composable
* removeElements export removed

src/components/Nodes/NodeWrapper.vue

@@ -42,7 +42,6 @@ const onSelectNodeHandler = (event: MouseEvent) => {
       store.nodesSelectionActive = false
       if (!node.value.selected) store.addSelectedNodes([node.value])
     }
-    store.hooks.elementClick.trigger({ event, element: node.value })
     store.hooks.nodeClick.trigger({ event, node: node.value })
   }
 }
@@ -71,7 +70,6 @@ const onDragStop: DraggableEventListener = ({ event, data: { deltaX, deltaY } })
       store.addSelectedNodes([node.value])
     }
     store.hooks.nodeClick.trigger({ event, node: node.value })
-    store.hooks.elementClick.trigger({ event, element: node.value })
     return
   }
   store.updateNodePosition({ id: node.value.id, diff: { x: deltaX, y: deltaY }, dragging: false })

src/components/NodesSelection/NodesSelection.vue

@@ -2,31 +2,27 @@
 import { Draggable, DraggableEventListener } from '@braks/revue-draggable'
 import { useVueFlow } from '../../composables'
 import { getRectOfNodes } from '../../utils'
-import { GraphNode } from '../../types'
 
-interface Props {
-  nodes: GraphNode[]
-}
 const { store } = useVueFlow()
-const props = defineProps<Props>()
-const selectedNodesBBox = computed(() => getRectOfNodes(props.nodes))
+const selectedNodesBBox = computed(() => getRectOfNodes(store.getSelectedNodes))
 const innerStyle = computed(() => ({
   width: `${selectedNodesBBox.value.width}px`,
   height: `${selectedNodesBBox.value.height}px`,
   top: `${selectedNodesBBox.value.y}px`,
   left: `${selectedNodesBBox.value.x}px`,
 }))
-watch(selectedNodesBBox, (v) => (store.selectedNodesBbox = v))
-const onStart: DraggableEventListener = ({ event }) => store.hooks.selectionDragStart.trigger({ event, nodes: props.nodes })
+watch(selectedNodesBBox, (v) => nextTick(() => (store.selectedNodesBbox = v)))
+const onStart: DraggableEventListener = ({ event }) =>
+  store.hooks.selectionDragStart.trigger({ event, nodes: store.getSelectedNodes })
 const onDrag: DraggableEventListener = ({ event, data: { deltaX, deltaY } }) => {
-  store.hooks.selectionDrag.trigger({ event, nodes: props.nodes })
+  store.hooks.selectionDrag.trigger({ event, nodes: store.getSelectedNodes })
   store.updateNodePosition({ diff: { x: deltaX, y: deltaY }, dragging: true })
 }
 const onStop: DraggableEventListener = ({ event }) => {
-  store.hooks.selectionDragStop.trigger({ event, nodes: props.nodes })
-  props.nodes.forEach((node) => (node.dragging = false))
+  store.hooks.selectionDragStop.trigger({ event, nodes: store.getSelectedNodes })
+  store.getSelectedNodes.forEach((node) => (node.dragging = false))
 }
-const onContextMenu = (event: MouseEvent) => store.hooks.selectionContextMenu.trigger({ event, nodes: props.nodes })
+const onContextMenu = (event: MouseEvent) => store.hooks.selectionContextMenu.trigger({ event, nodes: store.getSelectedNodes })
 
 const transform = computed(() => `translate(${store.transform[0]}px,${store.transform[1]}px) scale(${store.transform[2]})`)
 </script>

src/composables/index.ts

@@ -2,4 +2,4 @@ export { default as useHandle } from './useHandle'
 export { default as useKeyPress } from './useKeyPress'
 export { default as useZoomPanHelper } from './useZoomPanHelper'
 export { default as useWindow } from './useWindow'
-export { default as useVueFlow, initFlow } from './useVueFlow'
+export { default as useVueFlow } from './useVueFlow'

src/composables/useVueFlow.ts

@@ -1,8 +1,6 @@
 import {
   EdgeChange,
-  EmitFunc,
   FlowOptions,
-  FlowStore,
   NodeChange,
   UseVueFlow,
   FlowElements,
@@ -10,59 +8,45 @@ import {
   GraphNode,
   GraphEdge,
   SelectionChange,
+  NodeDimensionChange,
+  CreatePositionChangeParams,
 } from '~/types'
-import { useStore, useHooks } from '~/store'
-import { isGraphNode } from '~/utils'
+import { useStore } from '~/store'
+import { clampPosition, isGraphNode } from '~/utils'
 
-const applyChanges = (changes: NodeChange[] | EdgeChange[], elements: FlowElements): FlowElements => {
-  const initElements: FlowElements = []
-
-  return elements.reduce((res: FlowElements, item: FlowElement) => {
-    const currentChange = changes.find((c) => c.id === item.id)
-
-    if (currentChange) {
-      switch (currentChange.type) {
-        case 'select': {
-          res.push({ ...item, selected: currentChange.selected })
-          return res
-        }
-        case 'dimensions': {
-          const updateItem = { ...item }
-
-          if (isGraphNode(updateItem)) {
-            if (typeof currentChange.dimensions !== 'undefined') {
-              updateItem.dimensions.width = currentChange.dimensions.width
-              updateItem.dimensions.height = currentChange.dimensions.height
-            }
-
-            if (typeof currentChange.position !== 'undefined') {
-              updateItem.position = currentChange.position
-            }
-
-            if (typeof currentChange.dragging !== 'undefined') {
-              updateItem.dragging = currentChange.dragging
-            }
+const applyChanges = <T extends FlowElement = GraphNode, C extends NodeChange = T extends GraphNode ? NodeChange : EdgeChange>(
+  changes: C[],
+  elements: T[],
+): T[] => {
+  let elementIds = elements.map((el) => el.id)
+  changes.forEach((change) => {
+    const i = elementIds.indexOf(change.id)
+    const el = elements[i]
+    if (el) {
+      switch (change.type) {
+        case 'select':
+          el.selected = change.selected
+          break
+        case 'dimensions':
+          if (isGraphNode(el)) {
+            if (typeof change.dimensions !== 'undefined') el.dimensions = change.dimensions
+            if (typeof change.position !== 'undefined') el.position = change.position
+            if (typeof change.dragging !== 'undefined') el.dragging = change.dragging
           }
-
-          res.push(updateItem)
-          return res
-        }
-        case 'remove': {
-          return res
-        }
+          break
+        case 'remove':
+          elements.splice(i, 1)
+          elementIds = elements.map((el) => el.id)
+          break
       }
     }
+  })
 
-    res.push(item)
-    return res
-  }, initElements)
+  return elements
 }
 
-export const applyNodeChanges = (changes: NodeChange[], nodes: GraphNode[]): GraphNode[] =>
-  <GraphNode[]>applyChanges(changes, nodes)
-
-export const applyEdgeChanges = (changes: EdgeChange[], edges: GraphEdge[]): GraphEdge[] =>
-  <GraphEdge[]>applyChanges(changes, edges)
+const applyNodeChanges = (changes: NodeChange[], nodes: GraphNode[]) => applyChanges(changes, nodes)
+const applyEdgeChanges = (changes: EdgeChange[], edges: GraphEdge[]) => applyChanges(changes, edges)
 
 export const createSelectionChange = (id: string, selected: boolean): SelectionChange => ({
   id,
@@ -70,6 +54,37 @@ export const createSelectionChange = (id: string, selected: boolean): SelectionC
   selected,
 })
 
+export const createPositionChange = ({ node, diff, dragging, nodeExtent }: CreatePositionChangeParams): NodeDimensionChange => {
+  const change: NodeDimensionChange = {
+    id: node.id,
+    type: 'dimensions',
+    dragging: !!dragging,
+    handleBounds: node.handleBounds,
+  }
+
+  if (diff) {
+    const nextPosition = { x: node.position.x + diff.x, y: node.position.y + diff.y }
+    let currentExtent = nodeExtent || node.extent
+
+    if (node.extent === 'parent' && node.parentNode && node.dimensions.width && node.dimensions.height) {
+      currentExtent =
+        node.parentNode?.dimensions.width && node.parentNode?.dimensions.height
+          ? [
+              [0, 0],
+              [
+                node.parentNode.dimensions.width - node.dimensions.width,
+                node.parentNode.dimensions.height - node.dimensions.height,
+              ],
+            ]
+          : currentExtent
+    }
+
+    change.position = currentExtent ? clampPosition(nextPosition, currentExtent) : nextPosition
+  }
+
+  return change
+}
+
 export const getSelectionChanges = (items: FlowElements, selectedIds: string[]) => {
   return items.reduce((res, item) => {
     const willBeSelected =
@@ -87,12 +102,6 @@ export const getSelectionChanges = (items: FlowElements, selectedIds: string[])
   }, [] as SelectionChange[])
 }
 
-export const initFlow = (emit: EmitFunc, id?: string): FlowStore => {
-  const store = useStore({ id })
-  useHooks(store, emit)
-  return store
-}
-
 export default (options?: FlowOptions): UseVueFlow => {
   const store = useStore(options)
   return {

src/container/SelectionPane/SelectionPane.vue

@@ -33,6 +33,7 @@ onMounted(() => {
       store.hooks.nodesChange.trigger(nodeChanges)
       store.hooks.edgesChange.trigger(edgeChanges)
       store.nodesSelectionActive = false
+
       store.resetSelectedElements()
     }
   })
@@ -56,9 +57,8 @@ export default {
 <template>
   <UserSelection v-if="store.selectionActive" :key="`user-selection-${store.id}`" />
   <NodesSelection
-    v-if="store.selectedNodes.length && !store.selectionActive && store.nodesSelectionActive"
+    v-if="store.getSelectedNodes.length && !store.selectionActive && store.nodesSelectionActive"
     :key="`nodes-selction-${store.id}`"
-    :nodes="store.selectedNodes"
   />
   <div
     :key="`flow-pane-${store.id}`"

src/container/VueFlow/VueFlow.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { createHooks, initFlow } from '../../composables'
+import { createHooks, initFlow } from '../../store'
 import type { FlowProps } from '../../types/flow'
 import ZoomPane from '../ZoomPane/ZoomPane.vue'
 

src/container/ZoomPane/ZoomPane.vue

@@ -212,6 +212,7 @@ nextTick(async () => {
   }
   store.hooks.paneReady.trigger(instance)
   store.instance = instance
+  store.fitViewOnInit && instance.fitView()
 })
 </script>
 <script lang="ts">

src/index.ts

@@ -7,7 +7,6 @@ export { getBezierPath, getSmoothStepPath, getMarkerEnd, getCenter as getEdgeCen
 export {
   isNode,
   isEdge,
-  removeElements,
   addEdge,
   getOutgoers,
   getIncomers,

src/store/actions.ts

@@ -1,5 +1,17 @@
-import { CoordinateExtent, FlowActions, FlowGetters, FlowState, GraphNode, Node, XYPosition } from '~/types'
+import {
+  CoordinateExtent,
+  EdgeChange,
+  FlowActions,
+  FlowGetters,
+  FlowState,
+  GraphNode,
+  Node,
+  NodeChange,
+  NodeDimensionChange,
+  XYPosition,
+} from '~/types'
 import { clampPosition, isEdge, isGraphEdge, isGraphNode, isNode, isParentSelected, parseEdge, parseNode } from '~/utils'
+import { createPositionChange, createSelectionChange, getSelectionChanges } from '~/composables/useVueFlow'
 
 const getParent = (root: Node[], id: string): GraphNode | undefined => {
   let node
@@ -11,67 +23,45 @@ const getParent = (root: Node[], id: string): GraphNode | undefined => {
   return node
 }
 
-const updatePosition = (node: GraphNode, { x, y }: XYPosition = { x: 0, y: 0 }, extent: CoordinateExtent, dragging?: boolean) => {
-  let position = {
-    x: node.position.x + x,
-    y: node.position.y + y,
-    z: node.computedPosition.z,
-  }
-
-  if (node.extent === 'parent' && node.parentNode && node.dimensions.width && node.dimensions.height) {
-    const parent = node.parentNode
-    extent =
-      parent.dimensions.width && parent.dimensions.height
-        ? [
-            [0, 0],
-            [parent.dimensions.width - node.dimensions.width, parent.dimensions.height - node.dimensions.height],
-          ]
-        : extent
-  }
-  node.dragging = dragging
-  const clamped = clampPosition(position, extent)
-  position = { ...position, ...clamped }
-  node.position = position
-}
-
 export default (state: FlowState, getters: FlowGetters): FlowActions => {
   const updateNodePosition: FlowActions['updateNodePosition'] = ({ id, diff = { x: 0, y: 0 }, dragging }) => {
+    const changes: NodeDimensionChange[] = []
+
     state.nodes.forEach((node) => {
       if (node.selected) {
         if (!node.parentNode) {
-          updatePosition(node, diff, state.nodeExtent, dragging)
+          changes.push(createPositionChange({ node, diff, nodeExtent: state.nodeExtent, dragging }))
         } else if (!isParentSelected(node)) {
-          updatePosition(node, diff, state.nodeExtent, dragging)
+          changes.push(createPositionChange({ node, diff, nodeExtent: state.nodeExtent, dragging }))
         }
       } else if (node.id === id) {
-        updatePosition(node, diff, state.nodeExtent, dragging)
+        changes.push(createPositionChange({ node, diff, nodeExtent: state.nodeExtent, dragging }))
       }
     })
+
+    if (changes.length) state.hooks.nodesChange.trigger(changes)
   }
-  const emit = ref(true)
   const addSelectedNodes: FlowActions['addSelectedNodes'] = (nodes) => {
-    const selectedElementsUpdated = nodes.filter((el) => !state.selectedNodes.some((e) => el.id === e.id)).length
-    const selectedNodes = !nodes.length || selectedElementsUpdated ? nodes : state.selectedNodes
-    const selectedNodesIds = selectedNodes.map((n) => n.id)
-    state.nodes.forEach(
-      (n) => (n.selected = selectedNodesIds.includes(n.id) || (n.parentNode && selectedNodesIds.includes(n.parentNode?.id))),
-    )
-    state.selectedNodes = selectedNodes
-    if (emit.value && selectedElementsUpdated) state.hooks.selectionChange.trigger({ nodes })
+    const selectedNodesIds = nodes.map((n) => n.id)
+
+    let changedNodes: NodeChange[]
+    if (state.multiSelectionActive) changedNodes = selectedNodesIds.map((nodeId) => createSelectionChange(nodeId, true))
+    else changedNodes = getSelectionChanges(state.nodes, selectedNodesIds)
+
+    if (changedNodes.length) state.hooks.nodesChange.trigger(changedNodes)
   }
   const addSelectedEdges: FlowActions['addSelectedEdges'] = (edges) => {
-    const selectedElementsUpdated = edges.filter((el) => !state.selectedEdges.some((e) => el.id === e.id)).length
-    const selectedEdges = !edges.length || selectedElementsUpdated ? edges : state.selectedEdges
-    const selectedEdgesIds = selectedEdges.map((e) => e.id)
-    state.edges.forEach((e) => (e.selected = selectedEdgesIds.includes(e.id)))
-    state.selectedEdges = selectedEdges
-    if (emit.value && selectedElementsUpdated) state.hooks.selectionChange.trigger({ edges })
+    const selectedEdgesIds = edges.map((e) => e.id)
+
+    let changedEdges: EdgeChange[]
+    if (state.multiSelectionActive) changedEdges = selectedEdgesIds.map((nodeId) => createSelectionChange(nodeId, true))
+    else changedEdges = getSelectionChanges(state.nodes, selectedEdgesIds)
+
+    if (changedEdges.length) state.hooks.edgesChange.trigger(changedEdges)
   }
   const addSelectedElements: FlowActions['addSelectedElements'] = (elements) => {
-    emit.value = false
     addSelectedNodes(elements.filter(isGraphNode))
     addSelectedEdges(elements.filter(isGraphEdge))
-    state.hooks.selectionChange.trigger({ nodes: state.selectedNodes, edges: state.selectedEdges })
   }
   const setMinZoom: FlowActions['setMinZoom'] = (minZoom: any) => {
     state.d3Zoom?.scaleExtent([minZoom, state.maxZoom])
@@ -116,10 +106,10 @@ export default (state: FlowState, getters: FlowGetters): FlowActions => {
     }
   }
 
-  const setNodes: FlowActions['setNodes'] = (nodes, extent: CoordinateExtent) => {
+  const setNodes: FlowActions['setNodes'] = (nodes, extent?: CoordinateExtent) => {
     nodes = nodes.flatMap((node) => {
       const children: GraphNode[] = []
-      parseChildren(node, undefined, children, extent)
+      parseChildren(node, undefined, children, extent ?? state.nodeExtent)
       return children
     })
     state.nodes = <GraphNode[]>nodes
@@ -151,7 +141,6 @@ export default (state: FlowState, getters: FlowGetters): FlowActions => {
     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.loading !== 'undefined') state.loading = opts.loading
     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

src/store/getters.ts

@@ -69,12 +69,12 @@ export default (state: FlowState): FlowGetters => {
     return []
   })
 
-  const getSelectedElements: FlowGetters['getSelectedElements'] = computed(() => [
-    ...(state.selectedNodes ?? []),
-    ...(state.selectedEdges ?? []),
-  ])
   const getSelectedNodes: FlowGetters['getSelectedNodes'] = computed(() => state.nodes.filter((n) => n.selected))
   const getSelectedEdges: FlowGetters['getSelectedEdges'] = computed(() => state.edges.filter((e) => e.selected))
+  const getSelectedElements: FlowGetters['getSelectedElements'] = computed(() => [
+    ...(getSelectedNodes.value ?? []),
+    ...(getSelectedEdges.value ?? []),
+  ])
 
   const nodeIds = computed(() => state.nodes.map((n) => n.id))
   const edgeIds = computed(() => state.edges.map((e) => e.id))

src/store/hooks.ts

@@ -4,7 +4,6 @@ import { EmitFunc, FlowHooks, FlowEvents, FlowStore } from '~/types'
 export const createHooks = (): FlowHooks => ({
   edgesChange: createEventHook(),
   nodesChange: createEventHook(),
-  elementClick: createEventHook(),
   nodeDoubleClick: createEventHook(),
   nodeClick: createEventHook(),
   nodeMouseEnter: createEventHook(),

src/store/index.ts

@@ -1,3 +1,3 @@
-export { default as useHooks } from './hooks'
-export { default as useStore } from './store'
+export { default as useHooks, createHooks } from './hooks'
+export { default as useStore, initFlow } from './store'
 export * from './state'

src/store/state.ts

@@ -28,8 +28,6 @@ export const initialState = (): FlowState => ({
     height: 0,
   },
   transform: [0, 0, 1],
-  selectedNodes: [],
-  selectedEdges: [],
 
   d3Zoom: undefined,
   d3Selection: undefined,

src/store/store.ts

@@ -2,9 +2,10 @@ import { getCurrentInstance } from 'vue'
 import useState, { initialState } from './state'
 import useActions from './actions'
 import useGetters from './getters'
-import { FlowExportObject, FlowHooksOn, FlowOptions, FlowState, FlowStore, Store } from '~/types'
+import { EmitFunc, FlowExportObject, FlowHooksOn, FlowOptions, FlowState, FlowStore, Store } from '~/types'
 import { StoreSymbol } from '~/context'
 import { onLoadToObject } from '~/utils'
+import { useHooks, useStore } from '~/store/index'
 
 const useFlowStore = (id: string, preloadedState: FlowState): Store => {
   const state = reactive(useState(preloadedState))
@@ -61,6 +62,12 @@ export const createStore = (options?: FlowOptions) => {
   return store
 }
 
+export const initFlow = (emit: EmitFunc, id?: string): FlowStore => {
+  const store = useStore({ id })
+  useHooks(store, emit)
+  return store
+}
+
 export default (options?: FlowOptions): FlowStore => {
   const currentInstance = getCurrentInstance()
   let store = currentInstance ? inject(StoreSymbol, undefined) : false

src/types/flow.ts

@@ -114,7 +114,7 @@ export interface FlowProps<N = any, E = N> {
   preventScrolling?: boolean
   edgeUpdaterRadius?: number
   storageKey?: string
-  loading?: string
+  fitViewOnInit?: boolean
 }
 
 export type FlowOptions<N = any, E = N> = FlowProps<N, E>

src/types/hooks.ts

@@ -1,8 +1,8 @@
 import { EventHook } from '@vueuse/core'
 import { MouseTouchEvent } from '@braks/revue-draggable'
-import { FlowInstance, Dimensions, XYPosition, XYZPosition } from './flow'
+import { FlowInstance, Dimensions, XYPosition } from './flow'
 import { GraphEdge } from './edge'
-import { GraphNode, HandleBounds } from './node'
+import { CoordinateExtent, GraphNode, HandleBounds } from './node'
 import { Connection, OnConnectStartParams } from './connection'
 import { FlowTransform } from './zoom'
 
@@ -12,72 +12,79 @@ export type NodeDimensionChange = {
   dimensions?: Dimensions
   position?: XYPosition
   handleBounds?: HandleBounds
-  computedPosition?: XYZPosition
   dragging?: boolean
 }
-
 export type NodeSelectionChange = {
   id: string
   type: 'select'
   selected: boolean
 }
-
 export type NodeRemoveChange = {
   id: string
   type: 'remove'
 }
-
 export type NodeChange = NodeDimensionChange | NodeSelectionChange | NodeRemoveChange
 
 export type EdgeSelectionChange = NodeSelectionChange
 export type EdgeRemoveChange = NodeRemoveChange
 export type EdgeChange = EdgeSelectionChange | EdgeRemoveChange
 
-export interface FlowEvents {
+export type SelectionChange = EdgeSelectionChange | NodeSelectionChange
+export type RemoveChange = EdgeRemoveChange | NodeRemoveChange
+
+export type CreatePositionChangeParams = {
+  node: GraphNode
+  nodeExtent: CoordinateExtent
+  diff?: XYPosition
+  dragging?: boolean
+}
+
+export interface FlowEvents<N = any, E = N> {
   nodesChange: NodeChange[]
   edgesChange: EdgeChange[]
-  elementClick: { event: MouseTouchEvent; element: GraphNode | GraphEdge }
-  nodeDoubleClick: { event: MouseTouchEvent; node: GraphNode }
-  nodeClick: { event: MouseTouchEvent; node: GraphNode }
-  nodeMouseEnter: { event: MouseEvent; node: GraphNode }
-  nodeMouseMove: { event: MouseEvent; node: GraphNode }
-  nodeMouseLeave: { event: MouseEvent; node: GraphNode }
-  nodeContextMenu: { event: MouseEvent; node: GraphNode }
-  nodeDragStart: { event: MouseTouchEvent; node: GraphNode }
-  nodeDrag: { event: MouseTouchEvent; node: GraphNode }
-  nodeDragStop: { event: MouseTouchEvent; node: GraphNode }
+  nodeDoubleClick: { event: MouseTouchEvent; node: GraphNode<N> }
+  nodeClick: { event: MouseTouchEvent; node: GraphNode<N> }
+  nodeMouseEnter: { event: MouseEvent; node: GraphNode<N> }
+  nodeMouseMove: { event: MouseEvent; node: GraphNode<N> }
+  nodeMouseLeave: { event: MouseEvent; node: GraphNode<N> }
+  nodeContextMenu: { event: MouseEvent; node: GraphNode<N> }
+  nodeDragStart: { event: MouseTouchEvent; node: GraphNode<N> }
+  nodeDrag: { event: MouseTouchEvent; node: GraphNode<N> }
+  nodeDragStop: { event: MouseTouchEvent; node: GraphNode<N> }
   connect: Connection
   connectStart: {
     event: MouseEvent
-  } & { [key in keyof OnConnectStartParams]: OnConnectStartParams[key] }
+  } & OnConnectStartParams
   connectStop: MouseEvent
   connectEnd: MouseEvent
-  paneReady: FlowInstance
+  paneReady: FlowInstance<N, E>
   move: FlowTransform | undefined
   moveStart: FlowTransform | undefined
   moveEnd: FlowTransform | undefined
-  selectionChange: { nodes?: GraphNode[]; edges?: GraphEdge[] }
-  selectionDragStart: { event: MouseTouchEvent; nodes: GraphNode[] }
-  selectionDrag: { event: MouseTouchEvent; nodes: GraphNode[] }
-  selectionDragStop: { event: MouseTouchEvent; nodes: GraphNode[] }
-  selectionContextMenu: { event: MouseEvent; nodes: GraphNode[] }
+  selectionDragStart: { event: MouseTouchEvent; nodes: GraphNode<N>[] }
+  selectionDrag: { event: MouseTouchEvent; nodes: GraphNode<N>[] }
+  selectionDragStop: { event: MouseTouchEvent; nodes: GraphNode<N>[] }
+  selectionContextMenu: { event: MouseEvent; nodes: GraphNode<N>[] }
   paneScroll: WheelEvent | undefined
   paneClick: MouseEvent
   paneContextMenu: MouseEvent
-  edgeContextMenu: { event: MouseEvent; edge: GraphEdge }
-  edgeMouseEnter: { event: MouseEvent; edge: GraphEdge }
-  edgeMouseMove: { event: MouseEvent; edge: GraphEdge }
-  edgeMouseLeave: { event: MouseEvent; edge: GraphEdge }
-  edgeDoubleClick: { event: MouseEvent; edge: GraphEdge }
-  edgeClick: { event: MouseEvent; edge: GraphEdge }
-  edgeUpdateStart: { event: MouseEvent; edge: GraphEdge }
-  edgeUpdate: { edge: GraphEdge; connection: Connection }
-  edgeUpdateEnd: { event: MouseEvent; edge: GraphEdge }
+  edgeContextMenu: { event: MouseEvent; edge: GraphEdge<E> }
+  edgeMouseEnter: { event: MouseEvent; edge: GraphEdge<E> }
+  edgeMouseMove: { event: MouseEvent; edge: GraphEdge<E> }
+  edgeMouseLeave: { event: MouseEvent; edge: GraphEdge<E> }
+  edgeDoubleClick: { event: MouseEvent; edge: GraphEdge<E> }
+  edgeClick: { event: MouseEvent; edge: GraphEdge<E> }
+  edgeUpdateStart: { event: MouseEvent; edge: GraphEdge<E> }
+  edgeUpdate: { edge: GraphEdge<E>; connection: Connection }
+  edgeUpdateEnd: { event: MouseEvent; edge: GraphEdge<E> }
 }
 
-export type FlowHook<T = any> = EventHook<T>
+export type FlowEvent = FlowEvents[keyof FlowEvents]
+export type FlowHook<T extends FlowEvent = any> = EventHook<T>
 
-export type FlowHooks = { [key in keyof FlowEvents]: FlowHook<FlowEvents[key]> }
-export type FlowHooksOn = { [key in keyof FlowEvents as `On${Capitalize<key>}`]: FlowHook<FlowEvents[key]>['on'] }
+export type FlowHooks<N = any, E = N> = { [key in keyof FlowEvents<N, E>]: FlowHook<FlowEvents<N, E>[key]> }
+export type FlowHooksOn<N = any, E = N> = {
+  [key in keyof FlowEvents<N, E> as `On${Capitalize<key>}`]: FlowHook<FlowEvents<N, E>[key]>['on']
+}
 
 export type EmitFunc<T extends FlowHooks = FlowHooks> = (name: keyof T, ...args: any[]) => void

src/types/store.ts

@@ -30,8 +30,6 @@ export interface FlowState<N = any, E = N> extends Omit<FlowOptions<N, E>, 'id'>
   defaultPosition: [number, number]
 
   selectedNodesBbox: Rect
-  selectedNodes: GraphNode[]
-  selectedEdges: GraphEdge[]
   nodesSelectionActive: boolean
   selectionActive: boolean
   multiSelectionActive: boolean
@@ -72,8 +70,8 @@ export interface FlowState<N = any, E = N> extends Omit<FlowOptions<N, E>, 'id'>
 }
 
 export interface FlowActions<N = any, E = N> {
-  setElements: (elements: Elements<N, E>, extent: CoordinateExtent) => void
-  setNodes: (nodes: Node<N>[], extent: CoordinateExtent) => void
+  setElements: (elements: Elements<N, E>, extent?: CoordinateExtent) => void
+  setNodes: (nodes: Node<N>[], extent?: CoordinateExtent) => void
   setEdges: (edges: Edge<E>[]) => void
   addSelectedElements: (elements: FlowElements<N, E>) => void
   addSelectedEdges: (edges: GraphEdge<E>[]) => void

src/utils/edge.ts

@@ -136,8 +136,8 @@ export const groupEdgesByZLevel = (edges: GraphEdge[], nodes: GraphNode[]) => {
     const z = edge.z
       ? edge.z
       : Math.max(
-          nodes[nodeIds.indexOf(edge.source)].computedPosition.z || 0,
-          nodes[nodeIds.indexOf(edge.target)].computedPosition.z || 0,
+          nodes[nodeIds.indexOf(edge.source)]?.computedPosition.z || 0,
+          nodes[nodeIds.indexOf(edge.target)]?.computedPosition.z || 0,
         )
     if (tree[z]) {
       tree[z].push(edge)

src/utils/graph.ts

@@ -68,18 +68,6 @@ export const getOutgoers = (node: GraphNode, elements: Elements) => getConnected
 
 export const getIncomers = (node: GraphNode, elements: Elements) => getConnectedElements(node, elements, 'source')
 
-export const removeElements = (elementsToRemove: Elements, elements: Elements) => {
-  const nodeIdsToRemove = elementsToRemove.map((n) => n.id)
-  const shouldRemove = (element: Node | Edge) => {
-    const { target, source } = isEdge(element) ? element : { target: '', source: '' }
-    return nodeIdsToRemove.includes(element.id) || nodeIdsToRemove.includes(target) || nodeIdsToRemove.includes(source)
-  }
-  elements.forEach((element, i) => {
-    if (shouldRemove(element)) elements.splice(i, 1)
-  })
-  return elements.filter((element) => !shouldRemove(element))
-}
-
 const getEdgeId = ({ source, sourceHandle, target, targetHandle }: Connection) =>
   `vueflow__edge-${source}${sourceHandle}-${target}${targetHandle}`