mirror of
https://github.com/excalidraw/excalidraw.git
synced 2025-04-14 16:40:58 -04:00
c54a099010
* Remove width/height from the ".excalidraw" container so it will sized automatically. * updated all ref calculation to ".excalidraw" instead of parent since now ".excalidraw" will get resized * Remove props width/height as its not needed anymore. * Resize handler is also not needed anymore. * Position absolute canvas due to #3379 (comment) * move css to style and remove one extra rerendering * factor out mock logic for test * set height, width so as to avoid unnecessary updates of regression snap * better mock * better type checking and omit width,height from getDefaultAppState and also restore * revert * default to window dimensions in constructor * update docs * update * update * tweaks
299 lines
9.1 KiB
TypeScript
299 lines
9.1 KiB
TypeScript
import React from "react";
|
|
import ReactDOM from "react-dom";
|
|
import ExcalidrawApp from "../excalidraw-app";
|
|
import * as Renderer from "../renderer/renderScene";
|
|
import { KEYS } from "../keys";
|
|
import {
|
|
render,
|
|
fireEvent,
|
|
mockBoundingClientRect,
|
|
restoreOriginalGetBoundingClientRect,
|
|
} from "./test-utils";
|
|
import { ExcalidrawLinearElement } from "../element/types";
|
|
import { reseed } from "../random";
|
|
|
|
// Unmount ReactDOM from root
|
|
ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
|
|
|
|
const renderScene = jest.spyOn(Renderer, "renderScene");
|
|
beforeEach(() => {
|
|
localStorage.clear();
|
|
renderScene.mockClear();
|
|
reseed(7);
|
|
});
|
|
|
|
const { h } = window;
|
|
|
|
describe("add element to the scene when pointer dragging long enough", () => {
|
|
it("rectangle", async () => {
|
|
const { getByToolName, container } = await render(<ExcalidrawApp />);
|
|
// select tool
|
|
const tool = getByToolName("rectangle");
|
|
fireEvent.click(tool);
|
|
|
|
const canvas = container.querySelector("canvas")!;
|
|
|
|
// start from (30, 20)
|
|
fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
|
|
|
|
// move to (60,70)
|
|
fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 });
|
|
|
|
// finish (position does not matter)
|
|
fireEvent.pointerUp(canvas);
|
|
|
|
expect(renderScene).toHaveBeenCalledTimes(8);
|
|
expect(h.state.selectionElement).toBeNull();
|
|
|
|
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
|
|
|
|
expect(h.elements.length).toMatchSnapshot();
|
|
h.elements.forEach((element) => expect(element).toMatchSnapshot());
|
|
});
|
|
|
|
it("ellipse", async () => {
|
|
const { getByToolName, container } = await render(<ExcalidrawApp />);
|
|
// select tool
|
|
const tool = getByToolName("ellipse");
|
|
fireEvent.click(tool);
|
|
|
|
const canvas = container.querySelector("canvas")!;
|
|
|
|
// start from (30, 20)
|
|
fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
|
|
|
|
// move to (60,70)
|
|
fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 });
|
|
|
|
// finish (position does not matter)
|
|
fireEvent.pointerUp(canvas);
|
|
|
|
expect(renderScene).toHaveBeenCalledTimes(8);
|
|
expect(h.state.selectionElement).toBeNull();
|
|
|
|
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
|
|
|
|
expect(h.elements.length).toMatchSnapshot();
|
|
h.elements.forEach((element) => expect(element).toMatchSnapshot());
|
|
});
|
|
|
|
it("diamond", async () => {
|
|
const { getByToolName, container } = await render(<ExcalidrawApp />);
|
|
// select tool
|
|
const tool = getByToolName("diamond");
|
|
fireEvent.click(tool);
|
|
|
|
const canvas = container.querySelector("canvas")!;
|
|
|
|
// start from (30, 20)
|
|
fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
|
|
|
|
// move to (60,70)
|
|
fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 });
|
|
|
|
// finish (position does not matter)
|
|
fireEvent.pointerUp(canvas);
|
|
|
|
expect(renderScene).toHaveBeenCalledTimes(8);
|
|
expect(h.state.selectionElement).toBeNull();
|
|
|
|
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
|
|
|
|
expect(h.elements.length).toMatchSnapshot();
|
|
h.elements.forEach((element) => expect(element).toMatchSnapshot());
|
|
});
|
|
|
|
it("arrow", async () => {
|
|
const { getByToolName, container } = await render(<ExcalidrawApp />);
|
|
// select tool
|
|
const tool = getByToolName("arrow");
|
|
fireEvent.click(tool);
|
|
|
|
const canvas = container.querySelector("canvas")!;
|
|
|
|
// start from (30, 20)
|
|
fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
|
|
|
|
// move to (60,70)
|
|
fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 });
|
|
|
|
// finish (position does not matter)
|
|
fireEvent.pointerUp(canvas);
|
|
|
|
expect(renderScene).toHaveBeenCalledTimes(8);
|
|
expect(h.state.selectionElement).toBeNull();
|
|
|
|
expect(h.elements.length).toEqual(1);
|
|
|
|
const element = h.elements[0] as ExcalidrawLinearElement;
|
|
|
|
expect(element.type).toEqual("arrow");
|
|
expect(element.x).toEqual(30);
|
|
expect(element.y).toEqual(20);
|
|
expect(element.points.length).toEqual(2);
|
|
expect(element.points[0]).toEqual([0, 0]);
|
|
expect(element.points[1]).toEqual([30, 50]); // (60 - 30, 70 - 20)
|
|
|
|
expect(h.elements.length).toMatchSnapshot();
|
|
h.elements.forEach((element) => expect(element).toMatchSnapshot());
|
|
});
|
|
|
|
it("line", async () => {
|
|
const { getByToolName, container } = await render(<ExcalidrawApp />);
|
|
// select tool
|
|
const tool = getByToolName("line");
|
|
fireEvent.click(tool);
|
|
|
|
const canvas = container.querySelector("canvas")!;
|
|
|
|
// start from (30, 20)
|
|
fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
|
|
|
|
// move to (60,70)
|
|
fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 });
|
|
|
|
// finish (position does not matter)
|
|
fireEvent.pointerUp(canvas);
|
|
|
|
expect(renderScene).toHaveBeenCalledTimes(8);
|
|
expect(h.state.selectionElement).toBeNull();
|
|
|
|
expect(h.elements.length).toEqual(1);
|
|
|
|
const element = h.elements[0] as ExcalidrawLinearElement;
|
|
|
|
expect(element.type).toEqual("line");
|
|
expect(element.x).toEqual(30);
|
|
expect(element.y).toEqual(20);
|
|
expect(element.points.length).toEqual(2);
|
|
expect(element.points[0]).toEqual([0, 0]);
|
|
expect(element.points[1]).toEqual([30, 50]); // (60 - 30, 70 - 20)
|
|
|
|
h.elements.forEach((element) => expect(element).toMatchSnapshot());
|
|
});
|
|
});
|
|
|
|
describe("do not add element to the scene if size is too small", () => {
|
|
beforeAll(() => {
|
|
mockBoundingClientRect();
|
|
});
|
|
afterAll(() => {
|
|
restoreOriginalGetBoundingClientRect();
|
|
});
|
|
|
|
it("rectangle", async () => {
|
|
const { getByToolName, container } = await render(<ExcalidrawApp />);
|
|
// select tool
|
|
const tool = getByToolName("rectangle");
|
|
fireEvent.click(tool);
|
|
|
|
const canvas = container.querySelector("canvas")!;
|
|
|
|
// start from (30, 20)
|
|
fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
|
|
|
|
// finish (position does not matter)
|
|
fireEvent.pointerUp(canvas);
|
|
|
|
expect(renderScene).toHaveBeenCalledTimes(6);
|
|
expect(h.state.selectionElement).toBeNull();
|
|
expect(h.elements.length).toEqual(0);
|
|
});
|
|
|
|
it("ellipse", async () => {
|
|
const { getByToolName, container } = await render(<ExcalidrawApp />);
|
|
// select tool
|
|
const tool = getByToolName("ellipse");
|
|
fireEvent.click(tool);
|
|
|
|
const canvas = container.querySelector("canvas")!;
|
|
|
|
// start from (30, 20)
|
|
fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
|
|
|
|
// finish (position does not matter)
|
|
fireEvent.pointerUp(canvas);
|
|
|
|
expect(renderScene).toHaveBeenCalledTimes(6);
|
|
expect(h.state.selectionElement).toBeNull();
|
|
expect(h.elements.length).toEqual(0);
|
|
});
|
|
|
|
it("diamond", async () => {
|
|
const { getByToolName, container } = await render(<ExcalidrawApp />);
|
|
// select tool
|
|
const tool = getByToolName("diamond");
|
|
fireEvent.click(tool);
|
|
|
|
const canvas = container.querySelector("canvas")!;
|
|
|
|
// start from (30, 20)
|
|
fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
|
|
|
|
// finish (position does not matter)
|
|
fireEvent.pointerUp(canvas);
|
|
|
|
expect(renderScene).toHaveBeenCalledTimes(6);
|
|
expect(h.state.selectionElement).toBeNull();
|
|
expect(h.elements.length).toEqual(0);
|
|
});
|
|
|
|
it("arrow", async () => {
|
|
const { getByToolName, container } = await render(<ExcalidrawApp />);
|
|
// select tool
|
|
const tool = getByToolName("arrow");
|
|
fireEvent.click(tool);
|
|
|
|
const canvas = container.querySelector("canvas")!;
|
|
|
|
// start from (30, 20)
|
|
fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
|
|
|
|
// finish (position does not matter)
|
|
fireEvent.pointerUp(canvas);
|
|
|
|
// we need to finalize it because arrows and lines enter multi-mode
|
|
fireEvent.keyDown(document, { key: KEYS.ENTER });
|
|
|
|
expect(renderScene).toHaveBeenCalledTimes(7);
|
|
expect(h.state.selectionElement).toBeNull();
|
|
expect(h.elements.length).toEqual(0);
|
|
});
|
|
|
|
it("line", async () => {
|
|
const { getByToolName, container } = await render(<ExcalidrawApp />);
|
|
// select tool
|
|
const tool = getByToolName("line");
|
|
fireEvent.click(tool);
|
|
|
|
const canvas = container.querySelector("canvas")!;
|
|
|
|
// start from (30, 20)
|
|
fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
|
|
|
|
// finish (position does not matter)
|
|
fireEvent.pointerUp(canvas);
|
|
|
|
// we need to finalize it because arrows and lines enter multi-mode
|
|
fireEvent.keyDown(document, { key: KEYS.ENTER });
|
|
|
|
expect(renderScene).toHaveBeenCalledTimes(7);
|
|
expect(h.state.selectionElement).toBeNull();
|
|
expect(h.elements.length).toEqual(0);
|
|
});
|
|
});
|