Custom shape is not rendering to the intended shape

[Infinity-code]

I tried to create a custom shape following the example code provided in the source code. I wanted to get a circle shape but unable to render the shape, instead a rectangle is being rendered.

Below is the code:

import {
  Circle2d,
	Geometry2d,
	HTMLContainer,
	ShapeProps,
	ShapeUtil,
	T,
	TLBaseShape,
	TLOnResizeHandler,
	Tldraw,
	resizeBox,
} from 'tldraw'
import 'tldraw/tldraw.css'

type VertexShape = TLBaseShape<
	'vertex',
	{
		r: number //radius of the circle
		text: string
	}
>


export class VertexShapeUtil extends ShapeUtil<VertexShape> {
	
	static override type = 'vertex' as const
	static override props: ShapeProps<VertexShape> = {
		r:T.number,
		text: T.string,
	}

	
	getDefaultProps(): VertexShape['props'] {
		return {
			r:40,
			text: "I'm a vertex!",
		}
	}

	
	override canBind = () => true
	override canEdit = () => false
	override canResize = () => true
	override isAspectRatioLocked = () => false

	
	getGeometry(shape: VertexShape): Geometry2d {
		return new Circle2d({
			radius:shape.props.r,
			isFilled: true,
		})
	}

	
	override onResize: TLOnResizeHandler<any> = (shape, info) => {
		return resizeBox(shape, info)
	}

	
	component(shape: VertexShape) {
		return <HTMLContainer style={{ backgroundColor: '#efefef' }}>{shape.props.text}</HTMLContainer>
	}

	
	indicator(shape: VertexShape) {
		return <circle radius={shape.props.r}/>
	}
}


const customShape = [VertexShapeUtil]
export default function App() {
	return (
		<div style={{
                        position:"absolute",
                        inset:0
                         }}>
			<Tldraw
				shapeUtils={customShape}
				onMount={(editor) => {
					editor.createShape({ type: 'vertex', x: 100, y: 100 })
				}}
			/>
		</div>
	)
}

What am I doing wrong here?

[SomeHats]

(answered on discord, copy-pasting my answer here in case it's helpful in future)

There's a couple different things going on here that involve the shape of a shape:

1. getGeometry. This describes tldraw's internal view of the shape and is used for stuff like hit testing and arrow binding. You can see what it looks like by opening the debug menu in the bottom right, and checking "debug geometry" in the "debug flags" section
2. component. This is a react component that returns the HTML (or SVG) that actually gets rendered at the shape. This is what's on screen in that screenshot!
3. indicator. This is another react component that returns the SVG for the shape indicator which shows when it's hovered.

The component is just normal HTML - there's nothing special about it. If you want it to be a circle, you need to set border-radius etc instead. the geometry and indicator are separate from it