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

chore(core): lint files

Browse Source
This commit is contained in:
braks
2024-01-21 14:35:35 +01:00
committed by Braks
parent 8bf6f26d3d
commit 68cfbaebbe
11 changed files with 74 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/components/Edges/EdgeWrapper.ts
+55 -50
View File
@@ -17,7 +17,7 @@ import EdgeAnchor from './EdgeAnchor'
interface Props {
id: string
type: EdgeComponent | Function | Object | false
type: EdgeComponent | ((...args: any[]) => any) | object | false
name: string
selectable?: boolean
focusable?: boolean
@@ -49,7 +49,7 @@ const EdgeWrapper = defineComponent({
const hooks = useEdgeHooks(props.edge, emits)
const edge = $(useVModel(props, 'edge'))
const edge = useVModel(props, 'edge')
const mouseOver = ref(false)
@@ -66,8 +66,8 @@ const EdgeWrapper = defineComponent({
provide(EdgeId, props.id)
provide(EdgeRef, edgeEl)
const edgeClass = computed(() => (edge.class instanceof Function ? edge.class(edge) : edge.class))
const edgeStyle = computed(() => (edge.style instanceof Function ? edge.style(edge) : edge.style))
const edgeClass = computed(() => (edge.value.class instanceof Function ? edge.value.class(edge.value) : edge.value.class))
const edgeStyle = computed(() => (edge.value.style instanceof Function ? edge.value.style(edge.value) : edge.value.style))
const { handlePointerDown } = useHandle({
nodeId,
@@ -80,23 +80,25 @@ const EdgeWrapper = defineComponent({
})
return () => {
const sourceNode = findNode(edge.source)
const targetNode = findNode(edge.target)
const sourceNode = findNode(edge.value.source)
const targetNode = findNode(edge.value.target)
if (!sourceNode && !targetNode) {
flowHooks.value.error.trigger(new VueFlowError(ErrorCode.EDGE_SOURCE_TARGET_MISSING, edge.id, edge.source, edge.target))
flowHooks.value.error.trigger(
new VueFlowError(ErrorCode.EDGE_SOURCE_TARGET_MISSING, edge.value.id, edge.value.source, edge.value.target),
)
return null
}
if (!sourceNode) {
flowHooks.value.error.trigger(new VueFlowError(ErrorCode.EDGE_SOURCE_MISSING, edge.id, edge.source))
flowHooks.value.error.trigger(new VueFlowError(ErrorCode.EDGE_SOURCE_MISSING, edge.value.id, edge.value.source))
return null
}
if (!targetNode) {
flowHooks.value.error.trigger(new VueFlowError(ErrorCode.EDGE_TARGET_MISSING, edge.id, edge.target))
flowHooks.value.error.trigger(new VueFlowError(ErrorCode.EDGE_TARGET_MISSING, edge.value.id, edge.value.target))
return null
}
@@ -112,7 +114,7 @@ const EdgeWrapper = defineComponent({
sourceNodeHandles = [...(sourceNode.handleBounds.source || []), ...(sourceNode.handleBounds.target || [])]
}
const sourceHandle = getHandle(sourceNodeHandles, edge.sourceHandle)
const sourceHandle = getHandle(sourceNodeHandles, edge.value.sourceHandle)
let targetNodeHandles
if (connectionMode.value === ConnectionMode.Strict) {
@@ -121,7 +123,7 @@ const EdgeWrapper = defineComponent({
targetNodeHandles = [...(targetNode.handleBounds.target || []), ...(targetNode.handleBounds.source || [])]
}
const targetHandle = getHandle(targetNodeHandles, edge.targetHandle)
const targetHandle = getHandle(targetNodeHandles, edge.value.targetHandle)
const sourcePosition = sourceHandle ? sourceHandle.position : Position.Bottom
@@ -136,10 +138,10 @@ const EdgeWrapper = defineComponent({
targetPosition,
)
edge.sourceX = sourceX
edge.sourceY = sourceY
edge.targetX = targetX
edge.targetY = targetY
edge.value.sourceX = sourceX
edge.value.sourceY = sourceY
edge.value.targetX = targetX
edge.value.targetY = targetY
return h(
'g',
@@ -154,8 +156,8 @@ const EdgeWrapper = defineComponent({
edgeClass.value,
{
updating: mouseOver.value,
selected: edge.selected,
animated: edge.animated,
selected: edge.value.selected,
animated: edge.value.animated,
inactive: !props.selectable,
},
],
@@ -167,7 +169,10 @@ const EdgeWrapper = defineComponent({
'onMouseleave': onEdgeMouseLeave,
'onKeyDown': props.focusable ? onKeyDown : undefined,
'tabIndex': props.focusable ? 0 : undefined,
'aria-label': edge.ariaLabel === null ? undefined : edge.ariaLabel || `Edge from ${edge.source} to ${edge.target}`,
'aria-label':
edge.value.ariaLabel === null
? undefined
: edge.value.ariaLabel || `Edge from ${edge.value.source} to ${edge.value.target}`,
'aria-describedby': props.focusable ? `${ARIA_EDGE_DESC_KEY}-${vueFlowId}` : undefined,
'role': props.focusable ? 'button' : 'img',
},
@@ -178,32 +183,32 @@ const EdgeWrapper = defineComponent({
id: props.id,
sourceNode,
targetNode,
source: edge.source,
target: edge.target,
type: edge.type,
source: edge.value.source,
target: edge.value.target,
type: edge.value.type,
updatable: props.updatable,
selected: edge.selected,
animated: edge.animated,
label: edge.label,
labelStyle: edge.labelStyle,
labelShowBg: edge.labelShowBg,
labelBgStyle: edge.labelBgStyle,
labelBgPadding: edge.labelBgPadding,
labelBgBorderRadius: edge.labelBgBorderRadius,
data: edge.data,
events: { ...edge.events, ...hooks.on },
selected: edge.value.selected,
animated: edge.value.animated,
label: edge.value.label,
labelStyle: edge.value.labelStyle,
labelShowBg: edge.value.labelShowBg,
labelBgStyle: edge.value.labelBgStyle,
labelBgPadding: edge.value.labelBgPadding,
labelBgBorderRadius: edge.value.labelBgBorderRadius,
data: edge.value.data,
events: { ...edge.value.events, ...hooks.on },
style: edgeStyle.value,
markerStart: `url(#${getMarkerId(edge.markerStart, vueFlowId)})`,
markerEnd: `url(#${getMarkerId(edge.markerEnd, vueFlowId)})`,
markerStart: `url(#${getMarkerId(edge.value.markerStart, vueFlowId)})`,
markerEnd: `url(#${getMarkerId(edge.value.markerEnd, vueFlowId)})`,
sourcePosition,
targetPosition,
sourceX,
sourceY,
targetX,
targetY,
sourceHandleId: edge.sourceHandle,
targetHandleId: edge.targetHandle,
interactionWidth: edge.interactionWidth,
sourceHandleId: edge.value.sourceHandle,
targetHandleId: edge.value.targetHandle,
interactionWidth: edge.value.interactionWidth,
}),
[
props.updatable === 'source' || props.updatable === true
@@ -260,11 +265,11 @@ const EdgeWrapper = defineComponent({
}
function onEdgeUpdate(event: MouseTouchEvent, connection: Connection) {
hooks.emit.update({ event, edge, connection })
hooks.emit.update({ event, edge: edge.value, connection })
}
function onEdgeUpdateEnd(event: MouseTouchEvent) {
hooks.emit.updateEnd({ event, edge })
hooks.emit.updateEnd({ event, edge: edge.value })
updating.value = false
}
@@ -275,28 +280,28 @@ const EdgeWrapper = defineComponent({
updating.value = true
nodeId.value = isSourceHandle ? edge.target : edge.source
handleId.value = (isSourceHandle ? edge.targetHandle : edge.sourceHandle) ?? ''
nodeId.value = isSourceHandle ? edge.value.target : edge.value.source
handleId.value = (isSourceHandle ? edge.value.targetHandle : edge.value.sourceHandle) ?? ''
edgeUpdaterType.value = isSourceHandle ? 'target' : 'source'
hooks.emit.updateStart({ event, edge })
hooks.emit.updateStart({ event, edge: edge.value })
handlePointerDown(event)
}
function onEdgeClick(event: MouseEvent) {
const data = { event, edge }
const data = { event, edge: edge.value }
if (props.selectable) {
nodesSelectionActive.value = false
if (edge.selected && multiSelectionActive.value) {
removeSelectedEdges([edge])
if (edge.value.selected && multiSelectionActive.value) {
removeSelectedEdges([edge.value])
edgeEl.value?.blur()
} else {
addSelectedEdges([edge])
addSelectedEdges([edge.value])
}
}
@@ -304,23 +309,23 @@ const EdgeWrapper = defineComponent({
}
function onEdgeContextMenu(event: MouseEvent) {
hooks.emit.contextMenu({ event, edge })
hooks.emit.contextMenu({ event, edge: edge.value })
}
function onDoubleClick(event: MouseEvent) {
hooks.emit.doubleClick({ event, edge })
hooks.emit.doubleClick({ event, edge: edge.value })
}
function onEdgeMouseEnter(event: MouseEvent) {
hooks.emit.mouseEnter({ event, edge })
hooks.emit.mouseEnter({ event, edge: edge.value })
}
function onEdgeMouseMove(event: MouseEvent) {
hooks.emit.mouseMove({ event, edge })
hooks.emit.mouseMove({ event, edge: edge.value })
}
function onEdgeMouseLeave(event: MouseEvent) {
hooks.emit.mouseLeave({ event, edge })
hooks.emit.mouseLeave({ event, edge: edge.value })
}
function onEdgeUpdaterSourceMouseDown(event: MouseEvent) {
packages/core/src/components/Nodes/NodeWrapper.ts
+1 -1
View File
@@ -18,7 +18,7 @@ interface Props {
selectable: boolean
connectable: HandleConnectable
focusable: boolean
type: NodeComponent | Function | Object | false
type: NodeComponent | ((...args: any[]) => any) | object | false
name: string
node: GraphNode
resizeObserver: ResizeObserver
packages/core/src/env.d.ts
Vendored
+1 -1
View File
@@ -4,6 +4,6 @@
declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
const component: DefineComponent<object, object, any>
export default component
}
packages/core/src/store/actions.ts
+1 -1
View File
@@ -643,7 +643,7 @@ export function useActions(
}
const endConnection: Actions['endConnection'] = (event, isClick) => {
state.connectionPosition = { x: NaN, y: NaN }
state.connectionPosition = { x: Number.NaN, y: Number.NaN }
state.connectionEndHandle = null
state.connectionStatus = null
packages/core/src/store/state.ts
+1 -1
View File
@@ -91,7 +91,7 @@ function defaultState(): State {
connectionStartHandle: null,
connectionEndHandle: null,
connectionClickStartHandle: null,
connectionPosition: { x: NaN, y: NaN },
connectionPosition: { x: Number.NaN, y: Number.NaN },
connectionRadius: 20,
connectOnClick: true,
connectionStatus: null,
packages/core/src/types/components.ts
+1 -1
View File
@@ -30,7 +30,7 @@ export type DefaultNodeTypes = { [key in 'input' | 'output' | 'default']: NodeCo
export interface EdgeTextProps {
x: number
y: number
label?: string | VNode | Object
label?: string | VNode | object
labelStyle?: CSSProperties
labelShowBg?: boolean
labelBgStyle?: CSSProperties
packages/core/src/types/edge.ts
+2 -2
View File
@@ -164,7 +164,7 @@ export type GraphEdge<
} & EdgePositions
/** these props are passed to edge components */
export interface EdgeProps<Data = ElementData, CustomEvents = {}, Type extends string = string>
export interface EdgeProps<Data = ElementData, CustomEvents = object, Type extends string = string>
extends EdgeLabelOptions,
EdgePositions {
id: string
@@ -173,7 +173,7 @@ export interface EdgeProps<Data = ElementData, CustomEvents = {}, Type extends s
source: string
target: string
type: Type
label?: string | VNode | Component<EdgeTextProps> | Object
label?: string | VNode | Component<EdgeTextProps> | object
style?: CSSProperties
selected?: boolean
sourcePosition: Position
packages/core/src/types/hooks.ts
+7 -7
View File
@@ -112,11 +112,11 @@ export type FlowHooksEmit = Readonly<{
*/
export type CustomEvent<Args extends any[] = any[], Return = any> = (...args: Args) => Return
type CustomEventHandlers<CustomEvents = {}> = {
type CustomEventHandlers<CustomEvents = object> = {
[key in keyof CustomEvents]: CustomEvents[key]
}
export type NodeEventsHandler<CustomEvents = {}> = {
export type NodeEventsHandler<CustomEvents = object> = {
doubleClick: (event: NodeMouseEvent) => void | { off: () => void }
click: (event: NodeMouseEvent) => void | { off: () => void }
mouseEnter: (event: NodeMouseEvent) => void | { off: () => void }
@@ -128,15 +128,15 @@ export type NodeEventsHandler<CustomEvents = {}> = {
dragStop: (event: NodeDragEvent) => void | { off: () => void }
} & CustomEventHandlers<CustomEvents>
export type NodeEventsOn<CustomEvents = {}> = {
export type NodeEventsOn<CustomEvents = object> = {
[key in keyof NodeEventsHandler]: EventHookOn<NodeEventsHandler[key] extends (event: infer Event) => any ? Event : never>
} & CustomEventHandlers<CustomEvents>
export type NodeEventsEmit<CustomEvents = {}> = {
export type NodeEventsEmit<CustomEvents = object> = {
[key in keyof NodeEventsHandler]: EventHookTrigger<NodeEventsHandler[key] extends (event: infer Event) => any ? Event : never>
} & CustomEventHandlers<CustomEvents>
export type EdgeEventsHandler<CustomEvents = {}> = {
export type EdgeEventsHandler<CustomEvents = object> = {
doubleClick: (event: EdgeMouseEvent) => void | { off: () => void }
click: (event: EdgeMouseEvent) => void | { off: () => void }
mouseEnter: (event: EdgeMouseEvent) => void | { off: () => void }
@@ -148,10 +148,10 @@ export type EdgeEventsHandler<CustomEvents = {}> = {
updateEnd: (event: EdgeMouseEvent) => void | { off: () => void }
} & CustomEventHandlers<CustomEvents>
export type EdgeEventsOn<CustomEvents = {}> = {
export type EdgeEventsOn<CustomEvents = object> = {
[key in keyof EdgeEventsHandler]: EventHookOn<EdgeEventsHandler[key] extends (event: infer Event) => any ? Event : never>
} & CustomEventHandlers<CustomEvents>
export type EdgeEventsEmit<CustomEvents = {}> = {
export type EdgeEventsEmit<CustomEvents = object> = {
[key in keyof EdgeEventsHandler]: EventHookTrigger<EdgeEventsHandler[key] extends (event: infer Event) => any ? Event : never>
} & CustomEventHandlers<CustomEvents>
packages/core/src/types/node.ts
+3 -3
View File
@@ -4,7 +4,7 @@ import type { NodeComponent } from './components'
import type { HandleConnectable, HandleElement, ValidConnectionFunc } from './handle'
import type { CustomEvent, NodeEventsHandler, NodeEventsOn } from './hooks'
/** Defined as [[x-from, y-from], [x-to, y-to]] **/
/** Defined as [[x-from, y-from], [x-to, y-to]] */
export type CoordinateExtent = [extentFrom: [fromX: number, fromY: number], extentTo: [toX: number, toY: number]]
export interface CoordinateExtentRange {
@@ -119,7 +119,7 @@ export interface GraphNode<
}
/** these props are passed to node components */
export interface NodeProps<Data = ElementData, CustomEvents = {}, Type extends string = string> {
export interface NodeProps<Data = ElementData, CustomEvents = object, Type extends string = string> {
/** unique node id */
id: string
/** node type */
@@ -137,7 +137,7 @@ export interface NodeProps<Data = ElementData, CustomEvents = {}, Type extends s
* For example like this: `h('div', props, children)`)
* Object is just a type-hack for Vue, ignore that
*/
label?: string | VNode | Component | Object
label?: string | VNode | Component | object
/**
* @deprecated will be removed in next major release and replaced by just `isValidConnection` prop
* called when used as target for new connection
packages/core/src/utils/graph.ts
+1 -1
View File
@@ -363,7 +363,7 @@ export function getRectOfNodes(nodes: GraphNode[]) {
...dimensions,
} as Rect),
),
{ x: Infinity, y: Infinity, x2: -Infinity, y2: -Infinity },
{ x: Number.POSITIVE_INFINITY, y: Number.POSITIVE_INFINITY, x2: Number.NEGATIVE_INFINITY, y2: Number.NEGATIVE_INFINITY },
)
return boxToRect(box)
packages/core/src/utils/handle.ts
+1 -1
View File
@@ -99,7 +99,7 @@ export function getClosestHandle(
// if we couldn't find a handle below the mouse cursor we look for the closest distance based on the connectionRadius
let closestHandles: { handle: ConnectionHandle; validHandleResult: ValidHandleResult }[] = []
let minDistance = Infinity
let minDistance = Number.POSITIVE_INFINITY
handles.forEach((handle) => {
const distance = Math.sqrt((handle.x - pos.x) ** 2 + (handle.y - pos.y) ** 2)