alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(core): add onError hook

Browse Source 
Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
braks
2023-03-23 15:58:30 +01:00
committed by Braks
parent 87249e5dde
commit 8c3f54ec28
22 changed files with 250 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/store/actions.ts
+34 -11
View File
@@ -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')
}
}
packages/core/src/store/getters.ts
+1 -1
View File
@@ -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
}
packages/core/src/store/hooks.ts
+53 -52
View File
@@ -1,64 +1,65 @@
import type { Ref } from 'vue'
import type { Emits, FlowHooks } from '~/types'
import type { FlowHooks } from '~/types'
// flow event hooks
export const createHooks = (): FlowHooks => ({
edgesChange: createEventHook(),
nodesChange: createEventHook(),
nodeDoubleClick: createEventHook(),
nodeClick: createEventHook(),
nodeMouseEnter: createEventHook(),
nodeMouseMove: createEventHook(),
nodeMouseLeave: createEventHook(),
nodeContextMenu: createEventHook(),
nodeDragStart: createEventHook(),
nodeDrag: createEventHook(),
nodeDragStop: createEventHook(),
nodesInitialized: createEventHook(),
miniMapNodeClick: createEventHook(),
miniMapNodeDoubleClick: createEventHook(),
miniMapNodeMouseEnter: createEventHook(),
miniMapNodeMouseMove: createEventHook(),
miniMapNodeMouseLeave: createEventHook(),
connect: createEventHook(),
connectStart: createEventHook(),
connectEnd: createEventHook(),
paneReady: createEventHook(),
move: createEventHook(),
moveStart: createEventHook(),
moveEnd: createEventHook(),
selectionDragStart: createEventHook(),
selectionDrag: createEventHook(),
selectionDragStop: createEventHook(),
selectionContextMenu: createEventHook(),
selectionStart: createEventHook(),
selectionEnd: createEventHook(),
viewportChangeStart: createEventHook(),
viewportChange: createEventHook(),
viewportChangeEnd: createEventHook(),
paneScroll: createEventHook(),
paneClick: createEventHook(),
paneContextMenu: createEventHook(),
paneMouseEnter: createEventHook(),
paneMouseMove: createEventHook(),
paneMouseLeave: createEventHook(),
edgeContextMenu: createEventHook(),
edgeMouseEnter: createEventHook(),
edgeMouseMove: createEventHook(),
edgeMouseLeave: createEventHook(),
edgeDoubleClick: createEventHook(),
edgeClick: createEventHook(),
edgeUpdateStart: createEventHook(),
edgeUpdate: createEventHook(),
edgeUpdateEnd: createEventHook(),
updateNodeInternals: createEventHook(),
edgesChange: createExtendedEventHook(),
nodesChange: createExtendedEventHook(),
nodeDoubleClick: createExtendedEventHook(),
nodeClick: createExtendedEventHook(),
nodeMouseEnter: createExtendedEventHook(),
nodeMouseMove: createExtendedEventHook(),
nodeMouseLeave: createExtendedEventHook(),
nodeContextMenu: createExtendedEventHook(),
nodeDragStart: createExtendedEventHook(),
nodeDrag: createExtendedEventHook(),
nodeDragStop: createExtendedEventHook(),
nodesInitialized: createExtendedEventHook(),
miniMapNodeClick: createExtendedEventHook(),
miniMapNodeDoubleClick: createExtendedEventHook(),
miniMapNodeMouseEnter: createExtendedEventHook(),
miniMapNodeMouseMove: createExtendedEventHook(),
miniMapNodeMouseLeave: createExtendedEventHook(),
connect: createExtendedEventHook(),
connectStart: createExtendedEventHook(),
connectEnd: createExtendedEventHook(),
paneReady: createExtendedEventHook(),
move: createExtendedEventHook(),
moveStart: createExtendedEventHook(),
moveEnd: createExtendedEventHook(),
selectionDragStart: createExtendedEventHook(),
selectionDrag: createExtendedEventHook(),
selectionDragStop: createExtendedEventHook(),
selectionContextMenu: createExtendedEventHook(),
selectionStart: createExtendedEventHook(),
selectionEnd: createExtendedEventHook(),
viewportChangeStart: createExtendedEventHook(),
viewportChange: createExtendedEventHook(),
viewportChangeEnd: createExtendedEventHook(),
paneScroll: createExtendedEventHook(),
paneClick: createExtendedEventHook(),
paneContextMenu: createExtendedEventHook(),
paneMouseEnter: createExtendedEventHook(),
paneMouseMove: createExtendedEventHook(),
paneMouseLeave: createExtendedEventHook(),
edgeContextMenu: createExtendedEventHook(),
edgeMouseEnter: createExtendedEventHook(),
edgeMouseMove: createExtendedEventHook(),
edgeMouseLeave: createExtendedEventHook(),
edgeDoubleClick: createExtendedEventHook(),
edgeClick: createExtendedEventHook(),
edgeUpdateStart: createExtendedEventHook(),
edgeUpdate: createExtendedEventHook(),
edgeUpdateEnd: createExtendedEventHook(),
updateNodeInternals: createExtendedEventHook(),
error: createExtendedEventHook((err) => warn(err.message)),
})
export function useHooks(emit: Emits, hooks: Ref<FlowHooks>) {
export function useHooks(emit: (...args: any[]) => void, hooks: Ref<FlowHooks>) {
onBeforeMount(() => {
for (const [key, value] of Object.entries(hooks.value)) {
const listener = (data: any) => {
emit(key as Emits extends (event: infer Event) => void ? Event : never, data)
emit(key, data)
}
value.on(listener)