sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor (#862)

Browse Source 
* Initial factoring out of parts of the LayerUI component

2360 → 2224 LOC

* Create a Section component

* Break up src/index.tsx

* Refactor actions to reduce duplication, fix CSS

Also consolidate icons

* Move scene/data.ts to its own directory

* Fix accidental reverts, banish further single-character variables

* ACTIVE_ELEM_COLOR → ACTIVE_ELEMENT_COLOR

* Further refactoring the icons file

* Log all errors

* Pointer Event polyfill to make the tests work

* add test hooks & fix tests

Co-authored-by: dwelle <luzar.david@gmail.com>
This commit is contained in:
Jed Fox
2020-03-07 10:20:38 -05:00
committed by GitHub
parent 1a6431a04a
commit c6a0cfc2b1
49 changed files with 3498 additions and 3372 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
src/tests/dragCreate.test.tsx
View File

@ -1,6 +1,6 @@
import React from "react";
import ReactDOM from "react-dom";
import { App } from "../index";
import { App } from "../components/App";
import * as Renderer from "../renderer/renderScene";
import { KEYS } from "../keys";
import { render, fireEvent } from "./test-utils";
@ -14,7 +14,9 @@ beforeEach(() => {
renderScene.mockClear();
});
describe.skip("add element to the scene when pointer dragging long enough", () => {
const { __TEST__: h } = window;
describe("add element to the scene when pointer dragging long enough", () => {
it("rectangle", () => {
const { getByToolName, container } = render(<App />);
// select tool
@ -33,15 +35,14 @@ describe.skip("add element to the scene when pointer dragging long enough", () =
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(4);
expect(renderScene.mock.calls[3][1]).toBeNull();
const elements = renderScene.mock.calls[3][0];
expect(h.appState.selectionElement).toBeNull();
expect(elements.length).toEqual(1);
expect(elements[0].type).toEqual("rectangle");
expect(elements[0].x).toEqual(30);
expect(elements[0].y).toEqual(20);
expect(elements[0].width).toEqual(30); // 60 - 30
expect(elements[0].height).toEqual(50); // 70 - 20
expect(h.elements.length).toEqual(1);
expect(h.elements[0].type).toEqual("rectangle");
expect(h.elements[0].x).toEqual(30);
expect(h.elements[0].y).toEqual(20);
expect(h.elements[0].width).toEqual(30); // 60 - 30
expect(h.elements[0].height).toEqual(50); // 70 - 20
});
it("ellipse", () => {
@ -62,15 +63,14 @@ describe.skip("add element to the scene when pointer dragging long enough", () =
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(4);
expect(renderScene.mock.calls[3][1]).toBeNull();
expect(h.appState.selectionElement).toBeNull();
const elements = renderScene.mock.calls[3][0];
expect(elements.length).toEqual(1);
expect(elements[0].type).toEqual("ellipse");
expect(elements[0].x).toEqual(30);
expect(elements[0].y).toEqual(20);
expect(elements[0].width).toEqual(30); // 60 - 30
expect(elements[0].height).toEqual(50); // 70 - 20
expect(h.elements.length).toEqual(1);
expect(h.elements[0].type).toEqual("ellipse");
expect(h.elements[0].x).toEqual(30);
expect(h.elements[0].y).toEqual(20);
expect(h.elements[0].width).toEqual(30); // 60 - 30
expect(h.elements[0].height).toEqual(50); // 70 - 20
});
it("diamond", () => {
@ -91,15 +91,14 @@ describe.skip("add element to the scene when pointer dragging long enough", () =
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(4);
expect(renderScene.mock.calls[3][1]).toBeNull();
expect(h.appState.selectionElement).toBeNull();
const elements = renderScene.mock.calls[3][0];
expect(elements.length).toEqual(1);
expect(elements[0].type).toEqual("diamond");
expect(elements[0].x).toEqual(30);
expect(elements[0].y).toEqual(20);
expect(elements[0].width).toEqual(30); // 60 - 30
expect(elements[0].height).toEqual(50); // 70 - 20
expect(h.elements.length).toEqual(1);
expect(h.elements[0].type).toEqual("diamond");
expect(h.elements[0].x).toEqual(30);
expect(h.elements[0].y).toEqual(20);
expect(h.elements[0].width).toEqual(30); // 60 - 30
expect(h.elements[0].height).toEqual(50); // 70 - 20
});
it("arrow", () => {
@ -120,16 +119,15 @@ describe.skip("add element to the scene when pointer dragging long enough", () =
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(4);
expect(renderScene.mock.calls[3][1]).toBeNull();
const elements = renderScene.mock.calls[3][0];
expect(h.appState.selectionElement).toBeNull();
expect(elements.length).toEqual(1);
expect(elements[0].type).toEqual("arrow");
expect(elements[0].x).toEqual(30);
expect(elements[0].y).toEqual(20);
expect(elements[0].points.length).toEqual(2);
expect(elements[0].points[0]).toEqual([0, 0]);
expect(elements[0].points[1]).toEqual([30, 50]); // (60 - 30, 70 - 20)
expect(h.elements.length).toEqual(1);
expect(h.elements[0].type).toEqual("arrow");
expect(h.elements[0].x).toEqual(30);
expect(h.elements[0].y).toEqual(20);
expect(h.elements[0].points.length).toEqual(2);
expect(h.elements[0].points[0]).toEqual([0, 0]);
expect(h.elements[0].points[1]).toEqual([30, 50]); // (60 - 30, 70 - 20)
});
it("line", () => {
@ -150,20 +148,19 @@ describe.skip("add element to the scene when pointer dragging long enough", () =
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(4);
expect(renderScene.mock.calls[3][1]).toBeNull();
const elements = renderScene.mock.calls[3][0];
expect(h.appState.selectionElement).toBeNull();
expect(elements.length).toEqual(1);
expect(elements[0].type).toEqual("line");
expect(elements[0].x).toEqual(30);
expect(elements[0].y).toEqual(20);
expect(elements[0].points.length).toEqual(2);
expect(elements[0].points[0]).toEqual([0, 0]);
expect(elements[0].points[1]).toEqual([30, 50]); // (60 - 30, 70 - 20)
expect(h.elements.length).toEqual(1);
expect(h.elements[0].type).toEqual("line");
expect(h.elements[0].x).toEqual(30);
expect(h.elements[0].y).toEqual(20);
expect(h.elements[0].points.length).toEqual(2);
expect(h.elements[0].points[0]).toEqual([0, 0]);
expect(h.elements[0].points[1]).toEqual([30, 50]); // (60 - 30, 70 - 20)
});
});
describe.skip("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", () => {
it("rectangle", () => {
const { getByToolName, container } = render(<App />);
// select tool
@ -179,10 +176,8 @@ describe.skip("do not add element to the scene if size is too small", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(3);
expect(renderScene.mock.calls[2][1]).toBeNull();
const elements = renderScene.mock.calls[2][0];
expect(elements.length).toEqual(0);
expect(h.appState.selectionElement).toBeNull();
expect(h.elements.length).toEqual(0);
});
it("ellipse", () => {
@ -200,10 +195,8 @@ describe.skip("do not add element to the scene if size is too small", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(3);
expect(renderScene.mock.calls[2][1]).toBeNull();
const elements = renderScene.mock.calls[2][0];
expect(elements.length).toEqual(0);
expect(h.appState.selectionElement).toBeNull();
expect(h.elements.length).toEqual(0);
});
it("diamond", () => {
@ -221,10 +214,8 @@ describe.skip("do not add element to the scene if size is too small", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(3);
expect(renderScene.mock.calls[2][1]).toBeNull();
const elements = renderScene.mock.calls[2][0];
expect(elements.length).toEqual(0);
expect(h.appState.selectionElement).toBeNull();
expect(h.elements.length).toEqual(0);
});
it("arrow", () => {
@ -245,10 +236,8 @@ describe.skip("do not add element to the scene if size is too small", () => {
fireEvent.keyDown(document, { key: KEYS.ENTER });
expect(renderScene).toHaveBeenCalledTimes(4);
expect(renderScene.mock.calls[3][1]).toBeNull();
const elements = renderScene.mock.calls[3][0];
expect(elements.length).toEqual(0);
expect(h.appState.selectionElement).toBeNull();
expect(h.elements.length).toEqual(0);
});
it("line", () => {
@ -269,9 +258,7 @@ describe.skip("do not add element to the scene if size is too small", () => {
fireEvent.keyDown(document, { key: KEYS.ENTER });
expect(renderScene).toHaveBeenCalledTimes(4);
expect(renderScene.mock.calls[3][1]).toBeNull();
const elements = renderScene.mock.calls[3][0];
expect(elements.length).toEqual(0);
expect(h.appState.selectionElement).toBeNull();
expect(h.elements.length).toEqual(0);
});
});