feat(core): add onError hook

bcakmakoglu · bcakmakoglu · commit 8c3f54ec2887 · 2023-03-23T15:58:30.000+01:00
Signed-off-by: braks &lt;78412429+bcakmakoglu@users.noreply.github.com&gt;
diff --git a/packages/core/src/auto-imports.d.ts b/packages/core/src/auto-imports.d.ts
@@ -14,12 +14,13 @@ declare global {
   const EdgeId: typeof import('./context/index')['EdgeId']
   const EdgeRef: typeof import('./context/index')['EdgeRef']
   const EffectScope: typeof import('vue')['EffectScope']
+  const ErrorCode: typeof import('./utils/errors')['ErrorCode']
   const NodeId: typeof import('./context/index')['NodeId']
   const NodeRef: typeof import('./context/index')['NodeRef']
   const Slots: typeof import('./context/index')['Slots']
   const Storage: typeof import('./composables/useVueFlow')['Storage']
   const VueFlow: typeof import('./context/index')['VueFlow']
-  const VueFlowError: typeof import('./utils/log')['VueFlowError']
+  const VueFlowError: typeof import('./utils/errors')['VueFlowError']
   const addEdge: typeof import('./utils/graph')['addEdge']
   const addEdgeToStore: typeof import('./utils/store')['addEdgeToStore']
   const applyChanges: typeof import('./utils/changes')['applyChanges']
@@ -44,6 +45,7 @@ declare global {
   const createAdditionChange: typeof import('./utils/changes')['createAdditionChange']
   const createApp: typeof import('vue')['createApp']
   const createEventHook: typeof import('@vueuse/core')['createEventHook']
+  const createExtendedEventHook: typeof import('./utils/createExtendedEventHook')['createExtendedEventHook']
   const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
   const createGraphNodes: typeof import('./utils/store')['createGraphNodes']
   const createHooks: typeof import('./store/hooks')['createHooks']
diff --git a/packages/core/src/components/Nodes/NodeWrapper.ts b/packages/core/src/components/Nodes/NodeWrapper.ts
@@ -235,7 +235,7 @@ const NodeWrapper = defineComponent({
         nextPos.y = snapGrid[1] * Math.round(nextPos.y / snapGrid[1])
       }
 
-      const { computedPosition, position } = calcNextPosition(node, nextPos, nodeExtent, parentNode)
+      const { computedPosition, position } = calcNextPosition(node, nextPos, emits.error, nodeExtent, parentNode)
 
       // only overwrite positions if there are changes when clamping
       if (node.computedPosition.x !== computedPosition.x || node.computedPosition.y !== computedPosition.y) {
diff --git a/packages/core/src/composables/useDrag.ts b/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,
             )
diff --git a/packages/core/src/composables/useEdge.ts b/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 {
diff --git a/packages/core/src/composables/useEdgeHooks.ts b/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 } {
diff --git a/packages/core/src/composables/useNode.ts b/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)),
   }
 }
diff --git a/packages/core/src/composables/useNodeHooks.ts b/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 } {
diff --git a/packages/core/src/composables/useUpdateNodePositions.ts b/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,
         )
diff --git a/packages/core/src/composables/useVueFlow.ts b/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)
diff --git a/packages/core/src/container/EdgeRenderer/EdgeRenderer.vue b/packages/core/src/container/EdgeRenderer/EdgeRenderer.vue
@@ -19,6 +19,7 @@ const {
   getEdgeTypes,
   elevateEdgesOnSelect,
   dimensions,
+  emits,
 } = $(useVueFlow())
 
 const sourceNode = controlledComputed(
@@ -75,7 +76,7 @@ function getType(type?: string, template?: GraphEdge['template']) {
 
   const slot = slots?.[`edge-${name}`]
   if (!slot) {
-    warn(`Edge type "${type}" not found and no edge-slot detected. Using fallback type "default".`)
+    emits.error(new VueFlowError(ErrorCode.EDGE_TYPE_MISSING, edgeType))
     return false
   }
 
diff --git a/packages/core/src/container/NodeRenderer/NodeRenderer.vue b/packages/core/src/container/NodeRenderer/NodeRenderer.vue
@@ -68,7 +68,7 @@ function getType(type?: string, template?: GraphNode['template']) {
 
   const slot = slots?.[`node-${name}`]
   if (!slot) {
-    warn(`Node type "${type}" not found and no node-slot detected. Using fallback type "default".`)
+    emits.error(new VueFlowError(ErrorCode.NODE_TYPE_MISSING, nodeType))
     return false
   }
 
diff --git a/packages/core/src/container/Viewport/Viewport.vue b/packages/core/src/container/Viewport/Viewport.vue
@@ -287,7 +287,9 @@ function setDimensions() {
 
   const { width, height } = getDimensions(viewportEl.value)
 
-  if (width === 0 || height === 0) warn('The Vue Flow parent container needs a width and a height to render the graph.')
+  if (width === 0 || height === 0) {
+    emits.error(new VueFlowError(ErrorCode.MISSING_VIEWPORT_DIMENSIONS))
+  }
 
   dimensions.width = width || 500
   dimensions.height = height || 500
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -71,6 +71,6 @@ export { default as useEdge } from './composables/useEdge'
 
 export { useGetPointerPosition } from './composables/useGetPointerPosition'
 
-export { VueFlowError } from './utils/log'
+export { VueFlowError, ErrorCode } from './utils/errors'
 
 export * from './types'
diff --git a/packages/core/src/store/actions.ts b/packages/core/src/store/actions.ts
@@ -290,7 +290,7 @@ export function useActions(state: State, getters: ComputedGetters): Actions {
 
     if (!state.initialized && !nextNodes.length) return
 
-    state.nodes = createGraphNodes(nextNodes, findNode, state.nodes)
+    state.nodes = createGraphNodes(nextNodes, state.nodes, findNode, state.hooks.error.trigger)
   }
 
   const setEdges: Actions['setEdges'] = (edges) => {
@@ -315,9 +315,21 @@ export function useActions(state: State, getters: ComputedGetters): Actions {
       const missingSource = !sourceNode || typeof sourceNode === 'undefined'
       const missingTarget = !targetNode || typeof targetNode === 'undefined'
 
-      if (missingSource) warn(`Couldn't create edge for source id: ${edge.source}; edge id: ${edge.id}`)
-      if (missingTarget) warn(`Couldn't create edge for target id: ${edge.target}; edge id: ${edge.id}`)
-      if (missingSource || missingTarget) return res
+      if (missingSource && missingTarget) {
+        state.hooks.error.trigger(new VueFlowError(ErrorCode.EDGE_SOURCE_TARGET_MISSING, edge.id, edge.source, edge.target))
+      } else {
+        if (missingSource) {
+          state.hooks.error.trigger(new VueFlowError(ErrorCode.EDGE_SOURCE_MISSING, edge.id, edge.source))
+        }
+
+        if (missingTarget) {
+          state.hooks.error.trigger(new VueFlowError(ErrorCode.EDGE_TARGET_MISSING, edge.id, edge.target))
+        }
+      }
+
+      if (missingSource || missingTarget) {
+        return res
+      }
 
       const storedEdge = getters.getEdge.value(edge.id)
 
@@ -343,7 +355,7 @@ export function useActions(state: State, getters: ComputedGetters): Actions {
   const addNodes: Actions['addNodes'] = (nodes) => {
     const nextNodes = nodes instanceof Function ? nodes(state.nodes) : nodes
 
-    const graphNodes = createGraphNodes(nextNodes, findNode, state.nodes)
+    const graphNodes = createGraphNodes(nextNodes, state.nodes, findNode, state.hooks.error.trigger)
 
     const changes = graphNodes.map(createAdditionChange)
 
@@ -370,6 +382,7 @@ export function useActions(state: State, getters: ComputedGetters): Actions {
           ...state.defaultEdgeOptions,
         },
         state.edges,
+        state.hooks.error.trigger,
       )
 
       if (edge) {
@@ -379,9 +392,21 @@ export function useActions(state: State, getters: ComputedGetters): Actions {
         const missingSource = !sourceNode || typeof sourceNode === 'undefined'
         const missingTarget = !targetNode || typeof targetNode === 'undefined'
 
-        if (missingSource) warn(`Couldn't create edge for source id: ${edge.source}; edge id: ${edge.id}`)
-        if (missingTarget) warn(`Couldn't create edge for target id: ${edge.target}; edge id: ${edge.id}`)
-        if (missingTarget || missingSource) return acc
+        if (missingSource && missingTarget) {
+          state.hooks.error.trigger(new VueFlowError(ErrorCode.EDGE_SOURCE_TARGET_MISSING, edge.id, edge.source, edge.target))
+        } else {
+          if (missingSource) {
+            state.hooks.error.trigger(new VueFlowError(ErrorCode.EDGE_SOURCE_MISSING, edge.id, edge.source))
+          }
+
+          if (missingTarget) {
+            state.hooks.error.trigger(new VueFlowError(ErrorCode.EDGE_TARGET_MISSING, edge.id, edge.target))
+          }
+        }
+
+        if (missingSource || missingTarget) {
+          return acc
+        }
 
         acc.push(
           createAdditionChange<GraphEdge>({
@@ -445,7 +470,7 @@ export function useActions(state: State, getters: ComputedGetters): Actions {
   }
 
   const updateEdge: Actions['updateEdge'] = (oldEdge, newConnection, shouldReplaceId = true) =>
-    updateEdgeAction(oldEdge, newConnection, state.edges, findEdge, shouldReplaceId)
+    updateEdgeAction(oldEdge, newConnection, state.edges, findEdge, shouldReplaceId, state.hooks.error.trigger)
 
   const applyNodeChanges: Actions['applyNodeChanges'] = (changes) => applyChanges(changes, state.nodes)
 
@@ -468,8 +493,6 @@ export function useActions(state: State, getters: ComputedGetters): Actions {
       state.connectionPosition = position
       state.connectionStartHandle.result = result
       state.connectionStatus = status
-    } else {
-      warn('Cannot update connection as it has not been started')
     }
   }
 
diff --git a/packages/core/src/store/getters.ts b/packages/core/src/store/getters.ts
@@ -60,7 +60,7 @@ export function useGetters(state: State): ComputedGetters {
     if (!source || !target) {
       state.edges = state.edges.filter((edge) => edge.id !== e.id)
 
-      warn(`Orphaned edge ${e.id} removed.`)
+      state.hooks.error.trigger(new VueFlowError(ErrorCode.EDGE_ORPHANED, e.id))
       return
     }
 
diff --git a/packages/core/src/store/hooks.ts b/packages/core/src/store/hooks.ts
diff --git a/packages/core/src/types/hooks.ts b/packages/core/src/types/hooks.ts
diff --git a/packages/core/src/utils/createExtendedEventHook.ts b/packages/core/src/utils/createExtendedEventHook.ts
diff --git a/packages/core/src/utils/drag.ts b/packages/core/src/utils/drag.ts
diff --git a/packages/core/src/utils/errors.ts b/packages/core/src/utils/errors.ts
diff --git a/packages/core/src/utils/log.ts b/packages/core/src/utils/log.ts
diff --git a/packages/core/src/utils/store.ts b/packages/core/src/utils/store.ts

Original file line number	Diff line number	Diff line change
`@@ -235,7 +235,7 @@ const NodeWrapper = defineComponent({`
`235`	`235`	`nextPos.y = snapGrid[1] * Math.round(nextPos.y / snapGrid[1])`
`236`	`236`	`}`
`237`	`237`
`238`		`- const { computedPosition, position } = calcNextPosition(node, nextPos, nodeExtent, parentNode)`
	`238`	`+ const { computedPosition, position } = calcNextPosition(node, nextPos, emits.error, nodeExtent, parentNode)`
`239`	`239`
`240`	`240`	`// only overwrite positions if there are changes when clamping`
`241`	`241`	`if (node.computedPosition.x !== computedPosition.x \|\| node.computedPosition.y !== computedPosition.y) {`