smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: allow inner-drag-selecting with cmd/ctrl (#3603)

Browse source 
* feat: allow inner-drag-selecting with cmd/ctrl

* don't use  cursor when pressing cmd/ctrl

* ensure we reset deselected groups

* add tests

* add docs

* couple fixes around group selection
This commit is contained in:
David Luzar 2021-05-20 22:28:34 +02:00 • committed by GitHub
parent f4e10c93e1
commit 6d40039f08
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 228 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

127
src/tests/selection.test.tsx
View file

@ -10,6 +10,9 @@ import ExcalidrawApp from "../excalidraw-app";
import * as Renderer from "../renderer/renderScene";
import { KEYS } from "../keys";
import { reseed } from "../random";
import { API } from "./helpers/api";
import { Keyboard, Pointer } from "./helpers/ui";
import { getSelectedElements } from "../scene";
// Unmount ReactDOM from root
ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
@ -23,6 +26,130 @@ beforeEach(() => {
const { h } = window;
const mouse = new Pointer("mouse");
const assertSelectedIds = (ids: string[]) => {
expect(
getSelectedElements(h.app.getSceneElements(), h.state).map((el) => el.id),
).toEqual(ids);
};
describe("inner box-selection", () => {
beforeEach(async () => {
await render(<ExcalidrawApp />);
});
it("selecting elements visually nested inside another", async () => {
const rect1 = API.createElement({
type: "rectangle",
x: 0,
y: 0,
width: 300,
height: 300,
backgroundColor: "red",
fillStyle: "solid",
});
const rect2 = API.createElement({
type: "rectangle",
x: 50,
y: 50,
width: 50,
height: 50,
});
const rect3 = API.createElement({
type: "rectangle",
x: 150,
y: 150,
width: 50,
height: 50,
});
h.elements = [rect1, rect2, rect3];
Keyboard.withModifierKeys({ ctrl: true }, () => {
mouse.downAt(40, 40);
mouse.moveTo(290, 290);
mouse.up();
assertSelectedIds([rect2.id, rect3.id]);
});
});
it("selecting grouped elements visually nested inside another", async () => {
const rect1 = API.createElement({
type: "rectangle",
x: 0,
y: 0,
width: 300,
height: 300,
backgroundColor: "red",
fillStyle: "solid",
});
const rect2 = API.createElement({
type: "rectangle",
x: 50,
y: 50,
width: 50,
height: 50,
groupIds: ["A"],
});
const rect3 = API.createElement({
type: "rectangle",
x: 150,
y: 150,
width: 50,
height: 50,
groupIds: ["A"],
});
h.elements = [rect1, rect2, rect3];
Keyboard.withModifierKeys({ ctrl: true }, () => {
mouse.downAt(40, 40);
mouse.moveTo(rect2.x + rect2.width + 10, rect2.y + rect2.height + 10);
mouse.up();
assertSelectedIds([rect2.id, rect3.id]);
expect(h.state.selectedGroupIds).toEqual({ A: true });
});
});
it("selecting & deselecting grouped elements visually nested inside another", async () => {
const rect1 = API.createElement({
type: "rectangle",
x: 0,
y: 0,
width: 300,
height: 300,
backgroundColor: "red",
fillStyle: "solid",
});
const rect2 = API.createElement({
type: "rectangle",
x: 50,
y: 50,
width: 50,
height: 50,
groupIds: ["A"],
});
const rect3 = API.createElement({
type: "rectangle",
x: 150,
y: 150,
width: 50,
height: 50,
groupIds: ["A"],
});
h.elements = [rect1, rect2, rect3];
Keyboard.withModifierKeys({ ctrl: true }, () => {
mouse.downAt(rect2.x - 20, rect2.x - 20);
mouse.moveTo(rect2.x + rect2.width + 10, rect2.y + rect2.height + 10);
assertSelectedIds([rect2.id, rect3.id]);
expect(h.state.selectedGroupIds).toEqual({ A: true });
mouse.moveTo(rect2.x - 10, rect2.y - 10);
assertSelectedIds([rect1.id]);
expect(h.state.selectedGroupIds).toEqual({});
mouse.up();
});
});
});
describe("selection element", () => {
it("create selection element on pointer down", async () => {
const { getByToolName, container } = await render(<ExcalidrawApp />);