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

expose a few state props for debugging (#1008)

Browse source 
* expose a few state props for debugging

* rename h.appState & add h.setState

* support setting elements
This commit is contained in:
David Luzar 2020-03-18 20:44:05 +01:00 • committed by GitHub
parent cb66adc716
commit ff033640e4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 94 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -15,7 +15,7 @@ beforeEach(() => {
renderScene.mockClear();
});
const { __TEST__: h } = window;
const { h } = window;
describe("add element to the scene when pointer dragging long enough", () => {
it("rectangle", () => {
@ -36,7 +36,7 @@ describe("add element to the scene when pointer dragging long enough", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(4);
expect(h.appState.selectionElement).toBeNull();
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(1);
expect(h.elements[0].type).toEqual("rectangle");
@ -64,7 +64,7 @@ describe("add element to the scene when pointer dragging long enough", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(4);
expect(h.appState.selectionElement).toBeNull();
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(1);
expect(h.elements[0].type).toEqual("ellipse");
@ -92,7 +92,7 @@ describe("add element to the scene when pointer dragging long enough", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(4);
expect(h.appState.selectionElement).toBeNull();
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(1);
expect(h.elements[0].type).toEqual("diamond");
@ -120,7 +120,7 @@ describe("add element to the scene when pointer dragging long enough", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(4);
expect(h.appState.selectionElement).toBeNull();
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(1);
@ -152,7 +152,7 @@ describe("add element to the scene when pointer dragging long enough", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(4);
expect(h.appState.selectionElement).toBeNull();
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(1);
@ -183,7 +183,7 @@ describe("do not add element to the scene if size is too small", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(3);
expect(h.appState.selectionElement).toBeNull();
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(0);
});
@ -202,7 +202,7 @@ describe("do not add element to the scene if size is too small", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(3);
expect(h.appState.selectionElement).toBeNull();
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(0);
});
@ -221,7 +221,7 @@ describe("do not add element to the scene if size is too small", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(3);
expect(h.appState.selectionElement).toBeNull();
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(0);
});
@ -243,7 +243,7 @@ describe("do not add element to the scene if size is too small", () => {
fireEvent.keyDown(document, { key: KEYS.ENTER });
expect(renderScene).toHaveBeenCalledTimes(4);
expect(h.appState.selectionElement).toBeNull();
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(0);
});
@ -265,7 +265,7 @@ describe("do not add element to the scene if size is too small", () => {
fireEvent.keyDown(document, { key: KEYS.ENTER });
expect(renderScene).toHaveBeenCalledTimes(4);
expect(h.appState.selectionElement).toBeNull();
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(0);
});
});

14
src/tests/move.test.tsx
View file

@ -13,7 +13,7 @@ beforeEach(() => {
renderScene.mockClear();
});
const { __TEST__: h } = window;
const { h } = window;
describe("move element", () => {
it("rectangle", () => {
@ -29,9 +29,9 @@ describe("move element", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(4);
expect(h.appState.selectionElement).toBeNull();
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(1);
expect(h.appState.selectedElementIds[h.elements[0].id]).toBeTruthy();
expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
expect([h.elements[0].x, h.elements[0].y]).toEqual([30, 20]);
renderScene.mockClear();
@ -42,7 +42,7 @@ describe("move element", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(3);
expect(h.appState.selectionElement).toBeNull();
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(1);
expect([h.elements[0].x, h.elements[0].y]).toEqual([0, 40]);
});
@ -62,9 +62,9 @@ describe("duplicate element on move when ALT is clicked", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(4);
expect(h.appState.selectionElement).toBeNull();
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(1);
expect(h.appState.selectedElementIds[h.elements[0].id]).toBeTruthy();
expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
expect([h.elements[0].x, h.elements[0].y]).toEqual([30, 20]);
renderScene.mockClear();
@ -75,7 +75,7 @@ describe("duplicate element on move when ALT is clicked", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(3);
expect(h.appState.selectionElement).toBeNull();
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(2);
// previous element should stay intact

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

@ -15,7 +15,7 @@ beforeEach(() => {
renderScene.mockClear();
});
const { __TEST__: h } = window;
const { h } = window;
describe("remove shape in non linear elements", () => {
it("rectangle", () => {

14
src/tests/resize.test.tsx
View file

@ -13,7 +13,7 @@ beforeEach(() => {
renderScene.mockClear();
});
const { __TEST__: h } = window;
const { h } = window;
describe("resize element", () => {
it("rectangle", () => {
@ -29,9 +29,9 @@ describe("resize element", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(4);
expect(h.appState.selectionElement).toBeNull();
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(1);
expect(h.appState.selectedElementIds[h.elements[0].id]).toBeTruthy();
expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
expect([h.elements[0].x, h.elements[0].y]).toEqual([30, 20]);
expect([h.elements[0].width, h.elements[0].height]).toEqual([30, 50]);
@ -49,7 +49,7 @@ describe("resize element", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(5);
expect(h.appState.selectionElement).toBeNull();
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(1);
expect([h.elements[0].x, h.elements[0].y]).toEqual([29, 47]);
expect([h.elements[0].width, h.elements[0].height]).toEqual([30, 50]);
@ -70,9 +70,9 @@ describe("resize element with aspect ratio when SHIFT is clicked", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(4);
expect(h.appState.selectionElement).toBeNull();
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(1);
expect(h.appState.selectedElementIds[h.elements[0].id]).toBeTruthy();
expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
expect([h.elements[0].x, h.elements[0].y]).toEqual([30, 20]);
expect([h.elements[0].x, h.elements[0].y]).toEqual([30, 20]);
expect([h.elements[0].width, h.elements[0].height]).toEqual([30, 50]);
@ -90,7 +90,7 @@ describe("resize element with aspect ratio when SHIFT is clicked", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(5);
expect(h.appState.selectionElement).toBeNull();
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(1);
expect([h.elements[0].x, h.elements[0].y]).toEqual([29, 47]);
expect([h.elements[0].width, h.elements[0].height]).toEqual([30, 50]);

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

@ -14,7 +14,7 @@ beforeEach(() => {
renderScene.mockClear();
});
const { __TEST__: h } = window;
const { h } = window;
describe("selection element", () => {
it("create selection element on pointer down", () => {
@ -27,7 +27,7 @@ describe("selection element", () => {
fireEvent.pointerDown(canvas, { clientX: 60, clientY: 100 });
expect(renderScene).toHaveBeenCalledTimes(1);
const selectionElement = h.appState.selectionElement!;
const selectionElement = h.state.selectionElement!;
expect(selectionElement).not.toBeNull();
expect(selectionElement.type).toEqual("selection");
expect([selectionElement.x, selectionElement.y]).toEqual([60, 100]);
@ -48,7 +48,7 @@ describe("selection element", () => {
fireEvent.pointerMove(canvas, { clientX: 150, clientY: 30 });
expect(renderScene).toHaveBeenCalledTimes(2);
const selectionElement = h.appState.selectionElement!;
const selectionElement = h.state.selectionElement!;
expect(selectionElement).not.toBeNull();
expect(selectionElement.type).toEqual("selection");
expect([selectionElement.x, selectionElement.y]).toEqual([60, 30]);
@ -70,7 +70,7 @@ describe("selection element", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(3);
expect(h.appState.selectionElement).toBeNull();
expect(h.state.selectionElement).toBeNull();
});
});
@ -95,9 +95,9 @@ describe("select single element on the scene", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(7);
expect(h.appState.selectionElement).toBeNull();
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(1);
expect(h.appState.selectedElementIds[h.elements[0].id]).toBeTruthy();
expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
});
it("diamond", () => {
@ -120,9 +120,9 @@ describe("select single element on the scene", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(7);
expect(h.appState.selectionElement).toBeNull();
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(1);
expect(h.appState.selectedElementIds[h.elements[0].id]).toBeTruthy();
expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
});
it("ellipse", () => {
@ -145,9 +145,9 @@ describe("select single element on the scene", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(7);
expect(h.appState.selectionElement).toBeNull();
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(1);
expect(h.appState.selectedElementIds[h.elements[0].id]).toBeTruthy();
expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
});
it("arrow", () => {
@ -183,9 +183,9 @@ describe("select single element on the scene", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(7);
expect(h.appState.selectionElement).toBeNull();
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(1);
expect(h.appState.selectedElementIds[h.elements[0].id]).toBeTruthy();
expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
});
it("arrow escape", () => {
@ -221,8 +221,8 @@ describe("select single element on the scene", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(7);
expect(h.appState.selectionElement).toBeNull();
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(1);
expect(h.appState.selectedElementIds[h.elements[0].id]).toBeTruthy();
expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
});
});