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

refactor(core): remove primtive typeguards

Browse Source
This commit is contained in:
braks
2023-10-19 19:16:31 +02:00
committed by Braks
parent 785f147236
commit 3b175a553e
10 changed files with 35 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/core/src/components/Edges/BaseEdge.vue
View File

@@ -1,7 +1,6 @@
<script lang="ts" setup>
import { ref, useAttrs } from 'vue'
import type { BaseEdgeProps } from '../../types'
import { isNumber } from '../../utils'
import EdgeText from './EdgeText.vue'
const { interactionWidth = 20, labelShowBg = true, ...props } = defineProps<BaseEdgeProps>()
@@ -52,7 +51,7 @@ export default {
/>
<EdgeText
v-if="label && isNumber(labelX) && isNumber(labelY)"
v-if="label && labelX && labelY"
ref="labelEl"
:x="labelX"
:y="labelY"

3
packages/core/src/components/Edges/EdgeText.vue
View File

@@ -2,7 +2,6 @@
import { computed, onMounted, ref, watch } from 'vue'
import type { EdgeTextProps } from '../../types/components'
import type { Rect as RectType } from '../../types'
import { isString } from '../../utils'
const {
x,
@@ -61,7 +60,7 @@ export default {
<text v-bind="$attrs" ref="el" class="vue-flow__edge-text" :y="box.height / 2" dy="0.3em" :style="labelStyle">
<slot>
<component :is="label as any" v-if="!isString(label)" />
<component :is="label" v-if="typeof label !== 'string'" />
<template v-else>
{{ label }}
</template>

12
packages/core/src/components/Handle/Handle.vue
View File

@@ -4,7 +4,7 @@ import { computed, onUnmounted, ref } from 'vue'
import type { HandleProps } from '../../types/handle'
import { Position } from '../../types'
import { useHandle, useNode, useVueFlow } from '../../composables'
import { getDimensions, isDef, isFunction, isMouseEvent, isNumber, isString } from '../../utils'
import { getDimensions, isDef, isMouseEvent } from '../../utils'
const {
position = Position.Top,
@@ -47,7 +47,7 @@ const { handlePointerDown, handleClick } = useHandle({
})
const isConnectable = computed(() => {
if (isString(connectable) && connectable === 'single') {
if (typeof connectable === 'string' && connectable === 'single') {
return !connectedEdges.value.some((edge) => {
const id = edge[`${type.value}Handle`]
@@ -59,7 +59,7 @@ const isConnectable = computed(() => {
})
}
if (isNumber(connectable)) {
if (typeof connectable === 'number') {
return (
connectedEdges.value.filter((edge) => {
const id = edge[`${type.value}Handle`]
@@ -73,14 +73,14 @@ const isConnectable = computed(() => {
)
}
if (isFunction(connectable)) {
if (typeof connectable === 'function') {
return connectable(node, connectedEdges.value)
}
return isDef(connectable) ? connectable : nodesConnectable.value
})
const isConnecting = computed(
const isConnecting = toRef(
() =>
(connectionStartHandle.value?.nodeId === nodeId &&
connectionStartHandle.value?.handleId === handleId.value &&
@@ -90,7 +90,7 @@ const isConnecting = computed(
connectionEndHandle.value?.type === type.value),
)
const isClickConnecting = computed(
const isClickConnecting = toRef(
() =>
connectionClickStartHandle.value?.nodeId === nodeId &&
connectionClickStartHandle.value?.handleId === handleId.value &&

3
packages/core/src/components/Nodes/NodeWrapper.ts
View File

@@ -11,7 +11,6 @@ import {
getConnectedEdges,
getXYZPos,
handleNodeClick,
isNumber,
} from '~/utils'
interface Props {
@@ -153,7 +152,7 @@ const NodeWrapper = defineComponent({
z: nodeZIndex + (elevateNodesOnSelect.value ? (node.value.selected ? 1000 : 0) : 0),
}
if (isNumber(parentX) && isNumber(parentY)) {
if (typeof parentX !== 'undefined' && typeof parentY !== 'undefined') {
node.value.computedPosition = getXYZPos({ x: parentX, y: parentY, z: parentZ! }, xyzPos)
} else {
node.value.computedPosition = xyzPos

4
packages/core/src/composables/useWatchProps.ts
View File

@@ -3,7 +3,7 @@ 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'
import { isDef } from '~/utils'
export function useWatchProps(
models: ToRefs<Pick<FlowProps, 'nodes' | 'edges' | 'modelValue'>>,
@@ -221,7 +221,7 @@ export function useWatchProps(
const autoConnector = async (params: Connection) => {
let connection: boolean | Connection = params
if (isFunction(props.autoConnect)) {
if (typeof props.autoConnect === 'function') {
connection = await props.autoConnect(params)
}

14
packages/core/src/utils/changes.ts
View File

@@ -1,5 +1,5 @@
import { nextTick } from 'vue'
import { isDef, isFunction, isGraphNode, isString } from '.'
import { isDef, isGraphNode } from '.'
import type {
EdgeAddChange,
EdgeChange,
@@ -26,7 +26,7 @@ function handleParentExpand(updateItem: GraphNode, parent: GraphNode) {
if (extendWidth > 0 || extendHeight > 0 || updateItem.position.x < 0 || updateItem.position.y < 0) {
let parentStyles: Styles = {}
if (isFunction(parent.style)) {
if (typeof parent.style === 'function') {
parentStyles = { ...parent.style(parent) }
} else if (parent.style) {
parentStyles = { ...parent.style }
@@ -36,7 +36,7 @@ function handleParentExpand(updateItem: GraphNode, parent: GraphNode) {
parentStyles.height = parentStyles.height ?? `${parent.dimensions.height}px`
if (extendWidth > 0) {
if (isString(parentStyles.width)) {
if (typeof parentStyles.width === 'string') {
const currWidth = Number(parentStyles.width.replace('px', ''))
parentStyles.width = `${currWidth + extendWidth}px`
} else {
@@ -45,7 +45,7 @@ function handleParentExpand(updateItem: GraphNode, parent: GraphNode) {
}
if (extendHeight > 0) {
if (isString(parentStyles.height)) {
if (typeof parentStyles.height === 'string') {
const currWidth = Number(parentStyles.height.replace('px', ''))
parentStyles.height = `${currWidth + extendHeight}px`
} else {
@@ -57,7 +57,7 @@ function handleParentExpand(updateItem: GraphNode, parent: GraphNode) {
const xDiff = Math.abs(updateItem.position.x)
parent.position.x = parent.position.x - xDiff
if (isString(parentStyles.width)) {
if (typeof parentStyles.width === 'string') {
const currWidth = Number(parentStyles.width.replace('px', ''))
parentStyles.width = `${currWidth + xDiff}px`
} else {
@@ -71,7 +71,7 @@ function handleParentExpand(updateItem: GraphNode, parent: GraphNode) {
const yDiff = Math.abs(updateItem.position.y)
parent.position.y = parent.position.y - yDiff
if (isString(parentStyles.height)) {
if (typeof parentStyles.height === 'string') {
const currWidth = Number(parentStyles.height.replace('px', ''))
parentStyles.height = `${currWidth + yDiff}px`
} else {
@@ -84,7 +84,7 @@ function handleParentExpand(updateItem: GraphNode, parent: GraphNode) {
parent.dimensions.width = Number(parentStyles.width.toString().replace('px', ''))
parent.dimensions.height = Number(parentStyles.height.toString().replace('px', ''))
if (isFunction(parent.style)) {
if (typeof parent.style === 'function') {
parent.style = (p) => {
const styleFunc = parent.style as StyleFunc

10
packages/core/src/utils/drag.ts
View File

@@ -1,5 +1,5 @@
import { markRaw } from 'vue'
import { ErrorCode, VueFlowError, clampPosition, isNumber, isParentSelected } from '.'
import { ErrorCode, VueFlowError, clampPosition, isParentSelected } from '.'
import type {
Actions,
CoordinateExtent,
@@ -108,10 +108,10 @@ function getParentExtent(
if (
parent &&
isNumber(parent.computedPosition.x) &&
isNumber(parent.computedPosition.y) &&
isNumber(parent.dimensions.width) &&
isNumber(parent.dimensions.height)
typeof parent.computedPosition.x !== 'undefined' &&
typeof parent.computedPosition.y !== 'undefined' &&
typeof parent.dimensions.width !== 'undefined' &&
typeof parent.dimensions.height !== 'undefined'
) {
return [
[parent.computedPosition.x + left, parent.computedPosition.y + top],

4
packages/core/src/utils/edge.ts
View File

@@ -1,4 +1,4 @@
import { isNumber, rectToBox } from '.'
import { rectToBox } from '.'
import type { Actions, EdgePositions, GraphEdge, GraphNode, HandleElement, Rect, ViewportTransform, XYPosition } from '~/types'
import { Position } from '~/types'
@@ -132,7 +132,7 @@ export function isEdgeVisible({
}
export function getEdgeZIndex(edge: GraphEdge, findNode: Actions['findNode'], elevateEdgesOnSelect = false) {
const hasZIndex = isNumber(edge.zIndex)
const hasZIndex = typeof edge.zIndex === 'number'
let z = hasZIndex ? edge.zIndex! : 0
const source = findNode(edge.source)

16
packages/core/src/utils/general.ts
View File

@@ -13,20 +13,4 @@ export function getEventPosition(event: MouseEvent | TouchEvent, bounds?: DOMRec
}
}
export function isString(val: any): val is string {
return typeof val === 'string'
}
export function isFunction(val: any): val is Function {
return typeof val === 'function'
}
export function isBoolean(val: any): val is boolean {
return typeof val === 'boolean'
}
export function isNumber(val: any): val is number {
return typeof val === 'number'
}
export const isMacOs = () => typeof navigator !== 'undefined' && navigator?.userAgent?.indexOf('Mac') >= 0

20
packages/core/src/utils/graph.ts
View File

@@ -1,5 +1,5 @@
import { markRaw } from 'vue'
import { isDef, isString, warn } from '.'
import { isDef, warn } from '.'
import type {
Actions,
Box,
@@ -145,7 +145,7 @@ export function parseEdge(edge: Edge, defaults: Partial<GraphEdge> = {}): GraphE
focusable: edge.focusable ?? defaults.focusable,
data,
events: markRaw(events),
label: (edge.label && !isString(edge.label) ? markRaw(edge.label) : edge.label) || defaults.label,
label: (edge.label && typeof edge.label !== 'string' ? markRaw(edge.label) : edge.label) || defaults.label,
interactionWidth: edge.interactionWidth || defaults.interactionWidth,
} as GraphEdge)
: defaults
@@ -159,7 +159,7 @@ function getConnectedElements<T extends Node = Node>(
edges: Edge[],
dir: 'source' | 'target',
): T[] {
const id = isString(nodeOrId) ? nodeOrId : nodeOrId.id
const id = typeof nodeOrId === 'string' ? nodeOrId : nodeOrId.id
const connectedIds = new Set()
@@ -186,9 +186,9 @@ export function getOutgoers(...args: any[]) {
}
const [nodeOrId, elements] = args
const node: Node = isString(nodeOrId) ? { id: nodeOrId } : nodeOrId
const nodeId = typeof nodeOrId === 'string' ? nodeOrId : nodeOrId.id
const outgoers = elements.filter((el: Element) => isEdge(el) && el.source === node.id)
const outgoers = elements.filter((el: Element) => isEdge(el) && el.source === nodeId)
return outgoers.map((edge: Edge) => elements.find((el: Element) => isNode(el) && el.id === edge.target))
}
@@ -205,9 +205,9 @@ export function getIncomers(...args: any[]) {
}
const [nodeOrId, elements] = args
const node: Node = isString(nodeOrId) ? { id: nodeOrId } : nodeOrId
const nodeId = typeof nodeOrId === 'string' ? nodeOrId : nodeOrId.id
const incomers = elements.filter((el: Element) => isEdge(el) && el.target === node.id)
const incomers = elements.filter((el: Element) => isEdge(el) && el.target === nodeId)
return incomers.map((edge: Edge) => elements.find((el: Element) => isNode(el) && el.id === edge.source))
}
@@ -408,7 +408,7 @@ export function getNodesInside(
export function getConnectedEdges<E extends Edge>(nodesOrId: Node[] | string, edges: E[]) {
const nodeIds = new Set()
if (isString(nodesOrId)) {
if (typeof nodesOrId === 'string') {
nodeIds.add(nodesOrId)
} else if (nodesOrId.length >= 1) {
nodesOrId.forEach((n) => nodeIds.add(n.id))
@@ -420,7 +420,7 @@ export function getConnectedEdges<E extends Edge>(nodesOrId: Node[] | string, ed
export function getConnectedNodes<N extends Node | { id: string } | string>(nodes: N[], edges: Edge[]) {
const nodeIds = new Set()
nodes.forEach((node) => nodeIds.add(isString(node) ? node : node.id))
nodes.forEach((node) => nodeIds.add(typeof node === 'string' ? node : node.id))
const connectedNodeIds = edges.reduce((acc, edge) => {
if (nodeIds.has(edge.source)) {
@@ -434,7 +434,7 @@ export function getConnectedNodes<N extends Node | { id: string } | string>(node
return acc
}, new Set())
return nodes.filter((node) => connectedNodeIds.has(isString(node) ? node : node.id))
return nodes.filter((node) => connectedNodeIds.has(typeof node === 'string' ? node : node.id))
}
export function getTransformForBounds(