introduce baseline in element making it backward compat

src/element/newElement.ts

@@ -30,6 +30,7 @@ import {
   wrapText,
   getMaxContainerWidth,
   getDefaultLineHeight,
+  measureBaseline,
 } from "./textElement";
 import { VERTICAL_ALIGN } from "../constants";
 import { isArrowElement } from "./typeChecks";
@@ -145,6 +146,7 @@ export const newTextElement = (
   const text = normalizeText(opts.text);
   const metrics = measureText(text, getFontString(opts), lineHeight);
   const offsets = getTextElementPositionOffsets(opts, metrics);
+
   const textElement = newElementWith(
     {
       ..._newElementBase<ExcalidrawTextElement>("text", opts),
@@ -157,6 +159,7 @@ export const newTextElement = (
       y: opts.y - offsets.y,
       width: metrics.width,
       height: metrics.height,
+      baseline: metrics.baseline,
       containerId: opts.containerId || null,
       originalText: text,
       lineHeight,
@@ -174,14 +177,15 @@ const getAdjustedDimensions = (
   y: number;
   width: number;
   height: number;
+  baseline: number;
 } => {
   const container = getContainerElement(element);
 
-  const { width: nextWidth, height: nextHeight } = measureText(
-    nextText,
-    getFontString(element),
-    element.lineHeight,
-  );
+  const {
+    width: nextWidth,
+    height: nextHeight,
+    baseline: nextBaseline,
+  } = measureText(nextText, getFontString(element), element.lineHeight);
   const { textAlign, verticalAlign } = element;
   let x: number;
   let y: number;
@@ -256,6 +260,7 @@ const getAdjustedDimensions = (
   return {
     width: nextWidth,
     height: nextHeight,
+    baseline: nextBaseline,
     x: Number.isFinite(x) ? x : element.x,
     y: Number.isFinite(y) ? y : element.y,
   };

src/element/textElement.ts

@@ -58,6 +58,7 @@ export const redrawTextBoundingBox = (
     text: textElement.text,
     width: textElement.width,
     height: textElement.height,
+    baseline: textElement.baseline,
   };
 
   boundTextUpdates.text = textElement.text;
@@ -78,6 +79,7 @@ export const redrawTextBoundingBox = (
 
   boundTextUpdates.width = metrics.width;
   boundTextUpdates.height = metrics.height;
+  boundTextUpdates.baseline = metrics.baseline;
 
   if (container) {
     if (isArrowElement(container)) {
@@ -183,6 +185,7 @@ export const handleBindTextResize = (
     const maxWidth = getMaxContainerWidth(container);
     const maxHeight = getMaxContainerHeight(container);
     let containerHeight = containerDims.height;
+    let nextBaseLine = textElement.baseline;
     if (transformHandleType !== "n" && transformHandleType !== "s") {
       if (text) {
         text = wrapText(
@@ -191,13 +194,14 @@ export const handleBindTextResize = (
           maxWidth,
         );
       }
-      const dimensions = measureText(
+      const metrics = measureText(
         text,
         getFontString(textElement),
         textElement.lineHeight,
       );
-      nextHeight = dimensions.height;
-      nextWidth = dimensions.width;
+      nextHeight = metrics.height;
+      nextWidth = metrics.width;
+      nextBaseLine = metrics.baseline;
     }
     // increase height in case text element height exceeds
     if (nextHeight > maxHeight) {
@@ -225,6 +229,7 @@ export const handleBindTextResize = (
       text,
       width: nextWidth,
       height: nextHeight,
+      baseline: nextBaseLine,
     });
 
     if (!isArrowElement(container)) {
@@ -285,8 +290,8 @@ export const measureText = (
   const fontSize = parseFloat(font);
   const height = getTextHeight(text, fontSize, lineHeight);
   const width = getTextWidth(text, font);
-
-  return { width, height };
+  const baseline = measureBaseline(text, font, lineHeight);
+  return { width, height, baseline };
 };
 
 export const measureBaseline = (
@@ -300,7 +305,7 @@ export const measureBaseline = (
   container.style.whiteSpace = "pre";
   container.style.font = font;
   container.style.minHeight = "1em";
-
+  console.log("HEYYY you are here!!");
   if (wrapInContainer) {
     container.style.overflow = "hidden";
     container.style.wordBreak = "break-word";

src/element/textWysiwyg.tsx

@@ -34,7 +34,6 @@ import {
   wrapText,
   getMaxContainerHeight,
   getMaxContainerWidth,
-  measureBaseline,
   computeContainerDimensionForBoundText,
 } from "./textElement";
 import {
@@ -273,7 +272,10 @@ export const textWysiwyg = ({
         textElementWidth += 0.5;
       }
 
-      const top = viewportY;
+      let verticalOffset = 0;
+      if (element.verticalAlign === VERTICAL_ALIGN.BOTTOM) {
+        //verticalOffset = getBoundTextElementOffset(element);
+      }
       // Make sure text editor height doesn't go beyond viewport
       const editorMaxHeight =
         (appState.height - viewportY) / appState.zoom.value;
@@ -284,7 +286,7 @@ export const textWysiwyg = ({
         width: `${textElementWidth}px`,
         height: `${textElementHeight}px`,
         left: `${viewportX}px`,
-        top: `${top}px`,
+        top: `${viewportY + verticalOffset}px`,
         transform: getTransform(
           textElementWidth,
           textElementHeight,
@@ -295,8 +297,7 @@ export const textWysiwyg = ({
         ),
         textAlign,
         verticalAlign,
-        // color: updatedTextElement.strokeColor,
-        color: "red",
+        color: updatedTextElement.strokeColor,
         opacity: updatedTextElement.opacity / 100,
         filter: "var(--theme-filter)",
         maxHeight: `${editorMaxHeight}px`,

src/element/types.ts

@@ -131,6 +131,7 @@ export type ExcalidrawTextElement = _ExcalidrawElementBase &
     fontSize: number;
     fontFamily: FontFamilyValues;
     text: string;
+    baseline: number;
     textAlign: TextAlign;
     verticalAlign: VerticalAlign;
     containerId: ExcalidrawGenericElement["id"] | null;