feat(core): add onError hook

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

packages/core/src/composables/useDrag.ts

@@ -40,6 +40,7 @@ function useDrag(params: UseDragParams) {
       removeSelectedElements,
       addSelectedNodes,
       updateNodePositions,
+      emits,
     } = $(useVueFlow())
 
     const { onStart, onDrag, onStop, el, disabled, id, selectable } = $(params)
@@ -83,6 +84,7 @@ function useDrag(params: UseDragParams) {
             const { computedPosition } = calcNextPosition(
               n,
               nextPosition,
+              emits.error,
               nodeExtent,
               n.parentNode ? findNode(n.parentNode) : undefined,
             )

packages/core/src/composables/useEdge.ts

@@ -1,4 +1,5 @@
 import type { CustomEvent, ElementData } from '~/types'
+import { VueFlowError } from '~/utils/errors'
 
 /**
  * Access an edge
@@ -11,12 +12,12 @@ export default function useEdge<Data = ElementData, CustomEvents extends Record<
   const edgeId = id ?? inject(EdgeId, '')
   const edgeEl = inject(EdgeRef, null)
 
-  const { findEdge } = useVueFlow()
+  const { findEdge, emits } = useVueFlow()
 
   const edge = findEdge<Data, CustomEvents>(edgeId)
 
   if (!edge) {
-    throw new VueFlowError(`Edge with id ${edgeId} not found!`, 'useEdge')
+    emits.error(new VueFlowError(ErrorCode.EDGE_NOT_FOUND, edgeId))
   }
 
   return {

packages/core/src/composables/useEdgeHooks.ts

@@ -1,15 +1,15 @@
 import type { EdgeEventsEmit, EdgeEventsOn, GraphEdge, VueFlowStore } from '~/types'
 
 const createEdgeHooks = () => ({
-  doubleClick: createEventHook(),
-  click: createEventHook(),
-  mouseEnter: createEventHook(),
-  mouseMove: createEventHook(),
-  mouseLeave: createEventHook(),
-  contextMenu: createEventHook(),
-  updateStart: createEventHook(),
-  update: createEventHook(),
-  updateEnd: createEventHook(),
+  doubleClick: createExtendedEventHook(),
+  click: createExtendedEventHook(),
+  mouseEnter: createExtendedEventHook(),
+  mouseMove: createExtendedEventHook(),
+  mouseLeave: createExtendedEventHook(),
+  contextMenu: createExtendedEventHook(),
+  updateStart: createExtendedEventHook(),
+  update: createExtendedEventHook(),
+  updateEnd: createExtendedEventHook(),
 })
 
 export default function useEdgeHooks(edge: GraphEdge, emits: VueFlowStore['emits']): { emit: EdgeEventsEmit; on: EdgeEventsOn } {

packages/core/src/composables/useNode.ts

@@ -11,19 +11,19 @@ export default function useNode<Data = ElementData, CustomEvents extends Record<
   const nodeId = id ?? inject(NodeId, '')
   const nodeEl = inject(NodeRef, null)
 
-  const { findNode, getEdges } = useVueFlow()
+  const { findNode, getEdges, emits } = useVueFlow()
 
   const node = findNode<Data, CustomEvents>(nodeId)
 
   if (!node) {
-    throw new VueFlowError(`Node with id ${nodeId} not found!`, 'useNode')
+    emits.error(new VueFlowError(ErrorCode.NODE_NOT_FOUND, nodeId))
   }
 
   return {
     id: nodeId,
     nodeEl,
     node,
-    parentNode: computed(() => (node.parentNode ? findNode(node.parentNode) : undefined)),
-    connectedEdges: computed(() => getConnectedEdges([node], getEdges.value)),
+    parentNode: computed(() => (node!.parentNode ? findNode(node!.parentNode) : undefined)),
+    connectedEdges: computed(() => getConnectedEdges([node!], getEdges.value)),
   }
 }

packages/core/src/composables/useNodeHooks.ts

@@ -1,15 +1,15 @@
 import type { GraphNode, NodeEventsEmit, NodeEventsOn, VueFlowStore } from '~/types'
 
 const createNodeHooks = () => ({
-  doubleClick: createEventHook(),
-  click: createEventHook(),
-  mouseEnter: createEventHook(),
-  mouseMove: createEventHook(),
-  mouseLeave: createEventHook(),
-  contextMenu: createEventHook(),
-  dragStart: createEventHook(),
-  drag: createEventHook(),
-  dragStop: createEventHook(),
+  doubleClick: createExtendedEventHook(),
+  click: createExtendedEventHook(),
+  mouseEnter: createExtendedEventHook(),
+  mouseMove: createExtendedEventHook(),
+  mouseLeave: createExtendedEventHook(),
+  contextMenu: createExtendedEventHook(),
+  dragStart: createExtendedEventHook(),
+  drag: createExtendedEventHook(),
+  dragStop: createExtendedEventHook(),
 })
 
 export default function useNodeHooks(node: GraphNode, emits: VueFlowStore['emits']): { emit: NodeEventsEmit; on: NodeEventsOn } {

packages/core/src/composables/useUpdateNodePositions.ts

@@ -1,7 +1,8 @@
 import type { NodeDragItem, XYPosition } from '~/types'
 
 function useUpdateNodePositions() {
-  const { getSelectedNodes, nodeExtent, updateNodePositions, findNode, snapGrid, snapToGrid, nodesDraggable } = useVueFlow()
+  const { getSelectedNodes, nodeExtent, updateNodePositions, findNode, snapGrid, snapToGrid, nodesDraggable, emits } =
+    useVueFlow()
 
   return (positionDiff: XYPosition, isShiftPressed = false) => {
     // by default a node moves 5px on each key press, or 20px if shift is pressed
@@ -21,6 +22,7 @@ function useUpdateNodePositions() {
         const { computedPosition } = calcNextPosition(
           n,
           nextPosition,
+          emits.error,
           nodeExtent.value,
           n.parentNode ? findNode(n.parentNode) : undefined,
         )

packages/core/src/composables/useVueFlow.ts

@@ -123,11 +123,6 @@ export default (options?: FlowProps): VueFlowStore => {
     if (options) vueFlow.setState(options)
   }
 
-  /**
-   * Vue flow wasn't able to find any store instance - we can't proceed
-   */
-  if (!vueFlow) throw new VueFlowError('Store instance not found.', 'useVueFlow')
-
   // always provide a fresh instance into context on call
   if (scope) {
     provide(VueFlow, vueFlow)