Fix highlighter dots not being clickable (#1903)

This PR fixes highlighter shapes not having the correct geometry when
they're a dot. It uses the same approach as Draw shapes.

Closes #1901


![image](https://github.com/tldraw/tldraw/assets/15892272/4bd47bc8-6ee4-4ea4-8a07-099c96e325b9)


![2023-09-18 at 13 57 03 - Fuchsia
Cephalopod](https://github.com/tldraw/tldraw/assets/15892272/bf2d28d5-e09e-47f6-b754-969736e0a11a)

### Change Type

- [x] `patch` — Bug fix


[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

1. Click with the highlighter tool to draw a single dot.
2. With the select tool, try to click the dot to select it.

You should be able to select the dot by clicking it.

- [x] Unit Tests
- [ ] End to end tests

### Release Notes

- None - unreleased bug

packages/tldraw/api-report.md

@@ -658,7 +658,7 @@ export class HighlightShapeUtil extends ShapeUtil<TLHighlightShape> {
     // (undocumented)
     getDefaultProps(): TLHighlightShape['props'];
     // (undocumented)
-    getGeometry(shape: TLHighlightShape): Polyline2d;
+    getGeometry(shape: TLHighlightShape): Circle2d | Polyline2d;
     // (undocumented)
     hideResizeHandles: (shape: TLHighlightShape) => boolean;
     // (undocumented)

packages/tldraw/src/lib/shapes/highlight/HighlightShapeUtil.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import {
+	Circle2d,
 	Polyline2d,
 	SVGContainer,
 	ShapeUtil,
@@ -46,6 +47,16 @@ export class HighlightShapeUtil extends ShapeUtil<TLHighlightShape> {
 	}
 
 	getGeometry(shape: TLHighlightShape) {
+		if (getIsDot(shape)) {
+			const strokeWidth = getStrokeWidth(shape)
+			return new Circle2d({
+				x: -strokeWidth / 2,
+				y: -strokeWidth / 2,
+				radius: strokeWidth / 2,
+				isFilled: true,
+			})
+		}
+
 		return new Polyline2d({
 			points: getPointsFromSegments(shape.props.segments),
 		})

packages/tldraw/src/test/HighlightShape.test.ts

@@ -0,0 +1,24 @@
+import { TestEditor } from './TestEditor'
+
+jest.useFakeTimers()
+
+let editor: TestEditor
+
+afterEach(() => {
+	editor?.dispose()
+})
+
+beforeEach(() => {
+	editor = new TestEditor()
+
+	editor.createShapes([])
+})
+
+describe('Highlight shape', () => {
+	it('can be selected by clicking its side', () => {
+		editor.setCurrentTool('highlight').pointerDown(60, 60).pointerUp()
+		editor.setCurrentTool('select').pointerDown(70, 70).pointerUp()
+
+		expect(editor.selectedShapes).toHaveLength(1)
+	})
+})