adjust font baseline on resize (#1820)

* adjust font baseline on resize

* simplify font scaling on resize

* fix: resizing text to avoid glitchy behavior

* make text resizing deterministic

* no TEXT_WIDTH_PADDING hack

Co-authored-by: dwelle <luzar.david@gmail.com>

src/element/resizeElements.ts

@@ -207,45 +207,26 @@ const rescalePointsInElement = (
       }
     : {};
 
-// This is not computationally ideal, but can't be helped.
+const MIN_FONT_SIZE = 1;
+
 const measureFontSizeFromWH = (
   element: NonDeleted<ExcalidrawTextElement>,
   nextWidth: number,
   nextHeight: number,
 ): { size: number; baseline: number } | null => {
-  let scale = Math.min(nextWidth / element.width, nextHeight / element.height);
+  // We only use width to scale font on resize
-  let nextFontSize = element.fontSize * scale;
+  const nextFontSize = element.fontSize * (nextWidth / element.width);
-  let metrics = measureText(
+  if (nextFontSize < MIN_FONT_SIZE) {
-    element.text,
+    return null;
-    getFontString({ fontSize: nextFontSize, fontFamily: element.fontFamily }),
-  );
-  if (metrics.width - nextWidth < 1 && metrics.height - nextHeight < 1) {
-    return { size: nextFontSize, baseline: metrics.baseline };
-  }
-  // second measurement
-  scale = Math.min(
-    Math.min(nextWidth, metrics.width) / element.width,
-    Math.min(nextHeight, metrics.height) / element.height,
-  );
-  nextFontSize = element.fontSize * scale;
-  metrics = measureText(
-    element.text,
-    getFontString({ fontSize: nextFontSize, fontFamily: element.fontFamily }),
-  );
-  if (metrics.width - nextWidth < 1 && metrics.height - nextHeight < 1) {
-    return { size: nextFontSize, baseline: metrics.baseline };
   }
-  // third measurement
+  const metrics = measureText(
-  scale *= 0.99; // just heuristics
-  nextFontSize = element.fontSize * scale;
-  metrics = measureText(
     element.text,
     getFontString({ fontSize: nextFontSize, fontFamily: element.fontFamily }),
   );
-  if (metrics.width - nextWidth < 1 && metrics.height - nextHeight < 1) {
+  return {
-    return { size: nextFontSize, baseline: metrics.baseline };
+    size: nextFontSize,
-  }
+    baseline: metrics.baseline + (nextHeight - metrics.height),
-  return null;
+  };
 };
 
 const getSidesForResizeHandle = (