kopia lustrzana https://github.com/Tldraw/Tldraw
44 wiersze
1.3 KiB
TypeScript
44 wiersze
1.3 KiB
TypeScript
import { TLHandle, TLShapeId } from '@tldraw/tlschema'
|
|
import classNames from 'classnames'
|
|
import { COARSE_HANDLE_RADIUS, HANDLE_RADIUS, SIDES } from '../../constants'
|
|
|
|
/** @public */
|
|
export type TLHandleProps = {
|
|
shapeId: TLShapeId
|
|
handle: TLHandle
|
|
zoom: number
|
|
isCoarse: boolean
|
|
className?: string
|
|
}
|
|
|
|
/** @public */
|
|
export function DefaultHandle({ handle, isCoarse, className, zoom }: TLHandleProps) {
|
|
const br = (isCoarse ? COARSE_HANDLE_RADIUS : HANDLE_RADIUS) / zoom
|
|
|
|
if (handle.type === 'clone') {
|
|
// bouba
|
|
const fr = 3 / Math.max(zoom, 0.35)
|
|
const path = `M0,${-fr} A${fr},${fr} 0 0,1 0,${fr}`
|
|
// kiki
|
|
// const fr = 4 / Math.max(zoom, 0.35)
|
|
// const path = `M0,${-fr} L${fr},0 L0,${fr} Z`
|
|
|
|
const index = SIDES.indexOf(handle.id as (typeof SIDES)[number])
|
|
return (
|
|
<g className={classNames(`tl-handle tl-handle__${handle.type}`, className)}>
|
|
<circle className="tl-handle__bg" r={br} />
|
|
{/* Half circle */}
|
|
<path className="tl-handle__fg" d={path} transform={`rotate(${-90 + 90 * index})`} />
|
|
</g>
|
|
)
|
|
}
|
|
|
|
const fr = (handle.type === 'create' && isCoarse ? 3 : 4) / Math.max(zoom, 0.35)
|
|
return (
|
|
<g className={classNames(`tl-handle tl-handle__${handle.type}`, className)}>
|
|
<circle className="tl-handle__bg" r={br} />
|
|
<circle className="tl-handle__fg" r={fr} />
|
|
</g>
|
|
)
|
|
}
|