106 lines
3.4 KiB
TypeScript
106 lines
3.4 KiB
TypeScript
'use client'
|
|
|
|
import { Circle, Group } from 'react-konva'
|
|
import { useStage } from '../context/provider'
|
|
import { entities } from '../../../wailsjs/wailsjs/go/models'
|
|
import { KonvaEventObject } from 'konva/lib/Node'
|
|
import { useProject } from '../../../context/Project/provider'
|
|
|
|
type Props = { areas: entities.Area[] }
|
|
const ConnectionPoints = (props: Props) => {
|
|
const { isLinkAreaContextsVisible, scale, startingContextConnection, setStartingContextConnection } = useStage()
|
|
const { requestConnectProcessedAreas } = useProject()
|
|
|
|
const handleContextAreaMouseDown = async (e: KonvaEventObject<MouseEvent>) => {
|
|
e.cancelBubble = true
|
|
const clickedConnectionPoint = {
|
|
isHead: e.currentTarget.attrs.isHead,
|
|
areaId: e.currentTarget.attrs.id
|
|
}
|
|
|
|
if (!startingContextConnection) return setStartingContextConnection(clickedConnectionPoint)
|
|
|
|
if (clickedConnectionPoint.isHead === startingContextConnection.isHead
|
|
|| clickedConnectionPoint.areaId === startingContextConnection.areaId)
|
|
return setStartingContextConnection(null)
|
|
|
|
const headId = startingContextConnection.isHead ? startingContextConnection.areaId : clickedConnectionPoint.areaId
|
|
const tailId = !startingContextConnection.isHead ? startingContextConnection.areaId : clickedConnectionPoint.areaId
|
|
setStartingContextConnection(null)
|
|
|
|
try {
|
|
await requestConnectProcessedAreas(headId, tailId)
|
|
} catch (err) {
|
|
console.warn('RequestConnectProcessedAreas', err)
|
|
}
|
|
}
|
|
|
|
const renderConnectingPointsForArea = (a: entities.Area) => {
|
|
if (!isLinkAreaContextsVisible) return <></>
|
|
|
|
const headConnector = <Circle
|
|
key={`head-${a.id}`}
|
|
id={a.id}
|
|
radius={8}
|
|
x={((a.startX + a.endX) * scale) / 2}
|
|
y={a.startY * scale}
|
|
strokeEnabled={false}
|
|
fill='#dc8dec'
|
|
strokeScaleEnabled={false}
|
|
shadowForStrokeEnabled={false}
|
|
onMouseDown={handleContextAreaMouseDown}
|
|
isHead
|
|
/>
|
|
|
|
const tailConnector = <Circle
|
|
key={`tail-${a.id}`}
|
|
id={a.id}
|
|
radius={10}
|
|
x={((a.startX + a.endX) * scale) / 2}
|
|
y={a.endY * scale}
|
|
strokeEnabled={false}
|
|
fill='#1e1e1e'
|
|
strokeScaleEnabled={false}
|
|
shadowForStrokeEnabled={false}
|
|
onMouseDown={handleContextAreaMouseDown}
|
|
isHead={false}
|
|
/>
|
|
|
|
let connectorsToRender = []
|
|
|
|
if (!startingContextConnection) connectorsToRender = [headConnector, tailConnector]
|
|
else if (startingContextConnection.isHead) connectorsToRender = [tailConnector]
|
|
else connectorsToRender = [headConnector]
|
|
|
|
if (startingContextConnection?.areaId === a.id) {
|
|
let y = (startingContextConnection.isHead ? a.startY : a.endY) * scale
|
|
connectorsToRender.push(<Circle
|
|
key={`active-${a.id}`}
|
|
id={a.id}
|
|
radius={10}
|
|
x={((a.startX + a.endX) * scale) / 2}
|
|
y={y}
|
|
strokeEnabled={false}
|
|
fill={startingContextConnection.isHead ? '#dc8dec' : '#1e1e1e'}
|
|
strokeScaleEnabled={false}
|
|
shadowForStrokeEnabled={false}
|
|
isHead={startingContextConnection.isHead}
|
|
onMouseDown={() => setStartingContextConnection(null)}
|
|
/>)
|
|
}
|
|
|
|
return <Group key={`group-${a.id}`}>
|
|
{connectorsToRender}
|
|
</Group>
|
|
}
|
|
|
|
const renderAllConnectingPoints = () => props.areas.map(a => renderConnectingPointsForArea(a))
|
|
|
|
return <Group>
|
|
{renderAllConnectingPoints()}
|
|
</Group>
|
|
|
|
}
|
|
|
|
export default ConnectionPoints
|