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

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

Author: bcakmakoglu

.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,14 +2,15 @@ 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, {
  path,
  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