rename to getLineHeight and use the same line height for regular text elements

src/element/textElement.ts

@@ -275,17 +275,17 @@ export const measureText = (text: string, font: FontString) => {
 };
 
 const DUMMY_TEXT = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".toLocaleUpperCase();
-const cacheApproxLineHeight: { [key: FontString]: number } = {};
+const cacheLineHeight: { [key: FontString]: number } = {};
 
-export const getApproxLineHeight = (font: FontString) => {
-  if (cacheApproxLineHeight[font]) {
-    return cacheApproxLineHeight[font];
+export const getLineHeight = (font: FontString) => {
+  if (cacheLineHeight[font]) {
+    return cacheLineHeight[font];
   }
   const fontSize = parseInt(font);
 
   // Calculate line height relative to font size
-  cacheApproxLineHeight[font] = fontSize * 1.2;
-  return cacheApproxLineHeight[font];
+  cacheLineHeight[font] = fontSize * 1.2;
+  return cacheLineHeight[font];
 };
 
 let canvas: HTMLCanvasElement | undefined;
@@ -318,7 +318,7 @@ export const getTextWidth = (text: string, font: FontString) => {
 
 export const getTextHeight = (text: string, font: FontString) => {
   const lines = text.replace(/\r\n?/g, "\n").split("\n");
-  const lineHeight = getApproxLineHeight(font);
+  const lineHeight = getLineHeight(font);
   return lineHeight * lines.length;
 };
 
@@ -473,7 +473,7 @@ export const getApproxMinLineWidth = (font: FontString) => {
 };
 
 export const getApproxMinLineHeight = (font: FontString) => {
-  return getApproxLineHeight(font) + BOUND_TEXT_PADDING * 2;
+  return getLineHeight(font) + BOUND_TEXT_PADDING * 2;
 };
 
 export const getMinCharWidth = (font: FontString) => {

src/element/textWysiwyg.tsx

@@ -22,7 +22,7 @@ import {
 import { AppState } from "../types";
 import { mutateElement } from "./mutateElement";
 import {
-  getApproxLineHeight,
+  getLineHeight,
   getBoundTextElementId,
   getContainerDims,
   getContainerElement,
@@ -151,9 +151,8 @@ export const textWysiwyg = ({
       return;
     }
     const { textAlign, verticalAlign } = updatedTextElement;
-    const approxLineHeight = getApproxLineHeight(
-      getFontString(updatedTextElement),
-    );
+    const lineHeight = getLineHeight(getFontString(updatedTextElement));
+
     if (updatedTextElement && isTextElement(updatedTextElement)) {
       let coordX = updatedTextElement.x;
       let coordY = updatedTextElement.y;
@@ -211,10 +210,7 @@ export const textWysiwyg = ({
 
         // autogrow container height if text exceeds
         if (!isArrowElement(container) && textElementHeight > maxHeight) {
-          const diff = Math.min(
-            textElementHeight - maxHeight,
-            approxLineHeight,
-          );
+          const diff = Math.min(textElementHeight - maxHeight, lineHeight);
           mutateElement(container, { height: containerDims.height + diff });
           return;
         } else if (
@@ -224,10 +220,7 @@ export const textWysiwyg = ({
           containerDims.height > originalContainerData.height &&
           textElementHeight < maxHeight
         ) {
-          const diff = Math.min(
-            maxHeight - textElementHeight,
-            approxLineHeight,
-          );
+          const diff = Math.min(maxHeight - textElementHeight, lineHeight);
           mutateElement(container, { height: containerDims.height - diff });
         } else {
           const { y } = computeBoundTextPosition(
@@ -257,9 +250,7 @@ export const textWysiwyg = ({
       }
 
       const lines = updatedTextElement.originalText.split("\n");
-      const lineHeight = updatedTextElement.containerId
-        ? approxLineHeight
-        : updatedTextElement.height / lines.length;
+
       if (!container) {
         maxWidth = (appState.width - 8 - viewportX) / appState.zoom.value;
         textElementWidth = Math.min(textElementWidth, maxWidth);