[fix] Right click groups (#1975)

@steveruizok 
I only added one test in the end and then I got distracted by chatting
text stuff

### Change Type

- [x] `tests` — Changes to any test code only[^2]

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>

packages/tldraw/src/lib/tools/SelectTool/children/Idle.ts

@@ -322,7 +322,13 @@ export class Idle extends StateNode {
 				const hitShape =
 					hoveredShape && !this.editor.isShapeOfType<TLGroupShape>(hoveredShape, 'group')
 						? hoveredShape
-						: this.editor.getShapeAtPoint(this.editor.inputs.currentPagePoint)
+						: this.editor.getShapeAtPoint(this.editor.inputs.currentPagePoint, {
+								margin: HIT_TEST_MARGIN / this.editor.zoomLevel,
+								hitInside: false,
+								hitLabels: true,
+								hitFrameInside: false,
+						  })
+
 				if (hitShape) {
 					this.onRightClick({
 						...info,

packages/tldraw/src/test/groups.test.ts

@@ -34,7 +34,14 @@ const ids = {
 	lineA: createShapeId('lineA'),
 }
 
-const box = (id: TLShapeId, x: number, y: number, w = 10, h = 10): TLShapePartial => ({
+const box = (
+	id: TLShapeId,
+	x: number,
+	y: number,
+	w = 10,
+	h = 10,
+	fill = 'solid'
+): TLShapePartial => ({
 	type: 'geo',
 	id,
 	x,
@@ -43,7 +50,7 @@ const box = (id: TLShapeId, x: number, y: number, w = 10, h = 10): TLShapePartia
 	props: {
 		w,
 		h,
-		fill: 'solid',
+		fill,
 	},
 })
 const arrow = (id: TLShapeId, start: VecLike, end: VecLike): TLShapePartial => ({
@@ -853,6 +860,37 @@ describe('focus layers', () => {
 	})
 })
 
+describe('right clicking in detail', () => {
+	const groupId = createShapeId('groupA')
+	beforeEach(() => {
+		// A - fill: none
+		// B - fill: solid
+		// C - fill: none
+		// ┌──────────────────┐
+		// │ 0 			 20   │
+		// │ ┌───┐		┌───┐ │
+		// │ │ A │		│ B │ │
+		// │ └───┘		└───┘ │
+		// └──────────────────┘
+		// ┌───┐
+		// | C |
+		// └───┘
+		editor.createShapes([
+			box(ids.boxA, 0, 0, 10, 10, 'none'),
+			box(ids.boxB, 20, 0, 10, 10, 'solid'),
+			box(ids.boxC, 0, 50, 10, 10, 'none'),
+		])
+		editor.groupShapes([ids.boxA, ids.boxB], groupId)
+		editor.selectNone()
+	})
+
+	// TODO: fix this
+	it('should select the group by right-clicking the margin of a hollow shape', () => {
+		editor.pointerMove(4, 4).pointerDown(4, 4, { target: 'canvas', button: 2 }).pointerUp()
+		expect(onlySelectedId()).toBe(groupId)
+	})
+})
+
 describe('the select tool', () => {
 	const groupAId = createShapeId('groupA')
 	const groupBId = createShapeId('groupB')