refactor(edges): move edge event handlers into Wrapper component

packages/core/src/container/EdgeRenderer/EdgeRenderer.vue

@@ -2,9 +2,9 @@
 import type { CSSProperties, EffectScope } from 'vue'
 import EdgeWrapper from '../../components/Edges/Wrapper'
 import ConnectionLine from '../../components/ConnectionLine/ConnectionLine.vue'
-import { useEdgeHooks, useHandle, useVueFlow } from '../../composables'
-import { connectionExists, groupEdgesByZLevel } from '../../utils'
-import type { Connection, EdgeComponent, EdgeUpdatable, GraphEdge, HandleType } from '../../types'
+import { useVueFlow } from '../../composables'
+import { groupEdgesByZLevel } from '../../utils'
+import type { EdgeComponent, EdgeUpdatable, GraphEdge } from '../../types'
 import { Slots } from '../../context'
 import MarkerDefinitions from './MarkerDefinitions.vue'
 
@@ -34,8 +34,6 @@ const selectable = (s?: boolean) => (typeof s === 'undefined' ? elementsSelectab
 
 const updatable = (u?: EdgeUpdatable) => (typeof u === 'undefined' ? edgesUpdatable : u)
 
-const updating = ref<string>()
-
 const sourceNode = $(
   controlledComputed(
     () => connectionStartHandle?.nodeId,
@@ -59,8 +57,6 @@ const connectionLineVisible = $(
   ),
 )
 
-const hooks = $ref<Record<string, ReturnType<typeof useEdgeHooks>>>({})
-
 let groups = $ref<ReturnType<typeof groupEdgesByZLevel>>([])
 
 let scope: EffectScope | null = effectScope()
@@ -72,11 +68,6 @@ onPaneReady(() => {
     watch(
       [$$(getSelectedNodes), $$(getEdges)],
       () => {
-        getEdges.forEach((edge) => {
-          if (hooks[edge.id]) return
-          hooks[edge.id] = useEdgeHooks(edge, emits)
-        })
-
         if (elevateEdgesOnSelect) {
           nextTick(() => (groups = groupEdgesByZLevel(getEdges, getNode)))
         } else {
@@ -123,75 +114,6 @@ const getType = (type?: string, template?: GraphEdge['template']) => {
   return slot
 }
 
-const onEdgeClick = (event: MouseEvent, edge: GraphEdge) => {
-  const data = { event, edge }
-  if (selectable(edge.selectable)) {
-    $$(nodesSelectionActive).value = false
-
-    addSelectedEdges([edge])
-  }
-  hooks[edge.id].emit.click(data)
-}
-
-const onEdgeContextMenu = (event: MouseEvent, edge: GraphEdge) => hooks[edge.id].emit.contextMenu({ event, edge })
-
-const onDoubleClick = (event: MouseEvent, edge: GraphEdge) => hooks[edge.id].emit.doubleClick({ event, edge })
-
-const onEdgeMouseEnter = (event: MouseEvent, edge: GraphEdge) => hooks[edge.id].emit.mouseEnter({ event, edge })
-
-const onEdgeMouseMove = (event: MouseEvent, edge: GraphEdge) => hooks[edge.id].emit.mouseMove({ event, edge })
-
-const onEdgeMouseLeave = (event: MouseEvent, edge: GraphEdge) => hooks[edge.id].emit.mouseLeave({ event, edge })
-
-const onEdgeUpdaterSourceMouseDown = (event: MouseEvent, edge: GraphEdge) => {
-  updating.value = edge.id
-  handleEdgeUpdater(event, edge, true)
-}
-
-const onEdgeUpdaterTargetMouseDown = (event: MouseEvent, edge: GraphEdge) => {
-  updating.value = edge.id
-  handleEdgeUpdater(event, edge, false)
-}
-
-const nodeId = ref('')
-const handleId = ref<string | null>(null)
-const type = ref<HandleType>('source')
-const elementEdgeUpdaterType = ref<HandleType>('source')
-const toUpdate = ref<GraphEdge>()
-const mouseEvent = ref<MouseEvent>()
-const onEdgeUpdate = (connection: Connection) => {
-  if (!connectionExists(connection, getEdges) && toUpdate.value)
-    hooks[toUpdate.value.id].emit.update({ edge: toUpdate.value, connection })
-}
-const onEdgeUpdateEnd = () => {
-  if (!toUpdate.value || !mouseEvent.value) return
-  hooks[toUpdate.value.id].emit.updateEnd({ event: mouseEvent.value, edge: toUpdate.value })
-  updating.value = ''
-}
-
-const { onMouseDown } = useHandle({
-  nodeId,
-  handleId,
-  type,
-  isValidConnection: undefined,
-  elementEdgeUpdaterType,
-  onEdgeUpdate,
-  onEdgeUpdateEnd,
-})
-
-const handleEdgeUpdater = (event: MouseEvent, edge: GraphEdge, isSourceHandle: boolean) => {
-  nodeId.value = isSourceHandle ? edge.target : edge.source
-  handleId.value = (isSourceHandle ? edge.targetHandle : edge.sourceHandle) ?? ''
-  type.value = isSourceHandle ? 'target' : 'source'
-  elementEdgeUpdaterType.value = type.value
-  toUpdate.value = edge
-  mouseEvent.value = event
-
-  hooks[edge.id].emit.updateStart({ event, edge })
-
-  onMouseDown(event)
-}
-
 const getClass = (edge: GraphEdge) => {
   const extraClass = edge.class instanceof Function ? edge.class(edge) : edge.class
   return [noPanClassName, extraClass]
@@ -214,41 +136,15 @@ export default {
         v-for="edge of group.edges"
         :id="edge.id"
         :key="edge.id"
+        :edge="edge"
         :type="getType(edge.type, edge.template)"
         :name="edge.type || 'default'"
-        :source="edge.source"
-        :target="edge.target"
-        :target-handle-id="edge.targetHandle"
-        :source-handle-id="edge.sourceHandle"
         :source-node="getNode(edge.source)"
         :target-node="getNode(edge.target)"
-        :label="edge.label"
-        :data="edge.data"
-        :events="{ ...edge.events, ...hooks[edge.id].on }"
-        :animated="edge.animated"
         :selectable="selectable(edge.selectable)"
-        :selected="edge.selected"
         :updatable="updatable(edge.updatable)"
-        :updating="edge.id === updating"
-        :label-style="edge.labelStyle"
-        :label-show-bg="edge.labelShowBg"
-        :label-bg-style="edge.labelBgStyle"
-        :label-bg-padding="edge.labelBgPadding"
-        :label-bg-border-radius="edge.labelBgBorderRadius"
-        :connection-mode="connectionMode"
-        :edge-updater-radius="edgeUpdaterRadius"
-        :marker-end="edge.markerEnd"
-        :marker-start="edge.markerStart"
         :style="getStyle(edge)"
         :class="getClass(edge)"
-        @click="onEdgeClick($event, edge)"
-        @dblclick="onDoubleClick($event, edge)"
-        @contextmenu="onEdgeContextMenu($event, edge)"
-        @mouseenter="onEdgeMouseEnter($event, edge)"
-        @mousemove="onEdgeMouseMove($event, edge)"
-        @mouseleave="onEdgeMouseLeave($event, edge)"
-        @source-mousedown="onEdgeUpdaterSourceMouseDown($event, edge)"
-        @target-mousedown="onEdgeUpdaterTargetMouseDown($event, edge)"
       />
     </g>
   </svg>