refactor(core): add explicit imports and remove auto-imports

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
braks
2023-05-25 20:48:26 +02:00
committed by Braks
parent 5a86c7cf1d
commit e3e6a03359
63 changed files with 328 additions and 508 deletions
+1 -1
View File
@@ -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",
-401
View File
@@ -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'
}
@@ -1,6 +1,7 @@
<script lang="ts" setup>
import type { CSSProperties } from 'vue'
import { ARIA_EDGE_DESC_KEY, ARIA_LIVE_MESSAGE, ARIA_NODE_DESC_KEY } from '../../utils/a11y'
import { useVueFlow } from '../../composables'
const { id, disableKeyboardA11y, ariaLiveMessage } = useVueFlow()
@@ -1,7 +1,12 @@
<script lang="ts" setup>
import { computed, inject } from 'vue'
import { toRef } from '@vueuse/core'
import type { GraphNode } from '../../types'
import { ConnectionLineType, ConnectionMode, Position } from '../../types'
import { getMarkerId } from '../../utils/graph'
import { getHandlePosition, getMarkerId } from '../../utils'
import { useVueFlow } from '../../composables'
import { Slots } from '../../context'
import { getBezierPath, getSimpleBezierPath, getSmoothStepPath, getStraightPath } from '../Edges/utils'
const { sourceNode } = defineProps<{ sourceNode: GraphNode }>()
@@ -27,7 +32,7 @@ const oppositePosition = {
const connectionLineComponent = inject(Slots)?.['connection-line']
const handleId = connectionStartHandle.value!.handleId
const startHandleId = connectionStartHandle.value!.handleId
const type = connectionStartHandle.value!.type
@@ -36,9 +41,10 @@ const targetNode = computed(() => (connectionEndHandle.value?.handleId && findNo
const sourceHandle = computed(
() =>
(connectionMode.value === ConnectionMode.Strict
? sourceNode.handleBounds[type]?.find((d) => d.id === handleId)
: [...(sourceNode.handleBounds.source || []), ...(sourceNode.handleBounds.target || [])]?.find((d) => d.id === handleId)) ||
sourceNode.handleBounds[type ?? 'source']?.[0],
? sourceNode.handleBounds[type]?.find((d) => d.id === startHandleId)
: [...(sourceNode.handleBounds.source || []), ...(sourceNode.handleBounds.target || [])]?.find(
(d) => d.id === startHandleId,
)) || sourceNode.handleBounds[type ?? 'source']?.[0],
)
const targetHandle = computed(() => {
@@ -72,7 +78,7 @@ const fromXY = computed(() => {
}
})
const targetPosition = computed(() => (sourceHandle.value?.position ? oppositePosition[sourceHandle.value?.position] : undefined))
const targetPosition = toRef(() => (sourceHandle.value?.position ? oppositePosition[sourceHandle.value?.position] : undefined))
// todo: rename corresponding props
const toX = computed(() => (connectionPosition.value.x - viewport.value.x) / viewport.value.zoom)
@@ -130,7 +136,7 @@ export default {
<template>
<g class="vue-flow__connection">
<component
:is="connectionLineComponent"
:is="connectionLineComponent as any"
v-if="connectionLineComponent"
v-bind="{
sourceX: fromXY.x,
@@ -1,6 +1,8 @@
import type { Component, FunctionalComponent } from 'vue'
import { h } from 'vue'
import EdgeText from './EdgeText.vue'
import type { BaseEdgeProps } from '~/types'
import { isNumber } from '~/utils'
/**
* The base edge is a simple wrapper for svg path
@@ -1,5 +1,7 @@
import type { FunctionalComponent } from 'vue'
import { h } from 'vue'
import BaseEdge from './BaseEdge'
import { getBezierPath } from './utils'
import type { BezierEdgeProps } from '~/types'
import { Position } from '~/types'
@@ -1,4 +1,5 @@
import type { FunctionalComponent, HTMLAttributes } from 'vue'
import { h } from 'vue'
import { Position } from '~/types'
interface Props extends HTMLAttributes {
@@ -1,7 +1,10 @@
<script lang="ts" setup>
import { toRef } from '@vueuse/core'
import { useVueFlow } from '../../composables'
const { viewportRef } = useVueFlow()
const teleportTarget = computed(() => viewportRef.value?.getElementsByClassName('vue-flow__edge-labels')[0])
const teleportTarget = toRef(() => viewportRef.value?.getElementsByClassName('vue-flow__edge-labels')[0])
</script>
<script lang="ts">
@@ -14,7 +17,7 @@ export default {
<template>
<svg>
<foreignObject height="0" width="0">
<Teleport :to="teleportTarget" :disabled="!teleportTarget">
<Teleport :to="teleportTarget as any" :disabled="!teleportTarget">
<slot />
</Teleport>
</foreignObject>
@@ -1,7 +1,8 @@
<script lang="ts" setup>
import { computed, onMounted, ref, watch } from 'vue'
import type { EdgeTextProps } from '../../types/components'
import type { Rect as RectType } from '../../types'
import { isString } from '../../utils/general'
import { isString } from '../../utils'
const {
x,
@@ -14,25 +15,25 @@ const {
labelBgBorderRadius = 2,
} = defineProps<EdgeTextProps>()
let box = $ref<RectType>({ x: 0, y: 0, width: 0, height: 0 })
const box = ref<RectType>({ x: 0, y: 0, width: 0, height: 0 })
const el = $ref<SVGTextElement | null>(null)
const el = ref<SVGTextElement | null>(null)
const transform = computed(() => `translate(${x - box.width / 2} ${y - box.height / 2})`)
const transform = computed(() => `translate(${x - box.value.width / 2} ${y - box.value.height / 2})`)
onMounted(getBox)
watch([() => x, () => y, $$(el), () => label], getBox)
watch([() => x, () => y, el, () => label], getBox)
function getBox() {
if (!el) {
if (!el.value) {
return
}
const nextBox = el.getBBox()
const nextBox = el.value.getBBox()
if (nextBox.width !== box.width || nextBox.height !== box.height) {
box = nextBox
if (nextBox.width !== box.value.width || nextBox.height !== box.value.height) {
box.value = nextBox
}
}
</script>
@@ -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
@@ -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'
@@ -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'
@@ -1,4 +1,5 @@
import type { FunctionalComponent } from 'vue'
import { h } from 'vue'
import SmoothStepEdge from './SmoothStepEdge'
import type { StepEdgeProps } from '~/types'
@@ -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<StraightEdgeProps> = function (props, { attrs }) {
@@ -1,6 +1,10 @@
<script lang="ts" setup>
import { Position } from '../../types'
import { toRef, until } from '@vueuse/core'
import { computed, ref } from 'vue'
import type { HandleProps } from '../../types/handle'
import { Position } from '../../types'
import { useHandle, useNode, useVueFlow } from '../../composables'
import { getDimensions, isDef, isFunction, isMouseEvent, isString } from '../../utils'
const {
position = Position.Top,
@@ -1,4 +1,5 @@
import type { Component, FunctionalComponent } from 'vue'
import { h } from 'vue'
import Handle from '../Handle/Handle.vue'
import type { NodeProps } from '~/types'
import { Position } from '~/types'
@@ -1,4 +1,5 @@
import type { Component, FunctionalComponent } from 'vue'
import { h } from 'vue'
import Handle from '../Handle/Handle.vue'
import type { NodeProps } from '~/types'
import { Position } from '~/types'
@@ -1,4 +1,18 @@
import { computed, defineComponent, h, onBeforeUnmount, onMounted, provide, ref, watch } from 'vue'
import { toRef, until, useVModel } from '@vueuse/core'
import type { GraphNode, HandleConnectable, NodeComponent } from '~/types'
import { NodeId, NodeRef } from '~/context'
import { isInputDOMNode, useDrag, useNodeHooks, useUpdateNodePositions, useVueFlow } from '~/composables'
import {
ARIA_NODE_DESC_KEY,
arrowKeyDiffs,
calcNextPosition,
elementSelectionKeys,
getConnectedEdges,
getXYZPos,
handleNodeClick,
isNumber,
} from '~/utils'
interface Props {
id: string
@@ -46,7 +60,7 @@ const NodeWrapper = defineComponent({
const node = useVModel(props, 'node')
const parentNode = computed(() => findNode(node.value.parentNode))
const parentNode = toRef(() => findNode(node.value.parentNode))
const connectedEdges = computed(() => getConnectedEdges([node.value], edges.value))
@@ -1,4 +1,5 @@
import type { Component, FunctionalComponent } from 'vue'
import { h } from 'vue'
import Handle from '../Handle/Handle.vue'
import type { NodeProps } from '~/types'
import { Position } from '~/types'
@@ -1,4 +1,8 @@
<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue'
import { useDrag, useUpdateNodePositions, useVueFlow } from '../../composables'
import { arrowKeyDiffs, getRectOfNodes } from '~/utils'
const { emits, viewport, getSelectedNodes, noPanClassName, disableKeyboardA11y, userSelectionActive } = $(useVueFlow())
const updatePositions = useUpdateNodePositions()
@@ -1,5 +1,7 @@
<script lang="ts" setup>
import { computed } from 'vue'
import type { PanelProps } from '../../types/panel'
import { useVueFlow } from '../../composables'
const props = defineProps<PanelProps>()
@@ -1,4 +1,6 @@
<script lang="ts" setup>
import { useVueFlow } from '../../composables'
const { userSelectionRect } = useVueFlow()
</script>
+14
View File
@@ -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'
+17 -7
View File
@@ -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<HTMLDivElement, null, SubjectPosition>
@@ -14,11 +26,11 @@ interface UseDragParams {
el: Ref<Element | undefined>
disabled?: MaybeRefOrGetter<boolean>
selectable?: MaybeRefOrGetter<boolean>
dragHandle?: MaybeRefOrGetter<string | undefined>
id?: string
dragHandle?: MaybeComputedRef<string | undefined>
}
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<HTMLDivElement, null, SubjectPosition>['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
+5 -2
View File
@@ -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<Data = ElementData, CustomEvents extends Record<string, CustomEvent> = any>(id?: string) {
export function useEdge<Data = ElementData, CustomEvents extends Record<string, CustomEvent> = any>(id?: string) {
const edgeId = id ?? inject(EdgeId, '')
const edgeEl = inject(EdgeRef, null)
@@ -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) => {
@@ -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()
+37 -25
View File
@@ -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<string | null>
@@ -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,
+7 -4
View File
@@ -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<string>): 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<KeyFilter | null>, onChange?: (keyPressed: boolean) => void): Ref<boolean> => {
export function useKeyPress(keyFilter: MaybeRefOrGetter<KeyFilter | null>, 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<KeyFilter | null>, onChange?: (keyPr
})
watch(
() => resolveUnref(keyFilter),
() => toValue(keyFilter),
(unrefKeyFilter) => {
if (window && typeof window.addEventListener !== 'undefined') {
useEventListener(window, 'blur', () => {
+5 -1
View File
@@ -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<Data = ElementData, CustomEvents extends Record<string, CustomEvent> = any>(id?: string) {
export function useNode<Data = ElementData, CustomEvents extends Record<string, CustomEvent> = any>(id?: string) {
const nodeId = id ?? inject(NodeId, '')
const nodeEl = inject(NodeRef, null)
@@ -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) => {
@@ -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
+3 -1
View File
@@ -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)
+6 -1
View File
@@ -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
@@ -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<Pick<FlowProps, 'nodes' | 'edges' | 'modelValue'>>,
props: FlowProps,
store: VueFlowStore,
+1 -1
View File
@@ -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 {
@@ -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 }))
@@ -1,7 +1,12 @@
<script lang="ts" setup>
import { getCurrentInstance, inject, resolveComponent } from 'vue'
import { controlledComputed } from '@vueuse/core'
import EdgeWrapper from '../../components/Edges/EdgeWrapper'
import ConnectionLine from '../../components/ConnectionLine/ConnectionLine.vue'
import type { EdgeComponent, EdgeUpdatable, GraphEdge } from '../../types'
import { Slots } from '../../context'
import { useVueFlow } from '../../composables'
import { ErrorCode, VueFlowError, groupEdgesByZLevel } from '../../utils'
import MarkerDefinitions from './MarkerDefinitions.vue'
const slots = inject(Slots)
@@ -1,5 +1,8 @@
<script lang="ts" setup>
import { computed } from 'vue'
import type { EdgeMarkerType, MarkerProps, MarkerType } from '../../types/edge'
import { useVueFlow } from '../../composables'
import { getMarkerId } from '../../utils'
import Marker from './Marker.vue'
const { id: vueFlowId, edges, connectionLineOptions, defaultMarkerColor: defaultColor } = $(useVueFlow())
@@ -1,6 +1,11 @@
<script lang="ts" setup>
import { getCurrentInstance, inject, nextTick, onBeforeUnmount, onMounted, resolveComponent } from 'vue'
import { until } from '@vueuse/core'
import { NodeWrapper } from '../../components'
import type { GraphNode, HandleConnectable, NodeComponent } from '../../types'
import { Slots } from '../../context'
import { useVueFlow } from '../../composables'
import { ErrorCode, VueFlowError } from '../../utils'
const slots = inject(Slots)
@@ -1,8 +1,11 @@
<script lang="ts" setup>
import { computed, ref } from 'vue'
import UserSelection from '../../components/UserSelection/UserSelection.vue'
import NodesSelection from '../../components/NodesSelection/NodesSelection.vue'
import type { GraphNode } from '../../types'
import { SelectionMode } from '../../types'
import { useKeyPress, useVueFlow } from '../../composables'
import { getConnectedEdges, getNodesInside } from '../../utils'
import { getMousePosition } from './utils'
const { isSelecting } = defineProps<{ isSelecting: boolean }>()
@@ -1,5 +1,7 @@
<script lang="ts" setup>
import { isClient } from '@vueuse/core'
import { ref } from 'vue'
import { isClient, until } from '@vueuse/core'
import { useVueFlow } from '../../composables'
import NodeRenderer from '../NodeRenderer/NodeRenderer.vue'
import EdgeRenderer from '../EdgeRenderer/EdgeRenderer.vue'
@@ -2,8 +2,12 @@
import type { D3ZoomEvent, ZoomTransform } from 'd3-zoom'
import { zoom, zoomIdentity } from 'd3-zoom'
import { pointer, select } from 'd3-selection'
import { computed, onMounted, ref, watchEffect } from 'vue'
import { useEventListener, useResizeObserver } from '@vueuse/core'
import type { CoordinateExtent, D3ZoomHandler, FlowOptions, ViewportTransform } from '../../types'
import { PanOnScrollMode } from '../../types'
import { useKeyPress, useVueFlow, useWindow } from '../../composables'
import { ErrorCode, VueFlowError, clamp, getDimensions } from '../../utils'
import Pane from '../Pane/Pane.vue'
import Transform from './Transform.vue'
@@ -1,5 +1,7 @@
<script lang="ts" setup>
import type { D3ZoomEvent } from 'd3-zoom'
import { useVModel } from '@vueuse/core'
import { onMounted, onUnmounted, provide, ref, useSlots } from 'vue'
import Viewport from '../Viewport/Viewport.vue'
import A11yDescriptions from '../../components/A11y/A11yDescriptions.vue'
import type { FlowElements, FlowProps } from '../../types/flow'
@@ -18,6 +20,9 @@ import type {
VueFlowStore,
} from '../../types'
import type { VueFlowError } from '../../utils/errors'
import { useVueFlow, useWatchProps } from '../../composables'
import { useHooks } from '../../store'
import { Slots } from '../../context'
const props = withDefaults(defineProps<FlowProps>(), {
snapToGrid: undefined,
@@ -125,7 +130,7 @@ const modelEdges = useVModel(props, 'edges', emit)
const { vueFlowRef, hooks, getNodeTypes, getEdgeTypes, ...rest } = useVueFlow(props)
const dispose = useWatch({ modelValue, nodes: modelNodes, edges: modelEdges }, props, {
const dispose = useWatchProps({ modelValue, nodes: modelNodes, edges: modelEdges }, props, {
vueFlowRef,
hooks,
getNodeTypes,
+9 -11
View File
@@ -62,17 +62,15 @@ export { defaultEdgeTypes, defaultNodeTypes } from './store/state'
export { VueFlow as VueFlowInjection, NodeId as NodeIdInjection } from './context'
export { default as useZoomPanHelper } from './composables/useZoomPanHelper'
export { default as useVueFlow, Storage as GlobalVueFlowStorage } from './composables/useVueFlow'
export { default as useHandle } from './composables/useHandle'
export { default as useNode } from './composables/useNode'
export { default as useEdge } from './composables/useEdge'
export { useGetPointerPosition } from './composables/useGetPointerPosition'
export {
useZoomPanHelper,
useVueFlow,
Storage as GlobalVueFlowStorage,
useHandle,
useNode,
useEdge,
useGetPointerPosition,
} from './composables'
export { VueFlowError, ErrorCode } from './utils/errors'
+25
View File
@@ -1,5 +1,7 @@
import { zoomIdentity } from 'd3-zoom'
import type { ComputedRef } from 'vue'
import { until } from '@vueuse/core'
import { useState } from './state'
import type {
Actions,
ComputedGetters,
@@ -20,6 +22,29 @@ import type {
Rect,
State,
} from '~/types'
import { useViewport } from '~/composables'
import {
ErrorCode,
VueFlowError,
addEdgeToStore,
applyChanges,
createAdditionChange,
createGraphNodes,
createRemoveChange,
createSelectionChange,
getConnectedEdges,
getDimensions,
getHandleBounds,
getOverlappingArea,
getSelectionChanges,
isDef,
isEdge,
isNode,
isRect,
nodeToRect,
parseEdge,
updateEdgeAction,
} from '~/utils'
export function useActions(
state: State,
+3
View File
@@ -1,5 +1,8 @@
import type { ComputedRef } from 'vue'
import { computed } from 'vue'
import { defaultEdgeTypes, defaultNodeTypes } from './state'
import type { ComputedGetters, GraphEdge, GraphNode, State } from '~/types'
import { ErrorCode, VueFlowError, getNodesInside, isEdgeVisible } from '~/utils'
export function useGetters(state: State, nodeIds: ComputedRef<string[]>, edgeIds: ComputedRef<string[]>): ComputedGetters {
/**
+3
View File
@@ -1,5 +1,8 @@
import { tryOnScopeDispose } from '@vueuse/core'
import type { Ref } from 'vue'
import { onBeforeMount } from 'vue'
import type { FlowHooks } from '~/types'
import { createExtendedEventHook, warn } from '~/utils'
// flow event hooks
export function createHooks(): FlowHooks {
+4
View File
@@ -0,0 +1,4 @@
export * from './actions'
export * from './getters'
export * from './hooks'
export * from './state'
+2
View File
@@ -1,3 +1,4 @@
import { createHooks } from './hooks'
import type { DefaultEdgeTypes, DefaultNodeTypes, FlowOptions, State } from '~/types'
import { ConnectionLineType, ConnectionMode, PanOnScrollMode, SelectionMode } from '~/types'
import {
@@ -10,6 +11,7 @@ import {
StepEdge,
StraightEdge,
} from '~/components'
import { isDef } from '~/utils'
export const defaultNodeTypes: DefaultNodeTypes = {
input: InputNode,
+1
View File
@@ -1,3 +1,4 @@
import { clamp } from './graph'
import type { Dimensions, XYPosition } from '~/types'
// returns a number between 0 and 1 that represents the velocity of the movement
+2
View File
@@ -1,3 +1,5 @@
import { nextTick } from 'vue'
import { isDef, isFunction, isGraphNode, isString } from '.'
import type {
EdgeAddChange,
EdgeChange,
@@ -1,5 +1,7 @@
import type { Ref } from 'vue'
import { ref } from 'vue'
import type { EventHook } from '@vueuse/core'
import { tryOnScopeDispose } from '@vueuse/core'
/**
* Source code taken from https://github.com/vueuse/vueuse/blob/main/packages/shared/createEventHook/index.ts
+2
View File
@@ -1,3 +1,5 @@
import { markRaw } from 'vue'
import { ErrorCode, VueFlowError, clampPosition, isNumber, isParentSelected } from '.'
import type { Actions, CoordinateExtent, CoordinateExtentRange, GraphNode, NodeDragItem, State, XYPosition } from '~/types'
export function hasSelector(target: Element, selector: string, node: Element): boolean {
+1
View File
@@ -1,3 +1,4 @@
import { isNumber, rectToBox } from '.'
import type { Actions, EdgePositions, GraphEdge, GraphNode, HandleElement, Rect, ViewportTransform, XYPosition } from '~/types'
import { Position } from '~/types'
+3
View File
@@ -1,3 +1,5 @@
import { markRaw } from 'vue'
import { isDef, isString, warn } from '.'
import type {
Actions,
Box,
@@ -19,6 +21,7 @@ import type {
XYPosition,
XYZPosition,
} from '~/types'
import { useWindow } from '~/composables'
export function nodeToRect(node: GraphNode): Rect {
return {
+1
View File
@@ -1,3 +1,4 @@
import { getEventPosition, getHandlePosition } from '.'
import { ConnectionMode } from '~/types'
import type {
Actions,
+13
View File
@@ -0,0 +1,13 @@
export * from './a11y'
export * from './autopan'
export * from './changes'
export * from './createExtendedEventHook'
export * from './drag'
export * from './edge'
export * from './errors'
export * from './general'
export * from './graph'
export * from './handle'
export * from './log'
export * from './node'
export * from './store'
+2
View File
@@ -1,4 +1,6 @@
import type { Ref } from 'vue'
import { nextTick } from 'vue'
import { getDimensions } from '.'
import type { Actions, GraphNode, HandleElement, Position } from '~/types'
export function getHandleBounds(selector: string, nodeElement: HTMLDivElement, zoom: number): HandleElement[] | undefined {
+3 -1
View File
@@ -1,9 +1,11 @@
import { toValue } from '@vueuse/core'
import { ErrorCode, VueFlowError, connectionExists, getEdgeId, isEdge, parseEdge, parseNode } from '.'
import type { Actions, Connection, Edge, GraphEdge, GraphNode, Node, State } from '~/types'
type NonUndefined<T> = T extends undefined ? never : T
export function isDef<T>(val: T): val is NonUndefined<T> {
const unrefVal = unref(val)
const unrefVal = toValue(val)
return typeof unrefVal !== 'undefined'
}
+1 -8
View File
@@ -2,7 +2,6 @@ import { resolve } from 'node:path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueMacros from 'unplugin-vue-macros/vite'
import AutoImport from 'unplugin-auto-import/vite'
import replace from '@rollup/plugin-replace'
import pkg from './package.json'
@@ -42,7 +41,6 @@ export default defineConfig({
hoistStatic: false,
setupBlock: false,
shortEmits: false,
defineModel: false,
definePropsRefs: false,
setupComponent: false,
setupSFC: false,
@@ -52,12 +50,7 @@ export default defineConfig({
reactivityTransform: true,
}),
},
}),
AutoImport({
imports: ['vue', '@vueuse/core', 'vue/macros'],
dirs: ['./src/utils/**', './src/composables/**', './src/context/**', './src/store/**', './src/components/Edges/utils/**'],
dts: 'src/auto-imports.d.ts',
}),
}) as any,
replace({
__ENV__: 'production',
__VUE_FLOW_VERSION__: JSON.stringify(pkg.version),
+1 -8
View File
@@ -2,7 +2,6 @@ import { resolve } from 'node:path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueMacros from 'unplugin-vue-macros/vite'
import AutoImport from 'unplugin-auto-import/vite'
import replace from '@rollup/plugin-replace'
import pkg from './package.json'
@@ -42,7 +41,6 @@ export default defineConfig({
hoistStatic: false,
setupBlock: false,
shortEmits: false,
defineModel: false,
definePropsRefs: false,
setupComponent: false,
setupSFC: false,
@@ -52,12 +50,7 @@ export default defineConfig({
reactivityTransform: true,
}),
},
}),
AutoImport({
imports: ['vue', '@vueuse/core', 'vue/macros'],
dirs: ['./src/utils/**', './src/composables/**', './src/context/**', './src/store/**', './src/components/Edges/utils/**'],
dts: 'src/auto-imports.d.ts',
}),
}) as any,
replace({
__ENV__: 'process.env.NODE_ENV',
__VUE_FLOW_VERSION__: JSON.stringify(pkg.version),
+30 -7
View File
@@ -337,8 +337,8 @@ importers:
specifier: ^3.4.6
version: 3.4.6(typescript@4.9.5)
unplugin-auto-import:
specifier: 0.12.2
version: 0.12.2(@vueuse/core@10.1.2)
specifier: ^0.15.3
version: 0.15.3(@vueuse/core@10.1.2)
unplugin-vue-macros:
specifier: ^2.1.3
version: 2.1.3(@vueuse/core@10.1.2)(vite@4.3.5)(vue@3.2.47)
@@ -619,7 +619,7 @@ importers:
version: 6.1.2
unplugin-auto-import:
specifier: ^0.12.2
version: 0.12.2(@vueuse/core@10.1.2)
version: 0.12.2
unplugin-vue-macros:
specifier: 1.8.2
version: 1.8.2(vite@4.1.4)(vue@3.2.47)
@@ -11266,7 +11266,7 @@ packages:
engines: {node: '>= 0.8'}
dev: true
/unplugin-auto-import@0.12.2(@vueuse/core@10.1.2):
/unplugin-auto-import@0.12.2:
resolution: {integrity: sha512-hC4w0GZjPjmLtrxV0u10XO350V9eCtQyEyifXr7B9UGD7SvbbIvKuOcHt58Zd4FAqZJXKWoXkpr9mdhBp85Usw==}
engines: {node: '>=14'}
peerDependencies:
@@ -11277,7 +11277,6 @@ packages:
dependencies:
'@antfu/utils': 0.7.2
'@rollup/pluginutils': 5.0.2(rollup@3.21.5)
'@vueuse/core': 10.1.2(vue@3.2.47)
local-pkg: 0.4.3
magic-string: 0.27.0
unimport: 2.2.4
@@ -11308,6 +11307,30 @@ packages:
- supports-color
dev: true
/unplugin-auto-import@0.15.3(@vueuse/core@10.1.2):
resolution: {integrity: sha512-RLT8SqbPn4bT7yBshZId0uPSofKWnwr66RyDaxWaFb/+f7OTDOWAsVNz+hOQLBWSjvbekr2xZY9ccS8TDHJbCQ==}
engines: {node: '>=14'}
peerDependencies:
'@nuxt/kit': ^3.2.2
'@vueuse/core': '*'
peerDependenciesMeta:
'@nuxt/kit':
optional: true
'@vueuse/core':
optional: true
dependencies:
'@antfu/utils': 0.7.2
'@rollup/pluginutils': 5.0.2(rollup@3.21.5)
'@vueuse/core': 10.1.2(vue@3.2.47)
local-pkg: 0.4.3
magic-string: 0.30.0
minimatch: 9.0.0
unimport: 3.0.6(rollup@3.20.6)
unplugin: 1.3.1
transitivePeerDependencies:
- rollup
dev: true
/unplugin-combine@0.6.0(vite@4.1.4):
resolution: {integrity: sha512-cZkTg2Z3CcScyRi6QtpVxBZoCMsPaEHyKNh7HyqMkfWV7sKNwHllYezVOFINOGNzqSS1+xWLY3iDCiTVoH3oaA==}
engines: {node: '>=14.19.0'}
@@ -11327,7 +11350,7 @@ packages:
optional: true
dependencies:
'@antfu/utils': 0.7.2
unplugin: 1.1.0
unplugin: 1.3.1
vite: 4.1.4
dev: true
@@ -11350,7 +11373,7 @@ packages:
optional: true
dependencies:
'@antfu/utils': 0.7.2
unplugin: 1.1.0
unplugin: 1.3.1
vite: 4.3.5(@types/node@18.15.12)
dev: true