import { TLHandle, TLShapeId } from '@tldraw/tlschema' import classNames from 'classnames' import { SIDES } from '../../constants' import { useEditor } from '../../hooks/useEditor' /** @public */ export interface TLHandleProps { shapeId: TLShapeId handle: TLHandle zoom: number isCoarse: boolean className?: string } /** @public @react */ export function DefaultHandle({ handle, isCoarse, className, zoom }: TLHandleProps) { const editor = useEditor() const br = (isCoarse ? editor.options.coarseHandleRadius : editor.options.handleRadius) / zoom if (handle.type === 'clone') { // bouba const fr = 3 / zoom const path = `M0,${-fr} A${fr},${fr} 0 0,1 0,${fr}` const index = SIDES.indexOf(handle.id as (typeof SIDES)[number]) return ( {/* Half circle */} ) } const fr = (handle.type === 'create' && isCoarse ? 3 : 4) / Math.max(zoom, 0.25) return ( ) }