refactor: create a util to compute container dimensions for bound text container (#5708)

This commit is contained in:
Aakansha Doshi 2022-09-19 15:30:37 +05:30 committed by GitHub
parent 3a776f8795
commit 8636ef1017
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 77 additions and 55 deletions

View file

@ -16,16 +16,16 @@ export const redrawTextBoundingBox = (
element: ExcalidrawTextElement,
container: ExcalidrawElement | null,
) => {
const maxWidth = container
? container.width - BOUND_TEXT_PADDING * 2
: undefined;
let maxWidth = undefined;
let text = element.text;
if (container) {
const containerDims = getContainerDims(container);
maxWidth = containerDims.width - BOUND_TEXT_PADDING * 2;
text = wrapText(
element.originalText,
getFontString(element),
container.width,
containerDims.width,
);
}
const metrics = measureText(
@ -37,16 +37,20 @@ export const redrawTextBoundingBox = (
let coordX = element.x;
// Resize container and vertically center align the text
if (container) {
let nextHeight = container.height;
const containerDims = getContainerDims(container);
let nextHeight = containerDims.height;
coordX = container.x + BOUND_TEXT_PADDING;
if (element.verticalAlign === VERTICAL_ALIGN.TOP) {
coordY = container.y + BOUND_TEXT_PADDING;
} else if (element.verticalAlign === VERTICAL_ALIGN.BOTTOM) {
coordY =
container.y + container.height - metrics.height - BOUND_TEXT_PADDING;
container.y +
containerDims.height -
metrics.height -
BOUND_TEXT_PADDING;
} else {
coordY = container.y + container.height / 2 - metrics.height / 2;
if (metrics.height > container.height - BOUND_TEXT_PADDING * 2) {
coordY = container.y + containerDims.height / 2 - metrics.height / 2;
if (metrics.height > containerDims.height - BOUND_TEXT_PADDING * 2) {
nextHeight = metrics.height + BOUND_TEXT_PADDING * 2;
coordY = container.y + nextHeight / 2 - metrics.height / 2;
}
@ -474,3 +478,7 @@ export const getContainerElement = (
}
return null;
};
export const getContainerDims = (element: ExcalidrawElement) => {
return { width: element.width, height: element.height };
};