kopia lustrzana https://github.com/Tldraw/Tldraw
38 wiersze
1.4 KiB
TypeScript
38 wiersze
1.4 KiB
TypeScript
import { CubicSegment2d, LineSegment2d } from '@tldraw/primitives'
|
|
import { TLDashType } from '@tldraw/tlschema'
|
|
import { getPerfectDashProps } from '../../shared/getPerfectDashProps'
|
|
|
|
export interface SegmentProps {
|
|
strokeWidth: number
|
|
dash: TLDashType
|
|
segment: LineSegment2d | CubicSegment2d
|
|
location: 'start' | 'middle' | 'end' | 'solo'
|
|
}
|
|
|
|
export function Segment({ segment, dash, strokeWidth, location }: SegmentProps) {
|
|
const { strokeDasharray, strokeDashoffset } = getPerfectDashProps(segment.length, strokeWidth, {
|
|
style: dash,
|
|
start: location === 'end' || location === 'middle' ? 'outset' : 'none',
|
|
end: location === 'start' || location === 'middle' ? 'outset' : 'none',
|
|
})
|
|
|
|
return (
|
|
<path strokeDasharray={strokeDasharray} strokeDashoffset={strokeDashoffset} d={segment.path} />
|
|
)
|
|
}
|
|
|
|
export function SegmentSvg({ segment, dash, strokeWidth, location }: SegmentProps) {
|
|
const { strokeDasharray, strokeDashoffset } = getPerfectDashProps(segment.length, strokeWidth, {
|
|
style: dash,
|
|
start: location === 'end' || location === 'middle' ? 'outset' : 'none',
|
|
end: location === 'start' || location === 'middle' ? 'outset' : 'none',
|
|
})
|
|
|
|
const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
|
|
path.setAttribute('stroke-dasharray', strokeDasharray.toString())
|
|
path.setAttribute('stroke-dashoffset', strokeDashoffset.toString())
|
|
path.setAttribute('d', segment.path)
|
|
|
|
return path
|
|
}
|