refactor(core): add explicit imports and remove auto-imports
Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
@@ -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",
|
||||
|
||||
Vendored
-401
@@ -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>
|
||||
|
||||
|
||||
@@ -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'
|
||||
@@ -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
|
||||
|
||||
@@ -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()
|
||||
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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', () => {
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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)
|
||||
|
||||
|
||||
@@ -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,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,
|
||||
|
||||
@@ -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'
|
||||
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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 {
|
||||
/**
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
export * from './actions'
|
||||
export * from './getters'
|
||||
export * from './hooks'
|
||||
export * from './state'
|
||||
@@ -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,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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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,3 +1,4 @@
|
||||
import { isNumber, rectToBox } from '.'
|
||||
import type { Actions, EdgePositions, GraphEdge, GraphNode, HandleElement, Rect, ViewportTransform, XYPosition } from '~/types'
|
||||
import { Position } from '~/types'
|
||||
|
||||
|
||||
@@ -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,3 +1,4 @@
|
||||
import { getEventPosition, getHandlePosition } from '.'
|
||||
import { ConnectionMode } from '~/types'
|
||||
import type {
|
||||
Actions,
|
||||
|
||||
@@ -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'
|
||||
@@ -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 {
|
||||
|
||||
@@ -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'
|
||||
}
|
||||
|
||||
@@ -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),
|
||||
|
||||
@@ -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),
|
||||
|
||||
Generated
+30
-7
@@ -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
|
||||
|
||||
|
||||
Reference in New Issue
Block a user