fix(edges): add missing edge class to edge wrapper

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

.changeset/cyan-tips-add.md

@@ -0,0 +1,5 @@
+---
+'@vue-flow/core': patch
+---
+
+Add missing edge class to edge wrapper

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

@@ -6,26 +6,28 @@ import type { BaseEdgeProps } from '~/types'
  * The base edge is a simple wrapper for svg path
  * You can use the base edge in your custom edges and just pass down the necessary props
  */
-const BaseEdge: FunctionalComponent<BaseEdgeProps> = function ({
-  path,
-  label,
-  labelX,
-  labelY,
-  labelBgBorderRadius,
-  labelBgPadding,
-  labelBgStyle,
-  labelShowBg = true,
-  labelStyle,
-  markerStart,
-  markerEnd,
-  style,
-  interactionWidth = 20,
-}) {
+const BaseEdge: FunctionalComponent<BaseEdgeProps> = function (
+  {
+    path,
+    label,
+    labelX,
+    labelY,
+    labelBgBorderRadius,
+    labelBgPadding,
+    labelBgStyle,
+    labelShowBg = true,
+    labelStyle,
+    markerStart,
+    markerEnd,
+    interactionWidth = 20,
+  },
+  { attrs },
+) {
   return [
     h('path', {
-      'style': style,
+      'style': attrs.style,
+      'class': ['vue-flow__edge-path', attrs.class].join(' '),
       'd': path,
-      'class': 'vue-flow__edge-path',
       'marker-end': markerEnd,
       'marker-start': markerStart,
     }),
@@ -64,7 +66,6 @@ BaseEdge.props = [
   'labelStyle',
   'markerStart',
   'markerEnd',
-  'style',
   'interactionWidth',
 ]
 

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

@@ -3,11 +3,10 @@ import BaseEdge from './BaseEdge'
 import { Position } from '~/types'
 import type { EdgeProps } from '~/types'
 
-const BezierEdge: FunctionalComponent<EdgeProps> = function ({
-  sourcePosition = Position.Bottom,
-  targetPosition = Position.Top,
-  ...props
-}) {
+const BezierEdge: FunctionalComponent<EdgeProps> = function (
+  { sourcePosition = Position.Bottom, targetPosition = Position.Top, ...props },
+  { attrs },
+) {
   const [path, labelX, labelY] = getBezierPath({
     sourcePosition,
     targetPosition,
@@ -19,6 +18,7 @@ const BezierEdge: FunctionalComponent<EdgeProps> = function ({
     labelX,
     labelY,
     ...props,
+    ...attrs,
   })
 }
 
@@ -38,7 +38,6 @@ BezierEdge.props = [
   'curvature',
   'markerEnd',
   'markerStart',
-  'style',
   'interactionWidth',
 ]
 

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

@@ -137,6 +137,9 @@ const EdgeWrapper = defineComponent({
         targetPosition,
       )
 
+      const edgeClass = edge.class instanceof Function ? edge.class(edge) : edge.class
+      const edgeStyle = edge.style instanceof Function ? edge.style(edge) : edge.style
+
       return h(
         'g',
         {
@@ -145,6 +148,7 @@ const EdgeWrapper = defineComponent({
           'class': [
             'vue-flow__edge',
             `vue-flow__edge-${props.type === false ? 'default' : props.name}`,
+            edgeClass,
             {
               updating: mouseOver,
               selected: edge.selected,
@@ -180,7 +184,7 @@ const EdgeWrapper = defineComponent({
                 labelBgBorderRadius: edge.labelBgBorderRadius,
                 data: edge.data,
                 events: { ...edge.events, ...hooks.on },
-                style: edge.style instanceof Function ? edge.style(edge) : edge.style,
+                style: edgeStyle,
                 markerStart: `url(#${getMarkerId(edge.markerStart)})`,
                 markerEnd: `url(#${getMarkerId(edge.markerEnd)})`,
                 sourcePosition,

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

@@ -3,11 +3,10 @@ import BaseEdge from './BaseEdge'
 import { Position } from '~/types'
 import type { EdgeProps } from '~/types'
 
-const SimpleBezierEdge: FunctionalComponent<EdgeProps> = function ({
-  sourcePosition = Position.Bottom,
-  targetPosition = Position.Top,
-  ...props
-}) {
+const SimpleBezierEdge: FunctionalComponent<EdgeProps> = function (
+  { sourcePosition = Position.Bottom, targetPosition = Position.Top, ...props },
+  { attrs },
+) {
   const [path, labelX, labelY] = getSimpleBezierPath({
     sourcePosition,
     targetPosition,
@@ -19,6 +18,7 @@ const SimpleBezierEdge: FunctionalComponent<EdgeProps> = function ({
     labelX,
     labelY,
     ...props,
+    ...attrs,
   })
 }
 
@@ -37,7 +37,6 @@ SimpleBezierEdge.props = [
   'targetY',
   'markerEnd',
   'markerStart',
-  'style',
   'interactionWidth',
 ]
 

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

@@ -3,11 +3,10 @@ import BaseEdge from './BaseEdge'
 import type { SmoothStepEdgeProps } from '~/types'
 import { Position } from '~/types'
 
-const SmoothStepEdge: FunctionalComponent<SmoothStepEdgeProps> = function ({
-  sourcePosition = Position.Bottom,
-  targetPosition = Position.Top,
-  ...props
-}) {
+const SmoothStepEdge: FunctionalComponent<SmoothStepEdgeProps> = function (
+  { sourcePosition = Position.Bottom, targetPosition = Position.Top, ...props },
+  { attrs },
+) {
   const [path, labelX, labelY] = getSmoothStepPath({
     sourcePosition,
     targetPosition,
@@ -19,6 +18,7 @@ const SmoothStepEdge: FunctionalComponent<SmoothStepEdgeProps> = function ({
     labelX,
     labelY,
     ...props,
+    ...attrs,
   })
 }
 
@@ -38,7 +38,6 @@ SmoothStepEdge.props = [
   'borderRadius',
   'markerEnd',
   'markerStart',
-  'style',
   'interactionWidth',
 ]
 

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

@@ -2,8 +2,8 @@ import type { FunctionalComponent } from 'vue'
 import SmoothStepEdge from './SmoothStepEdge'
 import type { EdgeProps } from '~/types'
 
-const StepEdge: FunctionalComponent<EdgeProps> = function (props) {
-  return h(SmoothStepEdge, { ...props, borderRadius: 0 })
+const StepEdge: FunctionalComponent<EdgeProps> = function (props, { attrs }) {
+  return h(SmoothStepEdge, { ...props, ...attrs, borderRadius: 0 })
 }
 
 StepEdge.props = [
@@ -21,7 +21,6 @@ StepEdge.props = [
   'targetY',
   'markerEnd',
   'markerStart',
-  'style',
   'interactionWidth',
 ]
 

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

@@ -2,7 +2,7 @@ import type { FunctionalComponent } from 'vue'
 import BaseEdge from './BaseEdge'
 import type { EdgeProps } from '~/types'
 
-const StraightEdge: FunctionalComponent<EdgeProps> = function (props) {
+const StraightEdge: FunctionalComponent<EdgeProps> = function (props, { attrs }) {
   const [path, labelX, labelY] = getStraightPath(props)
 
   return h(BaseEdge, {
@@ -10,6 +10,7 @@ const StraightEdge: FunctionalComponent<EdgeProps> = function (props) {
     labelX,
     labelY,
     ...props,
+    ...attrs,
   })
 }
 
@@ -26,7 +27,6 @@ StraightEdge.props = [
   'targetY',
   'markerEnd',
   'markerStart',
-  'style',
   'interactionWidth',
 ]
 

packages/core/src/types/edge.ts

@@ -160,7 +160,6 @@ export interface BaseEdgeProps {
   labelY: number
   path: string
   label?: any
-  style?: CSSProperties
   labelStyle?: any
   labelShowBg?: boolean
   labelBgStyle?: any