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<{