floor font on canvas

This reverts commit d75889238d.

README.md

@@ -17,7 +17,7 @@
     An open source virtual hand-drawn style whiteboard. </br>
     Collaborative and end-to-end encrypted. </br>
   <br />
-  </h2>
+  </h3>
 </div>
 
 <br />

package.json

@@ -20,7 +20,6 @@
   },
   "dependencies": {
     "@dwelle/tunnel-rat": "0.1.1",
-    "@excalidraw/roughjs": "4.5.3",
     "@sentry/browser": "6.2.5",
     "@sentry/integrations": "6.2.5",
     "@testing-library/jest-dom": "5.16.2",

public/index.html

@@ -94,7 +94,7 @@
         // if its present redirect
         document.cookie.includes("excplus-autoredirect=true")
       ) {
-        // window.location.href = "https://app.excalidraw.com";
+        window.location.href = "https://app.excalidraw.com";
       }
     </script>
 

src/actions/actionBoundText.tsx

@@ -23,7 +23,6 @@ import {
   ExcalidrawTextElement,
 } from "../element/types";
 import { getSelectedElements } from "../scene";
-import { AppState } from "../types";
 import { getFontString } from "../utils";
 import { register } from "./register";
 
@@ -43,7 +42,7 @@ export const actionUnbindText = register({
     selectedElements.forEach((element) => {
       const boundTextElement = getBoundTextElement(element);
       if (boundTextElement) {
-        const { width, height } = measureText(
+        const { width, height, baseline } = measureText(
           boundTextElement.originalText,
           getFontString(boundTextElement),
           boundTextElement.lineHeight,
@@ -57,6 +56,7 @@ export const actionUnbindText = register({
           containerId: null,
           width,
           height,
+          baseline,
           text: boundTextElement.originalText,
         });
         mutateElement(element, {
@@ -186,110 +186,107 @@ export const actionCreateContainerFromText = register({
   trackEvent: { category: "element" },
   predicate: (elements, appState) => {
     const selectedElements = getSelectedElements(elements, appState);
-    const areTextElements = selectedElements.every((el) => isTextElement(el));
-    return selectedElements.length > 0 && areTextElements;
+    return selectedElements.length === 1 && isTextElement(selectedElements[0]);
   },
   perform: (elements, appState) => {
     const selectedElements = getSelectedElements(
       getNonDeletedElements(elements),
       appState,
     );
-    let updatedElements: readonly ExcalidrawElement[] = elements.slice();
-    const containerIds: AppState["selectedElementIds"] = {};
+    const updatedElements = elements.slice();
+    if (selectedElements.length === 1 && isTextElement(selectedElements[0])) {
+      const textElement = selectedElements[0];
+      const container = newElement({
+        type: "rectangle",
+        backgroundColor: appState.currentItemBackgroundColor,
+        boundElements: [
+          ...(textElement.boundElements || []),
+          { id: textElement.id, type: "text" },
+        ],
+        angle: textElement.angle,
+        fillStyle: appState.currentItemFillStyle,
+        strokeColor: appState.currentItemStrokeColor,
+        roughness: appState.currentItemRoughness,
+        strokeWidth: appState.currentItemStrokeWidth,
+        strokeStyle: appState.currentItemStrokeStyle,
+        roundness:
+          appState.currentItemRoundness === "round"
+            ? {
+                type: isUsingAdaptiveRadius("rectangle")
+                  ? ROUNDNESS.ADAPTIVE_RADIUS
+                  : ROUNDNESS.PROPORTIONAL_RADIUS,
+              }
+            : null,
+        opacity: 100,
+        locked: false,
+        x: textElement.x - BOUND_TEXT_PADDING,
+        y: textElement.y - BOUND_TEXT_PADDING,
+        width: computeContainerDimensionForBoundText(
+          textElement.width,
+          "rectangle",
+        ),
+        height: computeContainerDimensionForBoundText(
+          textElement.height,
+          "rectangle",
+        ),
+        groupIds: textElement.groupIds,
+      });
 
-    for (const textElement of selectedElements) {
-      if (isTextElement(textElement)) {
-        const container = newElement({
-          type: "rectangle",
-          backgroundColor: appState.currentItemBackgroundColor,
-          boundElements: [
-            ...(textElement.boundElements || []),
-            { id: textElement.id, type: "text" },
-          ],
-          angle: textElement.angle,
-          fillStyle: appState.currentItemFillStyle,
-          strokeColor: appState.currentItemStrokeColor,
-          roughness: appState.currentItemRoughness,
-          strokeWidth: appState.currentItemStrokeWidth,
-          strokeStyle: appState.currentItemStrokeStyle,
-          roundness:
-            appState.currentItemRoundness === "round"
-              ? {
-                  type: isUsingAdaptiveRadius("rectangle")
-                    ? ROUNDNESS.ADAPTIVE_RADIUS
-                    : ROUNDNESS.PROPORTIONAL_RADIUS,
-                }
-              : null,
-          opacity: 100,
-          locked: false,
-          x: textElement.x - BOUND_TEXT_PADDING,
-          y: textElement.y - BOUND_TEXT_PADDING,
-          width: computeContainerDimensionForBoundText(
-            textElement.width,
-            "rectangle",
-          ),
-          height: computeContainerDimensionForBoundText(
-            textElement.height,
-            "rectangle",
-          ),
-          groupIds: textElement.groupIds,
+      // update bindings
+      if (textElement.boundElements?.length) {
+        const linearElementIds = textElement.boundElements
+          .filter((ele) => ele.type === "arrow")
+          .map((el) => el.id);
+        const linearElements = updatedElements.filter((ele) =>
+          linearElementIds.includes(ele.id),
+        ) as ExcalidrawLinearElement[];
+        linearElements.forEach((ele) => {
+          let startBinding = ele.startBinding;
+          let endBinding = ele.endBinding;
+
+          if (startBinding?.elementId === textElement.id) {
+            startBinding = {
+              ...startBinding,
+              elementId: container.id,
+            };
+          }
+
+          if (endBinding?.elementId === textElement.id) {
+            endBinding = { ...endBinding, elementId: container.id };
+          }
+
+          if (startBinding || endBinding) {
+            mutateElement(ele, { startBinding, endBinding });
+          }
         });
+      }
 
-        // update bindings
-        if (textElement.boundElements?.length) {
-          const linearElementIds = textElement.boundElements
-            .filter((ele) => ele.type === "arrow")
-            .map((el) => el.id);
-          const linearElements = updatedElements.filter((ele) =>
-            linearElementIds.includes(ele.id),
-          ) as ExcalidrawLinearElement[];
-          linearElements.forEach((ele) => {
-            let startBinding = ele.startBinding;
-            let endBinding = ele.endBinding;
+      mutateElement(textElement, {
+        containerId: container.id,
+        verticalAlign: VERTICAL_ALIGN.MIDDLE,
+        boundElements: null,
+      });
+      redrawTextBoundingBox(textElement, container);
 
-            if (startBinding?.elementId === textElement.id) {
-              startBinding = {
-                ...startBinding,
-                elementId: container.id,
-              };
-            }
-
-            if (endBinding?.elementId === textElement.id) {
-              endBinding = { ...endBinding, elementId: container.id };
-            }
-
-            if (startBinding || endBinding) {
-              mutateElement(ele, { startBinding, endBinding }, false);
-            }
-          });
-        }
-
-        mutateElement(
-          textElement,
-          {
-            containerId: container.id,
-            verticalAlign: VERTICAL_ALIGN.MIDDLE,
-            boundElements: null,
-          },
-          false,
-        );
-        redrawTextBoundingBox(textElement, container);
-
-        updatedElements = pushContainerBelowText(
-          [...updatedElements, container],
+      return {
+        elements: pushContainerBelowText(
+          [...elements, container],
           container,
           textElement,
-        );
-        containerIds[container.id] = true;
-      }
+        ),
+        appState: {
+          ...appState,
+          selectedElementIds: {
+            [container.id]: true,
+            [textElement.id]: false,
+          },
+        },
+        commitToHistory: true,
+      };
     }
-
     return {
       elements: updatedElements,
-      appState: {
-        ...appState,
-        selectedElementIds: containerIds,
-      },
+      appState,
       commitToHistory: true,
     };
   },

src/components/App.tsx

@@ -1,8 +1,8 @@
 import React, { useContext } from "react";
 import { flushSync } from "react-dom";
 
-import { RoughCanvas } from "@excalidraw/roughjs/bin/canvas";
-import rough from "@excalidraw/roughjs/bin/rough";
+import { RoughCanvas } from "roughjs/bin/canvas";
+import rough from "roughjs/bin/rough";
 import clsx from "clsx";
 import { nanoid } from "nanoid";
 

src/data/restore.ts

@@ -31,11 +31,15 @@ import {
 import { getDefaultAppState } from "../appState";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { bumpVersion } from "../element/mutateElement";
-import { getUpdatedTimestamp, updateActiveTool } from "../utils";
+import { getFontString, getUpdatedTimestamp, updateActiveTool } from "../utils";
 import { arrayToMap } from "../utils";
 import oc from "open-color";
 import { MarkOptional, Mutable } from "../utility-types";
-import { detectLineHeight, getDefaultLineHeight } from "../element/textElement";
+import {
+  detectLineHeight,
+  getDefaultLineHeight,
+  getDOMMetrics,
+} from "../element/textElement";
 
 type RestoredAppState = Omit<
   AppState,
@@ -171,6 +175,24 @@ const restoreElement = (
       }
       const text = element.text ?? "";
 
+      // line-height might not be specified either when creating elements
+      // programmatically, or when importing old diagrams.
+      // For the latter we want to detect the original line height which
+      // will likely differ from our per-font fixed line height we now use,
+      // to maintain backward compatibility.
+      const lineHeight =
+        element.lineHeight ||
+        (element.height
+          ? // detect line-height from current element height and font-size
+            detectLineHeight(element)
+          : // no element height likely means programmatic use, so default
+            // to a fixed line height
+            getDefaultLineHeight(element.fontFamily));
+      const { baseline } = getDOMMetrics(
+        element.text,
+        getFontString(element),
+        lineHeight,
+      );
       element = restoreElementWithProperties(element, {
         fontSize,
         fontFamily,
@@ -179,19 +201,9 @@ const restoreElement = (
         verticalAlign: element.verticalAlign || DEFAULT_VERTICAL_ALIGN,
         containerId: element.containerId ?? null,
         originalText: element.originalText || text,
-        // line-height might not be specified either when creating elements
-        // programmatically, or when importing old diagrams.
-        // For the latter we want to detect the original line height which
-        // will likely differ from our per-font fixed line height we now use,
-        // to maintain backward compatibility.
-        lineHeight:
-          element.lineHeight ||
-          (element.height
-            ? // detect line-height from current element height and font-size
-              detectLineHeight(element)
-            : // no element height likely means programmatic use, so default
-              // to a fixed line height
-              getDefaultLineHeight(element.fontFamily)),
+
+        lineHeight,
+        baseline,
       });
 
       if (refreshDimensions) {

src/element/bounds.ts

@@ -7,8 +7,8 @@ import {
   ExcalidrawTextElementWithContainer,
 } from "./types";
 import { distance2d, rotate } from "../math";
-import rough from "@excalidraw/roughjs/bin/rough";
-import { Drawable, Op } from "@excalidraw/roughjs/bin/core";
+import rough from "roughjs/bin/rough";
+import { Drawable, Op } from "roughjs/bin/core";
 import { Point } from "../types";
 import {
   getShapeForElement,

src/element/collision.ts

@@ -30,7 +30,7 @@ import {
 
 import { getElementAbsoluteCoords, getCurvePathOps, Bounds } from "./bounds";
 import { Point } from "../types";
-import { Drawable } from "@excalidraw/roughjs/bin/core";
+import { Drawable } from "roughjs/bin/core";
 import { AppState } from "../types";
 import { getShapeForElement } from "../renderer/renderElement";
 import { hasBoundTextElement, isImageElement } from "./typeChecks";

src/element/newElement.ts

@@ -145,6 +145,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 +158,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 +176,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 +259,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/resizeElements.ts

@@ -46,6 +46,8 @@ import {
   handleBindTextResize,
   getMaxContainerWidth,
   getApproxMinLineHeight,
+  measureText,
+  getMaxContainerHeight,
 } from "./textElement";
 
 export const normalizeAngle = (angle: number): number => {
@@ -193,7 +195,8 @@ const MIN_FONT_SIZE = 1;
 const measureFontSizeFromWidth = (
   element: NonDeleted<ExcalidrawTextElement>,
   nextWidth: number,
-): number | null => {
+  nextHeight: number,
+): { size: number; baseline: number } | null => {
   // We only use width to scale font on resize
   let width = element.width;
 
@@ -208,8 +211,15 @@ const measureFontSizeFromWidth = (
   if (nextFontSize < MIN_FONT_SIZE) {
     return null;
   }
-
-  return nextFontSize;
+  const metrics = measureText(
+    element.text,
+    getFontString({ fontSize: nextFontSize, fontFamily: element.fontFamily }),
+    element.lineHeight,
+  );
+  return {
+    size: nextFontSize,
+    baseline: metrics.baseline + (nextHeight - metrics.height),
+  };
 };
 
 const getSidesForTransformHandle = (
@@ -280,8 +290,8 @@ const resizeSingleTextElement = (
   if (scale > 0) {
     const nextWidth = element.width * scale;
     const nextHeight = element.height * scale;
-    const nextFontSize = measureFontSizeFromWidth(element, nextWidth);
-    if (nextFontSize === null) {
+    const metrics = measureFontSizeFromWidth(element, nextWidth, nextHeight);
+    if (metrics === null) {
       return;
     }
     const [nextX1, nextY1, nextX2, nextY2] = getResizedElementAbsoluteCoords(
@@ -305,9 +315,10 @@ const resizeSingleTextElement = (
       deltaY2,
     );
     mutateElement(element, {
-      fontSize: nextFontSize,
+      fontSize: metrics.size,
       width: nextWidth,
       height: nextHeight,
+      baseline: metrics.baseline,
       x: nextElementX,
       y: nextElementY,
     });
@@ -360,7 +371,7 @@ export const resizeSingleElement = (
   let scaleX = atStartBoundsWidth / boundsCurrentWidth;
   let scaleY = atStartBoundsHeight / boundsCurrentHeight;
 
-  let boundTextFontSize: number | null = null;
+  let boundTextFont: { fontSize?: number; baseline?: number } = {};
   const boundTextElement = getBoundTextElement(element);
 
   if (transformHandleDirection.includes("e")) {
@@ -410,7 +421,10 @@ export const resizeSingleElement = (
       boundTextElement.id,
     ) as typeof boundTextElement | undefined;
     if (stateOfBoundTextElementAtResize) {
-      boundTextFontSize = stateOfBoundTextElementAtResize.fontSize;
+      boundTextFont = {
+        fontSize: stateOfBoundTextElementAtResize.fontSize,
+        baseline: stateOfBoundTextElementAtResize.baseline,
+      };
     }
     if (shouldMaintainAspectRatio) {
       const updatedElement = {
@@ -419,14 +433,18 @@ export const resizeSingleElement = (
         height: eleNewHeight,
       };
 
-      const nextFontSize = measureFontSizeFromWidth(
+      const nextFont = measureFontSizeFromWidth(
         boundTextElement,
         getMaxContainerWidth(updatedElement),
+        getMaxContainerHeight(updatedElement),
       );
-      if (nextFontSize === null) {
+      if (nextFont === null) {
         return;
       }
-      boundTextFontSize = nextFontSize;
+      boundTextFont = {
+        fontSize: nextFont.size,
+        baseline: nextFont.baseline,
+      };
     } else {
       const minWidth = getApproxMinLineWidth(
         getFontString(boundTextElement),
@@ -568,9 +586,10 @@ export const resizeSingleElement = (
     });
 
     mutateElement(element, resizedElement);
-    if (boundTextElement && boundTextFontSize != null) {
+    if (boundTextElement && boundTextFont != null) {
       mutateElement(boundTextElement, {
-        fontSize: boundTextFontSize,
+        fontSize: boundTextFont.fontSize,
+        baseline: boundTextFont.baseline,
       });
     }
     handleBindTextResize(element, transformHandleDirection);
@@ -677,6 +696,7 @@ const resizeMultipleElements = (
       y: number;
       points?: Point[];
       fontSize?: number;
+      baseline?: number;
     } = {
       width,
       height,
@@ -685,7 +705,7 @@ const resizeMultipleElements = (
       ...rescaledPoints,
     };
 
-    let boundTextUpdates: { fontSize: number } | null = null;
+    let boundTextUpdates: { fontSize: number; baseline: number } | null = null;
 
     const boundTextElement = getBoundTextElement(element.latest);
 
@@ -695,24 +715,29 @@ const resizeMultipleElements = (
         width,
         height,
       };
-      const fontSize = measureFontSizeFromWidth(
+      const metrics = measureFontSizeFromWidth(
         boundTextElement ?? (element.orig as ExcalidrawTextElement),
         boundTextElement
           ? getMaxContainerWidth(updatedElement)
           : updatedElement.width,
+        boundTextElement
+          ? getMaxContainerHeight(updatedElement)
+          : updatedElement.height,
       );
 
-      if (!fontSize) {
+      if (!metrics) {
         return;
       }
 
       if (isTextElement(element.orig)) {
-        update.fontSize = fontSize;
+        update.fontSize = metrics.size;
+        update.baseline = metrics.baseline;
       }
 
       if (boundTextElement) {
         boundTextUpdates = {
-          fontSize,
+          fontSize: metrics.size,
+          baseline: metrics.baseline,
         };
       }
     }

src/element/textElement.ts

@@ -14,6 +14,7 @@ import {
   DEFAULT_FONT_FAMILY,
   DEFAULT_FONT_SIZE,
   FONT_FAMILY,
+  isSafari,
   TEXT_ALIGN,
   VERTICAL_ALIGN,
 } from "../constants";
@@ -58,6 +59,7 @@ export const redrawTextBoundingBox = (
     text: textElement.text,
     width: textElement.width,
     height: textElement.height,
+    baseline: textElement.baseline,
   };
 
   boundTextUpdates.text = textElement.text;
@@ -78,6 +80,7 @@ export const redrawTextBoundingBox = (
 
   boundTextUpdates.width = metrics.width;
   boundTextUpdates.height = metrics.height;
+  boundTextUpdates.baseline = metrics.baseline;
 
   if (container) {
     if (isArrowElement(container)) {
@@ -183,6 +186,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 +195,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 +230,7 @@ export const handleBindTextResize = (
       text,
       width: nextWidth,
       height: nextHeight,
+      baseline: nextBaseLine,
     });
 
     if (!isArrowElement(container)) {
@@ -285,8 +291,60 @@ export const measureText = (
   const fontSize = parseFloat(font);
   const height = getTextHeight(text, fontSize, lineHeight);
   const width = getTextWidth(text, font);
+  const { baseline } = getDOMMetrics(text, font, lineHeight);
+  return { width, height, baseline };
+};
 
-  return { width, height };
+export const getDOMMetrics = (
+  text: string,
+  font: FontString,
+  lineHeight: ExcalidrawTextElement["lineHeight"],
+  wrapInContainer?: boolean,
+) => {
+  const container = document.createElement("div");
+  container.style.position = "absolute";
+  container.style.whiteSpace = "pre";
+  container.style.font = font;
+  container.style.minHeight = "1em";
+  if (wrapInContainer) {
+    container.style.overflow = "hidden";
+    container.style.wordBreak = "break-word";
+    container.style.whiteSpace = "pre-wrap";
+  }
+
+  container.style.lineHeight = String(lineHeight);
+  const canvasHeight = getTextHeight(text, parseFloat(font), lineHeight);
+
+  container.innerText = text;
+
+  // Baseline is important for positioning text on canvas
+  document.body.appendChild(container);
+
+  const span = document.createElement("span");
+  span.style.display = "inline-block";
+  span.style.overflow = "hidden";
+  span.style.width = "1px";
+  span.style.height = "1px";
+  container.appendChild(span);
+  let baseline = span.offsetTop + span.offsetHeight;
+  const height = container.offsetHeight;
+
+  if (isSafari) {
+    // In Safari sometimes DOM height could be less than canvas height due to
+    // which text could go out of the bounding box hence shifting the baseline
+    // to make sure text is rendered correctly
+    if (canvasHeight > height) {
+      baseline += canvasHeight - height;
+    }
+    // In Safari sometimes DOM height could be more than canvas height due to
+    // which text could go out of the bounding box hence shifting the baseline
+    // to make sure text is rendered correctly
+    if (height > canvasHeight) {
+      baseline -= height - canvasHeight;
+    }
+  }
+  document.body.removeChild(container);
+  return { baseline, height };
 };
 
 /**
@@ -308,7 +366,9 @@ export const getLineHeightInPx = (
   fontSize: ExcalidrawTextElement["fontSize"],
   lineHeight: ExcalidrawTextElement["lineHeight"],
 ) => {
-  return fontSize * lineHeight;
+  const res = fontSize * lineHeight;
+
+  return res;
 };
 
 // FIXME rename to getApproxMinContainerHeight

src/element/textWysiwyg.tsx

@@ -11,7 +11,7 @@ import {
   isBoundToContainer,
   isTextElement,
 } from "./typeChecks";
-import { CLASSES, VERTICAL_ALIGN } from "../constants";
+import { CLASSES, isSafari, VERTICAL_ALIGN } from "../constants";
 import {
   ExcalidrawElement,
   ExcalidrawLinearElement,
@@ -35,6 +35,9 @@ import {
   getMaxContainerHeight,
   getMaxContainerWidth,
   computeContainerDimensionForBoundText,
+  getDOMMetrics,
+  splitIntoLines,
+  detectLineHeight,
 } from "./textElement";
 import {
   actionDecreaseFontSize,
@@ -271,25 +274,38 @@ export const textWysiwyg = ({
       } else {
         textElementWidth += 0.5;
       }
+      const { height: domHeight } = getDOMMetrics(
+        updatedTextElement.text,
+        getFontString(updatedTextElement),
+        updatedTextElement.lineHeight,
+      );
+
+      let lineHeight = element.lineHeight;
+      const fontSize = Math.floor(updatedTextElement.fontSize);
+
+      if (isSafari) {
+        //@ts-ignore
+        lineHeight =
+          updatedTextElement.height /
+          splitIntoLines(updatedTextElement.text).length /
+          fontSize;
+      }
+
       // Make sure text editor height doesn't go beyond viewport
       const editorMaxHeight =
         (appState.height - viewportY) / appState.zoom.value;
       Object.assign(editable.style, {
-        font: getFontString(updatedTextElement),
+        font: getFontString({
+          fontSize,
+          fontFamily: updatedTextElement.fontFamily,
+        }),
         // must be defined *after* font ¯\_(ツ)_/¯
-        lineHeight: element.lineHeight,
+        lineHeight,
         width: `${textElementWidth}px`,
         height: `${textElementHeight}px`,
         left: `${viewportX}px`,
         top: `${viewportY}px`,
-        transform: getTransform(
-          textElementWidth,
-          textElementHeight,
-          getTextElementAngle(updatedTextElement),
-          appState,
-          maxWidth,
-          editorMaxHeight,
-        ),
+        transform: `scale(${updatedTextElement.fontSize / fontSize})`,
         textAlign,
         verticalAlign,
         color: updatedTextElement.strokeColor,

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;

src/random.ts

@@ -1,4 +1,4 @@
-import { Random } from "@excalidraw/roughjs/bin/math";
+import { Random } from "roughjs/bin/math";
 import { nanoid } from "nanoid";
 import { isTestEnv } from "./utils";
 

src/renderer/renderElement.ts

@@ -21,15 +21,15 @@ import {
   getElementAbsoluteCoords,
   getArrowheadPoints,
 } from "../element/bounds";
-import { RoughCanvas } from "@excalidraw/roughjs/bin/canvas";
-import { Drawable, Options } from "@excalidraw/roughjs/bin/core";
-import { RoughSVG } from "@excalidraw/roughjs/bin/svg";
-import { RoughGenerator } from "@excalidraw/roughjs/bin/generator";
+import { RoughCanvas } from "roughjs/bin/canvas";
+import { Drawable, Options } from "roughjs/bin/core";
+import { RoughSVG } from "roughjs/bin/svg";
+import { RoughGenerator } from "roughjs/bin/generator";
 
 import { RenderConfig } from "../scene/types";
 import { distance, getFontString, getFontFamilyString, isRTL } from "../utils";
 import { getCornerRadius, isPathALoop, isRightAngle } from "../math";
-import rough from "@excalidraw/roughjs/bin/rough";
+import rough from "roughjs/bin/rough";
 import { AppState, BinaryFiles, Zoom } from "../types";
 import { getDefaultAppState } from "../appState";
 import {
@@ -87,66 +87,12 @@ export interface ExcalidrawElementWithCanvas {
   element: ExcalidrawElement | ExcalidrawTextElement;
   canvas: HTMLCanvasElement;
   theme: RenderConfig["theme"];
-  scale: number;
+  canvasZoom: Zoom["value"];
   canvasOffsetX: number;
   canvasOffsetY: number;
   boundTextElementVersion: number | null;
 }
 
-const cappedElementCanvasSize = (
-  element: NonDeletedExcalidrawElement,
-  zoom: Zoom,
-): {
-  width: number;
-  height: number;
-  scale: number;
-} => {
-  // these limits are ballpark, they depend on specific browsers and device.
-  // We've chosen lower limits to be safe. We might want to change these limits
-  // based on browser/device type, if we get reports of low quality rendering
-  // on zoom.
-  //
-  // ~ safari mobile canvas area limit
-  const AREA_LIMIT = 16777216;
-  // ~ safari width/height limit based on developer.mozilla.org.
-  const WIDTH_HEIGHT_LIMIT = 32767;
-
-  const padding = getCanvasPadding(element);
-
-  const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
-  const elementWidth =
-    isLinearElement(element) || isFreeDrawElement(element)
-      ? distance(x1, x2)
-      : element.width;
-  const elementHeight =
-    isLinearElement(element) || isFreeDrawElement(element)
-      ? distance(y1, y2)
-      : element.height;
-
-  let width = elementWidth * window.devicePixelRatio + padding * 2;
-  let height = elementHeight * window.devicePixelRatio + padding * 2;
-
-  let scale: number = zoom.value;
-
-  // rescale to ensure width and height is within limits
-  if (
-    width * scale > WIDTH_HEIGHT_LIMIT ||
-    height * scale > WIDTH_HEIGHT_LIMIT
-  ) {
-    scale = Math.min(WIDTH_HEIGHT_LIMIT / width, WIDTH_HEIGHT_LIMIT / height);
-  }
-
-  // rescale to ensure canvas area is within limits
-  if (width * height * scale * scale > AREA_LIMIT) {
-    scale = Math.sqrt(AREA_LIMIT / (width * height));
-  }
-
-  width = Math.floor(width * scale);
-  height = Math.floor(height * scale);
-
-  return { width, height, scale };
-};
-
 const generateElementCanvas = (
   element: NonDeletedExcalidrawElement,
   zoom: Zoom,
@@ -156,35 +102,44 @@ const generateElementCanvas = (
   const context = canvas.getContext("2d")!;
   const padding = getCanvasPadding(element);
 
-  const { width, height, scale } = cappedElementCanvasSize(element, zoom);
-
-  canvas.width = width;
-  canvas.height = height;
-
   let canvasOffsetX = 0;
   let canvasOffsetY = 0;
 
   if (isLinearElement(element) || isFreeDrawElement(element)) {
-    const [x1, y1] = getElementAbsoluteCoords(element);
+    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+
+    canvas.width =
+      distance(x1, x2) * window.devicePixelRatio * zoom.value +
+      padding * zoom.value * 2;
+    canvas.height =
+      distance(y1, y2) * window.devicePixelRatio * zoom.value +
+      padding * zoom.value * 2;
 
     canvasOffsetX =
       element.x > x1
-        ? distance(element.x, x1) * window.devicePixelRatio * scale
+        ? distance(element.x, x1) * window.devicePixelRatio * zoom.value
         : 0;
 
     canvasOffsetY =
       element.y > y1
-        ? distance(element.y, y1) * window.devicePixelRatio * scale
+        ? distance(element.y, y1) * window.devicePixelRatio * zoom.value
         : 0;
 
     context.translate(canvasOffsetX, canvasOffsetY);
+  } else {
+    canvas.width =
+      element.width * window.devicePixelRatio * zoom.value +
+      padding * zoom.value * 2;
+    canvas.height =
+      element.height * window.devicePixelRatio * zoom.value +
+      padding * zoom.value * 2;
   }
 
   context.save();
-  context.translate(padding * scale, padding * scale);
+  context.translate(padding * zoom.value, padding * zoom.value);
   context.scale(
-    window.devicePixelRatio * scale,
-    window.devicePixelRatio * scale,
+    window.devicePixelRatio * zoom.value,
+    window.devicePixelRatio * zoom.value,
   );
 
   const rc = rough.canvas(canvas);
@@ -201,7 +156,7 @@ const generateElementCanvas = (
     element,
     canvas,
     theme: renderConfig.theme,
-    scale,
+    canvasZoom: zoom.value,
     canvasOffsetX,
     canvasOffsetY,
     boundTextElementVersion: getBoundTextElement(element)?.version || null,
@@ -245,7 +200,6 @@ const drawImagePlaceholder = (
     size,
   );
 };
-
 const drawElementOnCanvas = (
   element: NonDeletedExcalidrawElement,
   rc: RoughCanvas,
@@ -318,7 +272,10 @@ const drawElementOnCanvas = (
         }
         context.canvas.setAttribute("dir", rtl ? "rtl" : "ltr");
         context.save();
-        context.font = getFontString(element);
+        context.font = getFontString({
+          ...element,
+          fontSize: Math.floor(element.fontSize),
+        });
         context.fillStyle = element.strokeColor;
         context.textAlign = element.textAlign as CanvasTextAlign;
 
@@ -331,18 +288,16 @@ const drawElementOnCanvas = (
             : element.textAlign === "right"
             ? element.width
             : 0;
-        context.textBaseline = "bottom";
-
         const lineHeightPx = getLineHeightInPx(
           element.fontSize,
           element.lineHeight,
         );
-
+        const verticalOffset = element.height - element.baseline;
         for (let index = 0; index < lines.length; index++) {
           context.fillText(
             lines[index],
             horizontalOffset,
-            (index + 1) * lineHeightPx,
+            (index + 1) * lineHeightPx - verticalOffset,
           );
         }
         context.restore();
@@ -389,16 +344,6 @@ export const setShapeForElement = <T extends ExcalidrawElement>(
 export const invalidateShapeForElement = (element: ExcalidrawElement) =>
   shapeCache.delete(element);
 
-function adjustRoughness(size: number, roughness: number): number {
-  if (size >= 50) {
-    return roughness;
-  }
-  const factor = 2 + (50 - size) / 10;
-
-  // console.log({ ret: roughness / factor, roughness, factor, size });
-  return roughness / factor;
-}
-
 export const generateRoughOptions = (
   element: ExcalidrawElement,
   continuousPath = false,
@@ -425,10 +370,7 @@ export const generateRoughOptions = (
     // calculate them (and we don't want the fills to be modified)
     fillWeight: element.strokeWidth / 2,
     hachureGap: element.strokeWidth * 4,
-    roughness: adjustRoughness(
-      Math.min(element.width, element.height),
-      element.roughness,
-    ),
+    roughness: element.roughness,
     stroke: element.strokeColor,
     preserveVertices: continuousPath,
   };
@@ -728,7 +670,7 @@ const generateElementWithCanvas = (
   const prevElementWithCanvas = elementWithCanvasCache.get(element);
   const shouldRegenerateBecauseZoom =
     prevElementWithCanvas &&
-    prevElementWithCanvas.scale !== zoom.value &&
+    prevElementWithCanvas.canvasZoom !== zoom.value &&
     !renderConfig?.shouldCacheIgnoreZoom;
   const boundTextElementVersion = getBoundTextElement(element)?.version || null;
 
@@ -759,7 +701,7 @@ const drawElementFromCanvas = (
 ) => {
   const element = elementWithCanvas.element;
   const padding = getCanvasPadding(element);
-  const zoom = elementWithCanvas.scale;
+  const zoom = elementWithCanvas.canvasZoom;
   let [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
 
   // Free draw elements will otherwise "shuffle" as the min x and y change
@@ -786,10 +728,10 @@ const drawElementFromCanvas = (
     const maxDim = Math.max(distance(x1, x2), distance(y1, y2));
     tempCanvas.width =
       maxDim * window.devicePixelRatio * zoom +
-      padding * elementWithCanvas.scale * 10;
+      padding * elementWithCanvas.canvasZoom * 10;
     tempCanvas.height =
       maxDim * window.devicePixelRatio * zoom +
-      padding * elementWithCanvas.scale * 10;
+      padding * elementWithCanvas.canvasZoom * 10;
     const offsetX = (tempCanvas.width - elementWithCanvas.canvas!.width) / 2;
     const offsetY = (tempCanvas.height - elementWithCanvas.canvas!.height) / 2;
 
@@ -870,11 +812,11 @@ const drawElementFromCanvas = (
     context.drawImage(
       elementWithCanvas.canvas!,
       (x1 + renderConfig.scrollX) * window.devicePixelRatio -
-        (padding * elementWithCanvas.scale) / elementWithCanvas.scale,
+        (padding * elementWithCanvas.canvasZoom) / elementWithCanvas.canvasZoom,
       (y1 + renderConfig.scrollY) * window.devicePixelRatio -
-        (padding * elementWithCanvas.scale) / elementWithCanvas.scale,
-      elementWithCanvas.canvas!.width / elementWithCanvas.scale,
-      elementWithCanvas.canvas!.height / elementWithCanvas.scale,
+        (padding * elementWithCanvas.canvasZoom) / elementWithCanvas.canvasZoom,
+      elementWithCanvas.canvas!.width / elementWithCanvas.canvasZoom,
+      elementWithCanvas.canvas!.height / elementWithCanvas.canvasZoom,
     );
 
     if (

src/renderer/renderScene.ts

@@ -1,5 +1,5 @@
-import { RoughCanvas } from "@excalidraw/roughjs/bin/canvas";
-import { RoughSVG } from "@excalidraw/roughjs/bin/svg";
+import { RoughCanvas } from "roughjs/bin/canvas";
+import { RoughSVG } from "roughjs/bin/svg";
 import oc from "open-color";
 
 import { AppState, BinaryFiles, Point, Zoom } from "../types";

src/scene/export.ts

@@ -1,4 +1,4 @@
-import rough from "@excalidraw/roughjs/bin/rough";
+import rough from "roughjs/bin/rough";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { getCommonBounds } from "../element/bounds";
 import { renderScene, renderSceneToSvg } from "../renderer/renderScene";

src/tests/data/__snapshots__/restore.test.ts.snap

@@ -282,6 +282,7 @@ exports[`restoreElements should restore text element correctly passing value for
 Object {
   "angle": 0,
   "backgroundColor": "transparent",
+  "baseline": 0,
   "boundElements": Array [],
   "containerId": null,
   "fillStyle": "hachure",
@@ -321,6 +322,7 @@ exports[`restoreElements should restore text element correctly with unknown font
 Object {
   "angle": 0,
   "backgroundColor": "transparent",
+  "baseline": 0,
   "boundElements": Array [],
   "containerId": null,
   "fillStyle": "hachure",

src/types.ts

@@ -16,7 +16,7 @@ import {
   StrokeRoundness,
 } from "./element/types";
 import { SHAPES } from "./shapes";
-import { Point as RoughPoint } from "@excalidraw/roughjs/bin/geometry";
+import { Point as RoughPoint } from "roughjs/bin/geometry";
 import { LinearElementEditor } from "./element/linearElementEditor";
 import { SuggestedBinding } from "./element/binding";
 import { ImportedDataState } from "./data/types";

yarn.lock

@@ -1484,15 +1484,6 @@
   resolved "https://registry.yarnpkg.com/@excalidraw/prettier-config/-/prettier-config-1.0.2.tgz#b7c061c99cee2f78b9ca470ea1fbd602683bba65"
   integrity sha512-rFIq8+A8WvkEzBsF++Rw6gzxE+hU3ZNkdg8foI+Upz2y/rOC/gUpWJaggPbCkoH3nlREVU59axQjZ1+F6ePRGg==
 
-"@excalidraw/roughjs@4.5.3":
-  version "4.5.3"
-  resolved "https://registry.yarnpkg.com/@excalidraw/roughjs/-/roughjs-4.5.3.tgz#7d91897bfd1aaeb19a48d5272bd4776cb19f015b"
-  integrity sha512-X9HPfNjPLNHt+gN7t1LN7nN4h4o8M2EWuN/Y4YgG0ODsDZn51gRBeIPuhSo2hsDgLeTQHnkrmpPTm4XeeQVtoA==
-  dependencies:
-    path-data-parser "^0.1.0"
-    points-on-curve "^0.2.0"
-    points-on-path "^0.2.1"
-
 "@firebase/analytics-types@0.4.0":
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/@firebase/analytics-types/-/analytics-types-0.4.0.tgz#d6716f9fa36a6e340bc0ecfe68af325aa6f60508"