fix(types): use correct edge event types

# What's changed?

* instead of `MouseEvent`, emit `EdgeMouseEvent` type
* fix examples

packages/vue-flow/src/container/VueFlow/VueFlow.vue

@@ -8,6 +8,7 @@ import { Slots } from '../../context'
 import type {
   Connection,
   EdgeChange,
+  EdgeUpdateEvent,
   GraphEdge,
   GraphNode,
   NodeChange,
@@ -79,13 +80,13 @@ const emit = defineEmits<{
   (event: 'paneContextMenu', paneEvent: MouseEvent): void
   (event: 'edgeContextMenu', edgeMouseEvent: EdgeMouseEvent): void
   (event: 'edgeMouseEnter', edgeMouseEvent: EdgeMouseEvent): void
-  (event: 'edgeMouseMove', edgeMouseEvent: MouseEvent): void
-  (event: 'edgeMouseLeave', edgeMouseEvent: MouseEvent): void
-  (event: 'edgeDoubleClick', edgeMouseEvent: MouseEvent): void
-  (event: 'edgeClick', edgeMouseEvent: MouseEvent): void
-  (event: 'edgeUpdateStart', edgeMouseEvent: MouseEvent): void
-  (event: 'edgeUpdate', edgeMouseEvent: MouseEvent): void
-  (event: 'edgeUpdateEnd', edgeMouseEvent: MouseEvent): void
+  (event: 'edgeMouseMove', edgeMouseEvent: EdgeMouseEvent): void
+  (event: 'edgeMouseLeave', edgeMouseEvent: EdgeMouseEvent): void
+  (event: 'edgeDoubleClick', edgeMouseEvent: EdgeMouseEvent): void
+  (event: 'edgeClick', edgeMouseEvent: EdgeMouseEvent): void
+  (event: 'edgeUpdateStart', edgeMouseEvent: EdgeMouseEvent): void
+  (event: 'edgeUpdate', edgeMouseEvent: EdgeUpdateEvent): void
+  (event: 'edgeUpdateEnd', edgeMouseEvent: EdgeMouseEvent): void
   (event: 'updateNodeInternals', id: string): void
 
   /** v-model event definitions */

packages/vue-flow/src/types/components.ts

@@ -10,6 +10,10 @@ type GlobalComponentName = string
 /** Node Components can either be a component definition or a string name */
 export type NodeComponent = Component<NodeProps> | DefineComponent<NodeProps, any, any, any, any> | GlobalComponentName
 
+export type NodeTypesObject = { [key in keyof DefaultNodeTypes]?: NodeComponent } & Record<string, NodeComponent>
+
+export type EdgeTypesObject = { [key in keyof DefaultEdgeTypes]?: EdgeComponent } & Record<string, EdgeComponent>
+
 /** Edge Components can either be a component definition or a string name */
 export type EdgeComponent = Component<EdgeProps> | DefineComponent<EdgeProps, any, any, any, any, any> | GlobalComponentName
 

packages/vue-flow/src/types/flow.ts

@@ -3,7 +3,7 @@ import type { DefaultEdgeOptions, Edge, GraphEdge } from './edge'
 import type { CoordinateExtent, GraphNode, Node } from './node'
 import type { ConnectionLineOptions, ConnectionLineType, ConnectionMode, Connector } from './connection'
 import type { KeyCode, PanOnScrollMode } from './zoom'
-import type { DefaultEdgeTypes, DefaultNodeTypes, EdgeComponent, NodeComponent } from './components'
+import type { EdgeTypesObject, NodeTypesObject } from './components'
 
 export type ElementData = any
 
@@ -81,9 +81,9 @@ export interface FlowProps {
   nodes?: Node[]
   edges?: Edge[]
   /** either use the edgeTypes prop to define your edge-types or use slots (<template #edge-mySpecialType="props">) */
-  edgeTypes?: { [key in keyof DefaultEdgeTypes]?: EdgeComponent } & Record<string, EdgeComponent>
+  edgeTypes?: EdgeTypesObject
   /** either use the nodeTypes prop to define your node-types or use slots (<template #node-mySpecialType="props">) */
-  nodeTypes?: { [key in keyof DefaultNodeTypes]?: NodeComponent } & Record<string, NodeComponent>
+  nodeTypes?: NodeTypesObject
   connectionMode?: ConnectionMode
   /** @deprecated use {@link ConnectionLineOptions.type} */
   connectionLineType?: ConnectionLineType

packages/vue-flow/src/types/hooks.ts

@@ -132,13 +132,13 @@ export interface Emits {
   (event: 'paneContextMenu', paneEvent: MouseEvent): void
   (event: 'edgeContextMenu', edgeMouseEvent: EdgeMouseEvent): void
   (event: 'edgeMouseEnter', edgeMouseEvent: EdgeMouseEvent): void
-  (event: 'edgeMouseMove', edgeMouseEvent: MouseEvent): void
-  (event: 'edgeMouseLeave', edgeMouseEvent: MouseEvent): void
-  (event: 'edgeDoubleClick', edgeMouseEvent: MouseEvent): void
-  (event: 'edgeClick', edgeMouseEvent: MouseEvent): void
-  (event: 'edgeUpdateStart', edgeMouseEvent: MouseEvent): void
-  (event: 'edgeUpdate', edgeMouseEvent: MouseEvent): void
-  (event: 'edgeUpdateEnd', edgeMouseEvent: MouseEvent): void
+  (event: 'edgeMouseMove', edgeMouseEvent: EdgeMouseEvent): void
+  (event: 'edgeMouseLeave', edgeMouseEvent: EdgeMouseEvent): void
+  (event: 'edgeDoubleClick', edgeMouseEvent: EdgeMouseEvent): void
+  (event: 'edgeClick', edgeMouseEvent: EdgeMouseEvent): void
+  (event: 'edgeUpdateStart', edgeMouseEvent: EdgeMouseEvent): void
+  (event: 'edgeUpdate', edgeUpdateEvent: EdgeUpdateEvent): void
+  (event: 'edgeUpdateEnd', edgeMouseEvent: EdgeMouseEvent): void
 
   /** v-model event definitions */
   (event: 'update:modelValue', value: FlowElements): void