diff --git a/packages/vue-flow/src/additional-components/MiniMap/MiniMap.vue b/packages/vue-flow/src/additional-components/MiniMap/MiniMap.vue
index 4080e7e0..d08816e6 100644
--- a/packages/vue-flow/src/additional-components/MiniMap/MiniMap.vue
+++ b/packages/vue-flow/src/additional-components/MiniMap/MiniMap.vue
@@ -1,7 +1,7 @@
@@ -117,8 +117,8 @@ export default {
:stroke-color="nodeStrokeColorFunc(node)"
:stroke-width="nodeStrokeWidth"
:shape-rendering="shapeRendering"
- @click="(e: MouseEvent) => onNodeClick(e, node)"
- @dbl-click="(e: MouseEvent) => onNodeDblClick(e, node)"
+ @click="onNodeClick($event, node)"
+ @dblclick="onNodeDblClick($event, node)"
>
= function (
strokeWidth,
shapeRendering,
onClick: (e: MouseEvent) => emit('click', e),
- onDblClick: (e: MouseEvent) => emit('dbl-click', e),
+ onDblClick: (e: MouseEvent) => emit('dblclick', e),
}),
slots?.default?.(),
]
@@ -39,6 +39,6 @@ const MiniMapNode: FunctionalComponent = function (
MiniMapNode.props = ['position', 'dimensions', 'strokeWidth', 'strokeColor', 'borderRadius', 'color', 'shapeRendering']
// @todo add mouseover events
-MiniMapNode.emits = ['click', 'dbl-click']
+MiniMapNode.emits = ['click', 'dblclick']
export default MiniMapNode
diff --git a/packages/vue-flow/src/components/Nodes/NodeWrapper.vue b/packages/vue-flow/src/components/Nodes/NodeWrapper.vue
index f49caf59..77168670 100644
--- a/packages/vue-flow/src/components/Nodes/NodeWrapper.vue
+++ b/packages/vue-flow/src/components/Nodes/NodeWrapper.vue
@@ -4,7 +4,7 @@ import type { CSSProperties } from 'vue'
import { useVueFlow } from '../../composables'
import type { GraphNode, NodeComponent, SnapGrid } from '../../types'
import { NodeId } from '../../context'
-import { getHandleBounds, getXYZPos } from '../../utils'
+import { getConnectedEdges, getHandleBounds, getXYZPos } from '../../utils'
const { id, type, name, node, draggable, selectable, connectable, snapGrid } = defineProps<{
id: string
@@ -20,6 +20,7 @@ const { id, type, name, node, draggable, selectable, connectable, snapGrid } = d
provide(NodeId, id)
const {
+ edges,
viewport,
noDragClassName,
noPanClassName,
@@ -128,19 +129,19 @@ onUnmounted(() => {
const onMouseEnter = (event: MouseEvent) => {
if (!node.dragging) {
- emits.nodeMouseEnter({ event, node })
+ emits.nodeMouseEnter({ event, node, connectedEdges: getConnectedEdges([node], edges) })
}
}
const onMouseMove = (event: MouseEvent) => {
if (!node.dragging) {
- emits.nodeMouseMove({ event, node })
+ emits.nodeMouseMove({ event, node, connectedEdges: getConnectedEdges([node], edges) })
}
}
const onMouseLeave = (event: MouseEvent) => {
if (!node.dragging) {
- emits.nodeMouseLeave({ event, node })
+ emits.nodeMouseLeave({ event, node, connectedEdges: getConnectedEdges([node], edges) })
}
}
@@ -148,10 +149,12 @@ const onContextMenu = (event: MouseEvent) => {
emits.nodeContextMenu({
event,
node,
+ connectedEdges: getConnectedEdges([node], edges),
})
}
-const onDoubleClick = (event: MouseEvent) => emits.nodeDoubleClick({ event, node })
+const onDoubleClick = (event: MouseEvent) =>
+ emits.nodeDoubleClick({ event, node, connectedEdges: getConnectedEdges([node], edges) })
const onSelectNode = (event: MouseEvent) => {
if (!draggable) {
@@ -162,13 +165,13 @@ const onSelectNode = (event: MouseEvent) => {
if (!node.selected) addSelectedNodes([node])
}
- emits.nodeClick({ event, node })
+ emits.nodeClick({ event, node, connectedEdges: getConnectedEdges([node], edges) })
}
}
onDragStart(({ event }) => {
addSelectedNodes([])
- emits.nodeDragStart({ event, node })
+ emits.nodeDragStart({ event, node, connectedEdges: getConnectedEdges([node], edges) })
if (selectNodesOnDrag && selectable) {
setState({
@@ -187,7 +190,7 @@ onDragStart(({ event }) => {
onDrag(({ event, data: { deltaX, deltaY } }) => {
updateNodePosition({ id: node.id, diff: { x: deltaX, y: deltaY }, dragging: true })
- emits.nodeDrag({ event, node })
+ emits.nodeDrag({ event, node, connectedEdges: getConnectedEdges([node], edges) })
})
onDragStop(({ event, data: { deltaX, deltaY } }) => {
@@ -197,11 +200,11 @@ onDragStop(({ event, data: { deltaX, deltaY } }) => {
if (selectable && !selectNodesOnDrag && !node.selected) {
addSelectedNodes([node])
}
- emits.nodeClick({ event, node })
+ emits.nodeClick({ event, node, connectedEdges: getConnectedEdges([node], edges) })
return
}
updateNodePosition({ id: node.id, diff: { x: deltaX, y: deltaY }, dragging: false })
- emits.nodeDragStop({ event, node })
+ emits.nodeDragStop({ event, node, connectedEdges: getConnectedEdges([node], edges) })
})
const getClass = computed(() => {
diff --git a/packages/vue-flow/src/types/hooks.ts b/packages/vue-flow/src/types/hooks.ts
index adbf3fbc..695528e0 100644
--- a/packages/vue-flow/src/types/hooks.ts
+++ b/packages/vue-flow/src/types/hooks.ts
@@ -8,20 +8,36 @@ import type { Connection, OnConnectStartParams } from './connection'
import type { FlowTransform } from './zoom'
import type { EdgeChange, NodeChange } from './changes'
+export interface NodeMouseEvent {
+ event: MouseTouchEvent
+ node: GraphNode
+ connectedEdges: GraphEdge[]
+}
+
+export interface EdgeMouseEvent {
+ event: MouseEvent
+ edge: GraphEdge
+}
+
+export interface EdgeUpdateEvent {
+ edge: GraphEdge
+ connection: Connection
+}
+
export interface FlowEvents {
nodesChange: NodeChange[]
edgesChange: EdgeChange[]
- 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 }
- miniMapNodeClick: { event: MouseTouchEvent; node: GraphNode }
- miniMapNodeDoubleClick: { event: MouseTouchEvent; node: GraphNode }
+ nodeDoubleClick: NodeMouseEvent
+ nodeClick: NodeMouseEvent
+ nodeMouseEnter: NodeMouseEvent
+ nodeMouseMove: NodeMouseEvent
+ nodeMouseLeave: NodeMouseEvent
+ nodeContextMenu: NodeMouseEvent
+ nodeDragStart: NodeMouseEvent
+ nodeDrag: NodeMouseEvent
+ nodeDragStop: NodeMouseEvent
+ miniMapNodeClick: NodeMouseEvent
+ miniMapNodeDoubleClick: NodeMouseEvent
connect: Connection
connectStart: {
event: MouseEvent
@@ -39,15 +55,15 @@ export interface FlowEvents {
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: EdgeMouseEvent
+ edgeMouseEnter: EdgeMouseEvent
+ edgeMouseMove: EdgeMouseEvent
+ edgeMouseLeave: EdgeMouseEvent
+ edgeDoubleClick: EdgeMouseEvent
+ edgeClick: EdgeMouseEvent
+ edgeUpdateStart: EdgeMouseEvent
+ edgeUpdate: EdgeUpdateEvent
+ edgeUpdateEnd: EdgeMouseEvent
}
export type FlowHooks = Readonly<{