File size: 1,474 Bytes
a8b3f00 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
import { memo } from 'react'
import { useViewport } from 'reactflow'
import { useStore } from '../store'
import type {
HelpLineHorizontalPosition,
HelpLineVerticalPosition,
} from './types'
const HelpLineHorizontal = memo(({
top,
left,
width,
}: HelpLineHorizontalPosition) => {
const { x, y, zoom } = useViewport()
return (
<div
className='absolute h-[1px] bg-primary-300 z-[9]'
style={{
top: top * zoom + y,
left: left * zoom + x,
width: width * zoom,
}}
/>
)
})
HelpLineHorizontal.displayName = 'HelpLineBase'
const HelpLineVertical = memo(({
top,
left,
height,
}: HelpLineVerticalPosition) => {
const { x, y, zoom } = useViewport()
return (
<div
className='absolute w-[1px] bg-primary-300 z-[9]'
style={{
top: top * zoom + y,
left: left * zoom + x,
height: height * zoom,
}}
/>
)
})
HelpLineVertical.displayName = 'HelpLineVertical'
const HelpLine = () => {
const helpLineHorizontal = useStore(s => s.helpLineHorizontal)
const helpLineVertical = useStore(s => s.helpLineVertical)
if (!helpLineHorizontal && !helpLineVertical)
return null
return (
<>
{
helpLineHorizontal && (
<HelpLineHorizontal {...helpLineHorizontal} />
)
}
{
helpLineVertical && (
<HelpLineVertical {...helpLineVertical} />
)
}
</>
)
}
export default memo(HelpLine)
|