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

@@ -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(

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);