diff --git a/packages/core/package.json b/packages/core/package.json
index 42712451..bb6dd95a 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -85,7 +85,7 @@
"postcss-nested": "^6.0.1",
"ts-patch": "^2.1.0",
"typescript-transform-paths": "^3.4.6",
- "unplugin-auto-import": "0.12.2",
+ "unplugin-auto-import": "^0.15.3",
"unplugin-vue-macros": "^2.1.3",
"vite": "^4.3.5",
"vue": "^3.2.25",
diff --git a/packages/core/src/auto-imports.d.ts b/packages/core/src/auto-imports.d.ts
deleted file mode 100644
index 0e720070..00000000
--- a/packages/core/src/auto-imports.d.ts
+++ /dev/null
@@ -1,401 +0,0 @@
-/* eslint-disable */
-/* prettier-ignore */
-// @ts-nocheck
-// Generated by unplugin-auto-import
-export {}
-declare global {
- const $$: typeof import('vue/macros')['$$']
- const $: typeof import('vue/macros')['$']
- const $computed: typeof import('vue/macros')['$computed']
- const $customRef: typeof import('vue/macros')['$customRef']
- const $ref: typeof import('vue/macros')['$ref']
- const $shallowRef: typeof import('vue/macros')['$shallowRef']
- const $toRef: typeof import('vue/macros')['$toRef']
- const ARIA_EDGE_DESC_KEY: typeof import('./utils/a11y')['ARIA_EDGE_DESC_KEY']
- const ARIA_LIVE_MESSAGE: typeof import('./utils/a11y')['ARIA_LIVE_MESSAGE']
- const ARIA_NODE_DESC_KEY: typeof import('./utils/a11y')['ARIA_NODE_DESC_KEY']
- const EdgeId: typeof import('./context/index')['EdgeId']
- const EdgeRef: typeof import('./context/index')['EdgeRef']
- const EffectScope: typeof import('vue')['EffectScope']
- const ErrorCode: typeof import('./utils/errors')['ErrorCode']
- const NodeId: typeof import('./context/index')['NodeId']
- const NodeRef: typeof import('./context/index')['NodeRef']
- const Slots: typeof import('./context/index')['Slots']
- const Storage: typeof import('./composables/useVueFlow')['Storage']
- const VueFlow: typeof import('./context/index')['VueFlow']
- const VueFlowError: typeof import('./utils/errors')['VueFlowError']
- const addEdge: typeof import('./utils/graph')['addEdge']
- const addEdgeToStore: typeof import('./utils/store')['addEdgeToStore']
- const applyChanges: typeof import('./utils/changes')['applyChanges']
- const applyEdgeChanges: typeof import('./utils/changes')['applyEdgeChanges']
- const applyNodeChanges: typeof import('./utils/changes')['applyNodeChanges']
- const arrowKeyDiffs: typeof import('./utils/a11y')['arrowKeyDiffs']
- const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
- const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
- const boxToRect: typeof import('./utils/graph')['boxToRect']
- const calcAutoPan: typeof import('./utils/autopan')['calcAutoPan']
- const calcNextPosition: typeof import('./utils/drag')['calcNextPosition']
- const clamp: typeof import('./utils/graph')['clamp']
- const clampPosition: typeof import('./utils/graph')['clampPosition']
- 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 connectionExists: typeof import('./utils/graph')['connectionExists']
- const controlledComputed: typeof import('@vueuse/core')['controlledComputed']
- const controlledRef: typeof import('@vueuse/core')['controlledRef']
- const createAdditionChange: typeof import('./utils/changes')['createAdditionChange']
- const createApp: typeof import('vue')['createApp']
- const createEventHook: typeof import('@vueuse/core')['createEventHook']
- const createExtendedEventHook: typeof import('./utils/createExtendedEventHook')['createExtendedEventHook']
- const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
- const createGraphNodes: typeof import('./utils/store')['createGraphNodes']
- const createHooks: typeof import('./store/hooks')['createHooks']
- const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
- const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
- const createRemoveChange: typeof import('./utils/changes')['createRemoveChange']
- const createReusableTemplate: typeof import('@vueuse/core')['createReusableTemplate']
- const createSelectionChange: typeof import('./utils/changes')['createSelectionChange']
- const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
- const createTemplatePromise: typeof import('@vueuse/core')['createTemplatePromise']
- const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
- const customRef: typeof import('vue')['customRef']
- const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
- const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
- const defaultEdgeTypes: typeof import('./store/state')['defaultEdgeTypes']
- const defaultNodeTypes: typeof import('./store/state')['defaultNodeTypes']
- const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
- const defineComponent: typeof import('vue')['defineComponent']
- const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
- const effectScope: typeof import('vue')['effectScope']
- const elementSelectionKeys: typeof import('./utils/a11y')['elementSelectionKeys']
- const extendRef: typeof import('@vueuse/core')['extendRef']
- const getBezierEdgeCenter: typeof import('./components/Edges/utils/general')['getBezierEdgeCenter']
- const getBezierPath: typeof import('./components/Edges/utils/bezier')['getBezierPath']
- const getBoundsofRects: typeof import('./utils/graph')['getBoundsofRects']
- const getClosestHandle: typeof import('./utils/handle')['getClosestHandle']
- const getConnectedEdges: typeof import('./utils/graph')['getConnectedEdges']
- const getConnectedNodes: typeof import('./utils/graph')['getConnectedNodes']
- const getConnectionStatus: typeof import('./utils/handle')['getConnectionStatus']
- const getCurrentInstance: typeof import('vue')['getCurrentInstance']
- const getCurrentScope: typeof import('vue')['getCurrentScope']
- const getDimensions: typeof import('./utils/graph')['getDimensions']
- const getDragItems: typeof import('./utils/drag')['getDragItems']
- const getEdgeId: typeof import('./utils/graph')['getEdgeId']
- const getEdgePositions: typeof import('./utils/edge')['getEdgePositions']
- const getEventHandlerParams: typeof import('./utils/drag')['getEventHandlerParams']
- const getEventPosition: typeof import('./utils/general')['getEventPosition']
- const getExtent: typeof import('./utils/drag')['getExtent']
- const getHandle: typeof import('./utils/edge')['getHandle']
- const getHandleBounds: typeof import('./utils/node')['getHandleBounds']
- const getHandleLookup: typeof import('./utils/handle')['getHandleLookup']
- const getHandlePosition: typeof import('./utils/edge')['getHandlePosition']
- const getHandleType: typeof import('./utils/handle')['getHandleType']
- const getHandles: typeof import('./utils/handle')['getHandles']
- const getHostForElement: typeof import('./utils/graph')['getHostForElement']
- const getIncomers: typeof import('./utils/graph')['getIncomers']
- const getMarkerId: typeof import('./utils/graph')['getMarkerId']
- const getNodesInside: typeof import('./utils/graph')['getNodesInside']
- const getOutgoers: typeof import('./utils/graph')['getOutgoers']
- const getOverlappingArea: typeof import('./utils/graph')['getOverlappingArea']
- const getRectOfNodes: typeof import('./utils/graph')['getRectOfNodes']
- const getSelectionChanges: typeof import('./utils/changes')['getSelectionChanges']
- const getSimpleBezierPath: typeof import('./components/Edges/utils/simple-bezier')['getSimpleBezierPath']
- const getSimpleEdgeCenter: typeof import('./components/Edges/utils/general')['getSimpleEdgeCenter']
- const getSmoothStepPath: typeof import('./components/Edges/utils/smoothstep')['getSmoothStepPath']
- const getStraightPath: typeof import('./components/Edges/utils/straight')['getStraightPath']
- const getTransformForBounds: typeof import('./utils/graph')['getTransformForBounds']
- const getXYZPos: typeof import('./utils/graph')['getXYZPos']
- const groupEdgesByZLevel: typeof import('./utils/edge')['groupEdgesByZLevel']
- const h: typeof import('vue')['h']
- const handleNodeClick: typeof import('./utils/node')['handleNodeClick']
- const hasSelector: typeof import('./utils/drag')['hasSelector']
- const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
- const inject: typeof import('vue')['inject']
- const isBoolean: typeof import('./utils/general')['isBoolean']
- const isDef: typeof import('./utils/store')['isDef']
- const isDefined: typeof import('@vueuse/core')['isDefined']
- const isEdge: typeof import('./utils/graph')['isEdge']
- const isEdgeVisible: typeof import('./utils/edge')['isEdgeVisible']
- const isFunction: typeof import('./utils/general')['isFunction']
- const isGraphEdge: typeof import('./utils/graph')['isGraphEdge']
- const isGraphNode: typeof import('./utils/graph')['isGraphNode']
- const isInputDOMNode: typeof import('./composables/useKeyPress')['isInputDOMNode']
- const isMouseEvent: typeof import('./utils/general')['isMouseEvent']
- const isNode: typeof import('./utils/graph')['isNode']
- const isNumber: typeof import('./utils/general')['isNumber']
- const isParentSelected: typeof import('./utils/graph')['isParentSelected']
- const isProxy: typeof import('vue')['isProxy']
- const isReactive: typeof import('vue')['isReactive']
- const isReadonly: typeof import('vue')['isReadonly']
- const isRect: typeof import('./utils/graph')['isRect']
- const isRef: typeof import('vue')['isRef']
- const isString: typeof import('./utils/general')['isString']
- const isValidHandle: typeof import('./utils/handle')['isValidHandle']
- const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
- const markRaw: typeof import('vue')['markRaw']
- const nextTick: typeof import('vue')['nextTick']
- const nodeToRect: typeof import('./utils/graph')['nodeToRect']
- const onActivated: typeof import('vue')['onActivated']
- const onBeforeMount: typeof import('vue')['onBeforeMount']
- const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
- const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
- const onClickOutside: typeof import('@vueuse/core')['onClickOutside']
- 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']
- const onScopeDispose: typeof import('vue')['onScopeDispose']
- const onServerPrefetch: typeof import('vue')['onServerPrefetch']
- const onStartTyping: typeof import('@vueuse/core')['onStartTyping']
- const onUnmounted: typeof import('vue')['onUnmounted']
- const onUpdated: typeof import('vue')['onUpdated']
- const parseEdge: typeof import('./utils/graph')['parseEdge']
- const parseNode: typeof import('./utils/graph')['parseNode']
- const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
- const pointToRendererPoint: typeof import('./utils/graph')['pointToRendererPoint']
- const provide: typeof import('vue')['provide']
- 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 rectToBox: typeof import('./utils/graph')['rectToBox']
- 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 rendererPointToPoint: typeof import('./utils/graph')['rendererPointToPoint']
- const resetRecentHandle: typeof import('./utils/handle')['resetRecentHandle']
- const resolveComponent: typeof import('vue')['resolveComponent']
- const resolveRef: typeof import('@vueuse/core')['resolveRef']
- const resolveUnref: typeof import('@vueuse/core')['resolveUnref']
- 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']
- const toRaw: typeof import('vue')['toRaw']
- const toReactive: typeof import('@vueuse/core')['toReactive']
- 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']
- const tryOnUnmounted: typeof import('@vueuse/core')['tryOnUnmounted']
- const unref: typeof import('vue')['unref']
- const unrefElement: typeof import('@vueuse/core')['unrefElement']
- const until: typeof import('@vueuse/core')['until']
- const updateEdge: typeof import('./utils/graph')['updateEdge']
- const updateEdgeAction: typeof import('./utils/store')['updateEdgeAction']
- const useActions: typeof import('./store/actions')['useActions']
- const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
- const useAnimate: typeof import('@vueuse/core')['useAnimate']
- const useArrayDifference: typeof import('@vueuse/core')['useArrayDifference']
- const useArrayEvery: typeof import('@vueuse/core')['useArrayEvery']
- const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter']
- const useArrayFind: typeof import('@vueuse/core')['useArrayFind']
- const useArrayFindIndex: typeof import('@vueuse/core')['useArrayFindIndex']
- const useArrayFindLast: typeof import('@vueuse/core')['useArrayFindLast']
- const useArrayIncludes: typeof import('@vueuse/core')['useArrayIncludes']
- const useArrayJoin: typeof import('@vueuse/core')['useArrayJoin']
- const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
- const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
- const useArraySome: typeof import('@vueuse/core')['useArraySome']
- const useArrayUnique: typeof import('@vueuse/core')['useArrayUnique']
- 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 useBluetooth: typeof import('@vueuse/core')['useBluetooth']
- 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 useClipboard: typeof import('@vueuse/core')['useClipboard']
- const useCloned: typeof import('@vueuse/core')['useCloned']
- 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 useDebounceFn: typeof import('@vueuse/core')['useDebounceFn']
- const useDebouncedRefHistory: typeof import('@vueuse/core')['useDebouncedRefHistory']
- const useDeviceMotion: typeof import('@vueuse/core')['useDeviceMotion']
- const useDeviceOrientation: typeof import('@vueuse/core')['useDeviceOrientation']
- const useDevicePixelRatio: typeof import('@vueuse/core')['useDevicePixelRatio']
- const useDevicesList: typeof import('@vueuse/core')['useDevicesList']
- const useDisplayMedia: typeof import('@vueuse/core')['useDisplayMedia']
- const useDocumentVisibility: typeof import('@vueuse/core')['useDocumentVisibility']
- const useDrag: typeof import('./composables/useDrag')['default']
- const useDraggable: typeof import('@vueuse/core')['useDraggable']
- const useDropZone: typeof import('@vueuse/core')['useDropZone']
- const useEdge: typeof import('./composables/useEdge')['default']
- const useEdgeHooks: typeof import('./composables/useEdgeHooks')['default']
- 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']
- const useEventBus: typeof import('@vueuse/core')['useEventBus']
- const useEventListener: typeof import('@vueuse/core')['useEventListener']
- const useEventSource: typeof import('@vueuse/core')['useEventSource']
- const useEyeDropper: typeof import('@vueuse/core')['useEyeDropper']
- const useFavicon: typeof import('@vueuse/core')['useFavicon']
- const useFetch: typeof import('@vueuse/core')['useFetch']
- const useFileDialog: typeof import('@vueuse/core')['useFileDialog']
- 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 useGetPointerPosition: typeof import('./composables/useGetPointerPosition')['useGetPointerPosition']
- const useGetters: typeof import('./store/getters')['useGetters']
- const useHandle: typeof import('./composables/useHandle')['default']
- const useHooks: typeof import('./store/hooks')['useHooks']
- const useIdle: typeof import('@vueuse/core')['useIdle']
- const useImage: typeof import('@vueuse/core')['useImage']
- 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']
- const useKeyModifier: typeof import('@vueuse/core')['useKeyModifier']
- const useKeyPress: typeof import('./composables/useKeyPress')['default']
- const useLastChanged: typeof import('@vueuse/core')['useLastChanged']
- const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage']
- const useMagicKeys: typeof import('@vueuse/core')['useMagicKeys']
- 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 useNode: typeof import('./composables/useNode')['default']
- const useNodeHooks: typeof import('./composables/useNodeHooks')['default']
- const useNow: typeof import('@vueuse/core')['useNow']
- const useObjectUrl: typeof import('@vueuse/core')['useObjectUrl']
- 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']
- const useParentElement: typeof import('@vueuse/core')['useParentElement']
- const usePerformanceObserver: typeof import('@vueuse/core')['usePerformanceObserver']
- const usePermission: typeof import('@vueuse/core')['usePermission']
- const usePointer: typeof import('@vueuse/core')['usePointer']
- const usePointerLock: typeof import('@vueuse/core')['usePointerLock']
- const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe']
- const usePreferredColorScheme: typeof import('@vueuse/core')['usePreferredColorScheme']
- const usePreferredContrast: typeof import('@vueuse/core')['usePreferredContrast']
- const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
- const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
- const usePreferredReducedMotion: typeof import('@vueuse/core')['usePreferredReducedMotion']
- const usePrevious: typeof import('@vueuse/core')['usePrevious']
- 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 useSorted: typeof import('@vueuse/core')['useSorted']
- const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
- const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
- const useState: typeof import('./store/state')['useState']
- const useStepper: typeof import('@vueuse/core')['useStepper']
- const useStorage: typeof import('@vueuse/core')['useStorage']
- const useStorageAsync: typeof import('@vueuse/core')['useStorageAsync']
- const useStyleTag: typeof import('@vueuse/core')['useStyleTag']
- const useSupported: typeof import('@vueuse/core')['useSupported']
- const useSwipe: typeof import('@vueuse/core')['useSwipe']
- const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
- const useTextDirection: typeof import('@vueuse/core')['useTextDirection']
- const useTextSelection: typeof import('@vueuse/core')['useTextSelection']
- const useTextareaAutosize: typeof import('@vueuse/core')['useTextareaAutosize']
- const useThrottle: typeof import('@vueuse/core')['useThrottle']
- const useThrottleFn: typeof import('@vueuse/core')['useThrottleFn']
- const useThrottledRefHistory: typeof import('@vueuse/core')['useThrottledRefHistory']
- 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 useToNumber: typeof import('@vueuse/core')['useToNumber']
- const useToString: typeof import('@vueuse/core')['useToString']
- const useToggle: typeof import('@vueuse/core')['useToggle']
- const useTransition: typeof import('@vueuse/core')['useTransition']
- const useUpdateNodePositions: typeof import('./composables/useUpdateNodePositions')['default']
- const useUrlSearchParams: typeof import('@vueuse/core')['useUrlSearchParams']
- const useUserMedia: typeof import('@vueuse/core')['useUserMedia']
- const useVModel: typeof import('@vueuse/core')['useVModel']
- const useVModels: typeof import('@vueuse/core')['useVModels']
- const useVibrate: typeof import('@vueuse/core')['useVibrate']
- const useViewport: typeof import('./composables/useViewport')['default']
- const useVirtualList: typeof import('@vueuse/core')['useVirtualList']
- const useVueFlow: typeof import('./composables/useVueFlow')['default']
- const useWakeLock: typeof import('@vueuse/core')['useWakeLock']
- const useWatch: typeof import('./utils/watch')['useWatch']
- 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']
- const useWindow: typeof import('./composables/useWindow')['default']
- const useWindowFocus: typeof import('@vueuse/core')['useWindowFocus']
- const useWindowScroll: typeof import('@vueuse/core')['useWindowScroll']
- const useWindowSize: typeof import('@vueuse/core')['useWindowSize']
- const useZoomPanHelper: typeof import('./composables/useZoomPanHelper')['default']
- const warn: typeof import('./utils/log')['warn']
- const watch: typeof import('vue')['watch']
- const watchArray: typeof import('@vueuse/core')['watchArray']
- const watchAtMost: typeof import('@vueuse/core')['watchAtMost']
- const watchDebounced: typeof import('@vueuse/core')['watchDebounced']
- const watchDeep: typeof import('@vueuse/core')['watchDeep']
- const watchEffect: typeof import('vue')['watchEffect']
- const watchIgnorable: typeof import('@vueuse/core')['watchIgnorable']
- const watchImmediate: typeof import('@vueuse/core')['watchImmediate']
- const watchOnce: typeof import('@vueuse/core')['watchOnce']
- const watchPausable: typeof import('@vueuse/core')['watchPausable']
- const watchPostEffect: typeof import('vue')['watchPostEffect']
- const watchSyncEffect: typeof import('vue')['watchSyncEffect']
- const watchThrottled: typeof import('@vueuse/core')['watchThrottled']
- const watchTriggerable: typeof import('@vueuse/core')['watchTriggerable']
- const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter']
- const whenever: typeof import('@vueuse/core')['whenever']
-}
-// for type re-export
-declare global {
- // @ts-ignore
- export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from 'vue'
-}
diff --git a/packages/core/src/components/A11y/A11yDescriptions.vue b/packages/core/src/components/A11y/A11yDescriptions.vue
index 68a380e3..7500f334 100644
--- a/packages/core/src/components/A11y/A11yDescriptions.vue
+++ b/packages/core/src/components/A11y/A11yDescriptions.vue
@@ -1,6 +1,7 @@
diff --git a/packages/core/src/components/Edges/EdgeWrapper.ts b/packages/core/src/components/Edges/EdgeWrapper.ts
index 62c0034e..642f8c31 100644
--- a/packages/core/src/components/Edges/EdgeWrapper.ts
+++ b/packages/core/src/components/Edges/EdgeWrapper.ts
@@ -1,6 +1,11 @@
+import { defineComponent, h, provide, ref } from 'vue'
+import { useVModel } from '@vueuse/core'
import EdgeAnchor from './EdgeAnchor'
import type { Connection, EdgeComponent, EdgeUpdatable, GraphEdge, HandleType, MouseTouchEvent } from '~/types'
import { ConnectionMode, Position } from '~/types'
+import { useEdgeHooks, useHandle, useVueFlow } from '~/composables'
+import { EdgeId, EdgeRef } from '~/context'
+import { ARIA_EDGE_DESC_KEY, elementSelectionKeys, getEdgePositions, getHandle, getMarkerId } from '~/utils'
interface Props {
id: string
diff --git a/packages/core/src/components/Edges/SimpleBezierEdge.ts b/packages/core/src/components/Edges/SimpleBezierEdge.ts
index 073ef635..ed8c1e52 100644
--- a/packages/core/src/components/Edges/SimpleBezierEdge.ts
+++ b/packages/core/src/components/Edges/SimpleBezierEdge.ts
@@ -1,5 +1,7 @@
import type { FunctionalComponent } from 'vue'
+import { h } from 'vue'
import BaseEdge from './BaseEdge'
+import { getSimpleBezierPath } from './utils'
import type { SimpleBezierEdgeProps } from '~/types'
import { Position } from '~/types'
diff --git a/packages/core/src/components/Edges/SmoothStepEdge.ts b/packages/core/src/components/Edges/SmoothStepEdge.ts
index dd3b8e93..b152a4b5 100644
--- a/packages/core/src/components/Edges/SmoothStepEdge.ts
+++ b/packages/core/src/components/Edges/SmoothStepEdge.ts
@@ -1,5 +1,7 @@
import type { FunctionalComponent } from 'vue'
+import { h } from 'vue'
import BaseEdge from './BaseEdge'
+import { getSmoothStepPath } from './utils'
import type { SmoothStepEdgeProps } from '~/types'
import { Position } from '~/types'
diff --git a/packages/core/src/components/Edges/StepEdge.ts b/packages/core/src/components/Edges/StepEdge.ts
index e47a4f30..98d6e470 100644
--- a/packages/core/src/components/Edges/StepEdge.ts
+++ b/packages/core/src/components/Edges/StepEdge.ts
@@ -1,4 +1,5 @@
import type { FunctionalComponent } from 'vue'
+import { h } from 'vue'
import SmoothStepEdge from './SmoothStepEdge'
import type { StepEdgeProps } from '~/types'
diff --git a/packages/core/src/components/Edges/StraightEdge.ts b/packages/core/src/components/Edges/StraightEdge.ts
index ff1e2da5..8991f481 100644
--- a/packages/core/src/components/Edges/StraightEdge.ts
+++ b/packages/core/src/components/Edges/StraightEdge.ts
@@ -1,5 +1,7 @@
import type { FunctionalComponent } from 'vue'
+import { h } from 'vue'
import BaseEdge from './BaseEdge'
+import { getStraightPath } from './utils'
import type { StraightEdgeProps } from '~/types'
const StraightEdge: FunctionalComponent = function (props, { attrs }) {
diff --git a/packages/core/src/components/Handle/Handle.vue b/packages/core/src/components/Handle/Handle.vue
index 568b91f0..31483406 100644
--- a/packages/core/src/components/Handle/Handle.vue
+++ b/packages/core/src/components/Handle/Handle.vue
@@ -1,6 +1,10 @@
diff --git a/packages/core/src/composables/index.ts b/packages/core/src/composables/index.ts
new file mode 100644
index 00000000..ba7d5417
--- /dev/null
+++ b/packages/core/src/composables/index.ts
@@ -0,0 +1,14 @@
+export * from './useDrag'
+export * from './useEdge'
+export * from './useEdgeHooks'
+export * from './useGetPointerPosition'
+export * from './useHandle'
+export * from './useKeyPress'
+export * from './useNode'
+export * from './useNodeHooks'
+export * from './useUpdateNodePositions'
+export * from './useViewport'
+export * from './useVueFlow'
+export * from './useWatchProps'
+export * from './useWindow'
+export * from './useZoomPanHelper'
diff --git a/packages/core/src/composables/useDrag.ts b/packages/core/src/composables/useDrag.ts
index 4ef70af8..a904e7d6 100644
--- a/packages/core/src/composables/useDrag.ts
+++ b/packages/core/src/composables/useDrag.ts
@@ -2,7 +2,19 @@ import type { D3DragEvent, DragBehavior, SubjectPosition } from 'd3-drag'
import { drag } from 'd3-drag'
import { select } from 'd3-selection'
import type { Ref } from 'vue'
+import { ref, watch } from 'vue'
import type { MaybeRefOrGetter } from '@vueuse/core'
+import { toValue } from '@vueuse/core'
+import { useGetPointerPosition, useVueFlow } from '.'
+import {
+ calcAutoPan,
+ calcNextPosition,
+ getDragItems,
+ getEventHandlerParams,
+ getEventPosition,
+ handleNodeClick,
+ hasSelector,
+} from '~/utils'
import type { NodeDragEvent, NodeDragItem, XYPosition } from '~/types'
export type UseDragEvent = D3DragEvent
@@ -14,11 +26,11 @@ interface UseDragParams {
el: Ref
disabled?: MaybeRefOrGetter
selectable?: MaybeRefOrGetter
+ dragHandle?: MaybeRefOrGetter
id?: string
- dragHandle?: MaybeComputedRef
}
-function useDrag(params: UseDragParams) {
+export function useDrag(params: UseDragParams) {
const {
vueFlowRef,
snapToGrid,
@@ -128,7 +140,7 @@ function useDrag(params: UseDragParams) {
autoPanId = requestAnimationFrame(autoPan)
}
- watch([() => resolveUnref(disabled), el], ([isDisabled, nodeEl]) => {
+ watch([() => toValue(disabled), el], ([isDisabled, nodeEl]) => {
if (nodeEl) {
const selection = select(nodeEl)
@@ -145,7 +157,7 @@ function useDrag(params: UseDragParams) {
}
}
- if (node && resolveUnref(selectable) && selectNodesOnDrag.value) {
+ if (node && toValue(selectable) && selectNodesOnDrag.value) {
handleNodeClick(
node,
multiSelectionActive.value,
@@ -209,7 +221,7 @@ function useDrag(params: UseDragParams) {
})
.filter((event: D3DragEvent['sourceEvent']) => {
const target = event.target as HTMLDivElement
- const unrefDragHandle = resolveUnref(dragHandle)
+ const unrefDragHandle = toValue(dragHandle)
return (
!event.button &&
@@ -226,5 +238,3 @@ function useDrag(params: UseDragParams) {
return dragging
}
-
-export default useDrag
diff --git a/packages/core/src/composables/useEdge.ts b/packages/core/src/composables/useEdge.ts
index db1151fe..d699ec7c 100644
--- a/packages/core/src/composables/useEdge.ts
+++ b/packages/core/src/composables/useEdge.ts
@@ -1,5 +1,8 @@
+import { inject } from 'vue'
+import { useVueFlow } from './useVueFlow'
import type { CustomEvent, ElementData } from '~/types'
-import { VueFlowError } from '~/utils/errors'
+import { ErrorCode, VueFlowError } from '~/utils'
+import { EdgeId, EdgeRef } from '~/context'
/**
* Access an edge
@@ -8,7 +11,7 @@ import { VueFlowError } from '~/utils/errors'
*
* Meaning if you do not provide an id, this composable has to be called in a child of your custom edge component, or it will throw
*/
-export default function useEdge = any>(id?: string) {
+export function useEdge = any>(id?: string) {
const edgeId = id ?? inject(EdgeId, '')
const edgeEl = inject(EdgeRef, null)
diff --git a/packages/core/src/composables/useEdgeHooks.ts b/packages/core/src/composables/useEdgeHooks.ts
index 55dd6a58..8090cd76 100644
--- a/packages/core/src/composables/useEdgeHooks.ts
+++ b/packages/core/src/composables/useEdgeHooks.ts
@@ -1,4 +1,5 @@
import type { EdgeEventsEmit, EdgeEventsOn, GraphEdge, VueFlowStore } from '~/types'
+import { createExtendedEventHook } from '~/utils'
function createEdgeHooks() {
return {
@@ -14,7 +15,7 @@ function createEdgeHooks() {
}
}
-export default function useEdgeHooks(edge: GraphEdge, emits: VueFlowStore['emits']): { emit: EdgeEventsEmit; on: EdgeEventsOn } {
+export function useEdgeHooks(edge: GraphEdge, emits: VueFlowStore['emits']): { emit: EdgeEventsEmit; on: EdgeEventsOn } {
const edgeHooks = createEdgeHooks()
edgeHooks.doubleClick.on((event) => {
diff --git a/packages/core/src/composables/useGetPointerPosition.ts b/packages/core/src/composables/useGetPointerPosition.ts
index c3e8fd11..4b78ea12 100644
--- a/packages/core/src/composables/useGetPointerPosition.ts
+++ b/packages/core/src/composables/useGetPointerPosition.ts
@@ -1,5 +1,9 @@
import type { UseDragEvent } from './useDrag'
+import { useVueFlow } from './useVueFlow'
+/**
+ * This composable is for *internal* use only.
+ */
export function useGetPointerPosition() {
const { viewport, snapGrid, snapToGrid } = useVueFlow()
diff --git a/packages/core/src/composables/useHandle.ts b/packages/core/src/composables/useHandle.ts
index 94a51699..e24973a3 100644
--- a/packages/core/src/composables/useHandle.ts
+++ b/packages/core/src/composables/useHandle.ts
@@ -1,5 +1,22 @@
import type { MaybeRefOrGetter } from '@vueuse/core'
+import { computed } from 'vue'
+import { toValue } from '@vueuse/core'
+import { useVueFlow } from './useVueFlow'
import type { Connection, ConnectionHandle, HandleType, MouseTouchEvent, ValidConnectionFunc } from '~/types'
+import {
+ calcAutoPan,
+ getClosestHandle,
+ getConnectionStatus,
+ getEventPosition,
+ getHandleLookup,
+ getHandleType,
+ getHostForElement,
+ isMouseEvent,
+ isValidHandle,
+ pointToRendererPoint,
+ rendererPointToPoint,
+ resetRecentHandle,
+} from '~/utils'
interface UseHandleProps {
handleId: MaybeRefOrGetter
@@ -15,7 +32,7 @@ function alwaysValid() {
return true
}
-export default function useHandle({
+export function useHandle({
handleId,
nodeId,
type,
@@ -49,7 +66,7 @@ export default function useHandle({
let handleDomNode: Element | null = null
function handlePointerDown(event: MouseTouchEvent) {
- const isTarget = resolveUnref(type) === 'target'
+ const isTarget = toValue(type) === 'target'
const isMouseTriggered = isMouseEvent(event)
@@ -57,9 +74,9 @@ export default function useHandle({
const doc = getHostForElement(event.target as HTMLElement)
if ((isMouseTriggered && event.button === 0) || !isMouseTriggered) {
- const node = findNode(resolveUnref(nodeId))
+ const node = findNode(toValue(nodeId))
- let isValidConnectionHandler = resolveUnref(isValidConnection) || isValidConnectionProp.value || alwaysValid
+ let isValidConnectionHandler = toValue(isValidConnection) || isValidConnectionProp.value || alwaysValid
if (!isValidConnectionHandler && node) {
isValidConnectionHandler = (!isTarget ? node.isValidTargetPos : node.isValidSourcePos) || alwaysValid
@@ -71,7 +88,7 @@ export default function useHandle({
const { x, y } = getEventPosition(event)
const clickedHandle = doc?.elementFromPoint(x, y)
- const handleType = getHandleType(resolveUnref(edgeUpdaterType), clickedHandle)
+ const handleType = getHandleType(toValue(edgeUpdaterType), clickedHandle)
const containerBounds = vueFlowRef.value?.getBoundingClientRect()
if (!containerBounds || !handleType) {
@@ -84,8 +101,8 @@ export default function useHandle({
const handleLookup = getHandleLookup({
nodes: getNodes.value,
- nodeId: resolveUnref(nodeId),
- handleId: resolveUnref(handleId),
+ nodeId: toValue(nodeId),
+ handleId: toValue(handleId),
handleType,
})
@@ -103,8 +120,8 @@ export default function useHandle({
startConnection(
{
- nodeId: resolveUnref(nodeId),
- handleId: resolveUnref(handleId),
+ nodeId: toValue(nodeId),
+ handleId: toValue(handleId),
type: handleType,
},
{
@@ -114,7 +131,7 @@ export default function useHandle({
event,
)
- emits.connectStart({ event, nodeId: resolveUnref(nodeId), handleId: resolveUnref(handleId), handleType })
+ emits.connectStart({ event, nodeId: toValue(nodeId), handleId: toValue(handleId), handleType })
function onPointerMove(event: MouseTouchEvent) {
connectionPosition = getEventPosition(event, containerBounds)
@@ -134,8 +151,8 @@ export default function useHandle({
event,
closestHandle,
connectionMode.value,
- resolveUnref(nodeId),
- resolveUnref(handleId),
+ toValue(nodeId),
+ toValue(handleId),
isTarget ? 'target' : 'source',
isValidConnectionHandler,
doc,
@@ -223,21 +240,16 @@ export default function useHandle({
return
}
- const isTarget = resolveUnref(type) === 'target'
+ const isTarget = toValue(type) === 'target'
if (!connectionClickStartHandle.value) {
- emits.clickConnectStart({ event, nodeId: resolveUnref(nodeId), handleId: resolveUnref(handleId) })
+ emits.clickConnectStart({ event, nodeId: toValue(nodeId), handleId: toValue(handleId) })
- startConnection(
- { nodeId: resolveUnref(nodeId), type: resolveUnref(type), handleId: resolveUnref(handleId) },
- undefined,
- event,
- true,
- )
+ startConnection({ nodeId: toValue(nodeId), type: toValue(type), handleId: toValue(handleId) }, undefined, event, true)
} else {
- let isValidConnectionHandler = resolveUnref(isValidConnection) || isValidConnectionProp.value || alwaysValid
+ let isValidConnectionHandler = toValue(isValidConnection) || isValidConnectionProp.value || alwaysValid
- const node = findNode(resolveUnref(nodeId))
+ const node = findNode(toValue(nodeId))
if (!isValidConnectionHandler && node) {
isValidConnectionHandler = (!isTarget ? node.isValidTargetPos : node.isValidSourcePos) || alwaysValid
@@ -252,9 +264,9 @@ export default function useHandle({
const { connection, isValid } = isValidHandle(
event,
{
- nodeId: resolveUnref(nodeId),
- id: resolveUnref(handleId),
- type: resolveUnref(type),
+ nodeId: toValue(nodeId),
+ id: toValue(handleId),
+ type: toValue(type),
},
connectionMode.value,
connectionClickStartHandle.value.nodeId,
diff --git a/packages/core/src/composables/useKeyPress.ts b/packages/core/src/composables/useKeyPress.ts
index 83758752..78af4940 100644
--- a/packages/core/src/composables/useKeyPress.ts
+++ b/packages/core/src/composables/useKeyPress.ts
@@ -1,5 +1,8 @@
-import type { Ref } from 'vue'
+import { ref, watch } from 'vue'
import type { KeyFilter, KeyPredicate, MaybeRefOrGetter } from '@vueuse/core'
+import { onKeyStroke, toValue, useEventListener } from '@vueuse/core'
+import { useWindow } from './useWindow'
+import { isBoolean, isFunction } from '~/utils'
export function isInputDOMNode(event: KeyboardEvent): boolean {
const target = (event.composedPath?.()?.[0] || event.target) as HTMLElement
@@ -37,10 +40,10 @@ function createKeyPredicate(keyFilter: string[], pressedKeys: Set): KeyP
* @param keyFilter - Can be a boolean, a string or an array of strings. If it's a boolean, it will always return that value. If it's a string, it will return true if the key is pressed. If it's an array of strings, it will return true if any of the keys are pressed, or a combination is pressed (e.g. ['ctrl+a', 'ctrl+b'])
* @param onChange - Callback function that will be called when the key state changes
*/
-export default (keyFilter: MaybeRefOrGetter, onChange?: (keyPressed: boolean) => void): Ref => {
+export function useKeyPress(keyFilter: MaybeRefOrGetter, onChange?: (keyPressed: boolean) => void) {
const window = useWindow()
- const isPressed = ref(resolveUnref(keyFilter) === true)
+ const isPressed = ref(toValue(keyFilter) === true)
let modifierPressed = false
@@ -51,7 +54,7 @@ export default (keyFilter: MaybeRefOrGetter, onChange?: (keyPr
})
watch(
- () => resolveUnref(keyFilter),
+ () => toValue(keyFilter),
(unrefKeyFilter) => {
if (window && typeof window.addEventListener !== 'undefined') {
useEventListener(window, 'blur', () => {
diff --git a/packages/core/src/composables/useNode.ts b/packages/core/src/composables/useNode.ts
index 97589269..ede88494 100644
--- a/packages/core/src/composables/useNode.ts
+++ b/packages/core/src/composables/useNode.ts
@@ -1,4 +1,8 @@
+import { computed, inject } from 'vue'
+import { useVueFlow } from './useVueFlow'
import type { CustomEvent, ElementData } from '~/types'
+import { NodeId, NodeRef } from '~/context'
+import { ErrorCode, VueFlowError, getConnectedEdges } from '~/utils'
/**
* Access a node, it's parent (if one exists) and connected edges
@@ -7,7 +11,7 @@ import type { CustomEvent, ElementData } from '~/types'
*
* Meaning if you do not provide an id, this composable has to be called in a child of your custom node component, or it will throw
*/
-export default function useNode = any>(id?: string) {
+export function useNode = any>(id?: string) {
const nodeId = id ?? inject(NodeId, '')
const nodeEl = inject(NodeRef, null)
diff --git a/packages/core/src/composables/useNodeHooks.ts b/packages/core/src/composables/useNodeHooks.ts
index 715b494e..b37138ee 100644
--- a/packages/core/src/composables/useNodeHooks.ts
+++ b/packages/core/src/composables/useNodeHooks.ts
@@ -1,4 +1,5 @@
import type { GraphNode, NodeEventsEmit, NodeEventsOn, VueFlowStore } from '~/types'
+import { createExtendedEventHook } from '~/utils'
function createNodeHooks() {
return {
@@ -14,7 +15,7 @@ function createNodeHooks() {
}
}
-export default function useNodeHooks(node: GraphNode, emits: VueFlowStore['emits']): { emit: NodeEventsEmit; on: NodeEventsOn } {
+export function useNodeHooks(node: GraphNode, emits: VueFlowStore['emits']): { emit: NodeEventsEmit; on: NodeEventsOn } {
const nodeHooks = createNodeHooks()
nodeHooks.doubleClick.on((event) => {
diff --git a/packages/core/src/composables/useUpdateNodePositions.ts b/packages/core/src/composables/useUpdateNodePositions.ts
index a7a3a91d..aac61047 100644
--- a/packages/core/src/composables/useUpdateNodePositions.ts
+++ b/packages/core/src/composables/useUpdateNodePositions.ts
@@ -1,6 +1,8 @@
+import { useVueFlow } from './useVueFlow'
import type { NodeDragItem, XYPosition } from '~/types'
+import { calcNextPosition } from '~/utils'
-function useUpdateNodePositions() {
+export function useUpdateNodePositions() {
const { getSelectedNodes, nodeExtent, updateNodePositions, findNode, snapGrid, snapToGrid, nodesDraggable, emits } =
useVueFlow()
@@ -39,5 +41,3 @@ function useUpdateNodePositions() {
updateNodePositions(nodeUpdates, true, false)
}
}
-
-export default useUpdateNodePositions
diff --git a/packages/core/src/composables/useViewport.ts b/packages/core/src/composables/useViewport.ts
index bf2c190e..9c79fda9 100644
--- a/packages/core/src/composables/useViewport.ts
+++ b/packages/core/src/composables/useViewport.ts
@@ -1,5 +1,7 @@
import { zoomIdentity } from 'd3-zoom'
+import { computed, ref } from 'vue'
import type { ComputedGetters, D3Selection, GraphNode, State, ViewportFunctions } from '~/types'
+import { clampPosition, getRectOfNodes, getTransformForBounds, pointToRendererPoint } from '~/utils'
interface ExtendedViewport extends ViewportFunctions {
initialized: boolean
@@ -22,7 +24,7 @@ const initialViewportHelper: ExtendedViewport = {
initialized: false,
}
-export default (state: State, getters: ComputedGetters) => {
+export function useViewport(state: State, getters: ComputedGetters) {
const { nodes, d3Zoom, d3Selection, dimensions, translateExtent, minZoom, maxZoom, viewport, snapToGrid, snapGrid, hooks } =
$(state)
diff --git a/packages/core/src/composables/useVueFlow.ts b/packages/core/src/composables/useVueFlow.ts
index 0e3bcc92..74145fc7 100644
--- a/packages/core/src/composables/useVueFlow.ts
+++ b/packages/core/src/composables/useVueFlow.ts
@@ -1,5 +1,10 @@
+import { toRefs, tryOnScopeDispose } from '@vueuse/core'
import type { EffectScope } from 'vue'
+import { computed, getCurrentScope, inject, provide, reactive } from 'vue'
+import { useActions, useGetters, useState } from '~/store'
import type { FlowOptions, FlowProps, State, VueFlowStore } from '~/types'
+import { VueFlow } from '~/context'
+import { warn } from '~/utils'
/**
* Stores all currently created store instances
@@ -81,7 +86,7 @@ type Injection = VueFlowStore | null | undefined
type Scope = (EffectScope & { vueFlowId: string }) | undefined
// todo: maybe replace the storage with a context based solution; This would break calling useVueFlow outside a setup function though, which should be fine
-export default (options?: FlowProps): VueFlowStore => {
+export function useVueFlow(options?: FlowProps): VueFlowStore {
const storage = Storage.getInstance()
const scope = getCurrentScope() as Scope
diff --git a/packages/core/src/utils/watch.ts b/packages/core/src/composables/useWatchProps.ts
similarity index 97%
rename from packages/core/src/utils/watch.ts
rename to packages/core/src/composables/useWatchProps.ts
index 9d393235..78501fd0 100644
--- a/packages/core/src/utils/watch.ts
+++ b/packages/core/src/composables/useWatchProps.ts
@@ -1,8 +1,11 @@
import type { ToRefs } from 'vue'
+import { effectScope, nextTick, onScopeDispose, watch } from 'vue'
import type { WatchPausableReturn } from '@vueuse/core'
+import { toRef, watchPausable } from '@vueuse/core'
import type { Connection, FlowProps, VueFlowStore } from '~/types'
+import { isDef, isFunction } from '~/utils'
-export function useWatch(
+export function useWatchProps(
models: ToRefs>,
props: FlowProps,
store: VueFlowStore,
diff --git a/packages/core/src/composables/useWindow.ts b/packages/core/src/composables/useWindow.ts
index 87c50d04..d2553ead 100644
--- a/packages/core/src/composables/useWindow.ts
+++ b/packages/core/src/composables/useWindow.ts
@@ -1,6 +1,6 @@
type UseWindow = Window & typeof globalThis & { chrome?: any }
-export default (): UseWindow => {
+export function useWindow(): UseWindow {
if (typeof window !== 'undefined') {
return window as UseWindow
} else {
diff --git a/packages/core/src/composables/useZoomPanHelper.ts b/packages/core/src/composables/useZoomPanHelper.ts
index 0c57c15e..dbceba1c 100644
--- a/packages/core/src/composables/useZoomPanHelper.ts
+++ b/packages/core/src/composables/useZoomPanHelper.ts
@@ -1,12 +1,14 @@
import { zoomIdentity } from 'd3-zoom'
+import { useVueFlow } from './useVueFlow'
import type { D3Selection, GraphNode, ViewportFunctions } from '~/types'
+import { clampPosition, getRectOfNodes, getTransformForBounds, pointToRendererPoint } from '~/utils'
const DEFAULT_PADDING = 0.1
/**
* @deprecated use {@link useVueFlow} instead (all viewport functions are also available in {@link useVueFlow})
*/
-export default (vueFlowId?: string): ViewportFunctions => {
+export function useZoomPanHelper(vueFlowId?: string): ViewportFunctions {
const { nodes, d3Zoom, d3Selection, dimensions, translateExtent, minZoom, maxZoom, viewport, snapToGrid, snapGrid, getNodes } =
$(useVueFlow({ id: vueFlowId }))
diff --git a/packages/core/src/container/EdgeRenderer/EdgeRenderer.vue b/packages/core/src/container/EdgeRenderer/EdgeRenderer.vue
index a9b03614..65d76515 100644
--- a/packages/core/src/container/EdgeRenderer/EdgeRenderer.vue
+++ b/packages/core/src/container/EdgeRenderer/EdgeRenderer.vue
@@ -1,7 +1,12 @@