update(types!): Merge EdgeProps into Edge type

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

examples/EdgeWithButton/ButtonEdge.vue

@@ -1,17 +1,7 @@
 <script lang="ts" setup>
-import {
-  useHooks,
-  useStore,
-  getEdgeCenter,
-  getBezierPath,
-  getMarkerEnd,
-  ArrowHeadType,
-  EdgeProps,
-  ElementId,
-  Position,
-} from '~/index'
+import { useHooks, useStore, getEdgeCenter, getBezierPath, getMarkerEnd, ArrowHeadType, Edge, ElementId, Position } from '~/index'
 
-interface CustomEdgeProps<T = any> extends EdgeProps<T> {
+interface CustomEdgeProps<T = any> extends Edge<T> {
   id: ElementId
   sourceX: number
   sourceY: number

examples/Edges/CustomEdge.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { ArrowHeadType, ElementId, getBezierPath, getMarkerEnd, Position, EdgeProps } from '~/index'
 
-interface CustomEdgeProps<T = any> extends EdgeProps<T> {
+interface CustomEdgeProps<T = { text: string }> extends EdgeProps<T> {
   source: ElementId
   target: ElementId
   sourceHandleId?: ElementId

examples/Edges/CustomEdge2.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { getBezierPath, getMarkerEnd } from '~/components/Edges/utils'
-import { ArrowHeadType, EdgeProps, ElementId, getEdgeCenter, Position, EdgeText } from '~/index'
+import { ArrowHeadType, ElementId, getEdgeCenter, Position, EdgeText, EdgeProps } from '~/index'
 
-interface CustomEdgeProps<T = any> extends EdgeProps<T> {
+interface CustomEdgeProps extends EdgeProps {
   source: ElementId
   target: ElementId
   sourceHandleId?: ElementId
@@ -16,7 +16,7 @@ interface CustomEdgeProps<T = any> extends EdgeProps<T> {
   targetPosition: Position
   arrowHeadType?: ArrowHeadType
   markerEndId?: string
-  data?: T
+  data?: any
 }
 
 const props = defineProps<CustomEdgeProps>()

src/components/Edges/BezierEdge.vue

@@ -2,9 +2,9 @@
 import { CSSProperties } from 'vue'
 import { getCenter, getMarkerEnd, getBezierPath } from './utils'
 import EdgeText from './EdgeText.vue'
-import { ArrowHeadType, ElementId, Position } from '~/types'
+import { ArrowHeadType, EdgeProps, ElementId, Position } from '~/types'
 
-interface BezierEdgeProps {
+interface BezierEdgeProps extends EdgeProps {
   id: ElementId
   source: ElementId
   target: ElementId
@@ -14,8 +14,8 @@ interface BezierEdgeProps {
   targetY: number
   selected?: boolean
   animated?: boolean
-  sourcePosition?: Position
-  targetPosition?: Position
+  sourcePosition: Position
+  targetPosition: Position
   label?:
     | string
     | {

src/components/Edges/SmoothStepEdge.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import EdgeText from './EdgeText.vue'
 import { getCenter, getMarkerEnd, getSmoothStepPath } from './utils'
-import { ArrowHeadType, ElementId, Position } from '~/types'
+import { ArrowHeadType, EdgeProps, ElementId, Position } from '~/types'
 
-export interface EdgeSmoothStepProps {
+interface SmoothStepEdgeProps extends EdgeProps {
   id: ElementId
   source: ElementId
   target: ElementId
@@ -13,8 +13,8 @@ export interface EdgeSmoothStepProps {
   targetY: number
   selected?: boolean
   animated?: boolean
-  sourcePosition?: Position
-  targetPosition?: Position
+  sourcePosition: Position
+  targetPosition: Position
   label?:
     | string
     | {
@@ -35,7 +35,7 @@ export interface EdgeSmoothStepProps {
   targetHandleId?: ElementId | null
 }
 
-const props = withDefaults(defineProps<EdgeSmoothStepProps>(), {
+const props = withDefaults(defineProps<SmoothStepEdgeProps>(), {
   selected: false,
   sourcePosition: Position.Bottom,
   targetPosition: Position.Top,

src/components/Edges/StepEdge.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import SmoothStepEdge from './SmoothStepEdge.vue'
-import { ArrowHeadType, ElementId, Position } from '~/types'
+import { ArrowHeadType, EdgeProps, ElementId, Position } from '~/types'
 
-export interface EdgeStepProps {
+export interface StepEdgeProps extends EdgeProps {
   id: ElementId
   source: ElementId
   target: ElementId
@@ -12,8 +12,8 @@ export interface EdgeStepProps {
   targetY: number
   selected?: boolean
   animated?: boolean
-  sourcePosition?: Position
-  targetPosition?: Position
+  sourcePosition: Position
+  targetPosition: Position
   label?:
     | string
     | {
@@ -33,7 +33,7 @@ export interface EdgeStepProps {
   targetHandleId?: ElementId | null
 }
 
-const props = withDefaults(defineProps<EdgeStepProps>(), {
+const props = withDefaults(defineProps<StepEdgeProps>(), {
   selected: false,
   sourcePosition: Position.Bottom,
   targetPosition: Position.Top,

src/components/Edges/StraightEdge.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import EdgeText from './EdgeText.vue'
 import { getMarkerEnd, getBezierPath } from './utils'
-import { ArrowHeadType, ElementId, Position } from '~/types'
+import { ArrowHeadType, EdgeProps, ElementId, Position } from '~/types'
 
-interface StraightEdgeProps {
+interface StraightEdgeProps extends EdgeProps {
   id: ElementId
   source: ElementId
   target: ElementId
@@ -13,8 +13,8 @@ interface StraightEdgeProps {
   targetY: number
   selected?: boolean
   animated?: boolean
-  sourcePosition?: Position
-  targetPosition?: Position
+  sourcePosition: Position
+  targetPosition: Position
   label?:
     | string
     | {

src/types/edge.ts

@@ -1,4 +1,4 @@
-import { DefineComponent } from 'vue'
+import { CSSProperties, DefineComponent } from 'vue'
 import { ArrowHeadType, ElementId, Position } from './types'
 
 export interface Edge<T = any> {
@@ -6,8 +6,15 @@ export interface Edge<T = any> {
   type?: string
   source: ElementId
   target: ElementId
+  sourceX: number
+  sourceY: number
+  targetX: number
+  targetY: number
   sourceHandle?: ElementId | null
   targetHandle?: ElementId | null
+  selected?: boolean
+  sourcePosition?: Position
+  targetPosition?: Position
   label?:
     | string
     | {
@@ -19,41 +26,24 @@ export interface Edge<T = any> {
   labelBgStyle?: any
   labelBgPadding?: [number, number]
   labelBgBorderRadius?: number
-  style?: any
+  style?: CSSProperties
   animated?: boolean
   arrowHeadType?: ArrowHeadType
-  isHidden?: boolean
+  markerEndId?: string
   data?: T
   class?: string
+  isHidden?: boolean
 }
 
-export interface EdgeProps<T = any> {
-  id: ElementId
-  source: ElementId
-  target: ElementId
+export interface EdgeProps<T = any> extends Edge<T> {
   sourceX: number
   sourceY: number
   targetX: number
   targetY: number
   selected?: boolean
-  animated?: boolean
   sourcePosition: Position
   targetPosition: Position
-  label?:
-    | string
-    | {
-        component: any
-        props?: any
-      }
-  labelStyle?: any
-  labelShowBg?: boolean
-  labelBgStyle?: any
-  labelBgPadding?: [number, number]
-  labelBgBorderRadius?: number
-  style?: any
-  arrowHeadType?: ArrowHeadType
   markerEndId?: string
-  data?: T
   sourceHandleId?: ElementId | null
   targetHandleId?: ElementId | null
 }