56 lines
1.5 KiB
TypeScript
56 lines
1.5 KiB
TypeScript
'use client'
|
|
|
|
import React from 'react'
|
|
import { Line } from 'react-konva'
|
|
import { StartingContextConnection } from '../context/types'
|
|
import { entities } from '../../../wailsjs/wailsjs/go/models'
|
|
import { Coordinates } from '../types'
|
|
|
|
type CurrentDrawingConnectionProps = {
|
|
startingContextConnection: StartingContextConnection | null
|
|
areas: entities.Area[],
|
|
scale: number,
|
|
endDrawingPosition: Coordinates | null
|
|
}
|
|
const CurrentDrawingConnection = (props: CurrentDrawingConnectionProps) => {
|
|
const { startingContextConnection, areas, scale, endDrawingPosition } = props
|
|
if (!startingContextConnection || !endDrawingPosition) return <></>
|
|
|
|
const { areaId, isHead } = startingContextConnection
|
|
|
|
const area = areas.find(a => a.id === areaId)
|
|
if (!area) return <></>
|
|
|
|
const startingPoint = {
|
|
x: ((area.startX + area.endX) * scale) / 2,
|
|
y: (isHead ? area.startY : area.endY) * scale
|
|
}
|
|
|
|
const startingTensionPoint = {
|
|
x: (startingPoint.x + endDrawingPosition.x) / 2,
|
|
y: startingPoint.y,
|
|
}
|
|
|
|
const endingTensionPoint = {
|
|
x: (startingPoint.x + endDrawingPosition.x) / 2,
|
|
y: endDrawingPosition.y,
|
|
}
|
|
|
|
return <Line
|
|
points={[
|
|
...Object.values(startingPoint),
|
|
...Object.values(startingTensionPoint),
|
|
...Object.values(endingTensionPoint),
|
|
...Object.values(endDrawingPosition),
|
|
]}
|
|
strokeEnabled
|
|
strokeWidth={2 * scale}
|
|
stroke='#dc8dec'
|
|
strokeScaleEnabled={false}
|
|
shadowForStrokeEnabled={false}
|
|
tension={0.2}
|
|
/>
|
|
}
|
|
|
|
export default CurrentDrawingConnection
|