feat: Calculate width/height of canvas based on container dimensions (".excalidraw" selector) & remove props width & height (#3379)

* 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
This commit is contained in:
Aakansha Doshi 2021-04-04 15:05:16 +05:30 committed by GitHub
parent 3b976613ba
commit c54a099010
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
24 changed files with 243 additions and 258 deletions

View file

@ -3,7 +3,12 @@ import ReactDOM from "react-dom";
import ExcalidrawApp from "../excalidraw-app";
import * as Renderer from "../renderer/renderScene";
import { KEYS } from "../keys";
import { render, fireEvent } from "./test-utils";
import {
render,
fireEvent,
mockBoundingClientRect,
restoreOriginalGetBoundingClientRect,
} from "./test-utils";
import { ExcalidrawLinearElement } from "../element/types";
import { reseed } from "../random";
@ -37,7 +42,7 @@ describe("add element to the scene when pointer dragging long enough", () => {
// finish (position does not matter)
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(7);
expect(renderScene).toHaveBeenCalledTimes(8);
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(1);
@ -68,7 +73,7 @@ describe("add element to the scene when pointer dragging long enough", () => {
// finish (position does not matter)
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(7);
expect(renderScene).toHaveBeenCalledTimes(8);
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(1);
@ -99,7 +104,7 @@ describe("add element to the scene when pointer dragging long enough", () => {
// finish (position does not matter)
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(7);
expect(renderScene).toHaveBeenCalledTimes(8);
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(1);
@ -130,7 +135,7 @@ describe("add element to the scene when pointer dragging long enough", () => {
// finish (position does not matter)
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(7);
expect(renderScene).toHaveBeenCalledTimes(8);
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(1);
@ -165,7 +170,7 @@ describe("add element to the scene when pointer dragging long enough", () => {
// finish (position does not matter)
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(7);
expect(renderScene).toHaveBeenCalledTimes(8);
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(1);
@ -184,6 +189,13 @@ describe("add element to the scene when pointer dragging long enough", () => {
});
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