fix(types): use correct edge event types

# What's changed?

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

Author: bcakmakoglu

examples/vite/src/Basic/BasicOptionsAPI.vue

@@ -43,7 +43,7 @@ export default defineComponent({
     },
     onPaneReady(instance: FlowEvents['paneReady']) {
       instance.fitView()
-      this.instance = instance
+      this.instance = instance as any
     },
     onConnect(params: FlowEvents['connect']) {
       addEdge(params, this.elements)

examples/vite/src/CustomConnectionLine/ConnectionLine.vue

@@ -5,6 +5,7 @@ interface CustomConnectionLineProps {
   targetX: number
   targetY: number
 }
+
 const props = defineProps<CustomConnectionLineProps>()
 </script>
 

examples/vite/src/DragNDrop/DnD.vue

@@ -6,7 +6,7 @@ import Sidebar from './Sidebar.vue'
 let id = 0
 const getId = () => `dndnode_${id++}`
 
-const { instance, onConnect, nodes, edges, addEdges, addNodes } = useVueFlow({
+const { onConnect, nodes, edges, addEdges, addNodes, project } = useVueFlow({
   nodes: [
     {
       id: '1',
@@ -26,17 +26,15 @@ const onDragOver = (event: DragEvent) => {
 onConnect((params) => addEdges([params]))
 
 const onDrop = (event: DragEvent) => {
-  if (instance.value) {
-    const type = event.dataTransfer?.getData('application/vueflow')
-    const position = instance.value.project({ x: event.clientX, y: event.clientY - 40 })
-    const newNode = {
-      id: getId(),
-      type,
-      position,
-      label: `${type} node`,
-    } as Node
-    addNodes([newNode])
-  }
+  const type = event.dataTransfer?.getData('application/vueflow')
+  const position = project({ x: event.clientX, y: event.clientY - 40 })
+  const newNode = {
+    id: getId(),
+    type,
+    position,
+    label: `${type} node`,
+  } as Node
+  addNodes([newNode])
 }
 </script>
 

examples/vite/src/EdgeTypes/EdgeTypesExample.vue

@@ -5,7 +5,7 @@ import { getElements } from './utils'
 
 const onLoad = (flowInstance: VueFlowStore) => {
   flowInstance.fitView()
-  console.log(flowInstance.getElements())
+  console.log(flowInstance.getElements.value)
 }
 
 const elements = getElements()

examples/vite/src/FloatingEdges/FloatingEdges.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Background, Controls, MarkerType, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
+import { Background, BackgroundVariant, Controls, MarkerType, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
 import FloatingEdge from './FloatingEdge.vue'
 import FloatingConnectionLine from './FloatingConnectionLine.vue'
 import { createElements } from './floating-edge-utils'
@@ -14,7 +14,7 @@ onConnect((params) => addEdges([{ ...params, type: 'floating', markerEnd: Marker
 <template>
   <div class="floatingedges">
     <VueFlow>
-      <Background variant="lines" :gap="24" />
+      <Background :variant="BackgroundVariant.Lines" :gap="24" />
       <MiniMap />
       <Controls />
 

examples/vite/src/Overview/Overview.vue

@@ -1,5 +1,15 @@
 <script lang="ts" setup>
-import type { Connection, Edge, Elements, FlowEvents, VueFlowStore, FlowTransform, Node, SnapGrid } from '@braks/vue-flow'
+import type {
+  Connection,
+  Edge,
+  Elements,
+  FlowEvents,
+  Node,
+  SnapGrid,
+  Styles,
+  ViewpaneTransform,
+  VueFlowStore,
+} from '@braks/vue-flow'
 import { Background, Controls, MarkerType, MiniMap, VueFlow, addEdge } from '@braks/vue-flow'
 
 const onNodeDragStart = (e: FlowEvents['nodeDragStart']) => console.log('drag start', e)
@@ -18,7 +28,7 @@ const onLoad = (flowInstance: VueFlowStore) => {
   flowInstance.fitView()
 }
 
-const onMoveEnd = (transform?: FlowTransform) => console.log('zoom/move end', transform)
+const onMoveEnd = (e: FlowEvents['moveEnd']) => console.log('zoom/move end', e.flowTransform)
 const onEdgeContextMenu = (e: FlowEvents['edgeContextMenu']) => console.log('edge context menu', e)
 const onEdgeMouseEnter = (e: FlowEvents['edgeMouseEnter']) => console.log('edge mouse enter', e)
 const onEdgeMouseMove = (e: FlowEvents['edgeMouseMove']) => console.log('edge mouse move', e)
@@ -83,7 +93,7 @@ const initialElements: Elements = [
 const snapGrid: SnapGrid = [16, 16]
 
 const nodeStrokeColor = (n: Node): string => {
-  if (n.style?.background) return n.style.background as string
+  if ((n.style as Styles)?.background) return (n.style as Styles).background as string
   if (n.type === 'input') return '#0041d0'
   if (n.type === 'output') return '#ff0072'
   if (n.type === 'default') return '#1a192b'
@@ -92,7 +102,7 @@ const nodeStrokeColor = (n: Node): string => {
 }
 
 const nodeColor = (n: Node): string => {
-  if (n.style?.background) return n.style.background as string
+  if ((n.style as Styles)?.background) return (n.style as Styles).background as string
 
   return '#fff'
 }
@@ -121,7 +131,6 @@ const onConnect = (params: Connection | Edge) => (elements.value = addEdge(param
     @selection-drag-stop="onSelectionDragStop"
     @selection-context-menu="onSelectionContextMenu"
     @move-end="onMoveEnd"
-    @edge-update="onEdgeMouseMove"
     @edge-context-menu="onEdgeContextMenu"
     @edge-mouse-enter="onEdgeMouseEnter"
     @edge-mouse-move="onEdgeMouseMove"

examples/vite/src/SaveRestore/Controls.vue

@@ -13,10 +13,10 @@ const state = useStorage<FlowExportObject>(flowKey, {
 const getNodeId = () => `randomnode_${+new Date()}`
 
 const { setTransform } = useZoomPanHelper()
-const { nodes, edges, addNodes, setNodes, setEdges, instance, dimensions } = useVueFlow()
+const { nodes, edges, addNodes, setNodes, setEdges, toObject, dimensions } = useVueFlow()
 
 const onSave = () => {
-  state.value = instance.value?.toObject()
+  state.value = toObject()
 }
 
 const onRestore = () => {

examples/vite/src/Stress/StressExample.vue

@@ -13,7 +13,7 @@ onPaneReady((i) => {
   i.fitView({
     padding: 0.2,
   })
-  console.log(i.getElements())
+  console.log(i.getElements.value)
 })
 </script>
 

examples/vite/src/UpdatableEdge/UpdatableEdgeExample.vue

@@ -25,8 +25,8 @@ const initialElements: Elements = [
 
 const elements = ref(initialElements)
 const onLoad = (flowInstance: VueFlowStore) => flowInstance.fitView()
-const onEdgeUpdateStart = (edge: Edge) => console.log('start update', edge)
-const onEdgeUpdateEnd = (edge: Edge) => console.log('end update', edge)
+const onEdgeUpdateStart = ({ edge }: FlowEvents['edgeUpdateStart']) => console.log('start update', edge)
+const onEdgeUpdateEnd = ({ edge }: FlowEvents['edgeUpdateEnd']) => console.log('end update', edge)
 const onEdgeUpdate = ({ edge, connection }: FlowEvents['edgeUpdate']) => {
   elements.value = updateEdge(edge, connection, elements.value)
 }

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 */