split font into fontSize and fontFamily (#1635)

src/element/newElement.test.ts

@@ -78,7 +78,8 @@ it("clones text element", () => {
     roughness: 1,
     opacity: 100,
     text: "hello",
-    font: "Arial 20px",
+    fontSize: 20,
+    fontFamily: 1,
     textAlign: "left",
   });
 

src/element/newElement.ts

@@ -5,9 +5,10 @@ import {
   ExcalidrawGenericElement,
   NonDeleted,
   TextAlign,
+  FontFamily,
   GroupId,
 } from "../element/types";
-import { measureText } from "../utils";
+import { measureText, getFontString } from "../utils";
 import { randomInteger, randomId } from "../random";
 import { newElementWith } from "./mutateElement";
 import nanoid from "nanoid";
@@ -77,16 +78,18 @@ export const newElement = (
 export const newTextElement = (
   opts: {
     text: string;
-    font: string;
+    fontSize: number;
+    fontFamily: FontFamily;
     textAlign: TextAlign;
   } & ElementConstructorOpts,
 ): NonDeleted<ExcalidrawTextElement> => {
-  const metrics = measureText(opts.text, opts.font);
+  const metrics = measureText(opts.text, getFontString(opts));
   const textElement = newElementWith(
     {
       ..._newElementBase<ExcalidrawTextElement>("text", opts),
       text: opts.text,
-      font: opts.font,
+      fontSize: opts.fontSize,
+      fontFamily: opts.fontFamily,
       textAlign: opts.textAlign,
       // Center the text
       x: opts.x - metrics.width / 2,

src/element/textElement.ts

@@ -1,9 +1,9 @@
-import { measureText } from "../utils";
+import { measureText, getFontString } from "../utils";
 import { ExcalidrawTextElement } from "./types";
 import { mutateElement } from "./mutateElement";
 
 export const redrawTextBoundingBox = (element: ExcalidrawTextElement) => {
-  const metrics = measureText(element.text, element.font);
+  const metrics = measureText(element.text, getFontString(element));
   mutateElement(element, {
     width: metrics.width,
     height: metrics.height,

src/element/textWysiwyg.tsx

@@ -1,8 +1,9 @@
 import { KEYS } from "../keys";
-import { selectNode, isWritableElement } from "../utils";
+import { selectNode, isWritableElement, getFontString } from "../utils";
 import { globalSceneState } from "../scene";
 import { isTextElement } from "./typeChecks";
 import { CLASSES } from "../constants";
+import { FontFamily } from "./types";
 
 const trimText = (text: string) => {
   // whitespace only → trim all because we'd end up inserting invisible element
@@ -21,7 +22,8 @@ type TextWysiwygParams = {
   x: number;
   y: number;
   strokeColor: string;
-  font: string;
+  fontSize: number;
+  fontFamily: FontFamily;
   opacity: number;
   zoom: number;
   angle: number;
@@ -37,7 +39,8 @@ export const textWysiwyg = ({
   x,
   y,
   strokeColor,
-  font,
+  fontSize,
+  fontFamily,
   opacity,
   zoom,
   angle,
@@ -68,7 +71,7 @@ export const textWysiwyg = ({
     transform: `translate(-50%, -50%) scale(${zoom}) rotate(${degree}deg)`,
     textAlign: textAlign,
     display: "inline-block",
-    font: font,
+    font: getFontString({ fontSize, fontFamily }),
     padding: "4px",
     // This needs to have "1px solid" otherwise the carret doesn't show up
     // the first time on Safari and Chrome!
@@ -193,7 +196,7 @@ export const textWysiwyg = ({
       .find((element) => element.id === id);
     if (editingElement && isTextElement(editingElement)) {
       Object.assign(editable.style, {
-        font: editingElement.font,
+        font: getFontString(editingElement),
         textAlign: editingElement.textAlign,
         color: editingElement.strokeColor,
         opacity: editingElement.opacity / 100,

src/element/types.ts

@@ -1,4 +1,5 @@
 import { Point } from "../types";
+import { FONT_FAMILY } from "../constants";
 
 export type GroupId = string;
 
@@ -49,7 +50,8 @@ export type NonDeletedExcalidrawElement = NonDeleted<ExcalidrawElement>;
 export type ExcalidrawTextElement = _ExcalidrawElementBase &
   Readonly<{
     type: "text";
-    font: string;
+    fontSize: number;
+    fontFamily: FontFamily;
     text: string;
     baseline: number;
     textAlign: TextAlign;
@@ -65,3 +67,6 @@ export type ExcalidrawLinearElement = _ExcalidrawElementBase &
 export type PointerType = "mouse" | "pen" | "touch";
 
 export type TextAlign = "left" | "center" | "right";
+
+export type FontFamily = keyof typeof FONT_FAMILY;
+export type FontString = string & { _brand: "fontString" };