From d5a19cd1d89ffccd73572f8d6a2fa678d7ea8443 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sat, 21 May 2022 00:00:28 +0200
Subject: [PATCH] refactor(edges): move classes to `Wrapper.ts`

---
 .../vue-flow/src/components/Edges/Wrapper.ts  | 140 ++++++++++--------
 .../container/EdgeRenderer/EdgeRenderer.vue   |  17 +--
 2 files changed, 82 insertions(+), 75 deletions(-)

diff --git a/packages/vue-flow/src/components/Edges/Wrapper.ts b/packages/vue-flow/src/components/Edges/Wrapper.ts
index f02aa795..33aa8bc9 100644
--- a/packages/vue-flow/src/components/Edges/Wrapper.ts
+++ b/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 }] }, [
-    h(type as any, {
-      id,
-      sourceNode,
-      targetNode,
-      source,
-      target,
-      updatable,
-      selected,
-      animated,
-      label,
-      labelStyle,
-      labelShowBg,
-      labelBgStyle,
-      labelBgPadding,
-      labelBgBorderRadius,
-      data,
-      style,
-      markerStart: `url(#${getMarkerId(markerStart)})`,
-      markerEnd: `url(#${getMarkerId(markerEnd)})`,
-      sourcePosition,
-      targetPosition,
-      sourceX,
-      sourceY,
-      targetX,
-      targetY,
-      sourceHandleId,
-      targetHandleId,
-    }),
-    updatable
-      ? [
-          h(
-            'g',
-            {
-              onMouseDown: onEdgeUpdaterSourceMouseDown,
-              onMouseEnter: onEdgeUpdaterMouseEnter,
-              onMouseOut: onEdgeUpdaterMouseOut,
-            },
-            h(EdgeAnchor, {
-              position: sourcePosition,
-              centerX: sourceX,
-              centerY: sourceY,
-              radius: edgeUpdaterRadius,
-            }),
-          ),
-          h(
-            'g',
-            {
-              onMouseDown: onEdgeUpdaterTargetMouseDown,
-              onMouseEnter: onEdgeUpdaterMouseEnter,
-              onMouseOut: onEdgeUpdaterMouseOut,
-            },
-            h(EdgeAnchor, {
-              position: targetPosition,
-              centerX: targetX,
-              centerY: targetY,
-              radius: edgeUpdaterRadius,
-            }),
-          ),
-        ]
-      : null,
-  ])
+  return h(
+    'g',
+    {
+      class: [
+        'vue-flow__edge',
+        `vue-flow__edge-${name}`,
+        {
+          updating,
+          selected,
+          animated,
+          inactive: !selectable,
+        },
+      ],
+    },
+    [
+      h(type as any, {
+        id,
+        sourceNode,
+        targetNode,
+        source,
+        target,
+        updatable,
+        selected,
+        animated,
+        label,
+        labelStyle,
+        labelShowBg,
+        labelBgStyle,
+        labelBgPadding,
+        labelBgBorderRadius,
+        data,
+        style,
+        markerStart: `url(#${getMarkerId(markerStart)})`,
+        markerEnd: `url(#${getMarkerId(markerEnd)})`,
+        sourcePosition,
+        targetPosition,
+        sourceX,
+        sourceY,
+        targetX,
+        targetY,
+        sourceHandleId,
+        targetHandleId,
+      }),
+      updatable
+        ? [
+            h(
+              'g',
+              {
+                onMouseDown: onEdgeUpdaterSourceMouseDown,
+                onMouseEnter: onEdgeUpdaterMouseEnter,
+                onMouseOut: onEdgeUpdaterMouseOut,
+              },
+              h(EdgeAnchor, {
+                position: sourcePosition,
+                centerX: sourceX,
+                centerY: sourceY,
+                radius: edgeUpdaterRadius,
+              }),
+            ),
+            h(
+              'g',
+              {
+                onMouseDown: onEdgeUpdaterTargetMouseDown,
+                onMouseEnter: onEdgeUpdaterMouseEnter,
+                onMouseOut: onEdgeUpdaterMouseOut,
+              },
+              h(EdgeAnchor, {
+                position: targetPosition,
+                centerX: targetX,
+                centerY: targetY,
+                radius: edgeUpdaterRadius,
+              }),
+            ),
+          ]
+        : null,
+    ],
+  )
 }
 
 Wrapper.props = [
diff --git a/packages/vue-flow/src/container/EdgeRenderer/EdgeRenderer.vue b/packages/vue-flow/src/container/EdgeRenderer/EdgeRenderer.vue
index 595b87ad..2ccaee90 100644
--- a/packages/vue-flow/src/container/EdgeRenderer/EdgeRenderer.vue
+++ b/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 [
-    'vue-flow__edge',
-    noPanClassName,
-    {
-      selected: edge.selected,
-      animated: edge.animated,
-      inactive: !selectable,
-    },
-    extraClass,
-  ]
+  return [noPanClassName, 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)"