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

packages/pathfinding-edge/README.md

@@ -1,6 +1,6 @@
 # Vue Flow Pathfinding Edge 🧲
 
-### Custom Edge that avoids crossing other Nodes
+__Custom edge that avoids crossing nodes__
 
 ## 🛠 Setup
 

packages/pathfinding-edge/example/App.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
-import { VueFlow, MiniMap, Controls, Background, Connection, Edge, Elements, FlowInstance, addEdge } from '@braks/vue-flow'
+import type { Connection, Edge, Elements, FlowInstance } from '@braks/vue-flow'
+import { Background, VueFlow, addEdge } from '@braks/vue-flow'
 import initialElements from './elements'
-import { PathFindingEdge } from '~/index'
+import { PathFindingEdge, PerfectArrow } from '~/index'
 
 const elements = ref<Elements>(initialElements)
 const rfInstance = ref<FlowInstance | null>(null)
@@ -11,21 +12,31 @@ const onLoad = (flowInstance: FlowInstance) => {
   rfInstance.value = flowInstance
 }
 </script>
+
 <template>
   <div style="height: 100%">
-    <VueFlow v-model="elements" class="vue-flow-basic-example" @connect="onConnect" @pane-ready="onLoad">
+    <VueFlow
+      v-model="elements"
+      :default-edge-options="{ type: 'perfectArrow' }"
+      class="vue-flow-basic-example"
+      @connect="onConnect"
+      @pane-ready="onLoad"
+    >
       <template #edge-pathFinding="props">
         <PathFindingEdge v-bind="props" />
       </template>
-      <Controls />
-      <MiniMap />
+      <template #edge-perfectArrow="props">
+        <PerfectArrow v-bind="props" />
+      </template>
+
       <Background color="#aaa" :gap="8" />
     </VueFlow>
   </div>
 </template>
+
 <style>
-@import '../node_modules/@braks/vue-flow/dist/style.css';
-@import '../node_modules/@braks/vue-flow/dist/theme-default.css';
+@import '@braks/vue-flow/dist/style.css';
+@import '@braks/vue-flow/dist/theme-default.css';
 
 html,
 body,

packages/pathfinding-edge/example/elements.ts

@@ -1,7 +1,7 @@
-import type { Elements } from '@braks/vue-flow'
+import type { EdgeMarkerType, Elements } from '@braks/vue-flow'
 import { MarkerType } from '@braks/vue-flow'
 
-const markerEnd = MarkerType.Arrow
+const markerEnd: EdgeMarkerType = MarkerType.Arrow
 
 export default [
   {
@@ -101,7 +101,8 @@ export default [
     id: 'e2c2d',
     source: '2c',
     target: '2d',
-    type: 'pathFinding',
+    type: 'perfectArrow',
+    label: 'perfect arrow',
     markerEnd,
   },
   {

packages/pathfinding-edge/package.json

@@ -42,6 +42,7 @@
     "typescript-transform-paths": "^3.3.1",
     "unplugin-auto-import": "^0.7.1",
     "vite": "^2.9.9",
+    "vite-plugin-vue-type-imports": "^0.2.0",
     "vue-tsc": "^0.34.12"
   },
   "peerDependencies": {

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
+}

packages/pathfinding-edge/vite.config.ts

@@ -1,6 +1,7 @@
 import { resolve } from 'path'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import vueTypes from 'vite-plugin-vue-type-imports'
 import AutoImport from 'unplugin-auto-import/vite'
 
 // https://vitejs.dev/config/
@@ -36,12 +37,10 @@ export default defineConfig({
   },
   plugins: [
     vue(),
+    vueTypes(),
     AutoImport({
       imports: ['vue'],
       dts: 'src/auto-imports.d.ts',
     }),
   ],
-  optimizeDeps: {
-    include: ['@braks/vue-flow', 'vue'],
-  },
 })

yarn.lock

@@ -8506,6 +8506,11 @@ vite-plugin-vue-type-imports@^0.1.3:
   resolved "https://registry.yarnpkg.com/vite-plugin-vue-type-imports/-/vite-plugin-vue-type-imports-0.1.3.tgz#06edf2da7abdd3367217842e69b6ed7f506a3919"
   integrity sha512-iF5NgeQc2MZ6wDUS1tnN7rglkWmm+WhK9rCQb3FudsrMTqLazbtN6shyrEcsGBdqYAqH9c5HhiwU3gOIrFcVHA==
 
+vite-plugin-vue-type-imports@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/vite-plugin-vue-type-imports/-/vite-plugin-vue-type-imports-0.2.0.tgz#bf2925ad730aa9f658c1f4b447bce12a6f641152"
+  integrity sha512-6rukBj1MP27WfsY5gqMZJg/Z8whK7f9oLbpICBDwzwOK2Oj7KkbP7IgFc2p3qInuB51SvUuxIIcJQVoUPaW6Nw==
+
 vite-plugin-windicss@^1.8.3:
   version "1.8.3"
   resolved "https://registry.yarnpkg.com/vite-plugin-windicss/-/vite-plugin-windicss-1.8.3.tgz#d5fe923ad60f5d80f153a4fae5f837d56caa25cb"