diff --git a/src/element/newElement.ts b/src/element/newElement.ts index 41802860c..86822d072 100644 --- a/src/element/newElement.ts +++ b/src/element/newElement.ts @@ -28,7 +28,7 @@ import { measureText, normalizeText, wrapText, - getContainerMaxWidth, + getBoundTextMaxWidth, } from "./textElement"; import { VERTICAL_ALIGN } from "../constants"; import { isArrowElement } from "./typeChecks"; @@ -261,7 +261,7 @@ export const refreshTextDimensions = ( text = wrapText( text, getFontString(textElement), - getContainerMaxWidth(container), + getBoundTextMaxWidth(container), ); } const dimensions = getAdjustedDimensions(textElement, text); diff --git a/src/element/resizeElements.ts b/src/element/resizeElements.ts index fde29618b..7b4ba93e5 100644 --- a/src/element/resizeElements.ts +++ b/src/element/resizeElements.ts @@ -45,7 +45,7 @@ import { getBoundTextElementId, getContainerElement, handleBindTextResize, - getContainerMaxWidth, + getBoundTextMaxWidth, } from "./textElement"; export const normalizeAngle = (angle: number): number => { @@ -201,7 +201,7 @@ const measureFontSizeFromWidth = ( if (hasContainer) { const container = getContainerElement(element); if (container) { - width = getContainerMaxWidth(container); + width = getBoundTextMaxWidth(container); } } const nextFontSize = element.fontSize * (nextWidth / width); @@ -423,7 +423,7 @@ export const resizeSingleElement = ( const nextFontSize = measureFontSizeFromWidth( boundTextElement, - getContainerMaxWidth(updatedElement), + getBoundTextMaxWidth(updatedElement), ); if (nextFontSize === null) { return; @@ -694,7 +694,7 @@ const resizeMultipleElements = ( const fontSize = measureFontSizeFromWidth( boundTextElement ?? (element.orig as ExcalidrawTextElement), boundTextElement - ? getContainerMaxWidth(updatedElement) + ? getBoundTextMaxWidth(updatedElement) : updatedElement.width, ); diff --git a/src/element/textElement.test.ts b/src/element/textElement.test.ts index 40898853d..45ba1499a 100644 --- a/src/element/textElement.test.ts +++ b/src/element/textElement.test.ts @@ -3,8 +3,8 @@ import { API } from "../tests/helpers/api"; import { computeContainerDimensionForBoundText, getContainerCoords, - getContainerMaxWidth, - getContainerMaxHeight, + getBoundTextMaxWidth, + getBoundTextMaxHeight, wrapText, } from "./textElement"; import { ExcalidrawTextElementWithContainer, FontString } from "./types"; @@ -261,7 +261,7 @@ describe("Test measureText", () => { }); }); - describe("Test getContainerMaxWidth", () => { + describe("Test getBoundTextMaxWidth", () => { const params = { width: 178, height: 194, @@ -269,17 +269,17 @@ describe("Test measureText", () => { it("should return max width when container is rectangle", () => { const container = API.createElement({ type: "rectangle", ...params }); - expect(getContainerMaxWidth(container)).toBe(168); + expect(getBoundTextMaxWidth(container)).toBe(168); }); it("should return max width when container is ellipse", () => { const container = API.createElement({ type: "ellipse", ...params }); - expect(getContainerMaxWidth(container)).toBe(116); + expect(getBoundTextMaxWidth(container)).toBe(116); }); it("should return max width when container is diamond", () => { const container = API.createElement({ type: "diamond", ...params }); - expect(getContainerMaxWidth(container)).toBe(79); + expect(getBoundTextMaxWidth(container)).toBe(79); }); it("should return max width when container is arrow", () => { @@ -287,11 +287,11 @@ describe("Test measureText", () => { type: "arrow", ...params, }); - expect(getContainerMaxWidth(container)).toBe(220); + expect(getBoundTextMaxWidth(container)).toBe(220); }); }); - describe("Test getContainerMaxHeight", () => { + describe("Test getBoundTextMaxHeight", () => { const params = { width: 178, height: 194, @@ -315,17 +315,17 @@ describe("Test measureText", () => { it("should return max height when container is rectangle", () => { const container = API.createElement({ type: "rectangle", ...params }); - expect(getContainerMaxHeight(container, boundTextElement)).toBe(184); + expect(getBoundTextMaxHeight(container, boundTextElement)).toBe(184); }); it("should return max height when container is ellipse", () => { const container = API.createElement({ type: "ellipse", ...params }); - expect(getContainerMaxHeight(container, boundTextElement)).toBe(127); + expect(getBoundTextMaxHeight(container, boundTextElement)).toBe(127); }); it("should return max height when container is diamond", () => { const container = API.createElement({ type: "diamond", ...params }); - expect(getContainerMaxHeight(container, boundTextElement)).toBe(87); + expect(getBoundTextMaxHeight(container, boundTextElement)).toBe(87); }); it("should return max height when container is arrow", () => { @@ -333,7 +333,7 @@ describe("Test measureText", () => { type: "arrow", ...params, }); - expect(getContainerMaxHeight(container, boundTextElement)).toBe(194); + expect(getBoundTextMaxHeight(container, boundTextElement)).toBe(194); }); it("should return max height when container is arrow and height is less than threshold", () => { @@ -344,7 +344,7 @@ describe("Test measureText", () => { boundElements: [{ type: "text", id: "text-id" }], }); - expect(getContainerMaxHeight(container, boundTextElement)).toBe( + expect(getBoundTextMaxHeight(container, boundTextElement)).toBe( boundTextElement.height, ); }); diff --git a/src/element/textElement.ts b/src/element/textElement.ts index d1bf7f61f..f82a0ca2f 100644 --- a/src/element/textElement.ts +++ b/src/element/textElement.ts @@ -56,7 +56,7 @@ export const redrawTextBoundingBox = ( }; if (container) { - maxWidth = getContainerMaxWidth(container); + maxWidth = getBoundTextMaxWidth(container); boundTextUpdates.text = wrapText( textElement.originalText, getFontString(textElement), @@ -74,7 +74,7 @@ export const redrawTextBoundingBox = ( if (container) { const containerDims = getContainerDims(container); - const maxContainerHeight = getContainerMaxHeight( + const maxContainerHeight = getBoundTextMaxHeight( container, textElement as ExcalidrawTextElementWithContainer, ); @@ -167,8 +167,8 @@ export const handleBindTextResize = ( let nextHeight = textElement.height; let nextWidth = textElement.width; const containerDims = getContainerDims(container); - const maxWidth = getContainerMaxWidth(container); - const maxHeight = getContainerMaxHeight( + const maxWidth = getBoundTextMaxWidth(container); + const maxHeight = getBoundTextMaxHeight( container, textElement as ExcalidrawTextElementWithContainer, ); @@ -230,8 +230,8 @@ export const computeBoundTextPosition = ( boundTextElement: ExcalidrawTextElementWithContainer, ) => { const containerCoords = getContainerCoords(container); - const maxContainerHeight = getContainerMaxHeight(container, boundTextElement); - const maxContainerWidth = getContainerMaxWidth(container); + const maxContainerHeight = getBoundTextMaxHeight(container, boundTextElement); + const maxContainerWidth = getBoundTextMaxWidth(container); let x; let y; @@ -746,7 +746,7 @@ export const computeContainerDimensionForBoundText = ( return dimension + padding; }; -export const getContainerMaxWidth = (container: ExcalidrawElement) => { +export const getBoundTextMaxWidth = (container: ExcalidrawElement) => { const width = getContainerDims(container).width; if (isArrowElement(container)) { return width - BOUND_TEXT_PADDING * 8 * 2; @@ -766,7 +766,7 @@ export const getContainerMaxWidth = (container: ExcalidrawElement) => { return width - BOUND_TEXT_PADDING * 2; }; -export const getContainerMaxHeight = ( +export const getBoundTextMaxHeight = ( container: ExcalidrawElement, boundTextElement: ExcalidrawTextElementWithContainer, ) => { diff --git a/src/element/textWysiwyg.tsx b/src/element/textWysiwyg.tsx index 07658f84b..d79d21de8 100644 --- a/src/element/textWysiwyg.tsx +++ b/src/element/textWysiwyg.tsx @@ -32,8 +32,8 @@ import { normalizeText, redrawTextBoundingBox, wrapText, - getContainerMaxHeight, - getContainerMaxWidth, + getBoundTextMaxHeight, + getBoundTextMaxWidth, computeBoundTextPosition, getTextHeight, } from "./textElement"; @@ -202,8 +202,8 @@ export const textWysiwyg = ({ } } - maxWidth = getContainerMaxWidth(container); - maxHeight = getContainerMaxHeight( + maxWidth = getBoundTextMaxWidth(container); + maxHeight = getBoundTextMaxHeight( container, updatedTextElement as ExcalidrawTextElementWithContainer, ); @@ -348,7 +348,7 @@ export const textWysiwyg = ({ const wrappedText = wrapText( `${editable.value}${data}`, font, - getContainerMaxWidth(container), + getBoundTextMaxWidth(container), ); const width = getTextWidth(wrappedText, font); editable.style.width = `${width}px`; @@ -365,7 +365,7 @@ export const textWysiwyg = ({ const wrappedText = wrapText( normalizeText(editable.value), font, - getContainerMaxWidth(container!), + getBoundTextMaxWidth(container!), ); const { width, height } = measureText(wrappedText, font); editable.style.width = `${width}px`; diff --git a/src/renderer/renderElement.ts b/src/renderer/renderElement.ts index 7d3bf9de7..7c9ae6a40 100644 --- a/src/renderer/renderElement.ts +++ b/src/renderer/renderElement.ts @@ -44,8 +44,8 @@ import { getBoundTextElement, getContainerCoords, getContainerElement, - getContainerMaxHeight, - getContainerMaxWidth, + getBoundTextMaxHeight, + getBoundTextMaxWidth, } from "../element/textElement"; import { LinearElementEditor } from "../element/linearElementEditor"; @@ -829,8 +829,8 @@ const drawElementFromCanvas = ( context.strokeRect( (coords.x + renderConfig.scrollX) * window.devicePixelRatio, (coords.y + renderConfig.scrollY) * window.devicePixelRatio, - getContainerMaxWidth(element) * window.devicePixelRatio, - getContainerMaxHeight(element, textElement) * window.devicePixelRatio, + getBoundTextMaxWidth(element) * window.devicePixelRatio, + getBoundTextMaxHeight(element, textElement) * window.devicePixelRatio, ); } } diff --git a/src/tests/linearElementEditor.test.tsx b/src/tests/linearElementEditor.test.tsx index 48b438e49..7ef3a42d3 100644 --- a/src/tests/linearElementEditor.test.tsx +++ b/src/tests/linearElementEditor.test.tsx @@ -17,7 +17,7 @@ import { KEYS } from "../keys"; import { LinearElementEditor } from "../element/linearElementEditor"; import { queryByTestId, queryByText } from "@testing-library/react"; import { resize, rotate } from "./utils"; -import { wrapText, getContainerMaxWidth } from "../element/textElement"; +import { wrapText, getBoundTextMaxWidth } from "../element/textElement"; import * as textElementUtils from "../element/textElement"; import { ROUNDNESS } from "../constants"; @@ -725,7 +725,7 @@ describe("Test Linear Elements", () => { type: "text", x: 0, y: 0, - text: wrapText(text, font, getContainerMaxWidth(container)), + text: wrapText(text, font, getBoundTextMaxWidth(container)), containerId: container.id, width: 30, height: 20, @@ -1151,7 +1151,7 @@ describe("Test Linear Elements", () => { expect(rect.x).toBe(400); expect(rect.y).toBe(0); expect( - wrapText(textElement.originalText, font, getContainerMaxWidth(arrow)), + wrapText(textElement.originalText, font, getBoundTextMaxWidth(arrow)), ).toMatchInlineSnapshot(` "Online whiteboard collaboration made easy" @@ -1174,7 +1174,7 @@ describe("Test Linear Elements", () => { false, ); expect( - wrapText(textElement.originalText, font, getContainerMaxWidth(arrow)), + wrapText(textElement.originalText, font, getBoundTextMaxWidth(arrow)), ).toMatchInlineSnapshot(` "Online whiteboard collaboration made