131 lines
4.2 KiB
TypeScript
131 lines
4.2 KiB
TypeScript
import { useEventListener } from '@chakra-ui/react'
|
|
import assert from 'assert'
|
|
import { useTypebot } from '@/features/editor/providers/TypebotProvider'
|
|
import { colors } from '@/lib/theme'
|
|
import React, { useMemo, useState } from 'react'
|
|
import { useEndpoints } from '../../providers/EndpointsProvider'
|
|
import { Coordinates } from '@dnd-kit/utilities'
|
|
import { computeConnectingEdgePath } from '../../helpers/computeConnectingEdgePath'
|
|
import { computeEdgePathToMouse } from '../../helpers/computeEdgePathToMouth'
|
|
import { useGraph } from '../../providers/GraphProvider'
|
|
import { ConnectingIds } from '../../types'
|
|
import { useEventsCoordinates } from '../../providers/EventsCoordinateProvider'
|
|
import { eventWidth, groupWidth } from '../../constants'
|
|
import { useGroupsStore } from '../../hooks/useGroupsStore'
|
|
|
|
type Props = {
|
|
connectingIds: ConnectingIds
|
|
}
|
|
|
|
export const DrawingEdge = ({ connectingIds }: Props) => {
|
|
const { graphPosition, setConnectingIds } = useGraph()
|
|
const {
|
|
sourceEndpointYOffsets: sourceEndpoints,
|
|
targetEndpointYOffsets: targetEndpoints,
|
|
} = useEndpoints()
|
|
const groupsCoordinates = useGroupsStore(
|
|
(state) => state.groupsCoordinates,
|
|
// Keep in cache because groups are not changing while drawing an edge
|
|
() => true
|
|
)
|
|
const { eventsCoordinates } = useEventsCoordinates()
|
|
const { createEdge } = useTypebot()
|
|
const [mousePosition, setMousePosition] = useState<Coordinates | null>(null)
|
|
|
|
const sourceElementCoordinates = connectingIds
|
|
? 'eventId' in connectingIds.source
|
|
? eventsCoordinates[connectingIds?.source.eventId]
|
|
: groupsCoordinates
|
|
? groupsCoordinates[connectingIds?.source.groupId ?? '']
|
|
: undefined
|
|
: undefined
|
|
|
|
const targetGroupCoordinates =
|
|
groupsCoordinates && groupsCoordinates[connectingIds?.target?.groupId ?? '']
|
|
|
|
const sourceTop = useMemo(() => {
|
|
if (!connectingIds) return 0
|
|
const endpointId =
|
|
'eventId' in connectingIds.source
|
|
? connectingIds.source.eventId
|
|
: connectingIds.source.itemId ?? connectingIds.source.blockId
|
|
return sourceEndpoints.get(endpointId)?.y
|
|
}, [connectingIds, sourceEndpoints])
|
|
|
|
const targetTop = useMemo(() => {
|
|
if (!connectingIds) return 0
|
|
const endpointId = connectingIds.target?.blockId
|
|
return endpointId ? targetEndpoints.get(endpointId)?.y : undefined
|
|
}, [connectingIds, targetEndpoints])
|
|
|
|
const path = useMemo(() => {
|
|
if (
|
|
!sourceTop ||
|
|
!sourceElementCoordinates ||
|
|
!mousePosition ||
|
|
!connectingIds?.source
|
|
)
|
|
return ``
|
|
|
|
return targetGroupCoordinates
|
|
? computeConnectingEdgePath({
|
|
sourceGroupCoordinates: sourceElementCoordinates,
|
|
targetGroupCoordinates,
|
|
elementWidth:
|
|
'eventId' in connectingIds.source ? eventWidth : groupWidth,
|
|
sourceTop,
|
|
targetTop,
|
|
graphScale: graphPosition.scale,
|
|
})
|
|
: computeEdgePathToMouse({
|
|
sourceGroupCoordinates: sourceElementCoordinates,
|
|
mousePosition,
|
|
sourceTop,
|
|
elementWidth:
|
|
'eventId' in connectingIds.source ? eventWidth : groupWidth,
|
|
})
|
|
}, [
|
|
sourceTop,
|
|
sourceElementCoordinates,
|
|
mousePosition,
|
|
targetGroupCoordinates,
|
|
connectingIds?.source,
|
|
targetTop,
|
|
graphPosition.scale,
|
|
])
|
|
|
|
const handleMouseMove = (e: MouseEvent) => {
|
|
if (!connectingIds) {
|
|
if (mousePosition) setMousePosition(null)
|
|
return
|
|
}
|
|
const coordinates = {
|
|
x: (e.clientX - graphPosition.x) / graphPosition.scale,
|
|
y: (e.clientY - graphPosition.y) / graphPosition.scale,
|
|
}
|
|
setMousePosition(coordinates)
|
|
}
|
|
useEventListener('mousemove', handleMouseMove)
|
|
useEventListener('mouseup', () => {
|
|
if (connectingIds?.target) createNewEdge(connectingIds)
|
|
setConnectingIds(null)
|
|
})
|
|
|
|
const createNewEdge = (connectingIds: ConnectingIds) => {
|
|
assert(connectingIds.target)
|
|
createEdge({ from: connectingIds.source, to: connectingIds.target })
|
|
}
|
|
|
|
if (mousePosition && mousePosition.x === 0 && mousePosition.y === 0)
|
|
return <></>
|
|
return (
|
|
<path
|
|
d={path}
|
|
stroke={colors.blue[400]}
|
|
strokeWidth="2px"
|
|
markerEnd="url(#blue-arrow)"
|
|
fill="none"
|
|
/>
|
|
)
|
|
}
|