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

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

@ -1,8 +1,8 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // 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 { Object {
"angle": 0, "angle": 0,
"backgroundColor": "transparent", "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 { Object {
"angle": 0, "angle": 0,
"backgroundColor": "transparent", "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 { Object {
"angle": 0, "angle": 0,
"backgroundColor": "transparent", "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 { Object {
"angle": 0, "angle": 0,
"backgroundColor": "transparent", "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 { Object {
"angle": 0, "angle": 0,
"backgroundColor": "transparent", "backgroundColor": "transparent",

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

@ -24,7 +24,8 @@ beforeEach(() => {
const { h } = window; 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 () => { it("rectangle", async () => {
const { getByToolName, container } = await render(<ExcalidrawApp />); const { getByToolName, container } = await render(<ExcalidrawApp />);
// select tool // select tool
@ -186,9 +187,9 @@ describe("add element to the scene when pointer dragging long enough", () => {
h.elements.forEach((element) => expect(element).toMatchSnapshot()); 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(() => { beforeAll(() => {
mockBoundingClientRect(); mockBoundingClientRect();
}); });
@ -268,7 +269,9 @@ describe("do not add element to the scene if size is too small", () => {
fireEvent.pointerUp(canvas); fireEvent.pointerUp(canvas);
// we need to finalize it because arrows and lines enter multi-mode // 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(renderScene).toHaveBeenCalledTimes(7);
expect(h.state.selectionElement).toBeNull(); 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); fireEvent.pointerUp(canvas);
// we need to finalize it because arrows and lines enter multi-mode // 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(renderScene).toHaveBeenCalledTimes(7);
expect(h.state.selectionElement).toBeNull(); expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(0); 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) => { static keyDown = (key: string) => {
fireEvent.keyDown(document, { fireEvent.keyDown(document.querySelector(".excalidraw")!, {
key, key,
ctrlKey, ctrlKey,
shiftKey, shiftKey,
@ -49,7 +49,7 @@ export class Keyboard {
}; };
static keyUp = (key: string) => { static keyUp = (key: string) => {
fireEvent.keyUp(document, { fireEvent.keyUp(document.querySelector(".excalidraw")!, {
key, key,
ctrlKey, ctrlKey,
shiftKey, shiftKey,
@ -63,7 +63,7 @@ export class Keyboard {
}; };
static codeDown = (code: string) => { static codeDown = (code: string) => {
fireEvent.keyDown(document, { fireEvent.keyDown(document.querySelector(".excalidraw")!, {
code, code,
ctrlKey, ctrlKey,
shiftKey, shiftKey,
@ -72,7 +72,7 @@ export class Keyboard {
}; };
static codeUp = (code: string) => { static codeUp = (code: string) => {
fireEvent.keyUp(document, { fireEvent.keyUp(document.querySelector(".excalidraw")!, {
code, code,
ctrlKey, ctrlKey,
shiftKey, shiftKey,

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

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

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

@ -413,11 +413,23 @@ describe("regression tests", () => {
it("zoom hotkeys", () => { it("zoom hotkeys", () => {
expect(h.state.zoom.value).toBe(1); expect(h.state.zoom.value).toBe(1);
fireEvent.keyDown(document, { code: CODES.EQUAL, ctrlKey: true }); fireEvent.keyDown(document.querySelector(".excalidraw")!, {
fireEvent.keyUp(document, { code: CODES.EQUAL, ctrlKey: true }); code: CODES.EQUAL,
ctrlKey: true,
});
fireEvent.keyUp(document.querySelector(".excalidraw")!, {
code: CODES.EQUAL,
ctrlKey: true,
});
expect(h.state.zoom.value).toBeGreaterThan(1); expect(h.state.zoom.value).toBeGreaterThan(1);
fireEvent.keyDown(document, { code: CODES.MINUS, ctrlKey: true }); fireEvent.keyDown(document.querySelector(".excalidraw")!, {
fireEvent.keyUp(document, { code: CODES.MINUS, ctrlKey: true }); code: CODES.MINUS,
ctrlKey: true,
});
fireEvent.keyUp(document.querySelector(".excalidraw")!, {
code: CODES.MINUS,
ctrlKey: true,
});
expect(h.state.zoom.value).toBe(1); 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.pointerDown(canvas, { clientX: 30, clientY: 20 });
fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 }); fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 });
fireEvent.pointerUp(canvas); fireEvent.pointerUp(canvas);
fireEvent.keyDown(document, { key: KEYS.ESCAPE }); fireEvent.keyDown(document.querySelector(".excalidraw")!, {
key: KEYS.ESCAPE,
});
} }
const tool = getByToolName("selection"); const tool = getByToolName("selection");
@ -127,7 +129,9 @@ describe("select single element on the scene", () => {
fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 }); fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 }); fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 });
fireEvent.pointerUp(canvas); fireEvent.pointerUp(canvas);
fireEvent.keyDown(document, { key: KEYS.ESCAPE }); fireEvent.keyDown(document.querySelector(".excalidraw")!, {
key: KEYS.ESCAPE,
});
} }
const tool = getByToolName("selection"); const tool = getByToolName("selection");
@ -154,7 +158,9 @@ describe("select single element on the scene", () => {
fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 }); fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 }); fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 });
fireEvent.pointerUp(canvas); fireEvent.pointerUp(canvas);
fireEvent.keyDown(document, { key: KEYS.ESCAPE }); fireEvent.keyDown(document.querySelector(".excalidraw")!, {
key: KEYS.ESCAPE,
});
} }
const tool = getByToolName("selection"); const tool = getByToolName("selection");
@ -181,7 +187,9 @@ describe("select single element on the scene", () => {
fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 }); fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 }); fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 });
fireEvent.pointerUp(canvas); 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.pointerDown(canvas, { clientX: 30, clientY: 20 });
fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 }); fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 });
fireEvent.pointerUp(canvas); fireEvent.pointerUp(canvas);
fireEvent.keyDown(document, { key: KEYS.ESCAPE }); fireEvent.keyDown(document.querySelector(".excalidraw")!, {
key: KEYS.ESCAPE,
});
} }
/* /*