From de2bf5419f4010ea6cb669f3ff71ee84ac2102aa Mon Sep 17 00:00:00 2001
From: Lu Wilson <l2wilson94@gmail.com>
Date: Mon, 2 Oct 2023 15:43:41 +0100
Subject: [PATCH] [fix] Right click groups (#1975)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@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>
---
 .../src/lib/tools/SelectTool/children/Idle.ts |  8 +++-
 packages/tldraw/src/test/groups.test.ts       | 42 ++++++++++++++++++-
 2 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/packages/tldraw/src/lib/tools/SelectTool/children/Idle.ts b/packages/tldraw/src/lib/tools/SelectTool/children/Idle.ts
index 53fbcfc8f..060804f31 100644
--- a/packages/tldraw/src/lib/tools/SelectTool/children/Idle.ts
+++ b/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,
diff --git a/packages/tldraw/src/test/groups.test.ts b/packages/tldraw/src/test/groups.test.ts
index 4ff13110b..2ba59fc16 100644
--- a/packages/tldraw/src/test/groups.test.ts
+++ b/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')