github/excalidraw
4
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2024-04-21 12:42:26 +00:00
Code Issues Projects Releases Wiki Activity

make small multiple elements movable

Browse Source
This commit is contained in:
Ryan Di
2024-04-19 22:39:39 +08:00
parent c8e34d4e5b
commit 695af75eef
3 changed files with 71 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/excalidraw/element/resizeTest.ts
+29 -6
View File
@@ -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),
);
packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap
+11 -11
View File
@@ -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,
},
packages/excalidraw/tests/regressionTests.test.tsx
+31 -11
View File
@@ -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 }, () => {