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

feat(core): implement connection radius

Browse Source 
Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
braks
2023-02-01 22:57:05 +01:00
committed by Braks
parent 7abd0bfdf3
commit e74a20d923
9 changed files with 344 additions and 321 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/composables/useHandle.ts
+144 -311
View File
@@ -1,368 +1,202 @@
import type { MaybeRef } from '@vueuse/core'
import { isFunction } from '@vueuse/core'
import type { Actions, Connection, GraphEdge, HandleType, ValidConnectionFunc, XYPosition } from '~/types'
import { ConnectionMode } from '~/types'
interface Result {
elementBelow: Element | null
isValid: boolean
connection: Connection
isHoveringHandle: boolean
}
import type { Connection, ConnectionHandle, HandleType, ValidConnectionFunc } from '~/types'
interface UseHandleProps {
handleId: MaybeRef<string | null>
nodeId: MaybeRef<string>
type: MaybeRef<HandleType>
isValidConnection?: ValidConnectionFunc
elementEdgeUpdaterType?: MaybeRef<HandleType>
edgeUpdaterType?: MaybeRef<HandleType>
onEdgeUpdate?: (connection: Connection) => void
onEdgeUpdateEnd?: () => void
onEdgeUpdateEnd?: (event: MouseEvent | TouchEvent) => void
}
// checks if element below mouse is a handle and returns connection in form of an object { source: 123, target: 312 }
export const checkElementBelowIsValid = (
event: MouseEvent | TouchEvent,
connectionMode: ConnectionMode,
isTarget: boolean,
nodeId: string,
handleId: string | null,
isValidConnection: ValidConnectionFunc | undefined,
doc: Document,
edges: GraphEdge[],
findNode: Actions['findNode'],
) => {
const clientX = (event as TouchEvent).touches ? (event as TouchEvent).touches[0].clientX : (event as MouseEvent).clientX
const clientY = (event as TouchEvent).touches ? (event as TouchEvent).touches[0].clientY : (event as MouseEvent).clientY
const elementBelow = doc.elementFromPoint(clientX, clientY)
const elementBelowIsTarget = elementBelow?.classList.contains('target') || false
const elementBelowIsSource = elementBelow?.classList.contains('source') || false
const result: Result = {
elementBelow,
isValid: false,
connection: { source: '', target: '', sourceHandle: null, targetHandle: null },
isHoveringHandle: false,
}
if (elementBelow && (elementBelowIsTarget || elementBelowIsSource)) {
result.isHoveringHandle = true
// in strict mode we don't allow target to target or source to source connections
const isValid =
connectionMode === ConnectionMode.Strict ? (isTarget && elementBelowIsSource) || (!isTarget && elementBelowIsTarget) : true
if (isValid) {
const elementBelowNodeId = elementBelow.getAttribute('data-nodeid') ?? ''
const elementBelowHandleId = elementBelow.getAttribute('data-handleid') ?? ''
const sourceId = isTarget ? elementBelowNodeId : nodeId
const sourceHandleId = isTarget ? elementBelowHandleId : handleId
const targetId = isTarget ? nodeId : elementBelowNodeId
const targetHandleId = isTarget ? handleId : elementBelowHandleId
const connection: Connection = {
source: sourceId,
sourceHandle: sourceHandleId,
target: targetId,
targetHandle: targetHandleId,
}
result.connection = connection
result.isValid =
(isFunction(isValidConnection)
? isValidConnection(connection, { edges, sourceNode: findNode(sourceId)!, targetNode: findNode(targetId)! })
: elementBelowNodeId !== nodeId || elementBelowHandleId !== handleId) ||
!result.connection.target ||
!result.connection.source
}
}
return result
}
const resetRecentHandle = (hoveredHandle: Element): void => {
hoveredHandle?.classList.remove('vue-flow__handle-valid')
hoveredHandle?.classList.remove('vue-flow__handle-connecting')
}
/**
* This composable can be used to create custom Handle components
*
* It provides an `onClick` and `onMouseDown` handler that you can bind to your custom handle, so it will behave like the default handle.
*
*/
export default function useHandle({
handleId,
nodeId,
isValidConnection,
handleId: _handleId,
nodeId: _nodeId,
type,
elementEdgeUpdaterType,
onEdgeUpdateEnd,
isValidConnection,
edgeUpdaterType: _edgeUpdaterType,
onEdgeUpdate,
onEdgeUpdateEnd,
}: UseHandleProps) {
const isTarget = $computed(() => unref(type) === 'target')
const nodeId = $computed(() => unref(_nodeId))
const handleId = $computed(() => unref(_handleId))
const edgeUpdaterType = $computed(() => unref(_edgeUpdaterType))
const {
edges,
connectOnClick,
nodesConnectable,
connectionClickStartHandle,
vueFlowRef,
connectionMode,
emits,
connectionRadius,
connectOnClick,
connectionClickStartHandle,
nodesConnectable,
defaultEdgeOptions,
findNode,
getNodes,
startConnection,
updateConnection,
endConnection,
findNode,
vueFlowRef,
} = $(useVueFlow())
emits,
viewport,
} = useVueFlow()
const isTarget = $computed(() => unref(type) === 'target')
function handlePointerDown(event: MouseEvent | TouchEvent) {
const isMouseTriggered = isMouseEvent(event)
let recentHoveredHandle: Element
if ((isMouseTriggered && event.button === 0) || !isMouseTriggered) {
// when vue-flow is used inside a shadow root we can't use document
const doc = getHostForElement(event.target as HTMLElement)
const onMouseDown = (event: MouseEvent) => {
if (event.button !== 0) return
const validConnectFunc = isValidConnection || (() => true)
const doc = getHostForElement(event.target as HTMLElement)
if (!doc) return
let prevClosestHandle: ConnectionHandle | null
let validConnectFunc = isValidConnection
const { x, y } = getEventPosition(event)
const clickedHandle = doc?.elementFromPoint(x, y)
const handleType = getHandleType(unref(edgeUpdaterType), clickedHandle)
const containerBounds = vueFlowRef.value?.getBoundingClientRect()
const node = findNode(unref(nodeId))
if (!containerBounds || !handleType) {
return
}
if (node && (typeof node.connectable === 'undefined' ? nodesConnectable : node.connectable) === false) return
let prevActiveHandle: Element
let connectionPosition = getEventPosition(event, containerBounds)
if (!isValidConnection) {
if (node) validConnectFunc = !isTarget ? node.isValidTargetPos : node.isValidSourcePos
}
const elementBelow = doc.elementFromPoint(event.clientX, event.clientY)
const elementBelowIsTarget = elementBelow?.classList.contains('target')
const elementBelowIsSource = elementBelow?.classList.contains('source')
if (!vueFlowRef || (!elementBelowIsTarget && !elementBelowIsSource && !elementEdgeUpdaterType)) return
const handleType = elementEdgeUpdaterType ?? (elementBelowIsTarget ? 'target' : 'source')
const containerBounds = vueFlowRef.getBoundingClientRect()
startConnection(
{
nodeId: unref(nodeId),
handleId: unref(handleId),
type: unref(handleType),
},
{
x: event.clientX - containerBounds.left,
y: event.clientY - containerBounds.top,
},
event,
)
function onMouseMove(event: MouseEvent) {
updateConnection({
x: event.clientX - containerBounds.left,
y: event.clientY - containerBounds.top,
const handleLookup = getHandleLookup({
nodes: getNodes.value,
nodeId,
handleId,
handleType,
})
const { connection, elementBelow, isValid, isHoveringHandle } = checkElementBelowIsValid(
startConnection(
{
nodeId: unref(nodeId),
handleId: unref(handleId),
type: unref(handleType),
},
{
x: x - containerBounds.left,
y: y - containerBounds.top,
},
event,
connectionMode,
unref(isTarget),
unref(nodeId),
unref(handleId),
validConnectFunc,
doc,
edges,
findNode,
)
if (!isHoveringHandle) return resetRecentHandle(recentHoveredHandle)
emits.connectStart({ event, nodeId, handleId, handleType })
const isOwnHandle = connection.source === connection.target
function onPointerMove(event: MouseEvent | TouchEvent) {
connectionPosition = getEventPosition(event, containerBounds)
if (!isOwnHandle && elementBelow) {
recentHoveredHandle = elementBelow
elementBelow.classList.add('vue-flow__handle-connecting')
elementBelow.classList.toggle('vue-flow__handle-valid', isValid)
}
}
prevClosestHandle = getClosestHandle(
pointToRendererPoint(connectionPosition, viewport.value, false, [1, 1]),
connectionRadius.value,
handleLookup,
)
function onMouseUp(event: MouseEvent) {
const { connection, isValid } = checkElementBelowIsValid(
event,
connectionMode,
unref(isTarget),
unref(nodeId),
unref(handleId),
validConnectFunc,
doc,
edges,
findNode,
)
updateConnection(
prevClosestHandle
? rendererPointToPoint(
{
x: prevClosestHandle.x,
y: prevClosestHandle.y,
},
viewport.value,
)
: connectionPosition,
)
const isOwnHandle = connection.source === connection.target
if (!prevClosestHandle) {
return resetRecentHandle(prevActiveHandle)
}
if (isValid && !isOwnHandle) {
if (!onEdgeUpdate) emits.connect(connection)
else onEdgeUpdate(connection)
const { connection, handleDomNode, isValid } = isValidHandle(
prevClosestHandle,
connectionMode.value,
nodeId,
handleId,
isTarget ? 'target' : 'source',
validConnectFunc,
doc,
)
if (connection.source !== connection.target && handleDomNode) {
resetRecentHandle(prevActiveHandle)
prevActiveHandle = handleDomNode
handleDomNode.classList.add('vue-flow__handle-connecting')
handleDomNode.classList.toggle('vue-flow__handle-valid', isValid)
}
}
if (elementEdgeUpdaterType) onEdgeUpdateEnd?.()
function onPointerUp(event: MouseEvent | TouchEvent) {
if (prevClosestHandle) {
const { connection, isValid } = isValidHandle(
prevClosestHandle,
connectionMode.value,
nodeId,
handleId,
isTarget ? 'target' : 'source',
validConnectFunc,
doc,
)
resetRecentHandle(recentHoveredHandle)
if (isValid) {
if (!onEdgeUpdate) emits.connect({ ...defaultEdgeOptions, ...connection })
else onEdgeUpdate(connection)
}
}
endConnection(event)
emits.connectEnd(event)
doc.removeEventListener('mousemove', onMouseMove as EventListenerOrEventListenerObject)
doc.removeEventListener('mouseup', onMouseUp as EventListenerOrEventListenerObject)
if (edgeUpdaterType) onEdgeUpdateEnd?.(event)
resetRecentHandle(prevActiveHandle)
endConnection(event)
doc.removeEventListener('mousemove', onPointerMove as EventListener)
doc.removeEventListener('mouseup', onPointerUp as EventListener)
doc.removeEventListener('touchmove', onPointerMove as EventListener)
doc.removeEventListener('touchend', onPointerUp as EventListener)
}
doc.addEventListener('mousemove', onPointerMove as EventListener)
doc.addEventListener('mouseup', onPointerUp as EventListener)
doc.addEventListener('touchmove', onPointerMove as EventListener)
doc.addEventListener('touchend', onPointerUp as EventListener)
}
doc.addEventListener('mousemove', onMouseMove as EventListenerOrEventListenerObject)
doc.addEventListener('mouseup', onMouseUp as EventListenerOrEventListenerObject)
}
const lastTouchPos = ref<XYPosition>({ x: 0, y: 0 })
const handleClick = (event: MouseEvent) => {
if (!connectOnClick.value) return
const onTouchStart = (event: TouchEvent) => {
const clientX = event.touches[0].clientX
const clientY = event.touches[0].clientY
const doc = getHostForElement(event.target as HTMLElement)
if (!doc) return
let validConnectFunc = isValidConnection
const node = findNode(unref(nodeId))
if (node && (typeof node.connectable === 'undefined' ? nodesConnectable : node.connectable) === false) return
if (!isValidConnection) {
if (node) validConnectFunc = !isTarget ? node.isValidTargetPos : node.isValidSourcePos
}
const elementBelow = doc.elementFromPoint(clientX, clientY)
const elementBelowIsTarget = elementBelow?.classList.contains('target')
const elementBelowIsSource = elementBelow?.classList.contains('source')
if (!vueFlowRef || (!elementBelowIsTarget && !elementBelowIsSource && !elementEdgeUpdaterType)) return
const handleType = elementEdgeUpdaterType ?? (elementBelowIsTarget ? 'target' : 'source')
const containerBounds = vueFlowRef.getBoundingClientRect()
startConnection(
{
nodeId: unref(nodeId),
handleId: unref(handleId),
type: unref(handleType),
},
{
x: clientX - containerBounds.left,
y: clientY - containerBounds.top,
},
event,
)
function onTouchMove(event: TouchEvent) {
updateConnection({
x: event.touches[0].clientX - containerBounds.left,
y: event.touches[0].clientY - containerBounds.top,
})
lastTouchPos.value = {
x: event.touches[0].clientX,
y: event.touches[0].clientY,
}
const { connection, elementBelow, isValid, isHoveringHandle } = checkElementBelowIsValid(
event,
connectionMode,
unref(isTarget),
unref(nodeId),
unref(handleId),
validConnectFunc,
doc,
edges,
findNode,
)
if (!isHoveringHandle) return resetRecentHandle(recentHoveredHandle)
const isOwnHandle = connection.source === connection.target
if (!isOwnHandle && elementBelow) {
recentHoveredHandle = elementBelow
elementBelow.classList.add('vue-flow__handle-connecting')
elementBelow.classList.toggle('vue-flow__handle-valid', isValid)
}
}
function onTouchEnd(event: TouchEvent) {
const { connection, isValid } = checkElementBelowIsValid(
{ clientX: lastTouchPos.value.x, clientY: lastTouchPos.value.y } as unknown as MouseEvent,
connectionMode,
unref(isTarget),
unref(nodeId),
unref(handleId),
validConnectFunc,
doc,
edges,
findNode,
)
const isOwnHandle = connection.source === connection.target
if (isValid && !isOwnHandle) {
if (!onEdgeUpdate) emits.connect(connection)
else onEdgeUpdate(connection)
}
if (elementEdgeUpdaterType) onEdgeUpdateEnd?.()
resetRecentHandle(recentHoveredHandle)
endConnection(event)
lastTouchPos.value = { x: 0, y: 0 }
doc.removeEventListener('touchmove', onTouchMove as EventListenerOrEventListenerObject)
doc.removeEventListener('touchend', onTouchEnd as EventListenerOrEventListenerObject)
}
doc.addEventListener('touchmove', onTouchMove as EventListenerOrEventListenerObject)
doc.addEventListener('touchend', onTouchEnd as EventListenerOrEventListenerObject)
}
const onClick = (event: MouseEvent) => {
if (!connectOnClick) return
if (!connectionClickStartHandle) {
if (!connectionClickStartHandle.value) {
startConnection({ nodeId: unref(nodeId), type: unref(type), handleId: unref(handleId) }, undefined, event, true)
} else {
let validConnectFunc: ValidConnectionFunc = isValidConnection ?? (() => true)
const validConnectFunc: ValidConnectionFunc = isValidConnection ?? (() => true)
const node = findNode(unref(nodeId))
if (node && (typeof node.connectable === 'undefined' ? nodesConnectable : node.connectable) === false) return
if (!isValidConnection) {
if (node) validConnectFunc = (!isTarget ? node.isValidTargetPos : node.isValidSourcePos) ?? (() => true)
}
const doc = getHostForElement(event.target as HTMLElement)
const { connection, isValid } = checkElementBelowIsValid(
event as MouseEvent,
connectionMode,
connectionClickStartHandle.type === 'target',
connectionClickStartHandle.nodeId,
connectionClickStartHandle.handleId || null,
const { connection, isValid } = isValidHandle(
{
nodeId,
id: handleId,
type: unref(type),
},
connectionMode.value,
connectionClickStartHandle.value.nodeId,
connectionClickStartHandle.value.handleId || null,
connectionClickStartHandle.value.type,
validConnectFunc,
doc,
edges,
findNode,
)
const isOwnHandle = connection.source === connection.target
@@ -374,8 +208,7 @@ export default function useHandle({
}
return {
onMouseDown,
onTouchStart,
onClick,
handlePointerDown,
handleClick,
}
}