diff --git a/packages/vue-flow/src/additional-components/MiniMap/MiniMap.vue b/packages/vue-flow/src/additional-components/MiniMap/MiniMap.vue index 816ca9f0..fd771e67 100644 --- a/packages/vue-flow/src/additional-components/MiniMap/MiniMap.vue +++ b/packages/vue-flow/src/additional-components/MiniMap/MiniMap.vue @@ -23,7 +23,7 @@ const window = useWindow() const defaultWidth = 200 const defaultHeight = 150 -const { edges, viewport, dimensions, hooks, getNodes } = $(useVueFlow()) +const { edges, viewport, dimensions, emits, getNodes } = $(useVueFlow()) const elementWidth = $computed(() => width ?? attrs.style?.width ?? defaultWidth) @@ -85,11 +85,23 @@ const d = controlledComputed($$(viewBox), () => { }) const onNodeClick = (event: MouseEvent, node: GraphNode) => { - hooks.miniMapNodeClick.trigger({ event, node, connectedEdges: getConnectedEdges([node], edges) }) + emits.miniMapNodeClick({ event, node }) } const onNodeDblClick = (event: MouseEvent, node: GraphNode) => { - hooks.miniMapNodeDoubleClick.trigger({ event, node, connectedEdges: getConnectedEdges([node], edges) }) + emits.miniMapNodeDoubleClick({ event, node }) +} + +const onNodeMouseEnter = (event: MouseEvent, node: GraphNode) => { + emits.miniMapNodeDoubleClick({ event, node }) +} + +const onNodeMouseMove = (event: MouseEvent, node: GraphNode) => { + emits.miniMapNodeDoubleClick({ event, node }) +} + +const onNodeMouseLeave = (event: MouseEvent, node: GraphNode) => { + emits.miniMapNodeDoubleClick({ event, node }) } @@ -119,8 +131,11 @@ export default { :stroke-color="nodeStrokeColorFunc(node)" :stroke-width="nodeStrokeWidth" :shape-rendering="shapeRendering" - @click="onNodeClick($event, node)" - @dblclick="onNodeDblClick($event, node)" + @click="(e: MouseEvent) => onNodeClick(e, node)" + @dblclick="(e: MouseEvent) => onNodeDblClick(e, node)" + @mouseenter="(e: MouseEvent) => onNodeMouseEnter(e, node)" + @mousemove="(e: MouseEvent) => onNodeMouseMove(e, node)" + @mouseleave="(e: MouseEvent) => onNodeMouseLeave(e, node)" > = function ( MiniMapNode.props = ['position', 'dimensions', 'strokeWidth', 'strokeColor', 'borderRadius', 'color', 'shapeRendering'] -// @todo add mouseover events -MiniMapNode.emits = ['click', 'dblclick'] +MiniMapNode.emits = ['click', 'dbl-click', 'mouseenter', 'mousemove', 'mouseleave'] export default MiniMapNode diff --git a/packages/vue-flow/src/store/hooks.ts b/packages/vue-flow/src/store/hooks.ts index 807ddb2a..87171ed0 100644 --- a/packages/vue-flow/src/store/hooks.ts +++ b/packages/vue-flow/src/store/hooks.ts @@ -15,6 +15,9 @@ export const createHooks = (): FlowHooks => ({ nodeDragStop: createEventHook(), miniMapNodeClick: createEventHook(), miniMapNodeDoubleClick: createEventHook(), + miniMapNodeMouseEnter: createEventHook(), + miniMapNodeMouseMove: createEventHook(), + miniMapNodeMouseLeave: createEventHook(), connect: createEventHook(), connectStart: createEventHook(), connectStop: createEventHook(), diff --git a/packages/vue-flow/src/types/hooks.ts b/packages/vue-flow/src/types/hooks.ts index 695528e0..62aed93b 100644 --- a/packages/vue-flow/src/types/hooks.ts +++ b/packages/vue-flow/src/types/hooks.ts @@ -38,6 +38,9 @@ export interface FlowEvents { nodeDragStop: NodeMouseEvent miniMapNodeClick: NodeMouseEvent miniMapNodeDoubleClick: NodeMouseEvent + miniMapNodeMouseEnter: { event: MouseEvent; node: GraphNode } + miniMapNodeMouseMove: { event: MouseEvent; node: GraphNode } + miniMapNodeMouseLeave: { event: MouseEvent; node: GraphNode } connect: Connection connectStart: { event: MouseEvent