feat(pathfinding-edge): add and export props type

packages/pathfinding-edge/src/arrow/PerfectArrow.vue

@@ -1,50 +1,16 @@
 <script lang="ts" setup>
-import type { EdgeTextProps, Position } from '@braks/vue-flow'
 import { EdgeText, getEdgeCenter } from '@braks/vue-flow'
-import type { CSSProperties, DefineComponent } from 'vue'
-import type { ArrowOptions } from 'perfect-arrows'
+import type { CSSProperties } from 'vue'
 import { getArrow } from 'perfect-arrows'
+import type { PerfectArrowProps } from '../types'
 
-const props = withDefaults(
-  defineProps<{
-    id: string
-    source: string
-    target: string
-    sourceX: number
-    sourceY: number
-    targetX: number
-    targetY: number
-    selected?: boolean
-    animated?: boolean
-    sourcePosition: Position
-    targetPosition: Position
-    label?:
-      | string
-      | {
-          component: DefineComponent<EdgeTextProps>
-          props?: EdgeTextProps
-        }
-    labelStyle?: any
-    labelShowBg?: boolean
-    labelBgStyle?: any
-    labelBgPadding?: [number, number]
-    labelBgBorderRadius?: number
-    style?: CSSProperties
-    markerEnd?: string
-    markerStart?: string
-    data?: any
-    sourceHandleId?: string
-    targetHandleId?: string
-    options?: ArrowOptions
-  }>(),
-  {
-    options: () => ({
-      padStart: 3,
-      padEnd: 3,
-      stretch: 0.2,
-    }),
-  },
-)
+const props = withDefaults(defineProps<PerfectArrowProps>(), {
+  options: () => ({
+    padStart: 3,
+    padEnd: 3,
+    stretch: 0.2,
+  }),
+})
 
 const centered = computed(() =>
   getEdgeCenter({

packages/pathfinding-edge/src/edge/PathFindingEdge.vue

@@ -1,59 +1,28 @@
 <script lang="ts" setup>
-import type { CSSProperties, Component, DefineComponent } from 'vue'
-import type { EdgeTextProps, GraphNode } from '@braks/vue-flow'
-import { BezierEdge, EdgeText, Position, getEdgeCenter } from '@braks/vue-flow'
+import type { Position } from '@braks/vue-flow'
+import { BezierEdge, EdgeText, getEdgeCenter, useVueFlow } from '@braks/vue-flow'
+import type { PathFindingEdgeProps } from '../types'
 import { createGrid, gridRatio } from './createGrid'
 import { drawSmoothLinePath } from './drawSvgPath'
 import { generatePath } from './generatePath'
 import { getBoundingBoxes } from './getBoundingBoxes'
 import { gridToGraphPoint } from './pointConversion'
 
-const props = withDefaults(
-  defineProps<{
-    nodes: GraphNode[]
-    id: string
-    source: string
-    target: string
-    sourceX: number
-    sourceY: number
-    targetX: number
-    targetY: number
-    selected?: boolean
-    animated?: boolean
-    sourcePosition: Position
-    targetPosition: Position
-    label?:
-      | string
-      | {
-          component: Component<EdgeTextProps> | DefineComponent<EdgeTextProps>
-          props?: EdgeTextProps
-        }
-    labelStyle?: any
-    labelShowBg?: boolean
-    labelBgStyle?: any
-    labelBgPadding?: [number, number]
-    labelBgBorderRadius?: number
-    style?: CSSProperties
-    markerEnd?: string
-    markerStart?: string
-    data?: any
-    sourceHandleId?: string
-    targetHandleId?: string
-  }>(),
-  {
-    selected: false,
-    sourcePosition: Position.Bottom,
-    targetPosition: Position.Top,
-    labelStyle: () => ({}),
-    labelShowBg: true,
-    labelBgStyle: () => ({}),
-  },
-)
+const props = withDefaults(defineProps<PathFindingEdgeProps>(), {
+  selected: false,
+  sourcePosition: 'bottom' as Position,
+  targetPosition: 'top' as Position,
+  labelStyle: () => ({}),
+  labelShowBg: true,
+  labelBgStyle: () => ({}),
+})
 
 const nodePadding = 10
 const graphPadding = 20
 const roundCoordinatesTo = gridRatio
 
+const { getNodes } = useVueFlow()
+
 const centered = computed(() =>
   getEdgeCenter({
     ...props,
@@ -70,14 +39,14 @@ const target = computed(() => ({
   position: props.targetPosition,
 }))
 
-// We use the nodes information to generate bounding boxes for them
+// We use the nodes' information to generate bounding boxes for them
 // and the graph
-const bb = computed(() => getBoundingBoxes(props.nodes, nodePadding, graphPadding, roundCoordinatesTo))
+const bb = computed(() => getBoundingBoxes(getNodes.value, nodePadding, graphPadding, roundCoordinatesTo))
 
 const gridPath = computed(() => {
   let path: number[][] = []
 
-  if (target.value.x && source.value.x && props.nodes.length) {
+  if (target.value.x && source.value.x && getNodes.value.length) {
     // We then can use the grid representation to do pathfinding
     // With this information, we can create a 2D grid representation of
     // our graph, that tells us where in the graph there is a "free" space or not

packages/pathfinding-edge/src/index.ts

@@ -1,2 +1,3 @@
 export { default as PathFindingEdge } from './edge/PathFindingEdge.vue'
 export { default as PerfectArrow } from './arrow/PerfectArrow.vue'
+export * from './types'

packages/pathfinding-edge/src/types.ts

@@ -0,0 +1,54 @@
+import type { EdgeProps, Position } from '@braks/vue-flow'
+import type { CSSProperties } from 'vue'
+import type { ArrowOptions } from 'perfect-arrows'
+
+export interface PathFindingEdgeProps extends EdgeProps<never> {
+  id: string
+  source: string
+  target: string
+  sourceX: number
+  sourceY: number
+  targetX: number
+  targetY: number
+  selected?: boolean
+  animated?: boolean
+  sourcePosition: Position
+  targetPosition: Position
+  label?: EdgeProps['label']
+  labelStyle?: any
+  labelShowBg?: boolean
+  labelBgStyle?: any
+  labelBgPadding?: [number, number]
+  labelBgBorderRadius?: number
+  style?: CSSProperties
+  markerEnd?: string
+  markerStart?: string
+  sourceHandleId?: string
+  targetHandleId?: string
+}
+
+export interface PerfectArrowProps {
+  id: string
+  source: string
+  target: string
+  sourceX: number
+  sourceY: number
+  targetX: number
+  targetY: number
+  selected?: boolean
+  animated?: boolean
+  sourcePosition: Position
+  targetPosition: Position
+  label?: EdgeProps['label']
+  labelStyle?: any
+  labelShowBg?: boolean
+  labelBgStyle?: any
+  labelBgPadding?: [number, number]
+  labelBgBorderRadius?: number
+  style?: CSSProperties
+  markerEnd?: string
+  markerStart?: string
+  sourceHandleId?: string
+  targetHandleId?: string
+  options?: ArrowOptions
+}