diff --git a/packages/element/src/transformHandles.ts b/packages/element/src/transformHandles.ts index 679937d4ae..b311e3af83 100644 --- a/packages/element/src/transformHandles.ts +++ b/packages/element/src/transformHandles.ts @@ -2,6 +2,7 @@ import { DEFAULT_TRANSFORM_HANDLE_SPACING, isAndroid, isIOS, + isMobileOrTablet, } from "@excalidraw/common"; import { pointFrom, pointRotateRads } from "@excalidraw/math"; @@ -326,7 +327,7 @@ export const getTransformHandles = ( ); }; -export const shouldShowBoundingBox = ( +export const hasBoundingBox = ( elements: readonly NonDeletedExcalidrawElement[], appState: InteractiveCanvasAppState, ) => { @@ -345,5 +346,7 @@ export const shouldShowBoundingBox = ( return true; } - return element.points.length > 2; + // on mobile/tablet we currently don't show bbox because of resize issues + // (also prob best for simplicity's sake) + return element.points.length > 2 && !isMobileOrTablet(); }; diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx index 178c0cd631..514582dc96 100644 --- a/packages/excalidraw/components/App.tsx +++ b/packages/excalidraw/components/App.tsx @@ -172,7 +172,7 @@ import { getContainerElement, isValidTextContainer, redrawTextBoundingBox, - shouldShowBoundingBox, + hasBoundingBox, getFrameChildren, isCursorInFrame, addElementsToFrame, @@ -5678,7 +5678,7 @@ class App extends React.Component { if ( considerBoundingBox && this.state.selectedElementIds[element.id] && - shouldShowBoundingBox([element], this.state) + hasBoundingBox([element], this.state) ) { // if hitting the bounding box, return early // but if not, we should check for other cases as well (e.g. frame name) @@ -6597,7 +6597,13 @@ class App extends React.Component { (!this.state.selectedLinearElement || this.state.selectedLinearElement.hoverPointIndex === -1) && this.state.openDialog?.name !== "elementLinkSelector" && - !(selectedElements.length === 1 && isElbowArrow(selectedElements[0])) + !(selectedElements.length === 1 && isElbowArrow(selectedElements[0])) && + // HACK: Disable transform handles for linear elements on mobile until a + // better way of showing them is found + !( + isLinearElement(selectedElements[0]) && + (isMobileOrTablet() || selectedElements[0].points.length === 2) + ) ) { const elementWithTransformHandleType = getElementWithTransformHandleType( @@ -7730,14 +7736,8 @@ class App extends React.Component { !this.state.selectedLinearElement?.isEditing && !isElbowArrow(selectedElements[0]) && !( - isLineElement(selectedElements[0]) && - LinearElementEditor.getPointIndexUnderCursor( - selectedElements[0], - elementsMap, - this.state.zoom, - pointerDownState.origin.x, - pointerDownState.origin.y, - ) !== -1 + isLinearElement(selectedElements[0]) && + (isMobileOrTablet() || selectedElements[0].points.length === 2) ) && !( this.state.selectedLinearElement && diff --git a/packages/excalidraw/renderer/interactiveScene.ts b/packages/excalidraw/renderer/interactiveScene.ts index e8e016d519..da26e01718 100644 --- a/packages/excalidraw/renderer/interactiveScene.ts +++ b/packages/excalidraw/renderer/interactiveScene.ts @@ -28,7 +28,7 @@ import { getOmitSidesForDevice, getTransformHandles, getTransformHandlesFromCoords, - shouldShowBoundingBox, + hasBoundingBox, } from "@excalidraw/element"; import { isElbowArrow, @@ -1086,7 +1086,7 @@ const _renderInteractiveScene = ({ !appState.newElement && !appState.selectedLinearElement?.isEditing ) { - const showBoundingBox = shouldShowBoundingBox(selectedElements, appState); + const showBoundingBox = hasBoundingBox(selectedElements, appState); const isSingleLinearElementSelected = selectedElements.length === 1 && isLinearElement(selectedElements[0]);