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

fix(core): connections for handles bigger than connection radius

Browse Source 
Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
braks
2023-02-15 00:24:22 +01:00
committed by Braks
parent cc83ba95bd
commit 8a5225ab80
1 changed files with 21 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/composables/useHandle.ts
+21 -19
View File
@@ -34,7 +34,6 @@ export default function useHandle({
connectOnClick, connectOnClick,
connectionClickStartHandle, connectionClickStartHandle,
nodesConnectable, nodesConnectable,
defaultEdgeOptions,
autoPanOnConnect, autoPanOnConnect,
findNode, findNode,
panBy, panBy,
@@ -49,6 +48,7 @@ export default function useHandle({
let connection: Connection | null = null let connection: Connection | null = null
let isValid = false let isValid = false
let handleDomNode: Element | null = null
function handlePointerDown(event: MouseTouchEvent) { function handlePointerDown(event: MouseTouchEvent) {
const isMouseTriggered = isMouseEvent(event) const isMouseTriggered = isMouseEvent(event)
@@ -129,7 +129,7 @@ export default function useHandle({
autoPanStarted = true autoPanStarted = true
} }
const { handleDomNode, ...result } = isValidHandle( const result = isValidHandle(
event, event,
prevClosestHandle, prevClosestHandle,
connectionMode.value, connectionMode.value,
@@ -142,8 +142,12 @@ export default function useHandle({
findNode, findNode,
) )
connection = result.connection
isValid = result.isValid
handleDomNode = result.handleDomNode
updateConnection( updateConnection(
prevClosestHandle && result.isValid prevClosestHandle && isValid
? rendererPointToPoint( ? rendererPointToPoint(
{ {
x: prevClosestHandle.x, x: prevClosestHandle.x,
@@ -152,15 +156,12 @@ export default function useHandle({
viewport.value, viewport.value,
) )
: connectionPosition, : connectionPosition,
getConnectionStatus(!!prevClosestHandle, result.isValid), getConnectionStatus(!!prevClosestHandle, isValid),
) )
if (!prevClosestHandle) return resetRecentHandle(prevActiveHandle) if (!prevClosestHandle && !isValid && !handleDomNode) return resetRecentHandle(prevActiveHandle)
connection = result.connection if (connection.source !== connection.target && handleDomNode) {
isValid = result.isValid
if (result.connection.source !== result.connection.target && handleDomNode) {
resetRecentHandle(prevActiveHandle) resetRecentHandle(prevActiveHandle)
prevActiveHandle = handleDomNode prevActiveHandle = handleDomNode
@@ -172,9 +173,9 @@ export default function useHandle({
} }
function onPointerUp(event: MouseTouchEvent) { function onPointerUp(event: MouseTouchEvent) {
if (prevClosestHandle) { if (prevClosestHandle || handleDomNode) {
if (connection && isValid) { if (connection && isValid) {
if (!onEdgeUpdate) emits.connect({ ...(defaultEdgeOptions?.value || {}), ...connection }) if (!onEdgeUpdate) emits.connect(connection)
else onEdgeUpdate(event, connection) else onEdgeUpdate(event, connection)
} }
} }
@@ -191,19 +192,20 @@ export default function useHandle({
autoPanStarted = false autoPanStarted = false
isValid = false isValid = false
connection = null connection = null
handleDomNode = null
doc.removeEventListener('mousemove', onPointerMove as EventListener) doc.removeEventListener('mousemove', onPointerMove)
doc.removeEventListener('mouseup', onPointerUp as EventListener) doc.removeEventListener('mouseup', onPointerUp)
doc.removeEventListener('touchmove', onPointerMove as EventListener) doc.removeEventListener('touchmove', onPointerMove)
doc.removeEventListener('touchend', onPointerUp as EventListener) doc.removeEventListener('touchend', onPointerUp)
} }
doc.addEventListener('mousemove', onPointerMove as EventListener) doc.addEventListener('mousemove', onPointerMove)
doc.addEventListener('mouseup', onPointerUp as EventListener) doc.addEventListener('mouseup', onPointerUp)
doc.addEventListener('touchmove', onPointerMove as EventListener) doc.addEventListener('touchmove', onPointerMove)
doc.addEventListener('touchend', onPointerUp as EventListener) doc.addEventListener('touchend', onPointerUp)
} }
} }