diff --git a/.changeset/cyan-tips-add.md b/.changeset/cyan-tips-add.md new file mode 100644 index 00000000..c2074c96 --- /dev/null +++ b/.changeset/cyan-tips-add.md @@ -0,0 +1,5 @@ +--- +'@vue-flow/core': patch +--- + +Add missing edge class to edge wrapper diff --git a/packages/core/src/components/Edges/BaseEdge.ts b/packages/core/src/components/Edges/BaseEdge.ts index 2ae5f27f..3ad9eb92 100644 --- a/packages/core/src/components/Edges/BaseEdge.ts +++ b/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 = function ({ - path, - label, - labelX, - labelY, - labelBgBorderRadius, - labelBgPadding, - labelBgStyle, - labelShowBg = true, - labelStyle, - markerStart, - markerEnd, - style, - interactionWidth = 20, -}) { +const BaseEdge: FunctionalComponent = 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', ] diff --git a/packages/core/src/components/Edges/BezierEdge.ts b/packages/core/src/components/Edges/BezierEdge.ts index 59621e61..09467919 100644 --- a/packages/core/src/components/Edges/BezierEdge.ts +++ b/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 = function ({ - sourcePosition = Position.Bottom, - targetPosition = Position.Top, - ...props -}) { +const BezierEdge: FunctionalComponent = function ( + { sourcePosition = Position.Bottom, targetPosition = Position.Top, ...props }, + { attrs }, +) { const [path, labelX, labelY] = getBezierPath({ sourcePosition, targetPosition, @@ -19,6 +18,7 @@ const BezierEdge: FunctionalComponent = function ({ labelX, labelY, ...props, + ...attrs, }) } @@ -38,7 +38,6 @@ BezierEdge.props = [ 'curvature', 'markerEnd', 'markerStart', - 'style', 'interactionWidth', ] diff --git a/packages/core/src/components/Edges/EdgeWrapper.ts b/packages/core/src/components/Edges/EdgeWrapper.ts index 79a0143f..1a7eed61 100644 --- a/packages/core/src/components/Edges/EdgeWrapper.ts +++ b/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, diff --git a/packages/core/src/components/Edges/SimpleBezierEdge.ts b/packages/core/src/components/Edges/SimpleBezierEdge.ts index 78ef1e55..f639c525 100644 --- a/packages/core/src/components/Edges/SimpleBezierEdge.ts +++ b/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 = function ({ - sourcePosition = Position.Bottom, - targetPosition = Position.Top, - ...props -}) { +const SimpleBezierEdge: FunctionalComponent = function ( + { sourcePosition = Position.Bottom, targetPosition = Position.Top, ...props }, + { attrs }, +) { const [path, labelX, labelY] = getSimpleBezierPath({ sourcePosition, targetPosition, @@ -19,6 +18,7 @@ const SimpleBezierEdge: FunctionalComponent = function ({ labelX, labelY, ...props, + ...attrs, }) } @@ -37,7 +37,6 @@ SimpleBezierEdge.props = [ 'targetY', 'markerEnd', 'markerStart', - 'style', 'interactionWidth', ] diff --git a/packages/core/src/components/Edges/SmoothStepEdge.ts b/packages/core/src/components/Edges/SmoothStepEdge.ts index ea855718..ce1fc546 100644 --- a/packages/core/src/components/Edges/SmoothStepEdge.ts +++ b/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 = function ({ - sourcePosition = Position.Bottom, - targetPosition = Position.Top, - ...props -}) { +const SmoothStepEdge: FunctionalComponent = function ( + { sourcePosition = Position.Bottom, targetPosition = Position.Top, ...props }, + { attrs }, +) { const [path, labelX, labelY] = getSmoothStepPath({ sourcePosition, targetPosition, @@ -19,6 +18,7 @@ const SmoothStepEdge: FunctionalComponent = function ({ labelX, labelY, ...props, + ...attrs, }) } @@ -38,7 +38,6 @@ SmoothStepEdge.props = [ 'borderRadius', 'markerEnd', 'markerStart', - 'style', 'interactionWidth', ] diff --git a/packages/core/src/components/Edges/StepEdge.ts b/packages/core/src/components/Edges/StepEdge.ts index 86b2b9a2..376bf14b 100644 --- a/packages/core/src/components/Edges/StepEdge.ts +++ b/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 = function (props) { - return h(SmoothStepEdge, { ...props, borderRadius: 0 }) +const StepEdge: FunctionalComponent = function (props, { attrs }) { + return h(SmoothStepEdge, { ...props, ...attrs, borderRadius: 0 }) } StepEdge.props = [ @@ -21,7 +21,6 @@ StepEdge.props = [ 'targetY', 'markerEnd', 'markerStart', - 'style', 'interactionWidth', ] diff --git a/packages/core/src/components/Edges/StraightEdge.ts b/packages/core/src/components/Edges/StraightEdge.ts index 0db18e89..06b477aa 100644 --- a/packages/core/src/components/Edges/StraightEdge.ts +++ b/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 = function (props) { +const StraightEdge: FunctionalComponent = function (props, { attrs }) { const [path, labelX, labelY] = getStraightPath(props) return h(BaseEdge, { @@ -10,6 +10,7 @@ const StraightEdge: FunctionalComponent = function (props) { labelX, labelY, ...props, + ...attrs, }) } @@ -26,7 +27,6 @@ StraightEdge.props = [ 'targetY', 'markerEnd', 'markerStart', - 'style', 'interactionWidth', ] diff --git a/packages/core/src/types/edge.ts b/packages/core/src/types/edge.ts index d57c8bbb..362d63b2 100644 --- a/packages/core/src/types/edge.ts +++ b/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