[fix] disable vertical edge resizing for text on mobile (#2456)

This is a followup to PR #2347 which was addressing #2349.
This makes sure that vertical resizing is disabled still for the text
shapes because they get in the way of rotation.

Fixes #2455 

### 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 a step-by-step description of how to test your PR here.
2.

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

### Release Notes

- Add a brief release note for your PR here.

packages/tldraw/src/lib/canvas/TldrawSelectionForeground.tsx

@@ -159,22 +159,21 @@ export const TldrawSelectionForeground: TLSelectionForegroundComponent = track(
 		const hideBottomRightCorner =
 			!shouldDisplayControls || !showHandles || (showOnlyOneHandle && !showCropHandles)
 
-		let hideEdgeTargetsDueToCoarsePointer = isCoarsePointer
-
-		if (hideEdgeTargetsDueToCoarsePointer && onlyShape && onlyShape.type === 'text') {
-			hideEdgeTargetsDueToCoarsePointer = false
-		}
-
 		// If we're showing crop handles, then show the edges too.
 		// If we're showing resize handles, then show the edges only
-		// if we're not hiding them for some other reason
-		let hideEdgeTargets = true
+		// if we're not hiding them for some other reason.
+		let hideVerticalEdgeTargets = true
+		// The same logic above applies here, except another nuance is that
+		// we enable resizing for text on mobile (coarse).
+		let hideHorizontalEdgeTargets = true
 
 		if (showCropHandles) {
-			hideEdgeTargets = hideAlternateCropHandles
+			hideVerticalEdgeTargets = hideAlternateCropHandles
+			hideHorizontalEdgeTargets = hideAlternateCropHandles
 		} else if (showResizeHandles) {
-			hideEdgeTargets =
-				hideAlternateCornerHandles || showOnlyOneHandle || hideEdgeTargetsDueToCoarsePointer
+			hideVerticalEdgeTargets = hideAlternateCornerHandles || showOnlyOneHandle || isCoarsePointer
+			const isMobileAndTextShape = isCoarsePointer && onlyShape && onlyShape.type === 'text'
+			hideHorizontalEdgeTargets = hideVerticalEdgeTargets && !isMobileAndTextShape
 		}
 
 		const textHandleHeight = Math.min(24 / zoom, height - targetSizeY * 3)
@@ -244,7 +243,7 @@ export const TldrawSelectionForeground: TLSelectionForegroundComponent = track(
 					{/* Targets */}
 					<rect
 						className={classNames('tl-transparent', {
-							'tl-hidden': hideEdgeTargets,
+							'tl-hidden': hideVerticalEdgeTargets,
 						})}
 						data-testid="selection.resize.top"
 						aria-label="top target"
@@ -258,7 +257,7 @@ export const TldrawSelectionForeground: TLSelectionForegroundComponent = track(
 					/>
 					<rect
 						className={classNames('tl-transparent', {
-							'tl-hidden': hideEdgeTargets,
+							'tl-hidden': hideHorizontalEdgeTargets,
 						})}
 						data-testid="selection.resize.right"
 						aria-label="right target"
@@ -272,7 +271,7 @@ export const TldrawSelectionForeground: TLSelectionForegroundComponent = track(
 					/>
 					<rect
 						className={classNames('tl-transparent', {
-							'tl-hidden': hideEdgeTargets,
+							'tl-hidden': hideVerticalEdgeTargets,
 						})}
 						data-testid="selection.resize.bottom"
 						aria-label="bottom target"
@@ -286,7 +285,7 @@ export const TldrawSelectionForeground: TLSelectionForegroundComponent = track(
 					/>
 					<rect
 						className={classNames('tl-transparent', {
-							'tl-hidden': hideEdgeTargets,
+							'tl-hidden': hideHorizontalEdgeTargets,
 						})}
 						data-testid="selection.resize.left"
 						aria-label="left target"

packages/tlschema/api-report.md

@@ -1021,7 +1021,6 @@ export interface TLInstance extends BaseRecord<'instance', TLInstanceId> {
     isChangingStyle: boolean;
     // (undocumented)
     isChatting: boolean;
-    // (undocumented)
     isCoarsePointer: boolean;
     // (undocumented)
     isDebugMode: boolean;

packages/tlschema/api/api.json

@@ -6783,7 +6783,7 @@
             {
               "kind": "PropertySignature",
               "canonicalReference": "@tldraw/tlschema!TLInstance#isCoarsePointer:member",
-              "docComment": "",
+              "docComment": "/**\n * This is whether the primary input mechanism includes a pointing device of limited accuracy, such as a finger on a touchscreen. See: https://developer.mozilla.org/en-US/docs/Web/CSS/\\@media/pointer\n */\n",
               "excerptTokens": [
                 {
                   "kind": "Content",

packages/tlschema/src/records/TLInstance.ts

@@ -40,6 +40,11 @@ export interface TLInstance extends BaseRecord<'instance', TLInstanceId> {
 	canMoveCamera: boolean
 	isFocused: boolean
 	devicePixelRatio: number
+	/**
+	 * This is whether the primary input mechanism includes a pointing device of limited accuracy,
+	 * such as a finger on a touchscreen.
+	 * See: https://developer.mozilla.org/en-US/docs/Web/CSS/\@media/pointer
+	 */
 	isCoarsePointer: boolean
 	/**
 	 * Will be null if the pointer doesn't support hovering (e.g. touch), but true or false