refactor(edges): move classes to Wrapper.ts

packages/vue-flow/src/components/Edges/Wrapper.ts

@@ -47,6 +47,7 @@ const Wrapper: FunctionalComponent<Props> = function (
     animated,
     label,
     updatable,
+    selectable,
     target,
     source,
     sourceNode,
@@ -104,68 +105,83 @@ const Wrapper: FunctionalComponent<Props> = function (
     targetPosition,
   )
 
-  return h('g', { class: [`vue-flow__node-${name}`, { updating }] }, [
+  return h(
-    h(type as any, {
+    'g',
-      id,
+    {
-      sourceNode,
+      class: [
-      targetNode,
+        'vue-flow__edge',
-      source,
+        `vue-flow__edge-${name}`,
-      target,
+        {
-      updatable,
+          updating,
-      selected,
+          selected,
-      animated,
+          animated,
-      label,
+          inactive: !selectable,
-      labelStyle,
+        },
-      labelShowBg,
+      ],
-      labelBgStyle,
+    },
-      labelBgPadding,
+    [
-      labelBgBorderRadius,
+      h(type as any, {
-      data,
+        id,
-      style,
+        sourceNode,
-      markerStart: `url(#${getMarkerId(markerStart)})`,
+        targetNode,
-      markerEnd: `url(#${getMarkerId(markerEnd)})`,
+        source,
-      sourcePosition,
+        target,
-      targetPosition,
+        updatable,
-      sourceX,
+        selected,
-      sourceY,
+        animated,
-      targetX,
+        label,
-      targetY,
+        labelStyle,
-      sourceHandleId,
+        labelShowBg,
-      targetHandleId,
+        labelBgStyle,
-    }),
+        labelBgPadding,
-    updatable
+        labelBgBorderRadius,
-      ? [
+        data,
-          h(
+        style,
-            'g',
+        markerStart: `url(#${getMarkerId(markerStart)})`,
-            {
+        markerEnd: `url(#${getMarkerId(markerEnd)})`,
-              onMouseDown: onEdgeUpdaterSourceMouseDown,
+        sourcePosition,
-              onMouseEnter: onEdgeUpdaterMouseEnter,
+        targetPosition,
-              onMouseOut: onEdgeUpdaterMouseOut,
+        sourceX,
-            },
+        sourceY,
-            h(EdgeAnchor, {
+        targetX,
-              position: sourcePosition,
+        targetY,
-              centerX: sourceX,
+        sourceHandleId,
-              centerY: sourceY,
+        targetHandleId,
-              radius: edgeUpdaterRadius,
+      }),
-            }),
+      updatable
-          ),
+        ? [
-          h(
+            h(
-            'g',
+              'g',
-            {
+              {
-              onMouseDown: onEdgeUpdaterTargetMouseDown,
+                onMouseDown: onEdgeUpdaterSourceMouseDown,
-              onMouseEnter: onEdgeUpdaterMouseEnter,
+                onMouseEnter: onEdgeUpdaterMouseEnter,
-              onMouseOut: onEdgeUpdaterMouseOut,
+                onMouseOut: onEdgeUpdaterMouseOut,
-            },
+              },
-            h(EdgeAnchor, {
+              h(EdgeAnchor, {
-              position: targetPosition,
+                position: sourcePosition,
-              centerX: targetX,
+                centerX: sourceX,
-              centerY: targetY,
+                centerY: sourceY,
-              radius: edgeUpdaterRadius,
+                radius: edgeUpdaterRadius,
-            }),
+              }),
-          ),
+            ),
-        ]
+            h(
-      : null,
+              'g',
-  ])
+              {
+                onMouseDown: onEdgeUpdaterTargetMouseDown,
+                onMouseEnter: onEdgeUpdaterMouseEnter,
+                onMouseOut: onEdgeUpdaterMouseOut,
+              },
+              h(EdgeAnchor, {
+                position: targetPosition,
+                centerX: targetX,
+                centerY: targetY,
+                radius: edgeUpdaterRadius,
+              }),
+            ),
+          ]
+        : null,
+    ],
+  )
 }
 
 Wrapper.props = [

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

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-import { CSSProperties } from 'vue'
+import type { CSSProperties } from 'vue'
 import EdgeWrapper from '../../components/Edges/Wrapper'
 import ConnectionLine from '../../components/ConnectionLine/ConnectionLine.vue'
 import { useHandle, useVueFlow } from '../../composables'
 import { connectionExists, groupEdgesByZLevel } from '../../utils'
-import { EdgeComponent, GraphEdge } from '../../types'
+import type { EdgeComponent, GraphEdge } from '../../types'
 import { Slots } from '../../context'
 import MarkerDefinitions from './MarkerDefinitions.vue'
 
@@ -143,16 +143,7 @@ const handleEdgeUpdater = (event: MouseEvent, edge: GraphEdge, isSourceHandle: b
 
 const getClass = (edge: GraphEdge) => {
   const extraClass = edge.class instanceof Function ? edge.class(edge) : edge.class
-  return [
+  return [noPanClassName, extraClass]
-    'vue-flow__edge',
-    noPanClassName,
-    {
-      selected: edge.selected,
-      animated: edge.animated,
-      inactive: !selectable,
-    },
-    extraClass,
-  ]
 }
 
 const getStyle = (edge: GraphEdge) => (edge.style instanceof Function ? edge.style(edge) : edge.style) as CSSProperties
@@ -195,7 +186,7 @@ export default {
         :style="getStyle(edge)"
         :class="getClass(edge)"
         @click="(e: MouseEvent) => onEdgeClick(e, edge)"
-        @dblClick="(e: MouseEvent) => onDoubleClick(e, edge)"
+        @dbl-click="(e: MouseEvent) => onDoubleClick(e, edge)"
         @contextmenu="(e: MouseEvent) => onEdgeContextMenu(e, edge)"
         @mouseenter="(e: MouseEvent) => onEdgeMouseEnter(e, edge)"
         @mousemove="(e: MouseEvent) => onEdgeMouseMove(e, edge)"