refactor(core): pass original event to edge update event params

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

examples/vite/src/Basic/Basic.vue

@@ -14,14 +14,15 @@ const elements = ref<Elements>([
   { id: 'e1-2', source: '1', target: '2', animated: true },
   { id: 'e1-3', source: '1', target: '3' },
 ])
-const { onNodeDragStop, onConnect, addEdges, setTransform, toObject } = useVueFlow({
+const { onNodeDragStop, onEdgeClick, onConnect, addEdges, setTransform, toObject } = useVueFlow({
   minZoom: 0.2,
   maxZoom: 4,
   connectOnClick: true,
   fitViewOnInit: false,
 })
 
-onNodeDragStop((e) => console.log('drag stop', e))
+onNodeDragStop((e) => console.log('drag stop', e.event))
+onEdgeClick(console.log)
 onConnect((params) => addEdges([params]))
 
 const updatePos = () =>

examples/vite/src/CustomConnectionLine/CustomConnectionLine.vue

@@ -1,10 +1,8 @@
-<script lang="ts" setup>
+<script setup>
-import type { Elements } from '@vue-flow/core'
 import { VueFlow } from '@vue-flow/core'
-import { Background, BackgroundVariant } from '@vue-flow/background'
 import ConnectionLine from './ConnectionLine.vue'
 
-const elements = ref<Elements>([
+const elements = ref([
   {
     id: '1',
     type: 'input',
@@ -16,9 +14,8 @@ const elements = ref<Elements>([
 
 <template>
   <VueFlow v-model="elements">
-    <template #connection-line="props">
+    <template #connection-line="{ sourceX, sourceY, targetX, targetY }">
-      <ConnectionLine v-bind="props" />
+      <ConnectionLine :source-x="sourceX" :source-y="sourceY" :target-x="targetX" :target-y="targetY" />
     </template>
-    <Background :variant="BackgroundVariant.Lines" />
   </VueFlow>
 </template>

packages/core/src/components/Edges/EdgeWrapper.ts

@@ -1,5 +1,5 @@
 import EdgeAnchor from './EdgeAnchor'
-import type { Connection, EdgeComponent, EdgeUpdatable, GraphEdge, HandleType } from '~/types'
+import type { Connection, EdgeComponent, EdgeUpdatable, GraphEdge, HandleType, MouseTouchEvent } from '~/types'
 import { ConnectionMode, Position } from '~/types'
 
 interface Props {
@@ -24,7 +24,6 @@ const EdgeWrapper = defineComponent({
       emits,
       nodesSelectionActive,
       noPanClassName,
-      getEdges,
       getEdgeTypes,
       removeSelectedEdges,
       findEdge,
@@ -47,8 +46,6 @@ const EdgeWrapper = defineComponent({
 
     const edgeUpdaterType = ref<HandleType>('source')
 
-    const mouseEvent = ref<MouseEvent>()
-
     const edgeEl = ref<SVGElement>()
 
     provide(EdgeId, props.id)
@@ -222,13 +219,12 @@ const EdgeWrapper = defineComponent({
       mouseOver = false
     }
 
-    function onEdgeUpdate(connection: Connection) {
+    function onEdgeUpdate(event: MouseTouchEvent, connection: Connection) {
-      if (!connectionExists(connection, getEdges.value)) hooks.emit.update({ edge, connection })
+      hooks.emit.update({ event, edge, connection })
     }
 
-    function onEdgeUpdateEnd() {
+    function onEdgeUpdateEnd(event: MouseTouchEvent) {
-      if (!mouseEvent.value) return
+      hooks.emit.updateEnd({ event, edge })
-      hooks.emit.updateEnd({ event: mouseEvent.value, edge })
       updating = false
     }
 
@@ -243,8 +239,6 @@ const EdgeWrapper = defineComponent({
 
       edgeUpdaterType.value = type.value
 
-      mouseEvent.value = event
-
       hooks.emit.updateStart({ event, edge })
 
       handlePointerDown(event)

packages/core/src/composables/useHandle.ts

@@ -1,5 +1,5 @@
 import type { MaybeRef } from '@vueuse/core'
-import type { Connection, ConnectionHandle, HandleType, ValidConnectionFunc } from '~/types'
+import type { Connection, ConnectionHandle, HandleType, MouseTouchEvent, ValidConnectionFunc } from '~/types'
 
 interface UseHandleProps {
   handleId: MaybeRef<string | null>
@@ -7,8 +7,8 @@ interface UseHandleProps {
   type: MaybeRef<HandleType>
   isValidConnection?: ValidConnectionFunc
   edgeUpdaterType?: MaybeRef<HandleType>
-  onEdgeUpdate?: (connection: Connection) => void
+  onEdgeUpdate?: (event: MouseTouchEvent, connection: Connection) => void
-  onEdgeUpdateEnd?: (event: MouseEvent | TouchEvent) => void
+  onEdgeUpdateEnd?: (event: MouseTouchEvent) => void
 }
 
 const alwaysValid = () => true
@@ -50,7 +50,7 @@ export default function useHandle({
   let connection: Connection | null = null
   let isValid = false
 
-  function handlePointerDown(event: MouseEvent | TouchEvent) {
+  function handlePointerDown(event: MouseTouchEvent) {
     const isMouseTriggered = isMouseEvent(event)
 
     if ((isMouseTriggered && event.button === 0) || !isMouseTriggered) {
@@ -115,7 +115,7 @@ export default function useHandle({
 
       emits.connectStart({ event, nodeId, handleId, handleType })
 
-      function onPointerMove(event: MouseEvent | TouchEvent) {
+      function onPointerMove(event: MouseTouchEvent) {
         connectionPosition = getEventPosition(event, containerBounds)
 
         prevClosestHandle = getClosestHandle(
@@ -171,11 +171,11 @@ export default function useHandle({
         }
       }
 
-      function onPointerUp(event: MouseEvent | TouchEvent) {
+      function onPointerUp(event: MouseTouchEvent) {
         if (prevClosestHandle) {
           if (connection && isValid) {
             if (!onEdgeUpdate) emits.connect({ ...(defaultEdgeOptions?.value || {}), ...connection })
-            else onEdgeUpdate(connection)
+            else onEdgeUpdate(event, connection)
           }
         }