From 533815c08144e5d221e91186dade2a5120cd403c Mon Sep 17 00:00:00 2001
From: Christopher Chedeau <vjeuxx@gmail.com>
Date: Sat, 5 Dec 2020 16:35:44 -0800
Subject: [PATCH] Fix middle handles on mobile (#2459)

For rendering we always use mouse in order to check which handles to display but when doing the hit test, we used pointer which has a different size. So we couldn't use the middle handles for small shapes. This is now fixed.

cc @j-f1 as you added it in #790
---
 src/element/transformHandles.ts | 6 ++++--
 src/renderer/renderScene.ts     | 3 ++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/element/transformHandles.ts b/src/element/transformHandles.ts
index 195581ee..bf837fbe 100644
--- a/src/element/transformHandles.ts
+++ b/src/element/transformHandles.ts
@@ -78,7 +78,7 @@ export const getTransformHandlesFromCoords = (
   [x1, y1, x2, y2]: Bounds,
   angle: number,
   zoom: Zoom,
-  pointerType: PointerType = "mouse",
+  pointerType: PointerType,
   omitSides: { [T in TransformHandleType]?: boolean } = {},
 ): TransformHandles => {
   const size = transformHandleSizes[pointerType];
@@ -160,7 +160,9 @@ export const getTransformHandlesFromCoords = (
   };
 
   // We only want to show height handles (all cardinal directions)  above a certain size
-  const minimumSizeForEightHandles = (5 * size) / zoom.value;
+  // Note: we render using "mouse" size so we should also use "mouse" size for this check
+  const minimumSizeForEightHandles =
+    (5 * transformHandleSizes.mouse) / zoom.value;
   if (Math.abs(width) > minimumSizeForEightHandles) {
     if (!omitSides.n) {
       transformHandles.n = generateTransformHandle(
diff --git a/src/renderer/renderScene.ts b/src/renderer/renderScene.ts
index 03774942..15b47887 100644
--- a/src/renderer/renderScene.ts
+++ b/src/renderer/renderScene.ts
@@ -371,6 +371,7 @@ export const renderScene = (
       const transformHandles = getTransformHandles(
         locallySelectedElements[0],
         sceneState.zoom,
+        "mouse", // when we render we don't know which pointer type so use mouse
       );
       renderTransformHandles(
         context,
@@ -402,7 +403,7 @@ export const renderScene = (
         [x1, y1, x2, y2],
         0,
         sceneState.zoom,
-        undefined,
+        "mouse",
         OMIT_SIDES_FOR_MULTIPLE_ELEMENTS,
       );
       renderTransformHandles(context, sceneState, transformHandles, 0);