[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.
This commit is contained in:
Mime Čuvalo
GitHub
parent
f5b95d5df2
commit
dca7883f89
4 changed files with 20 additions and 17 deletions
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -1021,7 +1021,6 @@ export interface TLInstance extends BaseRecord<'instance', TLInstanceId> {
|
|||
isChangingStyle: boolean;
|
||||
// (undocumented)
|
||||
isChatting: boolean;
|
||||
// (undocumented)
|
||||
isCoarsePointer: boolean;
|
||||
// (undocumented)
|
||||
isDebugMode: boolean;
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue