alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/utils/autopan.ts
+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
packages/core/src/utils/changes.ts
+2
View File
@@ -1,3 +1,5 @@
import { nextTick } from 'vue'
import { isDef, isFunction, isGraphNode, isString } from '.'
import type {
EdgeAddChange,
EdgeChange,
packages/core/src/utils/createExtendedEventHook.ts
+2
View File
@@ -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
packages/core/src/utils/drag.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 {
packages/core/src/utils/edge.ts
+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'
packages/core/src/utils/graph.ts
+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 {
packages/core/src/utils/handle.ts
+1
View File
@@ -1,3 +1,4 @@
import { getEventPosition, getHandlePosition } from '.'
import { ConnectionMode } from '~/types'
import type {
Actions,
packages/core/src/utils/index.ts
+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'
packages/core/src/utils/node.ts
+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 {
packages/core/src/utils/store.ts
+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'
}
packages/core/src/utils/watch.ts
-325
View File
@@ -1,325 +0,0 @@
import type { ToRefs } from 'vue'
import type { WatchPausableReturn } from '@vueuse/core'
import type { Connection, FlowProps, VueFlowStore } from '~/types'
export function useWatch(
models: ToRefs<Pick<FlowProps, 'nodes' | 'edges' | 'modelValue'>>,
props: FlowProps,
store: VueFlowStore,
) {
const scope = effectScope()
scope.run(() => {
const watchModelValue = () => {
scope.run(() => {
let pauseModel: WatchPausableReturn
let pauseStore: WatchPausableReturn
let immediateStore = !!(store.nodes.value.length || store.edges.value.length)
// eslint-disable-next-line prefer-const
pauseModel = watchPausable([models.modelValue, () => models.modelValue?.value?.length], ([elements]) => {
if (elements && Array.isArray(elements)) {
pauseStore?.pause()
store.setElements(elements)
// only trigger store watcher immediately if we actually set any elements to the store
if (!pauseStore && !immediateStore && elements.length) {
immediateStore = true
} else {
pauseStore?.resume()
}
}
})
pauseStore = watchPausable(
[store.nodes, store.edges, () => store.edges.value.length, () => store.nodes.value.length],
([nodes, edges]) => {
if (models.modelValue?.value && Array.isArray(models.modelValue.value)) {
pauseModel?.pause()
models.modelValue.value = [...nodes, ...edges]
nextTick(() => {
pauseModel?.resume()
})
}
},
{ immediate: immediateStore },
)
onScopeDispose(() => {
pauseModel?.stop()
pauseStore?.stop()
})
})
}
const watchNodesValue = () => {
scope.run(() => {
let pauseModel: WatchPausableReturn
let pauseStore: WatchPausableReturn
let immediateStore = !!store.nodes.value.length
// eslint-disable-next-line prefer-const
pauseModel = watchPausable([models.nodes, () => models.nodes?.value?.length], ([nodes]) => {
if (nodes && Array.isArray(nodes)) {
pauseStore?.pause()
store.setNodes(nodes)
// only trigger store watcher immediately if we actually set any elements to the store
if (!pauseStore && !immediateStore && nodes.length) {
immediateStore = true
} else {
pauseStore?.resume()
}
}
})
pauseStore = watchPausable(
[store.nodes, () => store.nodes.value.length],
([nodes]) => {
if (models.nodes?.value && Array.isArray(models.nodes.value)) {
pauseModel?.pause()
models.nodes.value = [...nodes]
nextTick(() => {
pauseModel?.resume()
})
}
},
{ immediate: immediateStore },
)
onScopeDispose(() => {
pauseModel?.stop()
pauseStore?.stop()
})
})
}
const watchEdgesValue = () => {
scope.run(() => {
let pauseModel: WatchPausableReturn
let pauseStore: WatchPausableReturn
let immediateStore = !!store.edges.value.length
// eslint-disable-next-line prefer-const
pauseModel = watchPausable([models.edges, () => models.edges?.value?.length], ([edges]) => {
if (edges && Array.isArray(edges)) {
pauseStore?.pause()
store.setEdges(edges)
// only trigger store watcher immediately if we actually set any elements to the store
if (!pauseStore && !immediateStore && edges.length) {
immediateStore = true
} else {
pauseStore?.resume()
}
}
})
pauseStore = watchPausable(
[store.edges, () => store.edges.value.length],
([edges]) => {
if (models.edges?.value && Array.isArray(models.edges.value)) {
pauseModel?.pause()
models.edges.value = [...edges]
nextTick(() => {
pauseModel?.resume()
})
}
},
{ immediate: immediateStore },
)
onScopeDispose(() => {
pauseModel?.stop()
pauseStore?.stop()
})
})
}
const watchMaxZoom = () => {
scope.run(() => {
watch(
() => props.maxZoom,
() => {
if (props.maxZoom && isDef(props.maxZoom)) {
store.setMaxZoom(props.maxZoom)
}
},
)
})
}
const watchMinZoom = () => {
scope.run(() => {
watch(
() => props.minZoom,
() => {
if (props.minZoom && isDef(props.minZoom)) {
store.setMinZoom(props.minZoom)
}
},
)
})
}
const watchTranslateExtent = () => {
scope.run(() => {
watch(
() => props.translateExtent,
() => {
if (props.translateExtent && isDef(props.translateExtent)) {
store.setTranslateExtent(props.translateExtent)
}
},
)
})
}
const watchNodeExtent = () => {
scope.run(() => {
watch(
() => props.nodeExtent,
() => {
if (props.nodeExtent && isDef(props.nodeExtent)) {
store.setNodeExtent(props.nodeExtent)
}
},
)
})
}
const watchApplyDefault = () => {
scope.run(() => {
watch(
() => props.applyDefault,
() => {
if (isDef(props.applyDefault)) {
store.applyDefault.value = props.applyDefault
}
},
)
watch(
store.applyDefault,
(_, __, onCleanup) => {
if (store.applyDefault.value) {
store.onNodesChange(store.applyNodeChanges)
store.onEdgesChange(store.applyEdgeChanges)
} else {
store.hooks.value.nodesChange.off(store.applyNodeChanges)
store.hooks.value.edgesChange.off(store.applyEdgeChanges)
}
onCleanup(() => {
store.hooks.value.nodesChange.off(store.applyNodeChanges)
store.hooks.value.edgesChange.off(store.applyEdgeChanges)
})
},
{ immediate: true },
)
})
}
const watchAutoConnect = () => {
scope.run(() => {
const autoConnector = async (params: Connection) => {
let connection: boolean | Connection = params
if (isFunction(props.autoConnect)) {
connection = await props.autoConnect(params)
}
if (connection !== false) {
store.addEdges([connection])
}
}
watch(
() => props.autoConnect,
() => {
if (isDef(props.autoConnect)) {
store.autoConnect.value = props.autoConnect
}
},
)
watch(
store.autoConnect,
(autoConnectEnabled, _, onCleanup) => {
if (autoConnectEnabled) {
store.onConnect(autoConnector)
} else {
store.hooks.value.connect.off(autoConnector)
}
onCleanup(() => {
store.hooks.value.connect.off(autoConnector)
})
},
{ immediate: true },
)
})
}
const watchRest = () => {
const skip: (keyof typeof props)[] = [
'id',
'modelValue',
'translateExtent',
'nodeExtent',
'edges',
'nodes',
'maxZoom',
'minZoom',
'applyDefault',
'autoConnect',
]
Object.keys(props).forEach((prop) => {
if (!skip.includes(prop as keyof typeof props)) {
const model = toRef(props, prop as keyof typeof props)
const storedValue = store[prop as keyof typeof store] as typeof model
scope.run(() => {
watch(
model,
(nextValue) => {
if (isDef(nextValue)) {
storedValue.value = nextValue
}
},
{ flush: 'pre' },
)
})
}
})
}
;[
watchModelValue,
watchNodesValue,
watchEdgesValue,
watchMinZoom,
watchMaxZoom,
watchTranslateExtent,
watchNodeExtent,
watchApplyDefault,
watchAutoConnect,
watchRest,
].forEach((watch) => watch())
})
return () => scope.stop()
}