Merge 63e748f147 into cc4c51996c

packages/excalidraw/components/App.tsx

@@ -3828,6 +3828,26 @@ class App extends React.Component<AppProps, AppState> {
         }, 100);
       }
 
+      // remove selections on escape press
+      if (
+        event.key === KEYS.ESCAPE &&
+        // unless we're dragging or finalizing an action
+        !(
+          this.state.draggingElement ||
+          isWritableElement(event.target) ||
+          this.state.editingElement ||
+          ["freedraw", "eraser"].includes(this.state.activeTool.type)
+        )
+      ) {
+        this.setState({
+          selectedElementIds: {},
+          selectedGroupIds: {},
+          editingGroupId: null,
+        });
+        event.preventDefault();
+        return;
+      }
+
       // prevent browser zoom in input fields
       if (event[KEYS.CTRL_OR_CMD] && isWritableElement(event.target)) {
         if (event.code === CODES.MINUS || event.code === CODES.EQUAL) {

packages/excalidraw/tests/selection.test.tsx

@@ -104,6 +104,104 @@ describe("box-selection", () => {
   });
 });
 
+describe("deselect when pressing escape", () => {
+  beforeEach(async () => {
+    await render(<Excalidraw handleKeyboardGlobally={true} />);
+  });
+
+  it("deselects elements", async () => {
+    const rect1 = API.createElement({
+      type: "rectangle",
+      x: 0,
+      y: 0,
+      width: 50,
+      height: 50,
+    });
+    const rect2 = API.createElement({
+      type: "rectangle",
+      x: 100,
+      y: 0,
+      width: 50,
+      height: 50,
+    });
+
+    h.elements = [rect1, rect2];
+
+    mouse.clickAt(0, 0);
+
+    assertSelectedElements([rect1.id]);
+
+    Keyboard.keyDown(KEYS.ESCAPE);
+
+    assertSelectedElements([]);
+
+    mouse.downAt(-10, -10);
+    mouse.moveTo(160, 60);
+    mouse.up();
+
+    assertSelectedElements([rect1.id, rect2.id]);
+
+    Keyboard.keyDown(KEYS.ESCAPE);
+
+    assertSelectedElements([]);
+  });
+
+  it("deselects groups", async () => {
+    const rect1 = API.createElement({
+      type: "rectangle",
+      x: 0,
+      y: 0,
+      width: 50,
+      height: 50,
+    });
+    const rect2 = API.createElement({
+      type: "rectangle",
+      x: 100,
+      y: 0,
+      width: 50,
+      height: 50,
+    });
+    const rect3 = API.createElement({
+      type: "rectangle",
+      x: 200,
+      y: 0,
+      width: 50,
+      height: 50,
+    });
+
+    h.elements = [rect1, rect2, rect3];
+
+    mouse.downAt(-10, -10);
+    mouse.moveTo(160, 60);
+    mouse.up();
+
+    Keyboard.withModifierKeys({ ctrl: true }, () => {
+      Keyboard.keyDown(KEYS.G);
+    });
+
+    expect(Object.keys(h.state.selectedGroupIds).length).toBe(1);
+    assertSelectedElements([rect1.id, rect2.id]);
+
+    Keyboard.keyDown(KEYS.ESCAPE);
+
+    expect(Object.keys(h.state.selectedGroupIds).length).toBe(0);
+    assertSelectedElements([]);
+
+    mouse.clickAt(100, 0);
+    Keyboard.withModifierKeys({ shift: true }, () => {
+      mouse.clickAt(200, 0);
+    });
+
+    expect(Object.keys(h.state.selectedGroupIds).length).toBe(1);
+    assertSelectedElements([rect1.id, rect2.id, rect3.id]);
+
+    Keyboard.keyDown(KEYS.ESCAPE);
+
+    expect(Object.keys(h.state.selectedGroupIds).length).toBe(0);
+    assertSelectedElements([]);
+  });
+});
+
 describe("inner box-selection", () => {
   beforeEach(async () => {
     await render(<Excalidraw />);
@@ -314,7 +412,7 @@ describe("select single element on the scene", () => {
     fireEvent.pointerUp(canvas);
 
     expect(renderInteractiveScene).toHaveBeenCalledTimes(9);
-    expect(renderStaticScene).toHaveBeenCalledTimes(7);
+    expect(renderStaticScene).toHaveBeenCalledTimes(8);
     expect(h.state.selectionElement).toBeNull();
     expect(h.elements.length).toEqual(1);
     expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
@@ -346,7 +444,7 @@ describe("select single element on the scene", () => {
     fireEvent.pointerUp(canvas);
 
     expect(renderInteractiveScene).toHaveBeenCalledTimes(9);
-    expect(renderStaticScene).toHaveBeenCalledTimes(7);
+    expect(renderStaticScene).toHaveBeenCalledTimes(8);
     expect(h.state.selectionElement).toBeNull();
     expect(h.elements.length).toEqual(1);
     expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
@@ -378,7 +476,7 @@ describe("select single element on the scene", () => {
     fireEvent.pointerUp(canvas);
 
     expect(renderInteractiveScene).toHaveBeenCalledTimes(9);
-    expect(renderStaticScene).toHaveBeenCalledTimes(7);
+    expect(renderStaticScene).toHaveBeenCalledTimes(8);
     expect(h.state.selectionElement).toBeNull();
     expect(h.elements.length).toEqual(1);
     expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
@@ -422,8 +520,8 @@ describe("select single element on the scene", () => {
     fireEvent.pointerDown(canvas, { clientX: 40, clientY: 40 });
     fireEvent.pointerUp(canvas);
 
-    expect(renderInteractiveScene).toHaveBeenCalledTimes(9);
-    expect(renderStaticScene).toHaveBeenCalledTimes(7);
+    expect(renderInteractiveScene).toHaveBeenCalledTimes(10);
+    expect(renderStaticScene).toHaveBeenCalledTimes(8);
     expect(h.state.selectionElement).toBeNull();
     expect(h.elements.length).toEqual(1);
     expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
@@ -466,8 +564,8 @@ describe("select single element on the scene", () => {
     fireEvent.pointerDown(canvas, { clientX: 40, clientY: 40 });
     fireEvent.pointerUp(canvas);
 
-    expect(renderInteractiveScene).toHaveBeenCalledTimes(9);
-    expect(renderStaticScene).toHaveBeenCalledTimes(7);
+    expect(renderInteractiveScene).toHaveBeenCalledTimes(10);
+    expect(renderStaticScene).toHaveBeenCalledTimes(8);
     expect(h.state.selectionElement).toBeNull();
     expect(h.elements.length).toEqual(1);
     expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();