Tldraw/examples/core-example-advanced/src/shapes/arrow/ArrowIndicator.tsx

26 wiersze
850 B
TypeScript

import { TLShapeUtil } from '@tldraw/core'
import Vec from '@tldraw/vec'
import * as React from 'react'
import type { ArrowShape } from './ArrowShape'
export const ArrowIndicator = TLShapeUtil.Indicator<ArrowShape>(({ shape }) => {
const { start, end } = shape.handles
const u = Vec.uni(Vec.sub(end.point, start.point))
const dist = Vec.dist(end.point, start.point)
const length = Math.min(18, dist / 2)
const ahLeft = Vec.rotWith(Vec.sub(end.point, Vec.mul(u, length)), end.point, -Math.PI / 6)
const ahRight = Vec.rotWith(Vec.sub(end.point, Vec.mul(u, length)), end.point, Math.PI / 6)
return (
<path
d={`M ${start.point} L ${end.point} M ${ahLeft} L ${end.point} ${ahRight}`}
stroke="tl-selectedStroke"
strokeWidth={2}
strokeLinejoin="round"
strokeLinecap="round"
fill="none"
/>
)
})