diff --git a/src/element/resizeElements.ts b/src/element/resizeElements.ts index a1d1ee19..0754e1b4 100644 --- a/src/element/resizeElements.ts +++ b/src/element/resizeElements.ts @@ -602,7 +602,7 @@ export const resizeSingleElement = ( newSize: { width: resizedElement.width, height: resizedElement.height }, }); mutateElement(element, resizedElement); - handleBindTextResize([element], transformHandleDirection); + handleBindTextResize(element, transformHandleDirection); } }; @@ -742,7 +742,7 @@ const resizeMultipleElements = ( fontSize: updates[index].fontSize, baseline: updates[index].baseline, }); - handleBindTextResize([element], transformHandleType); + handleBindTextResize(element, transformHandleType); } }); } diff --git a/src/element/textElement.ts b/src/element/textElement.ts index e2d294e3..5f6a403b 100644 --- a/src/element/textElement.ts +++ b/src/element/textElement.ts @@ -92,71 +92,69 @@ export const bindTextToShapeAfterDuplication = ( }; export const handleBindTextResize = ( - elements: readonly NonDeletedExcalidrawElement[], + element: NonDeletedExcalidrawElement, transformHandleType: MaybeTransformHandleType, ) => { - elements.forEach((element) => { - const boundTextElementId = getBoundTextElementId(element); - if (boundTextElementId) { - const textElement = Scene.getScene(element)!.getElement( - boundTextElementId, - ) as ExcalidrawTextElement; - if (textElement && textElement.text) { - if (!element) { - return; - } - let text = textElement.text; - let nextHeight = textElement.height; - let containerHeight = element.height; - let nextBaseLine = textElement.baseline; - if (transformHandleType !== "n" && transformHandleType !== "s") { - if (text) { - text = wrapText( - textElement.originalText, - getFontString(textElement), - element.width, - ); - } - - const dimensions = measureText( - text, + const boundTextElementId = getBoundTextElementId(element); + if (boundTextElementId) { + const textElement = Scene.getScene(element)!.getElement( + boundTextElementId, + ) as ExcalidrawTextElement; + if (textElement && textElement.text) { + if (!element) { + return; + } + let text = textElement.text; + let nextHeight = textElement.height; + let containerHeight = element.height; + let nextBaseLine = textElement.baseline; + if (transformHandleType !== "n" && transformHandleType !== "s") { + if (text) { + text = wrapText( + textElement.originalText, getFontString(textElement), element.width, ); - nextHeight = dimensions.height; - nextBaseLine = dimensions.baseline; - } - // increase height in case text element height exceeds - if (nextHeight > element.height - BOUND_TEXT_PADDING * 2) { - containerHeight = nextHeight + BOUND_TEXT_PADDING * 2; - const diff = containerHeight - element.height; - // fix the y coord when resizing from ne/nw/n - const updatedY = - transformHandleType === "ne" || - transformHandleType === "nw" || - transformHandleType === "n" - ? element.y - diff - : element.y; - mutateElement(element, { - height: containerHeight, - y: updatedY, - }); } - const updatedY = element.y + containerHeight / 2 - nextHeight / 2; - - mutateElement(textElement, { + const dimensions = measureText( text, - // preserve padding and set width correctly - width: element.width - BOUND_TEXT_PADDING * 2, - height: nextHeight, - x: element.x + BOUND_TEXT_PADDING, + getFontString(textElement), + element.width, + ); + nextHeight = dimensions.height; + nextBaseLine = dimensions.baseline; + } + // increase height in case text element height exceeds + if (nextHeight > element.height - BOUND_TEXT_PADDING * 2) { + containerHeight = nextHeight + BOUND_TEXT_PADDING * 2; + const diff = containerHeight - element.height; + // fix the y coord when resizing from ne/nw/n + const updatedY = + transformHandleType === "ne" || + transformHandleType === "nw" || + transformHandleType === "n" + ? element.y - diff + : element.y; + mutateElement(element, { + height: containerHeight, y: updatedY, - baseline: nextBaseLine, }); } + + const updatedY = element.y + containerHeight / 2 - nextHeight / 2; + + mutateElement(textElement, { + text, + // preserve padding and set width correctly + width: element.width - BOUND_TEXT_PADDING * 2, + height: nextHeight, + x: element.x + BOUND_TEXT_PADDING, + y: updatedY, + baseline: nextBaseLine, + }); } - }); + } }; // https://github.com/grassator/canvas-text-editor/blob/master/lib/FontMetrics.js