feat: add undo/redo buttons & tweak footer (#3832)

Co-authored-by: Aakansha Doshi <aakansha1216@gmail.com>
This commit is contained in:
David Luzar 2021-07-15 18:48:03 +02:00 committed by GitHub
parent 685abac81a
commit 99623334d1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
24 changed files with 152 additions and 125 deletions

View file

@ -17,7 +17,7 @@ beforeEach(async () => {
mouse.reset();
await setLanguage(defaultLang);
render(<App />);
await render(<App />);
});
const createAndSelectOneRectangle = (angle: number = 0) => {

View file

@ -25,7 +25,7 @@ exports[`<Excalidraw/> Test UIOptions prop Test canvasActions should not hide an
>
<button
aria-label="Reset the canvas"
class="ToolIcon_type_button ToolIcon_size_m ToolIcon_type_button--show ToolIcon"
class="ToolIcon_type_button ToolIcon_size_medium ToolIcon_type_button--show ToolIcon"
data-testid="clear-canvas-button"
title="Reset the canvas"
type="button"
@ -53,7 +53,7 @@ exports[`<Excalidraw/> Test UIOptions prop Test canvasActions should not hide an
/>
<button
aria-label="Load"
class="ToolIcon_type_button ToolIcon_size_m ToolIcon_type_button--show ToolIcon"
class="ToolIcon_type_button ToolIcon_size_medium ToolIcon_type_button--show ToolIcon"
data-testid="load-button"
title="Load"
type="button"
@ -78,7 +78,7 @@ exports[`<Excalidraw/> Test UIOptions prop Test canvasActions should not hide an
</button>
<button
aria-label="Export"
class="ToolIcon_type_button ToolIcon_size_m ToolIcon_type_button--show ToolIcon"
class="ToolIcon_type_button ToolIcon_size_medium ToolIcon_type_button--show ToolIcon"
data-testid="json-export-button"
title="Export"
type="button"
@ -103,7 +103,7 @@ exports[`<Excalidraw/> Test UIOptions prop Test canvasActions should not hide an
</button>
<button
aria-label="Save as image"
class="ToolIcon_type_button ToolIcon_size_m ToolIcon_type_button--show ToolIcon"
class="ToolIcon_type_button ToolIcon_size_medium ToolIcon_type_button--show ToolIcon"
data-testid="image-export-button"
title="Save as image"
type="button"
@ -170,7 +170,7 @@ exports[`<Excalidraw/> Test UIOptions prop Test canvasActions should not hide an
>
<button
aria-label="Dark mode"
class="ToolIcon_type_button ToolIcon_size_m ToolIcon_type_button--show ToolIcon ToolIcon--plain"
class="ToolIcon_type_button ToolIcon_size_medium ToolIcon_type_button--show ToolIcon ToolIcon--plain"
data-testid="toggle-dark-mode"
title="Dark mode"
type="button"
@ -224,7 +224,7 @@ exports[`<Excalidraw/> Test UIOptions prop should not hide any UI element when t
>
<button
aria-label="Reset the canvas"
class="ToolIcon_type_button ToolIcon_size_m ToolIcon_type_button--show ToolIcon"
class="ToolIcon_type_button ToolIcon_size_medium ToolIcon_type_button--show ToolIcon"
data-testid="clear-canvas-button"
title="Reset the canvas"
type="button"
@ -252,7 +252,7 @@ exports[`<Excalidraw/> Test UIOptions prop should not hide any UI element when t
/>
<button
aria-label="Load"
class="ToolIcon_type_button ToolIcon_size_m ToolIcon_type_button--show ToolIcon"
class="ToolIcon_type_button ToolIcon_size_medium ToolIcon_type_button--show ToolIcon"
data-testid="load-button"
title="Load"
type="button"
@ -277,7 +277,7 @@ exports[`<Excalidraw/> Test UIOptions prop should not hide any UI element when t
</button>
<button
aria-label="Export"
class="ToolIcon_type_button ToolIcon_size_m ToolIcon_type_button--show ToolIcon"
class="ToolIcon_type_button ToolIcon_size_medium ToolIcon_type_button--show ToolIcon"
data-testid="json-export-button"
title="Export"
type="button"
@ -302,7 +302,7 @@ exports[`<Excalidraw/> Test UIOptions prop should not hide any UI element when t
</button>
<button
aria-label="Save as image"
class="ToolIcon_type_button ToolIcon_size_m ToolIcon_type_button--show ToolIcon"
class="ToolIcon_type_button ToolIcon_size_medium ToolIcon_type_button--show ToolIcon"
data-testid="image-export-button"
title="Save as image"
type="button"
@ -369,7 +369,7 @@ exports[`<Excalidraw/> Test UIOptions prop should not hide any UI element when t
>
<button
aria-label="Dark mode"
class="ToolIcon_type_button ToolIcon_size_m ToolIcon_type_button--show ToolIcon ToolIcon--plain"
class="ToolIcon_type_button ToolIcon_size_medium ToolIcon_type_button--show ToolIcon ToolIcon--plain"
data-testid="toggle-dark-mode"
title="Dark mode"
type="button"

View file

@ -45,14 +45,17 @@ describe("resize rectangle ellipses and diamond elements", () => {
${"se"} | ${[-30, -10]} | ${[70, 90]} | ${[elemData.x, elemData.y]}
${"nw"} | ${[-300, -200]} | ${[400, 300]} | ${[-300, -200]}
${"sw"} | ${[40, -20]} | ${[60, 80]} | ${[40, 0]}
`("resizes with handle $handle", ({ handle, move, dimensions, topLeft }) => {
render(<App />);
const rectangle = UI.createElement("rectangle", elemData);
resize(rectangle, handle, move);
const element = h.elements[0];
expect([element.width, element.height]).toEqual(dimensions);
expect([element.x, element.y]).toEqual(topLeft);
});
`(
"resizes with handle $handle",
async ({ handle, move, dimensions, topLeft }) => {
await render(<App />);
const rectangle = UI.createElement("rectangle", elemData);
resize(rectangle, handle, move);
const element = h.elements[0];
expect([element.width, element.height]).toEqual(dimensions);
expect([element.x, element.y]).toEqual(topLeft);
},
);
it.each`
handle | move | dimensions | topLeft
@ -61,8 +64,8 @@ describe("resize rectangle ellipses and diamond elements", () => {
${"sw"} | ${[40, -20]} | ${[80, 80]} | ${[20, 0]}
`(
"resizes with fixed side ratios on handle $handle",
({ handle, move, dimensions, topLeft }) => {
render(<App />);
async ({ handle, move, dimensions, topLeft }) => {
await render(<App />);
const rectangle = UI.createElement("rectangle", elemData);
resize(rectangle, handle, move, { shift: true });
const element = h.elements[0];
@ -79,8 +82,8 @@ describe("resize rectangle ellipses and diamond elements", () => {
${"n"} | ${[_, 150]} | ${[50, 50]} | ${[25, 100]}
`(
"Flips while resizing and keeping side ratios on handle $handle",
({ handle, move, dimensions, topLeft }) => {
render(<App />);
async ({ handle, move, dimensions, topLeft }) => {
await render(<App />);
const rectangle = UI.createElement("rectangle", elemData);
resize(rectangle, handle, move, { shift: true });
const element = h.elements[0];
@ -95,8 +98,8 @@ describe("resize rectangle ellipses and diamond elements", () => {
${"s"} | ${[_, -20]} | ${[100, 60]} | ${[0, 20]}
`(
"Resizes from center on handle $handle",
({ handle, move, dimensions, topLeft }) => {
render(<App />);
async ({ handle, move, dimensions, topLeft }) => {
await render(<App />);
const rectangle = UI.createElement("rectangle", elemData);
resize(rectangle, handle, move, { alt: true });
const element = h.elements[0];
@ -111,8 +114,8 @@ describe("resize rectangle ellipses and diamond elements", () => {
${"e"} | ${[-130, _]} | ${[160, 160]} | ${[-30, -30]}
`(
"Resizes from center, flips and keeps side rations on handle $handle",
({ handle, move, dimensions, topLeft }) => {
render(<App />);
async ({ handle, move, dimensions, topLeft }) => {
await render(<App />);
const rectangle = UI.createElement("rectangle", elemData);
resize(rectangle, handle, move, { alt: true, shift: true });
const element = h.elements[0];