From 6ec259a0e71174651bae95d4628138bf6fd68742 Mon Sep 17 00:00:00 2001 From: kj_sh604 Date: Sun, 15 Mar 2026 16:19:35 -0400 Subject: refactor: packages/ --- packages/excalidraw/element/textElement.test.ts | 206 ++++++++++++++++++++++++ 1 file changed, 206 insertions(+) create mode 100644 packages/excalidraw/element/textElement.test.ts (limited to 'packages/excalidraw/element/textElement.test.ts') diff --git a/packages/excalidraw/element/textElement.test.ts b/packages/excalidraw/element/textElement.test.ts new file mode 100644 index 0000000..2c23c2b --- /dev/null +++ b/packages/excalidraw/element/textElement.test.ts @@ -0,0 +1,206 @@ +import { FONT_FAMILY } from "../constants"; +import { getLineHeight } from "../fonts"; +import { API } from "../tests/helpers/api"; +import { + computeContainerDimensionForBoundText, + getContainerCoords, + getBoundTextMaxWidth, + getBoundTextMaxHeight, +} from "./textElement"; +import { detectLineHeight, getLineHeightInPx } from "./textMeasurements"; +import type { ExcalidrawTextElementWithContainer } from "./types"; + +describe("Test measureText", () => { + describe("Test getContainerCoords", () => { + const params = { width: 200, height: 100, x: 10, y: 20 }; + + it("should compute coords correctly when ellipse", () => { + const element = API.createElement({ + type: "ellipse", + ...params, + }); + expect(getContainerCoords(element)).toEqual({ + x: 44.2893218813452455, + y: 39.64466094067262, + }); + }); + + it("should compute coords correctly when rectangle", () => { + const element = API.createElement({ + type: "rectangle", + ...params, + }); + expect(getContainerCoords(element)).toEqual({ + x: 15, + y: 25, + }); + }); + + it("should compute coords correctly when diamond", () => { + const element = API.createElement({ + type: "diamond", + ...params, + }); + expect(getContainerCoords(element)).toEqual({ + x: 65, + y: 50, + }); + }); + }); + + describe("Test computeContainerDimensionForBoundText", () => { + const params = { + width: 178, + height: 194, + }; + + it("should compute container height correctly for rectangle", () => { + const element = API.createElement({ + type: "rectangle", + ...params, + }); + expect(computeContainerDimensionForBoundText(150, element.type)).toEqual( + 160, + ); + }); + + it("should compute container height correctly for ellipse", () => { + const element = API.createElement({ + type: "ellipse", + ...params, + }); + expect(computeContainerDimensionForBoundText(150, element.type)).toEqual( + 226, + ); + }); + + it("should compute container height correctly for diamond", () => { + const element = API.createElement({ + type: "diamond", + ...params, + }); + expect(computeContainerDimensionForBoundText(150, element.type)).toEqual( + 320, + ); + }); + }); + + describe("Test getBoundTextMaxWidth", () => { + const params = { + width: 178, + height: 194, + }; + + it("should return max width when container is rectangle", () => { + const container = API.createElement({ type: "rectangle", ...params }); + expect(getBoundTextMaxWidth(container, null)).toBe(168); + }); + + it("should return max width when container is ellipse", () => { + const container = API.createElement({ type: "ellipse", ...params }); + expect(getBoundTextMaxWidth(container, null)).toBe(116); + }); + + it("should return max width when container is diamond", () => { + const container = API.createElement({ type: "diamond", ...params }); + expect(getBoundTextMaxWidth(container, null)).toBe(79); + }); + }); + + describe("Test getBoundTextMaxHeight", () => { + const params = { + width: 178, + height: 194, + id: '"container-id', + }; + + const boundTextElement = API.createElement({ + type: "text", + id: "text-id", + x: 560.51171875, + y: 202.033203125, + width: 154, + height: 175, + fontSize: 20, + fontFamily: 1, + text: "Excalidraw is a\nvirtual \nopensource \nwhiteboard for \nsketching \nhand-drawn like\ndiagrams", + textAlign: "center", + verticalAlign: "middle", + containerId: params.id, + }) as ExcalidrawTextElementWithContainer; + + it("should return max height when container is rectangle", () => { + const container = API.createElement({ type: "rectangle", ...params }); + expect(getBoundTextMaxHeight(container, boundTextElement)).toBe(184); + }); + + it("should return max height when container is ellipse", () => { + const container = API.createElement({ type: "ellipse", ...params }); + expect(getBoundTextMaxHeight(container, boundTextElement)).toBe(127); + }); + + it("should return max height when container is diamond", () => { + const container = API.createElement({ type: "diamond", ...params }); + expect(getBoundTextMaxHeight(container, boundTextElement)).toBe(87); + }); + + it("should return max height when container is arrow", () => { + const container = API.createElement({ + type: "arrow", + ...params, + }); + expect(getBoundTextMaxHeight(container, boundTextElement)).toBe(194); + }); + + it("should return max height when container is arrow and height is less than threshold", () => { + const container = API.createElement({ + type: "arrow", + ...params, + height: 70, + boundElements: [{ type: "text", id: "text-id" }], + }); + + expect(getBoundTextMaxHeight(container, boundTextElement)).toBe( + boundTextElement.height, + ); + }); + }); +}); + +const textElement = API.createElement({ + type: "text", + text: "Excalidraw is a\nvirtual \nopensource \nwhiteboard for \nsketching \nhand-drawn like\ndiagrams", + fontSize: 20, + fontFamily: 1, + height: 175, +}); + +describe("Test detectLineHeight", () => { + it("should return correct line height", () => { + expect(detectLineHeight(textElement)).toBe(1.25); + }); +}); + +describe("Test getLineHeightInPx", () => { + it("should return correct line height", () => { + expect( + getLineHeightInPx(textElement.fontSize, textElement.lineHeight), + ).toBe(25); + }); +}); + +describe("Test getDefaultLineHeight", () => { + it("should return line height using default font family when not passed", () => { + //@ts-ignore + expect(getLineHeight()).toBe(1.25); + }); + + it("should return line height using default font family for unknown font", () => { + const UNKNOWN_FONT = 5; + expect(getLineHeight(UNKNOWN_FONT)).toBe(1.25); + }); + + it("should return correct line height", () => { + expect(getLineHeight(FONT_FAMILY.Cascadia)).toBe(1.2); + }); +}); -- cgit v1.2.3