diff --git a/packages/core/src/components/Edges/EdgeWrapper.ts b/packages/core/src/components/Edges/EdgeWrapper.ts index 4a398c2f..f75c28bd 100644 --- a/packages/core/src/components/Edges/EdgeWrapper.ts +++ b/packages/core/src/components/Edges/EdgeWrapper.ts @@ -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) { diff --git a/packages/core/src/components/Nodes/NodeWrapper.ts b/packages/core/src/components/Nodes/NodeWrapper.ts index 7bee292a..2ec9345d 100644 --- a/packages/core/src/components/Nodes/NodeWrapper.ts +++ b/packages/core/src/components/Nodes/NodeWrapper.ts @@ -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 diff --git a/packages/core/src/env.d.ts b/packages/core/src/env.d.ts index 6cd694c5..a9323d7a 100644 --- a/packages/core/src/env.d.ts +++ b/packages/core/src/env.d.ts @@ -4,6 +4,6 @@ declare module '*.vue' { import type { DefineComponent } from 'vue' - const component: DefineComponent<{}, {}, any> + const component: DefineComponent export default component } diff --git a/packages/core/src/store/actions.ts b/packages/core/src/store/actions.ts index 2065d248..0fac1885 100644 --- a/packages/core/src/store/actions.ts +++ b/packages/core/src/store/actions.ts @@ -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 diff --git a/packages/core/src/store/state.ts b/packages/core/src/store/state.ts index bdfdaa02..c636c6b7 100644 --- a/packages/core/src/store/state.ts +++ b/packages/core/src/store/state.ts @@ -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, diff --git a/packages/core/src/types/components.ts b/packages/core/src/types/components.ts index 05a1c5f7..257df6de 100644 --- a/packages/core/src/types/components.ts +++ b/packages/core/src/types/components.ts @@ -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 diff --git a/packages/core/src/types/edge.ts b/packages/core/src/types/edge.ts index 6389dae4..5d1a97e3 100644 --- a/packages/core/src/types/edge.ts +++ b/packages/core/src/types/edge.ts @@ -164,7 +164,7 @@ export type GraphEdge< } & EdgePositions /** these props are passed to edge components */ -export interface EdgeProps +export interface EdgeProps extends EdgeLabelOptions, EdgePositions { id: string @@ -173,7 +173,7 @@ export interface EdgeProps | Object + label?: string | VNode | Component | object style?: CSSProperties selected?: boolean sourcePosition: Position diff --git a/packages/core/src/types/hooks.ts b/packages/core/src/types/hooks.ts index 982ca8f6..555f0b91 100644 --- a/packages/core/src/types/hooks.ts +++ b/packages/core/src/types/hooks.ts @@ -112,11 +112,11 @@ export type FlowHooksEmit = Readonly<{ */ export type CustomEvent = (...args: Args) => Return -type CustomEventHandlers = { +type CustomEventHandlers = { [key in keyof CustomEvents]: CustomEvents[key] } -export type NodeEventsHandler = { +export type NodeEventsHandler = { 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 = { dragStop: (event: NodeDragEvent) => void | { off: () => void } } & CustomEventHandlers -export type NodeEventsOn = { +export type NodeEventsOn = { [key in keyof NodeEventsHandler]: EventHookOn any ? Event : never> } & CustomEventHandlers -export type NodeEventsEmit = { +export type NodeEventsEmit = { [key in keyof NodeEventsHandler]: EventHookTrigger any ? Event : never> } & CustomEventHandlers -export type EdgeEventsHandler = { +export type EdgeEventsHandler = { 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 = { updateEnd: (event: EdgeMouseEvent) => void | { off: () => void } } & CustomEventHandlers -export type EdgeEventsOn = { +export type EdgeEventsOn = { [key in keyof EdgeEventsHandler]: EventHookOn any ? Event : never> } & CustomEventHandlers -export type EdgeEventsEmit = { +export type EdgeEventsEmit = { [key in keyof EdgeEventsHandler]: EventHookTrigger any ? Event : never> } & CustomEventHandlers diff --git a/packages/core/src/types/node.ts b/packages/core/src/types/node.ts index 047b480a..02d92517 100644 --- a/packages/core/src/types/node.ts +++ b/packages/core/src/types/node.ts @@ -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 { +export interface NodeProps { /** unique node id */ id: string /** node type */ @@ -137,7 +137,7 @@ export interface NodeProps { const distance = Math.sqrt((handle.x - pos.x) ** 2 + (handle.y - pos.y) ** 2)