github.com
/
excalidraw
mirror of https://github.com/excalidraw/excalidraw.git
1
0
Fork 0
Code Releases Wiki Activity

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
This commit is contained in:
Christopher Chedeau 2020-12-05 16:35:44 -08:00 committed by GitHub
parent 2b6d1470f9
commit 533815c081
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 6 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/element/transformHandles.ts
View File

@ -78,7 +78,7 @@ export const getTransformHandlesFromCoords = (
[x1, y1, x2, y2]: Bounds, [x1, y1, x2, y2]: Bounds,
angle: number, angle: number,
zoom: Zoom, zoom: Zoom,
pointerType: PointerType = "mouse", pointerType: PointerType,
omitSides: { [T in TransformHandleType]?: boolean } = {}, omitSides: { [T in TransformHandleType]?: boolean } = {},
): TransformHandles => { ): TransformHandles => {
const size = transformHandleSizes[pointerType]; 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 // 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 (Math.abs(width) > minimumSizeForEightHandles) {
if (!omitSides.n) { if (!omitSides.n) {
transformHandles.n = generateTransformHandle( transformHandles.n = generateTransformHandle(

3
src/renderer/renderScene.ts
View File

@ -371,6 +371,7 @@ export const renderScene = (
const transformHandles = getTransformHandles( const transformHandles = getTransformHandles(
locallySelectedElements[0], locallySelectedElements[0],
sceneState.zoom, sceneState.zoom,
"mouse", // when we render we don't know which pointer type so use mouse
); );
renderTransformHandles( renderTransformHandles(
context, context,
@ -402,7 +403,7 @@ export const renderScene = (
[x1, y1, x2, y2], [x1, y1, x2, y2],
0, 0,
sceneState.zoom, sceneState.zoom,
undefined, "mouse",
OMIT_SIDES_FOR_MULTIPLE_ELEMENTS, OMIT_SIDES_FOR_MULTIPLE_ELEMENTS,
); );
renderTransformHandles(context, sceneState, transformHandles, 0); renderTransformHandles(context, sceneState, transformHandles, 0);