diff --git a/packages/excalidraw/element/resizeTest.ts b/packages/excalidraw/element/resizeTest.ts index 5c013f47d..fa0be83ce 100644 --- a/packages/excalidraw/element/resizeTest.ts +++ b/packages/excalidraw/element/resizeTest.ts @@ -24,7 +24,7 @@ import { import { Line, Point } from "../../utils/geometry/shape"; import { isLinearElement } from "./typeChecks"; -const SIDE_RESIZING_SPACING = DEFAULT_TRANSFORM_HANDLE_SPACING * 4.5; +const SIDE_RESIZING_SPACING = DEFAULT_TRANSFORM_HANDLE_SPACING * 4; const isInsideTransformHandle = ( transformHandle: TransformHandle, @@ -86,10 +86,10 @@ export const resizeTest = ( !(isLinearElement(element) && element.points.length <= 2) ) { const SPACING = SIDE_RESIZING_SPACING / zoom.value; - const HALF = DEFAULT_TRANSFORM_HANDLE_SPACING / zoom.value / 2; + const PADDING = DEFAULT_TRANSFORM_HANDLE_SPACING / zoom.value; const sides = getSelectionBorders( - [x1 - HALF, y1 - HALF], - [x2 + HALF, y2 + HALF], + [x1 - PADDING, y1 - PADDING], + [x2 + PADDING, y2 + PADDING], [cx, cy], angleToDegrees(element.angle), ); @@ -162,10 +162,33 @@ export const getTransformHandleTypeFromCoords = ( const cx = (x1 + x2) / 2; const cy = (y1 + y2) / 2; + const width = x2 - x1; + const height = y2 - y1; + + const centerLine: Line = + height > width + ? [ + [cx, y1], + [cx, y2], + ] + : [ + [x1, cy], + [x2, cy], + ]; + const SPACING = SIDE_RESIZING_SPACING / zoom.value; + const PADDING = DEFAULT_TRANSFORM_HANDLE_SPACING / zoom.value; + + if ( + (width < SPACING * 2 || height < SPACING * 2) && + pointOnLine([scenePointerX, scenePointerY], centerLine, SPACING / 2) + ) { + return false; + } + const sides = getSelectionBorders( - [x1 - SPACING, y1 - SPACING], - [x2 + SPACING, y2 + SPACING], + [x1, y1], + [x2, y2], [cx, cy], angleToDegrees(0), ); diff --git a/packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap b/packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap index 80a24f25b..f5f8613b0 100644 --- a/packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap +++ b/packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap @@ -11177,7 +11177,7 @@ History { "strokeWidth": 2, "type": "rectangle", "width": 10, - "x": 32, + "x": 30, "y": 10, }, "inserted": { @@ -11251,11 +11251,11 @@ History { }, "id1" => Delta { "deleted": { - "x": 42, + "x": 40, "y": 20, }, "inserted": { - "x": 32, + "x": 30, "y": 10, }, }, @@ -11816,7 +11816,7 @@ History { "fillStyle": "solid", "frameId": null, "groupIds": [], - "height": 10, + "height": 20, "index": "a0", "isDeleted": false, "link": null, @@ -11830,7 +11830,7 @@ History { "strokeStyle": "solid", "strokeWidth": 2, "type": "rectangle", - "width": 10, + "width": 20, "x": 10, "y": 0, }, @@ -11869,7 +11869,7 @@ History { "fillStyle": "solid", "frameId": null, "groupIds": [], - "height": 10, + "height": 20, "index": "a1", "isDeleted": false, "link": null, @@ -11883,7 +11883,7 @@ History { "strokeStyle": "solid", "strokeWidth": 2, "type": "rectangle", - "width": 10, + "width": 20, "x": 50, "y": 0, }, @@ -12007,7 +12007,7 @@ History { "fillStyle": "solid", "frameId": null, "groupIds": [], - "height": 10, + "height": 20, "index": "a2", "isDeleted": false, "link": null, @@ -12021,7 +12021,7 @@ History { "strokeStyle": "solid", "strokeWidth": 2, "type": "rectangle", - "width": 10, + "width": 20, "x": 10, "y": 50, }, @@ -12060,7 +12060,7 @@ History { "fillStyle": "solid", "frameId": null, "groupIds": [], - "height": 10, + "height": 20, "index": "a3", "isDeleted": false, "link": null, @@ -12074,7 +12074,7 @@ History { "strokeStyle": "solid", "strokeWidth": 2, "type": "rectangle", - "width": 10, + "width": 20, "x": 50, "y": 50, }, diff --git a/packages/excalidraw/tests/regressionTests.test.tsx b/packages/excalidraw/tests/regressionTests.test.tsx index 4707dd5cb..410d32d6b 100644 --- a/packages/excalidraw/tests/regressionTests.test.tsx +++ b/packages/excalidraw/tests/regressionTests.test.tsx @@ -244,7 +244,7 @@ describe("regression tests", () => { mouse.up(10, 10); UI.clickTool("rectangle"); - mouse.down(12, -10); + mouse.down(10, -10); mouse.up(10, 10); const prevRectsXY = h.elements @@ -254,10 +254,10 @@ describe("regression tests", () => { mouse.reset(); mouse.click(10, 10); Keyboard.withModifierKeys({ shift: true }, () => { - mouse.click(22, 0); + mouse.click(20, 0); }); - mouse.down(); + mouse.down(-5, 5); mouse.up(10, 10); h.elements @@ -479,7 +479,7 @@ describe("regression tests", () => { Keyboard.withModifierKeys({ alt: true }, () => { mouse.restorePosition(...end); - mouse.down(); + mouse.down(-25, -5); mouse.up(10, 10); }); @@ -1017,12 +1017,30 @@ describe("regression tests", () => { }); it("single-clicking on a subgroup of a selected group should not alter selection", () => { - const rect1 = UI.createElement("rectangle", { x: 10 }); - const rect2 = UI.createElement("rectangle", { x: 50 }); + const rect1 = UI.createElement("rectangle", { + x: 10, + width: 20, + height: 20, + }); + const rect2 = UI.createElement("rectangle", { + x: 50, + width: 20, + height: 20, + }); UI.group([rect1, rect2]); - const rect3 = UI.createElement("rectangle", { x: 10, y: 50 }); - const rect4 = UI.createElement("rectangle", { x: 50, y: 50 }); + const rect3 = UI.createElement("rectangle", { + x: 10, + y: 50, + width: 20, + height: 20, + }); + const rect4 = UI.createElement("rectangle", { + x: 50, + y: 50, + width: 20, + height: 20, + }); UI.group([rect3, rect4]); Keyboard.withModifierKeys({ ctrl: true }, () => { @@ -1066,8 +1084,9 @@ describe("regression tests", () => { UI.group([rect1, rect2]); assertSelectedElements(rect1, rect2); + mouse.reset(); Keyboard.withModifierKeys({ ctrl: true }, () => { - mouse.clickOn(rect1); + mouse.click(10, 5); }); assertSelectedElements(rect1); @@ -1081,8 +1100,9 @@ describe("regression tests", () => { UI.group([rect1, rect3]); assertSelectedElements(rect1, rect2, rect3); + mouse.reset(); Keyboard.withModifierKeys({ ctrl: true }, () => { - mouse.clickOn(rect1); + mouse.click(10, 5); }); assertSelectedElements(rect1); @@ -1164,7 +1184,7 @@ it( // Pointer down o first rectangle that is part of the group mouse.reset(); Keyboard.withModifierKeys({ shift: true }, () => { - mouse.down(); + mouse.down(100, 50); }); expect(API.getSelectedElements().length).toBe(3); Keyboard.withModifierKeys({ shift: true }, () => {