chore: update pathfinding edge pkg

packages/pathfinding-edge/env.d.ts

@@ -1,3 +1,6 @@
+/// <reference types="vite/client" />
+/// <reference types="vue/macros-global" />
+
 declare module '*.vue' {
   import type { DefineComponent } from 'vue'
   // eslint-disable-next-line @typescript-eslint/ban-types

packages/pathfinding-edge/package.json

@@ -20,7 +20,8 @@
   "scripts": {
     "prepare": "ts-patch install -s",
     "dev": "vite",
-    "build": "yarn prepare && vite build && vue-tsc --declaration --emitDeclarationOnly && tsc",
+    "build": "vite build",
+    "types": "yarn prepare && vue-tsc --declaration --emitDeclarationOnly && shx rm -rf tmp",
     "postbuild": "shx rm -rf tmp",
     "prepublishOnly": "yarn build",
     "test": "exit 0;",
@@ -28,6 +29,7 @@
     "lint": "yarn lint:js"
   },
   "dependencies": {
+    "@braks/vue-flow": "^0.4.10",
     "@vueuse/core": "^8.4.2",
     "pathfinding": "^0.4.18",
     "perfect-arrows": "^0.3.7"

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

@@ -1,47 +1,50 @@
 <script lang="ts" setup>
-import { EdgeProps, EdgeTextProps, getEdgeCenter, Position, EdgeText } from '@braks/vue-flow'
+import type { EdgeTextProps, Position } from '@braks/vue-flow'
-import { CSSProperties, DefineComponent } from 'vue'
+import { EdgeText, getEdgeCenter } from '@braks/vue-flow'
-import { ArrowOptions, getArrow } from 'perfect-arrows'
+import type { CSSProperties, DefineComponent } from 'vue'
+import type { ArrowOptions } from 'perfect-arrows'
+import { getArrow } from 'perfect-arrows'
 
-interface PerfectArrowProps extends EdgeProps {
+const props = withDefaults(
-  id: string
+  defineProps<{
-  source: string
+    id: string
-  target: string
+    source: string
-  sourceX: number
+    target: string
-  sourceY: number
+    sourceX: number
-  targetX: number
+    sourceY: number
-  targetY: number
+    targetX: number
-  selected?: boolean
+    targetY: number
-  animated?: boolean
+    selected?: boolean
-  sourcePosition: Position
+    animated?: boolean
-  targetPosition: Position
+    sourcePosition: Position
-  label?:
+    targetPosition: Position
-    | string
+    label?:
-    | {
+      | string
-        component: DefineComponent<EdgeTextProps>
+      | {
-        props?: EdgeTextProps
+          component: DefineComponent<EdgeTextProps>
-      }
+          props?: EdgeTextProps
-  labelStyle?: any
+        }
-  labelShowBg?: boolean
+    labelStyle?: any
-  labelBgStyle?: any
+    labelShowBg?: boolean
-  labelBgPadding?: [number, number]
+    labelBgStyle?: any
-  labelBgBorderRadius?: number
+    labelBgPadding?: [number, number]
-  style?: CSSProperties
+    labelBgBorderRadius?: number
-  markerEnd?: string
+    style?: CSSProperties
-  markerStart?: string
+    markerEnd?: string
-  data?: any
+    markerStart?: string
-  sourceHandleId?: string
+    data?: any
-  targetHandleId?: string
+    sourceHandleId?: string
-  options?: ArrowOptions
+    targetHandleId?: string
-}
+    options?: ArrowOptions
-
+  }>(),
-const props = withDefaults(defineProps<PerfectArrowProps>(), {
+  {
-  options: () => ({
+    options: () => ({
-    padStart: 3,
+      padStart: 3,
-    padEnd: 3,
+      padEnd: 3,
-    stretch: 0.2,
+      stretch: 0.2,
-  }),
+    }),
-})
+  },
+)
 
 const centered = computed(() =>
   getEdgeCenter({
@@ -57,12 +60,14 @@ const arrow = computed(() => {
 
 const attrs = useAttrs() as { style: CSSProperties }
 </script>
+
 <script lang="ts">
 export default {
   name: 'PerfectArrow',
   inheritAttrs: false,
 }
 </script>
+
 <template>
   <path
     :style="{ ...props.style, ...attrs.style }"

packages/pathfinding-edge/src/auto-imports.d.ts

@@ -3,14 +3,17 @@
 declare global {
   const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
   const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
-  const biSyncRef: typeof import('@vueuse/core')['biSyncRef']
   const computed: typeof import('vue')['computed']
+  const computedAsync: typeof import('@vueuse/core')['computedAsync']
+  const computedEager: typeof import('@vueuse/core')['computedEager']
   const computedInject: typeof import('@vueuse/core')['computedInject']
+  const computedWithControl: typeof import('@vueuse/core')['computedWithControl']
   const controlledComputed: typeof import('@vueuse/core')['controlledComputed']
   const controlledRef: typeof import('@vueuse/core')['controlledRef']
   const createApp: typeof import('vue')['createApp']
   const createEventHook: typeof import('@vueuse/core')['createEventHook']
   const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
+  const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
   const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
   const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
   const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
@@ -31,6 +34,9 @@ declare global {
   const isDefined: typeof import('@vueuse/core')['isDefined']
   const isReadonly: typeof import('vue')['isReadonly']
   const isRef: typeof import('vue')['isRef']
+  const logicAnd: typeof import('@vueuse/core')['logicAnd']
+  const logicNot: typeof import('@vueuse/core')['logicNot']
+  const logicOr: typeof import('@vueuse/core')['logicOr']
   const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
   const markRaw: typeof import('vue')['markRaw']
   const nextTick: typeof import('vue')['nextTick']
@@ -42,6 +48,7 @@ declare global {
   const onDeactivated: typeof import('vue')['onDeactivated']
   const onErrorCaptured: typeof import('vue')['onErrorCaptured']
   const onKeyStroke: typeof import('@vueuse/core')['onKeyStroke']
+  const onLongPress: typeof import('@vueuse/core')['onLongPress']
   const onMounted: typeof import('vue')['onMounted']
   const onRenderTracked: typeof import('vue')['onRenderTracked']
   const onRenderTriggered: typeof import('vue')['onRenderTriggered']
@@ -55,14 +62,22 @@ declare global {
   const reactify: typeof import('@vueuse/core')['reactify']
   const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
   const reactive: typeof import('vue')['reactive']
+  const reactiveComputed: typeof import('@vueuse/core')['reactiveComputed']
+  const reactiveOmit: typeof import('@vueuse/core')['reactiveOmit']
   const reactivePick: typeof import('@vueuse/core')['reactivePick']
   const readonly: typeof import('vue')['readonly']
   const ref: typeof import('vue')['ref']
+  const refAutoReset: typeof import('@vueuse/core')['refAutoReset']
+  const refDebounced: typeof import('@vueuse/core')['refDebounced']
   const refDefault: typeof import('@vueuse/core')['refDefault']
+  const refThrottled: typeof import('@vueuse/core')['refThrottled']
+  const refWithControl: typeof import('@vueuse/core')['refWithControl']
+  const resolveComponent: typeof import('vue')['resolveComponent']
   const shallowReactive: typeof import('vue')['shallowReactive']
   const shallowReadonly: typeof import('vue')['shallowReadonly']
   const shallowRef: typeof import('vue')['shallowRef']
   const syncRef: typeof import('@vueuse/core')['syncRef']
+  const syncRefs: typeof import('@vueuse/core')['syncRefs']
   const templateRef: typeof import('@vueuse/core')['templateRef']
   const throttledRef: typeof import('@vueuse/core')['throttledRef']
   const throttledWatch: typeof import('@vueuse/core')['throttledWatch']
@@ -71,6 +86,7 @@ declare global {
   const toRef: typeof import('vue')['toRef']
   const toRefs: typeof import('vue')['toRefs']
   const triggerRef: typeof import('vue')['triggerRef']
+  const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
   const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
   const tryOnMounted: typeof import('@vueuse/core')['tryOnMounted']
   const tryOnScopeDispose: typeof import('@vueuse/core')['tryOnScopeDispose']
@@ -79,18 +95,27 @@ declare global {
   const unrefElement: typeof import('@vueuse/core')['unrefElement']
   const until: typeof import('@vueuse/core')['until']
   const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
+  const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
   const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
   const useAttrs: typeof import('vue')['useAttrs']
   const useBase64: typeof import('@vueuse/core')['useBase64']
   const useBattery: typeof import('@vueuse/core')['useBattery']
   const useBreakpoints: typeof import('@vueuse/core')['useBreakpoints']
+  const useBroadcastChannel: typeof import('@vueuse/core')['useBroadcastChannel']
   const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
+  const useCached: typeof import('@vueuse/core')['useCached']
+  const useClamp: typeof import('@vueuse/core')['useClamp']
   const useClipboard: typeof import('@vueuse/core')['useClipboard']
+  const useColorMode: typeof import('@vueuse/core')['useColorMode']
   const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
   const useCounter: typeof import('@vueuse/core')['useCounter']
   const useCssModule: typeof import('vue')['useCssModule']
   const useCssVar: typeof import('@vueuse/core')['useCssVar']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useCurrentElement: typeof import('@vueuse/core')['useCurrentElement']
+  const useCycleList: typeof import('@vueuse/core')['useCycleList']
   const useDark: typeof import('@vueuse/core')['useDark']
+  const useDateFormat: typeof import('@vueuse/core')['useDateFormat']
   const useDebounce: typeof import('@vueuse/core')['useDebounce']
   const useDebouncedRefHistory: typeof import('@vueuse/core')['useDebouncedRefHistory']
   const useDebounceFn: typeof import('@vueuse/core')['useDebounceFn']
@@ -102,6 +127,7 @@ declare global {
   const useDocumentVisibility: typeof import('@vueuse/core')['useDocumentVisibility']
   const useDraggable: typeof import('@vueuse/core')['useDraggable']
   const useElementBounding: typeof import('@vueuse/core')['useElementBounding']
+  const useElementByPoint: typeof import('@vueuse/core')['useElementByPoint']
   const useElementHover: typeof import('@vueuse/core')['useElementHover']
   const useElementSize: typeof import('@vueuse/core')['useElementSize']
   const useElementVisibility: typeof import('@vueuse/core')['useElementVisibility']
@@ -111,11 +137,15 @@ declare global {
   const useEyeDropper: typeof import('@vueuse/core')['useEyeDropper']
   const useFavicon: typeof import('@vueuse/core')['useFavicon']
   const useFetch: typeof import('@vueuse/core')['useFetch']
+  const useFileSystemAccess: typeof import('@vueuse/core')['useFileSystemAccess']
   const useFocus: typeof import('@vueuse/core')['useFocus']
+  const useFocusWithin: typeof import('@vueuse/core')['useFocusWithin']
   const useFps: typeof import('@vueuse/core')['useFps']
   const useFullscreen: typeof import('@vueuse/core')['useFullscreen']
+  const useGamepad: typeof import('@vueuse/core')['useGamepad']
   const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
   const useIdle: typeof import('@vueuse/core')['useIdle']
+  const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
   const useIntersectionObserver: typeof import('@vueuse/core')['useIntersectionObserver']
   const useInterval: typeof import('@vueuse/core')['useInterval']
   const useIntervalFn: typeof import('@vueuse/core')['useIntervalFn']
@@ -126,12 +156,17 @@ declare global {
   const useManualRefHistory: typeof import('@vueuse/core')['useManualRefHistory']
   const useMediaControls: typeof import('@vueuse/core')['useMediaControls']
   const useMediaQuery: typeof import('@vueuse/core')['useMediaQuery']
+  const useMemoize: typeof import('@vueuse/core')['useMemoize']
+  const useMemory: typeof import('@vueuse/core')['useMemory']
+  const useMounted: typeof import('@vueuse/core')['useMounted']
   const useMouse: typeof import('@vueuse/core')['useMouse']
   const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement']
   const useMousePressed: typeof import('@vueuse/core')['useMousePressed']
   const useMutationObserver: typeof import('@vueuse/core')['useMutationObserver']
+  const useNavigatorLanguage: typeof import('@vueuse/core')['useNavigatorLanguage']
   const useNetwork: typeof import('@vueuse/core')['useNetwork']
   const useNow: typeof import('@vueuse/core')['useNow']
+  const useOffsetPagination: typeof import('@vueuse/core')['useOffsetPagination']
   const useOnline: typeof import('@vueuse/core')['useOnline']
   const usePageLeave: typeof import('@vueuse/core')['usePageLeave']
   const useParallax: typeof import('@vueuse/core')['useParallax']
@@ -144,32 +179,41 @@ declare global {
   const useRafFn: typeof import('@vueuse/core')['useRafFn']
   const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
   const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
+  const useScreenOrientation: typeof import('@vueuse/core')['useScreenOrientation']
+  const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
   const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
   const useScroll: typeof import('@vueuse/core')['useScroll']
+  const useScrollLock: typeof import('@vueuse/core')['useScrollLock']
   const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
   const useShare: typeof import('@vueuse/core')['useShare']
   const useSlots: typeof import('vue')['useSlots']
   const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
   const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
   const useStorage: typeof import('@vueuse/core')['useStorage']
+  const useStorageAsync: typeof import('@vueuse/core')['useStorageAsync']
+  const useStyleTag: typeof import('@vueuse/core')['useStyleTag']
   const useSwipe: typeof import('@vueuse/core')['useSwipe']
   const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
+  const useTextSelection: typeof import('@vueuse/core')['useTextSelection']
   const useThrottle: typeof import('@vueuse/core')['useThrottle']
   const useThrottledRefHistory: typeof import('@vueuse/core')['useThrottledRefHistory']
   const useThrottleFn: typeof import('@vueuse/core')['useThrottleFn']
   const useTimeAgo: typeof import('@vueuse/core')['useTimeAgo']
   const useTimeout: typeof import('@vueuse/core')['useTimeout']
   const useTimeoutFn: typeof import('@vueuse/core')['useTimeoutFn']
+  const useTimeoutPoll: typeof import('@vueuse/core')['useTimeoutPoll']
   const useTimestamp: typeof import('@vueuse/core')['useTimestamp']
   const useTitle: typeof import('@vueuse/core')['useTitle']
   const useToggle: typeof import('@vueuse/core')['useToggle']
   const useTransition: typeof import('@vueuse/core')['useTransition']
   const useUrlSearchParams: typeof import('@vueuse/core')['useUrlSearchParams']
   const useUserMedia: typeof import('@vueuse/core')['useUserMedia']
+  const useVibrate: typeof import('@vueuse/core')['useVibrate']
   const useVirtualList: typeof import('@vueuse/core')['useVirtualList']
   const useVModel: typeof import('@vueuse/core')['useVModel']
   const useVModels: typeof import('@vueuse/core')['useVModels']
   const useWakeLock: typeof import('@vueuse/core')['useWakeLock']
+  const useWebNotification: typeof import('@vueuse/core')['useWebNotification']
   const useWebSocket: typeof import('@vueuse/core')['useWebSocket']
   const useWebWorker: typeof import('@vueuse/core')['useWebWorker']
   const useWebWorkerFn: typeof import('@vueuse/core')['useWebWorkerFn']
@@ -178,8 +222,12 @@ declare global {
   const useWindowSize: typeof import('@vueuse/core')['useWindowSize']
   const watch: typeof import('vue')['watch']
   const watchAtMost: typeof import('@vueuse/core')['watchAtMost']
+  const watchDebounced: typeof import('@vueuse/core')['watchDebounced']
   const watchEffect: typeof import('vue')['watchEffect']
+  const watchIgnorable: typeof import('@vueuse/core')['watchIgnorable']
   const watchOnce: typeof import('@vueuse/core')['watchOnce']
+  const watchPausable: typeof import('@vueuse/core')['watchPausable']
+  const watchThrottled: typeof import('@vueuse/core')['watchThrottled']
   const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter']
   const whenever: typeof import('@vueuse/core')['whenever']
 }

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

@@ -8,46 +8,47 @@ import { generatePath } from './generatePath'
 import { getBoundingBoxes } from './getBoundingBoxes'
 import { gridToGraphPoint } from './pointConversion'
 
-interface PathFindingEdgeProps extends EdgeProps {
+const props = withDefaults(
-  nodes: GraphNode[]
+  defineProps<{
-  id: string
+    nodes: GraphNode[]
-  source: string
+    id: string
-  target: string
+    source: string
-  sourceX: number
+    target: string
-  sourceY: number
+    sourceX: number
-  targetX: number
+    sourceY: number
-  targetY: number
+    targetX: number
-  selected?: boolean
+    targetY: number
-  animated?: boolean
+    selected?: boolean
-  sourcePosition: Position
+    animated?: boolean
-  targetPosition: Position
+    sourcePosition: Position
-  label?:
+    targetPosition: Position
-    | string
+    label?:
-    | {
+      | string
-        component: Component<EdgeTextProps> | DefineComponent<EdgeTextProps>
+      | {
-        props?: EdgeTextProps
+          component: Component<EdgeTextProps> | DefineComponent<EdgeTextProps>
-      }
+          props?: EdgeTextProps
-  labelStyle?: any
+        }
-  labelShowBg?: boolean
+    labelStyle?: any
-  labelBgStyle?: any
+    labelShowBg?: boolean
-  labelBgPadding?: [number, number]
+    labelBgStyle?: any
-  labelBgBorderRadius?: number
+    labelBgPadding?: [number, number]
-  style?: CSSProperties
+    labelBgBorderRadius?: number
-  markerEnd?: string
+    style?: CSSProperties
-  markerStart?: string
+    markerEnd?: string
-  data?: any
+    markerStart?: string
-  sourceHandleId?: string
+    data?: any
-  targetHandleId?: string
+    sourceHandleId?: string
-}
+    targetHandleId?: string
-
+  }>(),
-const props = withDefaults(defineProps<PathFindingEdgeProps>(), {
+  {
-  selected: false,
+    selected: false,
-  sourcePosition: Position.Bottom,
+    sourcePosition: Position.Bottom,
-  targetPosition: Position.Top,
+    targetPosition: Position.Top,
-  labelStyle: () => ({}),
+    labelStyle: () => ({}),
-  labelShowBg: true,
+    labelShowBg: true,
-  labelBgStyle: () => ({}),
+    labelBgStyle: () => ({}),
-})
+  },
+)
 
 const nodePadding = 10
 const graphPadding = 20

packages/pathfinding-edge/src/edge/drawSvgPath.ts

@@ -1,8 +1,9 @@
-/**
- * Draws a SVG path from a list of points, using straight lines.
- */
 import type { XYPosition } from '@braks/vue-flow'
 
+/**
+ * Draws an SVG path from a list of points, using straight lines.
+ */
+
 const getMidPoint = (Ax: number, Ay: number, Bx: number, By: number) => {
   const Zx = (Ax - Bx) / 2 + Bx
   const Zy = (Ay - By) / 2 + By

packages/pathfinding-edge/src/vite-env.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="vite/client" />
-/// <reference types="vite-svg-loader" />

packages/pathfinding-edge/tsconfig.json

@@ -1,15 +1,9 @@
 {
   "compilerOptions": {
-    "outDir": "./tmp",
     "baseUrl": ".",
     "module": "ESNext",
-    "target": "es2020",
+    "target": "es2017",
-    "lib": [
+    "lib": ["DOM", "ESNext"],
-      "DOM",
-      "ESNext"
-    ],
-    "declaration": true,
-    "declarationDir": "./dist",
     "strict": true,
     "esModuleInterop": true,
     "incremental": false,
@@ -19,24 +13,18 @@
     "noUnusedLocals": false,
     "strictNullChecks": true,
     "forceConsistentCasingInFileNames": true,
-    "types": [
+    "declaration": true,
-      "vite/client"
+    "declarationDir": "./dist",
-    ],
+    "types": ["vite/client", "vue/macros"],
     "paths": {
-      "~/*": [
+      "~/*": ["src/*"]
-        "src/*"
-      ]
     },
     "plugins": [
       // Transform paths in output .d.ts files (Include this line if you output declarations files)
       { "transform": "typescript-transform-paths", "afterDeclarations": true }
     ]
   },
-  "include": ["src/**/*"],
+  "include": ["./src"],
-  "exclude": [
+  "exclude": ["node_modules", "dist"],
-    "node_modules",
+  "references": [{ "path": "./tsconfig.node.json" }]
-    "build",
-    "dist",
-    "examples"
-  ]
 }

packages/pathfinding-edge/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"],
+  "files": ["package.json"]
+}

packages/pathfinding-edge/vite.config.ts

@@ -42,6 +42,6 @@ export default defineConfig({
     }),
   ],
   optimizeDeps: {
-    include: ['vue', '@vueuse/core'],
+    include: ['@braks/vue-flow', 'vue', '@vueuse/core'],
   },
 })