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

fix: horizontal text alignment for bound text when resizing (#5721)

Browse source 
* Update textElement.ts

* Add test

* don't use modifier keys when not needed

Co-authored-by: Aakansha Doshi <aakansha1216@gmail.com>
This commit is contained in:
zsviczian 2022-09-27 13:14:41 +02:00 • committed by GitHub
parent 4cb6f09559
commit b477c2ad6b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 113 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

87
src/element/textWysiwyg.test.tsx
View file

@ -14,6 +14,7 @@ import {
import * as textElementUtils from "./textElement";
import { API } from "../tests/helpers/api";
import { mutateElement } from "./mutateElement";
import { resize } from "../tests/utils";
// Unmount ReactDOM from root
ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
@ -492,9 +493,7 @@ describe("textWysiwyg", () => {
expect(h.elements.length).toBe(1);
expect(h.elements[0].id).toBe(rectangle.id);
Keyboard.withModifierKeys({}, () => {
Keyboard.keyPress(KEYS.ENTER);
});
Keyboard.keyPress(KEYS.ENTER);
expect(h.elements.length).toBe(2);
@ -695,9 +694,8 @@ describe("textWysiwyg", () => {
// Edit and text by removing second line and it should
// still vertically align correctly
mouse.select(rectangle);
Keyboard.withModifierKeys({}, () => {
Keyboard.keyPress(KEYS.ENTER);
});
Keyboard.keyPress(KEYS.ENTER);
editor = document.querySelector(
".excalidraw-textEditorContainer > textarea",
) as HTMLTextAreaElement;
@ -734,9 +732,7 @@ describe("textWysiwyg", () => {
expect(h.elements.length).toBe(1);
expect(h.elements[0].id).toBe(rectangle.id);
Keyboard.withModifierKeys({}, () => {
Keyboard.keyPress(KEYS.ENTER);
});
Keyboard.keyPress(KEYS.ENTER);
expect(h.elements.length).toBe(2);
@ -771,12 +767,11 @@ describe("textWysiwyg", () => {
null,
);
});
it("shouldn't bind to container if container has bound text", async () => {
expect(h.elements.length).toBe(1);
Keyboard.withModifierKeys({}, () => {
Keyboard.keyPress(KEYS.ENTER);
});
Keyboard.keyPress(KEYS.ENTER);
expect(h.elements.length).toBe(2);
@ -813,5 +808,73 @@ describe("textWysiwyg", () => {
]);
expect(text.containerId).toBe(null);
});
it("should respect text alignment when resizing", async () => {
Keyboard.keyPress(KEYS.ENTER);
let editor = document.querySelector(
".excalidraw-textEditorContainer > textarea",
) as HTMLTextAreaElement;
await new Promise((r) => setTimeout(r, 0));
fireEvent.change(editor, { target: { value: "Hello" } });
editor.blur();
// should center align horizontally and vertically by default
resize(rectangle, "ne", [rectangle.x + 100, rectangle.y - 100]);
expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
Array [
109.5,
17,
]
`);
mouse.select(rectangle);
Keyboard.keyPress(KEYS.ENTER);
editor = document.querySelector(
".excalidraw-textEditorContainer > textarea",
) as HTMLTextAreaElement;
editor.select();
fireEvent.click(screen.getByTitle("Left"));
fireEvent.click(screen.getByTitle("Align bottom"));
await new Promise((r) => setTimeout(r, 0));
editor.blur();
// should left align horizontally and bottom vertically after resize
resize(rectangle, "ne", [rectangle.x + 100, rectangle.y - 100]);
expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
Array [
15,
90,
]
`);
mouse.select(rectangle);
Keyboard.keyPress(KEYS.ENTER);
editor = document.querySelector(
".excalidraw-textEditorContainer > textarea",
) as HTMLTextAreaElement;
editor.select();
fireEvent.click(screen.getByTitle("Right"));
fireEvent.click(screen.getByTitle("Align top"));
await new Promise((r) => setTimeout(r, 0));
editor.blur();
// should right align horizontally and top vertically after resize
resize(rectangle, "ne", [rectangle.x + 100, rectangle.y - 100]);
expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
Array [
424,
-539,
]
`);
});
});
});