Fix selecting one shape from selection group (#1905)

relates [#1906](https://github.com/tldraw/tldraw/issues/1906)

When clicking a shape within a selection group, that shape should be
selected.

### Change Type

- [x] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

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

### Test Plan

1. Add two shapes
2. Select both
3. Click on one to select it, it should deselect the other

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

### Release Notes

- Fix bug when selecting a single shape from a selection group

Before


https://github.com/tldraw/tldraw/assets/98838967/1412f9c6-d466-42b3-af94-d08cbc1656be

After
![Kapture 2023-09-18 at 14 15
10](https://github.com/tldraw/tldraw/assets/98838967/70a7336d-7905-4b4c-b684-d5d62f2383b3)

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

@@ -129,8 +129,9 @@ export class PointingShape extends StateNode {
 						// ! tldraw hack
 						// if the shape is a geo shape, and we're inside of the label, then we want to begin editing the label
 						if (
-							this.editor.isShapeOfType<TLGeoShape>(selectingShape, 'geo') ||
+							selectedShapeIds.length === 1 &&
-							this.editor.isShapeOfType<TLArrowShape>(selectingShape, 'arrow')
+							(this.editor.isShapeOfType<TLGeoShape>(selectingShape, 'geo') ||
+								this.editor.isShapeOfType<TLArrowShape>(selectingShape, 'arrow'))
 						) {
 							const geometry = this.editor.getShapeGeometry(selectingShape)
 							const labelGeometry = (geometry as Group2d).children[1]
@@ -151,6 +152,10 @@ export class PointingShape extends StateNode {
 								}
 							}
 						}
+
+						// We just want to select the single shape from the selection
+						this.editor.mark('selecting on pointer up')
+						this.editor.select(selectingShape.id)
 					} else {
 						this.editor.mark('selecting on pointer up')
 						this.editor.select(selectingShape)

packages/tldraw/src/test/selection-omnibus.test.ts

@@ -1567,3 +1567,15 @@ it.todo('maybe? does not select a hollow closed shape if the negative distance i
 it.todo(
 	'maybe? does not edit a hollow geo shape when double clicking inside of it unless it already has a label OR the double click is in the middle of the shape'
 )
+
+it('selects one of the selected shapes on pointer up', () => {
+	editor.createShapes([
+		{ id: ids.box1, type: 'geo' },
+		{ id: ids.box2, type: 'geo', x: 300 },
+	])
+	editor.selectAll()
+	editor.pointerMove(96, 50)
+	editor.pointerDown()
+	editor.pointerUp()
+	expect(editor.selectedShapeIds).toEqual([ids.box1])
+})