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

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

Browse source 
* 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
Download patch file Download diff file Expand all files Collapse all files

38
src/tests/scroll.test.tsx
View file

@ -1,5 +1,10 @@
import React from "react";
import { render, waitFor } from "./test-utils";
import {
mockBoundingClientRect,
render,
restoreOriginalGetBoundingClientRect,
waitFor,
} from "./test-utils";
import Excalidraw from "../packages/excalidraw/index";
import { API } from "./helpers/api";
@ -7,34 +12,19 @@ const { h } = window;
describe("appState", () => {
it("scroll-to-content on init works with non-zero offsets", async () => {
const WIDTH = 600;
const HEIGHT = 700;
const OFFSET_LEFT = 200;
const OFFSET_TOP = 100;
const WIDTH = 200;
const HEIGHT = 100;
const OFFSET_LEFT = 20;
const OFFSET_TOP = 10;
const ELEM_WIDTH = 100;
const ELEM_HEIGHT = 60;
const originalGetBoundingClientRect =
global.window.HTMLDivElement.prototype.getBoundingClientRect;
// override getBoundingClientRect as by default it will always return all values as 0 even if customized in html
global.window.HTMLDivElement.prototype.getBoundingClientRect = () => ({
top: OFFSET_TOP,
left: OFFSET_LEFT,
bottom: 10,
right: 10,
width: 100,
x: 10,
y: 20,
height: 100,
toJSON: () => {},
});
mockBoundingClientRect();
await render(
<div>
<Excalidraw
width={WIDTH}
height={HEIGHT}
initialData={{
elements: [
API.createElement({
@ -50,8 +40,8 @@ describe("appState", () => {
</div>,
);
await waitFor(() => {
expect(h.state.width).toBe(WIDTH);
expect(h.state.height).toBe(HEIGHT);
expect(h.state.width).toBe(200);
expect(h.state.height).toBe(100);
expect(h.state.offsetLeft).toBe(OFFSET_LEFT);
expect(h.state.offsetTop).toBe(OFFSET_TOP);
@ -59,6 +49,6 @@ describe("appState", () => {
expect(h.state.scrollX).toBe(WIDTH / 2 - ELEM_WIDTH / 2);
expect(h.state.scrollY).toBe(HEIGHT / 2 - ELEM_HEIGHT / 2);
});
global.window.HTMLDivElement.prototype.getBoundingClientRect = originalGetBoundingClientRect;
restoreOriginalGetBoundingClientRect();
});
});