diff --git a/src/element/textElement.ts b/src/element/textElement.ts index 4de9373a..552214c0 100644 --- a/src/element/textElement.ts +++ b/src/element/textElement.ts @@ -292,7 +292,8 @@ export const measureText = ( container.appendChild(span); // Baseline is important for positioning text on canvas const baseline = span.offsetTop + span.offsetHeight; - const width = container.offsetWidth; + // since we are adding a span of width 1px + const width = container.offsetWidth + 1; const height = container.offsetHeight; document.body.removeChild(container); if (isTestEnv()) { diff --git a/src/element/textWysiwyg.test.tsx b/src/element/textWysiwyg.test.tsx index cb24386e..af8e487c 100644 --- a/src/element/textWysiwyg.test.tsx +++ b/src/element/textWysiwyg.test.tsx @@ -862,7 +862,7 @@ describe("textWysiwyg", () => { resize(rectangle, "ne", [rectangle.x + 100, rectangle.y - 100]); expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(` Array [ - 110, + 109.5, 17, ] `); @@ -910,7 +910,7 @@ describe("textWysiwyg", () => { resize(rectangle, "ne", [rectangle.x + 100, rectangle.y - 100]); expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(` Array [ - 425, + 424, -539, ] `); @@ -1026,7 +1026,7 @@ describe("textWysiwyg", () => { mouse.up(rectangle.x + 100, rectangle.y + 50); expect(rectangle.x).toBe(80); expect(rectangle.y).toBe(85); - expect(text.x).toBe(90); + expect(text.x).toBe(89.5); expect(text.y).toBe(90); Keyboard.withModifierKeys({ ctrl: true }, () => { diff --git a/src/tests/__snapshots__/linearElementEditor.test.tsx.snap b/src/tests/__snapshots__/linearElementEditor.test.tsx.snap index afc175cb..bebfda9d 100644 --- a/src/tests/__snapshots__/linearElementEditor.test.tsx.snap +++ b/src/tests/__snapshots__/linearElementEditor.test.tsx.snap @@ -5,7 +5,7 @@ exports[`Test Linear Elements Test bound text element should match styles for te class="excalidraw-wysiwyg" data-type="wysiwyg" dir="auto" - style="position: absolute; display: inline-block; min-height: 1em; margin: 0px; padding: 0px; border: 0px; outline: 0; resize: none; background: transparent; overflow: hidden; z-index: var(--zIndex-wysiwyg); word-break: break-word; white-space: pre-wrap; overflow-wrap: break-word; box-sizing: content-box; width: 0px; height: 0px; left: 40px; top: 20px; transform: translate(0px, 0px) scale(1) rotate(0deg); text-align: center; vertical-align: middle; color: rgb(0, 0, 0); opacity: 1; filter: var(--theme-filter); max-height: -20px; font: Emoji 20px 20px; line-height: 0px; font-family: Virgil, Segoe UI Emoji;" + style="position: absolute; display: inline-block; min-height: 1em; margin: 0px; padding: 0px; border: 0px; outline: 0; resize: none; background: transparent; overflow: hidden; z-index: var(--zIndex-wysiwyg); word-break: break-word; white-space: pre-wrap; overflow-wrap: break-word; box-sizing: content-box; width: 1px; height: 0px; left: 39.5px; top: 20px; transform: translate(0px, 0px) scale(1) rotate(0deg); text-align: center; vertical-align: middle; color: rgb(0, 0, 0); opacity: 1; filter: var(--theme-filter); max-height: -20px; font: Emoji 20px 20px; line-height: 0px; font-family: Virgil, Segoe UI Emoji;" tabindex="0" wrap="off" /> diff --git a/src/tests/data/__snapshots__/restore.test.ts.snap b/src/tests/data/__snapshots__/restore.test.ts.snap index 20cf1e7d..8af4f83c 100644 --- a/src/tests/data/__snapshots__/restore.test.ts.snap +++ b/src/tests/data/__snapshots__/restore.test.ts.snap @@ -312,7 +312,7 @@ Object { "versionNonce": 0, "verticalAlign": "middle", "width": 100, - "x": 0, + "x": -0.5, "y": 0, } `; diff --git a/src/tests/linearElementEditor.test.tsx b/src/tests/linearElementEditor.test.tsx index 4f766ae0..d4b1d903 100644 --- a/src/tests/linearElementEditor.test.tsx +++ b/src/tests/linearElementEditor.test.tsx @@ -1036,7 +1036,7 @@ describe("Test Linear Elements", () => { expect(getBoundTextElementPosition(container, textElement)) .toMatchInlineSnapshot(` Object { - "x": 387, + "x": 386.5, "y": 70, } `); @@ -1095,7 +1095,7 @@ describe("Test Linear Elements", () => { expect(getBoundTextElementPosition(container, textElement)) .toMatchInlineSnapshot(` Object { - "x": 190, + "x": 189.5, "y": 20, } `);