smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-04-14 16:40:58 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: Bind keyboard events to excalidraw container

Browse source
This commit is contained in:
Aakansha Doshi 2021-04-10 14:47:32 +05:30
parent c19c8ecd27
commit 652d35b7ce
7 changed files with 302 additions and 261 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/components/App.tsx
View file

@ -451,6 +451,7 @@ class App extends React.Component<AppProps, AppState> {
})}
ref={this.excalidrawContainerRef}
onDrop={this.handleAppOnDrop}
tabIndex={0}
>
<IsMobileContext.Provider value={this.isMobile}>
<LayerUI
@ -848,7 +849,11 @@ class App extends React.Component<AppProps, AppState> {
this.onScroll,
);
document.removeEventListener(EVENT.KEYDOWN, this.onKeyDown, false);
this.excalidrawContainerRef.current!.removeEventListener(
EVENT.KEYDOWN,
this.onKeyDown,
false,
);
document.removeEventListener(
EVENT.MOUSE_MOVE,
this.updateCurrentCursorPosition,
@ -883,7 +888,11 @@ class App extends React.Component<AppProps, AppState> {
private addEventListeners() {
this.removeEventListeners();
document.addEventListener(EVENT.COPY, this.onCopy);
document.addEventListener(EVENT.KEYDOWN, this.onKeyDown, false);
this.excalidrawContainerRef.current!.addEventListener(
EVENT.KEYDOWN,
this.onKeyDown,
false,
);
document.addEventListener(EVENT.KEYUP, this.onKeyUp, { passive: true });
document.addEventListener(
EVENT.MOUSE_MOVE,

18
src/tests/__snapshots__/dragCreate.test.tsx.snap
View file

@ -1,8 +1,8 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`add element to the scene when pointer dragging long enough arrow 1`] = `1`;
exports[`Test dragCreate add element to the scene when pointer dragging long enough arrow 1`] = `1`;
exports[`add element to the scene when pointer dragging long enough arrow 2`] = `
exports[`Test dragCreate add element to the scene when pointer dragging long enough arrow 2`] = `
Object {
"angle": 0,
"backgroundColor": "transparent",
@ -43,9 +43,9 @@ Object {
}
`;
exports[`add element to the scene when pointer dragging long enough diamond 1`] = `1`;
exports[`Test dragCreate add element to the scene when pointer dragging long enough diamond 1`] = `1`;
exports[`add element to the scene when pointer dragging long enough diamond 2`] = `
exports[`Test dragCreate add element to the scene when pointer dragging long enough diamond 2`] = `
Object {
"angle": 0,
"backgroundColor": "transparent",
@ -71,9 +71,9 @@ Object {
}
`;
exports[`add element to the scene when pointer dragging long enough ellipse 1`] = `1`;
exports[`Test dragCreate add element to the scene when pointer dragging long enough ellipse 1`] = `1`;
exports[`add element to the scene when pointer dragging long enough ellipse 2`] = `
exports[`Test dragCreate add element to the scene when pointer dragging long enough ellipse 2`] = `
Object {
"angle": 0,
"backgroundColor": "transparent",
@ -99,7 +99,7 @@ Object {
}
`;
exports[`add element to the scene when pointer dragging long enough line 1`] = `
exports[`Test dragCreate add element to the scene when pointer dragging long enough line 1`] = `
Object {
"angle": 0,
"backgroundColor": "transparent",
@ -140,9 +140,9 @@ Object {
}
`;
exports[`add element to the scene when pointer dragging long enough rectangle 1`] = `1`;
exports[`Test dragCreate add element to the scene when pointer dragging long enough rectangle 1`] = `1`;
exports[`add element to the scene when pointer dragging long enough rectangle 2`] = `
exports[`Test dragCreate add element to the scene when pointer dragging long enough rectangle 2`] = `
Object {
"angle": 0,
"backgroundColor": "transparent",

16
src/tests/dragCreate.test.tsx
View file

@ -24,7 +24,8 @@ beforeEach(() => {
const { h } = window;
describe("add element to the scene when pointer dragging long enough", () => {
describe("Test dragCreate", () => {
describe("add element to the scene when pointer dragging long enough", () => {
it("rectangle", async () => {
const { getByToolName, container } = await render(<ExcalidrawApp />);
// select tool
@ -186,9 +187,9 @@ describe("add element to the scene when pointer dragging long enough", () => {
h.elements.forEach((element) => expect(element).toMatchSnapshot());
});
});
});
describe("do not add element to the scene if size is too small", () => {
describe("do not add element to the scene if size is too small", () => {
beforeAll(() => {
mockBoundingClientRect();
});
@ -268,7 +269,9 @@ describe("do not add element to the scene if size is too small", () => {
fireEvent.pointerUp(canvas);
// we need to finalize it because arrows and lines enter multi-mode
fireEvent.keyDown(document, { key: KEYS.ENTER });
fireEvent.keyDown(document.querySelector(".excalidraw")!, {
key: KEYS.ENTER,
});
expect(renderScene).toHaveBeenCalledTimes(7);
expect(h.state.selectionElement).toBeNull();
@ -290,10 +293,13 @@ describe("do not add element to the scene if size is too small", () => {
fireEvent.pointerUp(canvas);
// we need to finalize it because arrows and lines enter multi-mode
fireEvent.keyDown(document, { key: KEYS.ENTER });
fireEvent.keyDown(document.querySelector(".excalidraw")!, {
key: KEYS.ENTER,
});
expect(renderScene).toHaveBeenCalledTimes(7);
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(0);
});
});
});

8
src/tests/helpers/ui.ts
View file

@ -40,7 +40,7 @@ export class Keyboard {
};
static keyDown = (key: string) => {
fireEvent.keyDown(document, {
fireEvent.keyDown(document.querySelector(".excalidraw")!, {
key,
ctrlKey,
shiftKey,
@ -49,7 +49,7 @@ export class Keyboard {
};
static keyUp = (key: string) => {
fireEvent.keyUp(document, {
fireEvent.keyUp(document.querySelector(".excalidraw")!, {
key,
ctrlKey,
shiftKey,
@ -63,7 +63,7 @@ export class Keyboard {
};
static codeDown = (code: string) => {
fireEvent.keyDown(document, {
fireEvent.keyDown(document.querySelector(".excalidraw")!, {
code,
ctrlKey,
shiftKey,
@ -72,7 +72,7 @@ export class Keyboard {
};
static codeUp = (code: string) => {
fireEvent.keyUp(document, {
fireEvent.keyUp(document.querySelector(".excalidraw")!, {
code,
ctrlKey,
shiftKey,

8
src/tests/multiPointCreate.test.tsx
View file

@ -99,7 +99,9 @@ describe("multi point mode in linear elements", () => {
// done
fireEvent.pointerDown(canvas);
fireEvent.pointerUp(canvas);
fireEvent.keyDown(document, { key: KEYS.ENTER });
fireEvent.keyDown(document.querySelector(".excalidraw")!, {
key: KEYS.ENTER,
});
expect(renderScene).toHaveBeenCalledTimes(14);
expect(h.elements.length).toEqual(1);
@ -140,7 +142,9 @@ describe("multi point mode in linear elements", () => {
// done
fireEvent.pointerDown(canvas);
fireEvent.pointerUp(canvas);
fireEvent.keyDown(document, { key: KEYS.ENTER });
fireEvent.keyDown(document.querySelector(".excalidraw")!, {
key: KEYS.ENTER,
});
expect(renderScene).toHaveBeenCalledTimes(14);
expect(h.elements.length).toEqual(1);

20
src/tests/regressionTests.test.tsx
View file

@ -413,11 +413,23 @@ describe("regression tests", () => {
it("zoom hotkeys", () => {
expect(h.state.zoom.value).toBe(1);
fireEvent.keyDown(document, { code: CODES.EQUAL, ctrlKey: true });
fireEvent.keyUp(document, { code: CODES.EQUAL, ctrlKey: true });
fireEvent.keyDown(document.querySelector(".excalidraw")!, {
code: CODES.EQUAL,
ctrlKey: true,
});
fireEvent.keyUp(document.querySelector(".excalidraw")!, {
code: CODES.EQUAL,
ctrlKey: true,
});
expect(h.state.zoom.value).toBeGreaterThan(1);
fireEvent.keyDown(document, { code: CODES.MINUS, ctrlKey: true });
fireEvent.keyUp(document, { code: CODES.MINUS, ctrlKey: true });
fireEvent.keyDown(document.querySelector(".excalidraw")!, {
code: CODES.MINUS,
ctrlKey: true,
});
fireEvent.keyUp(document.querySelector(".excalidraw")!, {
code: CODES.MINUS,
ctrlKey: true,
});
expect(h.state.zoom.value).toBe(1);
});

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

@ -100,7 +100,9 @@ describe("select single element on the scene", () => {
fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 });
fireEvent.pointerUp(canvas);
fireEvent.keyDown(document, { key: KEYS.ESCAPE });
fireEvent.keyDown(document.querySelector(".excalidraw")!, {
key: KEYS.ESCAPE,
});
}
const tool = getByToolName("selection");
@ -127,7 +129,9 @@ describe("select single element on the scene", () => {
fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 });
fireEvent.pointerUp(canvas);
fireEvent.keyDown(document, { key: KEYS.ESCAPE });
fireEvent.keyDown(document.querySelector(".excalidraw")!, {
key: KEYS.ESCAPE,
});
}
const tool = getByToolName("selection");
@ -154,7 +158,9 @@ describe("select single element on the scene", () => {
fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 });
fireEvent.pointerUp(canvas);
fireEvent.keyDown(document, { key: KEYS.ESCAPE });
fireEvent.keyDown(document.querySelector(".excalidraw")!, {
key: KEYS.ESCAPE,
});
}
const tool = getByToolName("selection");
@ -181,7 +187,9 @@ describe("select single element on the scene", () => {
fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 });
fireEvent.pointerUp(canvas);
fireEvent.keyDown(document, { key: KEYS.ESCAPE });
fireEvent.keyDown(document.querySelector(".excalidraw")!, {
key: KEYS.ESCAPE,
});
}
/*
@ -220,7 +228,9 @@ describe("select single element on the scene", () => {
fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 });
fireEvent.pointerUp(canvas);
fireEvent.keyDown(document, { key: KEYS.ESCAPE });
fireEvent.keyDown(document.querySelector(".excalidraw")!, {
key: KEYS.ESCAPE,
});
}
/*