fix(core,edges): correct edge component prop types

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

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

@@ -1,9 +1,14 @@
 import type { FunctionalComponent } from 'vue'
 import BaseEdge from './BaseEdge'
 import { Position } from '~/types'
-import type { EdgeProps } from '~/types'
+import type { BaseEdgeProps, BezierPathOptions, EdgePositions, EdgeProps } from '~/types'
 
-const BezierEdge: FunctionalComponent<EdgeProps> = function (
+export type BezierEdgeProps = EdgePositions &
+  BezierPathOptions &
+  Omit<BaseEdgeProps, 'labelX' | 'labelY' | 'path'> &
+  Pick<EdgeProps, 'sourcePosition' | 'targetPosition'>
+
+const BezierEdge: FunctionalComponent<BezierEdgeProps> = function (
   { sourcePosition = Position.Bottom, targetPosition = Position.Top, ...props },
   { attrs },
 ) {

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

@@ -1,9 +1,13 @@
 import type { FunctionalComponent } from 'vue'
 import BaseEdge from './BaseEdge'
 import { Position } from '~/types'
-import type { EdgeProps } from '~/types'
+import type { BaseEdgeProps, EdgePositions, EdgeProps } from '~/types'
 
-const SimpleBezierEdge: FunctionalComponent<EdgeProps> = function (
+export type SimpleBezierEdgeProps = EdgePositions &
+  Omit<BaseEdgeProps, 'labelX' | 'labelY' | 'path'> &
+  Pick<EdgeProps, 'sourcePosition' | 'targetPosition'>
+
+const SimpleBezierEdge: FunctionalComponent<SimpleBezierEdgeProps> = function (
   { sourcePosition = Position.Bottom, targetPosition = Position.Top, ...props },
   { attrs },
 ) {

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

@@ -1,8 +1,13 @@
 import type { FunctionalComponent } from 'vue'
 import BaseEdge from './BaseEdge'
-import type { SmoothStepEdgeProps } from '~/types'
+import type { BaseEdgeProps, EdgePositions, EdgeProps, SmoothStepPathOptions } from '~/types'
 import { Position } from '~/types'
 
+export type SmoothStepEdgeProps = EdgePositions &
+  Omit<BaseEdgeProps, 'labelX' | 'labelY' | 'path'> &
+  Pick<EdgeProps, 'sourcePosition' | 'targetPosition'> &
+  SmoothStepPathOptions
+
 const SmoothStepEdge: FunctionalComponent<SmoothStepEdgeProps> = function (
   { sourcePosition = Position.Bottom, targetPosition = Position.Top, ...props },
   { attrs },
@@ -39,6 +44,7 @@ SmoothStepEdge.props = [
   'markerEnd',
   'markerStart',
   'interactionWidth',
+  'offset',
 ]
 
 SmoothStepEdge.inheritAttrs = false

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

@@ -1,8 +1,12 @@
 import type { FunctionalComponent } from 'vue'
 import SmoothStepEdge from './SmoothStepEdge'
-import type { EdgeProps } from '~/types'
+import type { BaseEdgeProps, EdgePositions, EdgeProps } from '~/types'
 
-const StepEdge: FunctionalComponent<EdgeProps> = function (props, { attrs }) {
+export type StepEdgeProps = EdgePositions &
+  Omit<BaseEdgeProps, 'labelX' | 'labelY' | 'path'> &
+  Pick<EdgeProps, 'sourcePosition' | 'targetPosition'>
+
+const StepEdge: FunctionalComponent<StepEdgeProps> = function (props, { attrs }) {
   return h(SmoothStepEdge, { ...props, ...attrs, borderRadius: 0 })
 }
 

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

@@ -1,8 +1,10 @@
 import type { FunctionalComponent } from 'vue'
 import BaseEdge from './BaseEdge'
-import type { EdgeProps } from '~/types'
+import type { BaseEdgeProps, EdgePositions } from '~/types'
 
-const StraightEdge: FunctionalComponent<EdgeProps> = function (props, { attrs }) {
+export type StraightEdgeProps = EdgePositions & Omit<BaseEdgeProps, 'labelX' | 'labelY' | 'path'>
+
+const StraightEdge: FunctionalComponent<StraightEdgeProps> = function (props, { attrs }) {
   const [path, labelX, labelY] = getStraightPath(props)
 
   return h(BaseEdge, {

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

@@ -1,9 +1,9 @@
 export { default as BaseEdge } from './BaseEdge'
-export { default as BezierEdge } from './BezierEdge'
+export { default as BezierEdge, BezierEdgeProps } from './BezierEdge'
-export { default as SimpleBezierEdge } from './SimpleBezierEdge'
+export { default as SimpleBezierEdge, SimpleBezierEdgeProps } from './SimpleBezierEdge'
-export { default as StepEdge } from './StepEdge'
+export { default as StepEdge, StepEdgeProps } from './StepEdge'
-export { default as SmoothStepEdge } from './SmoothStepEdge'
+export { default as SmoothStepEdge, SmoothStepEdgeProps } from './SmoothStepEdge'
-export { default as StraightEdge } from './StraightEdge'
+export { default as StraightEdge, StraightEdgeProps } from './StraightEdge'
 export { default as EdgeAnchor } from './EdgeAnchor'
 export { default as EdgeText } from './EdgeText.vue'
 export { default as EdgeWrapper } from './EdgeWrapper'

packages/core/src/index.ts

@@ -11,10 +11,15 @@ export { default as Panel } from './components/Panel/Panel.vue'
 
 export {
   StraightEdge,
+  StraightEdgeProps,
   StepEdge,
+  StepEdgeProps,
   BezierEdge,
+  BezierEdgeProps,
   SimpleBezierEdge,
+  SimpleBezierEdgeProps,
   SmoothStepEdge,
+  SmoothStepEdgeProps,
   BaseEdge,
   EdgeText,
   EdgeLabelRenderer,

packages/core/src/types/edge.ts

@@ -154,17 +154,13 @@ export type GraphEdge<Data = ElementData, CustomEvents extends Record<string, Cu
 } & EdgePositions
 
 /** these props are passed to edge components */
-export interface EdgeProps<Data = ElementData, CustomEvents = {}> {
+export interface EdgeProps<Data = ElementData, CustomEvents = {}> extends EdgeLabelOptions, EdgePositions {
   id: string
   sourceNode: GraphNode
   targetNode: GraphNode
   type?: keyof DefaultEdgeTypes | string
   label?: string | VNode | Component<EdgeTextProps> | Object
   style?: CSSProperties
-  sourceX: number
-  sourceY: number
-  targetX: number
-  targetY: number
   selected?: boolean
   sourcePosition: Position
   targetPosition: Position
@@ -172,11 +168,6 @@ export interface EdgeProps<Data = ElementData, CustomEvents = {}> {
   targetHandleId?: string
   source: string
   target: string
-  labelStyle?: CSSProperties
-  labelShowBg?: boolean
-  labelBgStyle?: any
-  labelBgPadding?: [number, number]
-  labelBgBorderRadius?: number
   animated?: boolean
   updatable?: boolean
   markerStart: string
@@ -188,21 +179,11 @@ export interface EdgeProps<Data = ElementData, CustomEvents = {}> {
   events: EdgeEventsOn<CustomEvents>
 }
 
-/** these props are passed to smooth step edges */
+export interface BaseEdgeProps extends EdgeLabelOptions {
-export interface SmoothStepEdgeProps<Data = ElementData, CustomEvents = {}> extends Omit<EdgeProps<Data, CustomEvents>, 'type'> {
-  borderRadius?: number
-}
-
-export interface BaseEdgeProps {
   labelX?: number
   labelY?: number
   path: string
   label?: any
-  labelStyle?: any
-  labelShowBg?: boolean
-  labelBgStyle?: any
-  labelBgPadding?: [number, number]
-  labelBgBorderRadius?: number
   markerStart?: string
   markerEnd?: string
   interactionWidth?: number

packages/core/src/types/node.ts

@@ -34,8 +34,10 @@ export interface Node<Data = ElementData, CustomEvents extends Record<string, Cu
   connectable?: HandleConnectable
   focusable?: boolean
   dragHandle?: string
+  // todo: deprecate this and remove them in next minor release
   /** called when used as target for new connection */
   isValidTargetPos?: ValidConnectionFunc
+  // todo: deprecate this and remove them in next minor release
   /** called when used as source for new connection */
   isValidSourcePos?: ValidConnectionFunc
   /** define node extent, i.e. area in which node can be moved */