diff --git a/src/element/textElement.ts b/src/element/textElement.ts index 552214c0..033b3db0 100644 --- a/src/element/textElement.ts +++ b/src/element/textElement.ts @@ -61,30 +61,29 @@ export const redrawTextBoundingBox = ( if (!isArrowElement(container)) { const containerDims = getContainerDims(container); let nextHeight = containerDims.height; - const boundTextElementPadding = getBoundTextElementOffset(textElement); if (textElement.verticalAlign === VERTICAL_ALIGN.TOP) { - coordY = container.y + boundTextElementPadding; + coordY = container.y; } else if (textElement.verticalAlign === VERTICAL_ALIGN.BOTTOM) { coordY = container.y + containerDims.height - metrics.height - - boundTextElementPadding; + BOUND_TEXT_PADDING; } else { coordY = container.y + containerDims.height / 2 - metrics.height / 2; if (metrics.height > getMaxContainerHeight(container)) { - nextHeight = metrics.height + boundTextElementPadding * 2; + nextHeight = metrics.height + BOUND_TEXT_PADDING * 2; coordY = container.y + nextHeight / 2 - metrics.height / 2; } } if (textElement.textAlign === TEXT_ALIGN.LEFT) { - coordX = container.x + boundTextElementPadding; + coordX = container.x + BOUND_TEXT_PADDING; } else if (textElement.textAlign === TEXT_ALIGN.RIGHT) { coordX = container.x + containerDims.width - metrics.width - - boundTextElementPadding; + BOUND_TEXT_PADDING; } else { coordX = container.x + containerDims.width / 2 - metrics.width / 2; } diff --git a/src/element/textWysiwyg.test.tsx b/src/element/textWysiwyg.test.tsx index af8e487c..83b3251d 100644 --- a/src/element/textWysiwyg.test.tsx +++ b/src/element/textWysiwyg.test.tsx @@ -1165,5 +1165,128 @@ describe("textWysiwyg", () => { ).toEqual(36); expect(getOriginalContainerHeightFromCache(rectangle.id)).toBe(75); }); + + describe("should align correctly", () => { + let editor: HTMLTextAreaElement; + + beforeEach(async () => { + Keyboard.keyPress(KEYS.ENTER); + editor = document.querySelector( + ".excalidraw-textEditorContainer > textarea", + ) as HTMLTextAreaElement; + await new Promise((r) => setTimeout(r, 0)); + fireEvent.change(editor, { target: { value: "Hello" } }); + editor.blur(); + mouse.select(rectangle); + Keyboard.keyPress(KEYS.ENTER); + editor = document.querySelector( + ".excalidraw-textEditorContainer > textarea", + ) as HTMLTextAreaElement; + editor.select(); + }); + + it("when top left", async () => { + fireEvent.click(screen.getByTitle("Left")); + fireEvent.click(screen.getByTitle("Align top")); + expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(` + Array [ + 15, + 20, + ] + `); + }); + + it("when top center", async () => { + fireEvent.click(screen.getByTitle("Center")); + fireEvent.click(screen.getByTitle("Align top")); + expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(` + Array [ + 94.5, + 20, + ] + `); + }); + + it("when top right", async () => { + fireEvent.click(screen.getByTitle("Right")); + fireEvent.click(screen.getByTitle("Align top")); + + expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(` + Array [ + 174, + 20, + ] + `); + }); + + it("when center left", async () => { + fireEvent.click(screen.getByTitle("Center vertically")); + fireEvent.click(screen.getByTitle("Left")); + expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(` + Array [ + 15, + 25, + ] + `); + }); + + it("when center center", async () => { + fireEvent.click(screen.getByTitle("Center")); + fireEvent.click(screen.getByTitle("Center vertically")); + + expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(` + Array [ + -25, + 25, + ] + `); + }); + + it("when center right", async () => { + fireEvent.click(screen.getByTitle("Right")); + fireEvent.click(screen.getByTitle("Center vertically")); + + expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(` + Array [ + 174, + 25, + ] + `); + }); + + it("when bottom left", async () => { + fireEvent.click(screen.getByTitle("Left")); + fireEvent.click(screen.getByTitle("Align bottom")); + + expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(` + Array [ + 15, + 25, + ] + `); + }); + + it("when bottom center", async () => { + fireEvent.click(screen.getByTitle("Center")); + fireEvent.click(screen.getByTitle("Align bottom")); + expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(` + Array [ + 94.5, + 25, + ] + `); + }); + + it("when bottom right", async () => { + fireEvent.click(screen.getByTitle("Right")); + fireEvent.click(screen.getByTitle("Align bottom")); + expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(` + Array [ + 174, + 25, + ] + `); + }); + }); }); });