import { TLComponents, Tldraw, Vec, intersectLineSegmentPolygon, stopEventPropagation, useEditor, useValue, } from 'tldraw' import 'tldraw/tldraw.css' const components: TLComponents = { InFrontOfTheCanvas: () => { const editor = useEditor() const info = useValue( 'selection bounds', () => { const screenBounds = editor.getViewportScreenBounds() const rotation = editor.getSelectionRotation() const rotatedScreenBounds = editor.getSelectionRotatedScreenBounds() if (!rotatedScreenBounds) return return { // we really want the position within the // tldraw component's bounds, not the screen itself x: rotatedScreenBounds.x - screenBounds.x, y: rotatedScreenBounds.y - screenBounds.y, width: rotatedScreenBounds.width, height: rotatedScreenBounds.height, rotation: rotation, } }, [editor] ) if (!info) return return (

) }, } export default function BasicExample() { return (

) } /** * This button will duplicate the editor's current selected shapes in * a certain direction. Its rotation determines the appearance of the * button (its actual css rotation) as well as the direction in which * the duplicated shapes are offset from the original shapes. It's * zeroed to the right. */ function DuplicateInDirectionButton({ x, y, rotation, }: { x: number y: number rotation: number }) { const editor = useEditor() return ( ) }

Selection UI