From a0c16d9bc1ad3830f52305654e441faedc05e577 Mon Sep 17 00:00:00 2001 From: Marcel Mraz Date: Thu, 13 Mar 2025 14:36:29 +0100 Subject: [PATCH] Separate metadata from fonts --- packages/element/textElement.test.ts | 3 +- .../excalidraw/actions/actionProperties.tsx | 3 +- packages/excalidraw/actions/actionStyles.ts | 2 +- packages/excalidraw/components/App.tsx | 3 +- packages/excalidraw/data/restore.ts | 2 +- packages/excalidraw/data/transform.ts | 2 +- packages/excalidraw/fonts/FontMetadata.ts | 36 +++++++++++++++++++ packages/excalidraw/fonts/Fonts.ts | 31 ---------------- packages/excalidraw/renderer/renderElement.ts | 2 +- .../excalidraw/renderer/staticSvgScene.ts | 2 +- 10 files changed, 47 insertions(+), 39 deletions(-) diff --git a/packages/element/textElement.test.ts b/packages/element/textElement.test.ts index 41531a738..9da7c79a4 100644 --- a/packages/element/textElement.test.ts +++ b/packages/element/textElement.test.ts @@ -1,5 +1,6 @@ +import { getLineHeight } from "@excalidraw/excalidraw/fonts/FontMetadata"; + import { FONT_FAMILY } from "../constants"; -import { getLineHeight } from "../fonts"; import { API } from "../tests/helpers/api"; import { diff --git a/packages/excalidraw/actions/actionProperties.tsx b/packages/excalidraw/actions/actionProperties.tsx index 1e24d9bed..4aa880972 100644 --- a/packages/excalidraw/actions/actionProperties.tsx +++ b/packages/excalidraw/actions/actionProperties.tsx @@ -91,7 +91,8 @@ import { isLinearElement, isUsingAdaptiveRadius, } from "../element/typeChecks"; -import { Fonts, getLineHeight } from "../fonts"; +import { Fonts } from "../fonts"; +import { getLineHeight } from "../fonts/FontMetadata"; import { getLanguage, t } from "../i18n"; import { KEYS } from "../keys"; import { randomInteger } from "../random"; diff --git a/packages/excalidraw/actions/actionStyles.ts b/packages/excalidraw/actions/actionStyles.ts index ea517c442..8215ec0ea 100644 --- a/packages/excalidraw/actions/actionStyles.ts +++ b/packages/excalidraw/actions/actionStyles.ts @@ -18,7 +18,7 @@ import { isFrameLikeElement, isArrowElement, } from "../element/typeChecks"; -import { getLineHeight } from "../fonts"; +import { getLineHeight } from "../fonts/FontMetadata"; import { t } from "../i18n"; import { CODES, KEYS } from "../keys"; import { getSelectedElements } from "../scene"; diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx index 752cb251f..f39aee8dd 100644 --- a/packages/excalidraw/components/App.tsx +++ b/packages/excalidraw/components/App.tsx @@ -305,7 +305,8 @@ import { } from "../components/hyperlink/Hyperlink"; import { isLocalLink, normalizeLink, toValidURL } from "../data/url"; import { shouldShowBoundingBox } from "../element/transformHandles"; -import { Fonts, getLineHeight } from "../fonts"; +import { Fonts } from "../fonts"; +import { getLineHeight } from "../fonts/FontMetadata"; import { getFrameChildren, isCursorInFrame, diff --git a/packages/excalidraw/data/restore.ts b/packages/excalidraw/data/restore.ts index df1a64621..a444d426f 100644 --- a/packages/excalidraw/data/restore.ts +++ b/packages/excalidraw/data/restore.ts @@ -37,7 +37,7 @@ import { isTextElement, isUsingAdaptiveRadius, } from "../element/typeChecks"; -import { getLineHeight } from "../fonts"; +import { getLineHeight } from "../fonts/FontMetadata"; import { syncInvalidIndices } from "../fractionalIndex"; import { randomId } from "../random"; import { diff --git a/packages/excalidraw/data/transform.ts b/packages/excalidraw/data/transform.ts index 704b63cb5..07ff60a9c 100644 --- a/packages/excalidraw/data/transform.ts +++ b/packages/excalidraw/data/transform.ts @@ -22,7 +22,7 @@ import { } from "../element/newElement"; import { measureText, normalizeText } from "../element/textMeasurements"; import { isArrowElement } from "../element/typeChecks"; -import { getLineHeight } from "../fonts"; +import { getLineHeight } from "../fonts/FontMetadata"; import { syncInvalidIndices } from "../fractionalIndex"; import { getSizeFromPoints } from "../points"; import { randomId } from "../random"; diff --git a/packages/excalidraw/fonts/FontMetadata.ts b/packages/excalidraw/fonts/FontMetadata.ts index e8b46205b..cc7edd40e 100644 --- a/packages/excalidraw/fonts/FontMetadata.ts +++ b/packages/excalidraw/fonts/FontMetadata.ts @@ -1,3 +1,8 @@ +import type { + ExcalidrawTextElement, + FontFamilyValues, +} from "@excalidraw/element/types"; + import { FreedrawIcon, FontFamilyNormalIcon, @@ -149,3 +154,34 @@ export const GOOGLE_FONTS_RANGES = { /** local protocol to skip the local font from registering or inlining */ export const LOCAL_FONT_PROTOCOL = "local:"; + +/** + * Calculates vertical offset for a text with alphabetic baseline. + */ +export const getVerticalOffset = ( + fontFamily: ExcalidrawTextElement["fontFamily"], + fontSize: ExcalidrawTextElement["fontSize"], + lineHeightPx: number, +) => { + const { unitsPerEm, ascender, descender } = + FONT_METADATA[fontFamily]?.metrics || + FONT_METADATA[FONT_FAMILY.Excalifont].metrics; + + const fontSizeEm = fontSize / unitsPerEm; + const lineGap = + (lineHeightPx - fontSizeEm * ascender + fontSizeEm * descender) / 2; + + const verticalOffset = fontSizeEm * ascender + lineGap; + return verticalOffset; +}; + +/** + * Gets line height for a selected family. + */ +export const getLineHeight = (fontFamily: FontFamilyValues) => { + const { lineHeight } = + FONT_METADATA[fontFamily]?.metrics || + FONT_METADATA[FONT_FAMILY.Excalifont].metrics; + + return lineHeight as ExcalidrawTextElement["lineHeight"]; +}; diff --git a/packages/excalidraw/fonts/Fonts.ts b/packages/excalidraw/fonts/Fonts.ts index c1b94bdef..c6db51c1c 100644 --- a/packages/excalidraw/fonts/Fonts.ts +++ b/packages/excalidraw/fonts/Fonts.ts @@ -454,37 +454,6 @@ export class Fonts { } } -/** - * Calculates vertical offset for a text with alphabetic baseline. - */ -export const getVerticalOffset = ( - fontFamily: ExcalidrawTextElement["fontFamily"], - fontSize: ExcalidrawTextElement["fontSize"], - lineHeightPx: number, -) => { - const { unitsPerEm, ascender, descender } = - Fonts.registered.get(fontFamily)?.metadata.metrics || - FONT_METADATA[FONT_FAMILY.Virgil].metrics; - - const fontSizeEm = fontSize / unitsPerEm; - const lineGap = - (lineHeightPx - fontSizeEm * ascender + fontSizeEm * descender) / 2; - - const verticalOffset = fontSizeEm * ascender + lineGap; - return verticalOffset; -}; - -/** - * Gets line height forr a selected family. - */ -export const getLineHeight = (fontFamily: FontFamilyValues) => { - const { lineHeight } = - Fonts.registered.get(fontFamily)?.metadata.metrics || - FONT_METADATA[FONT_FAMILY.Excalifont].metrics; - - return lineHeight as ExcalidrawTextElement["lineHeight"]; -}; - export interface ExcalidrawFontFaceDescriptor { uri: string; descriptors?: FontFaceDescriptors; diff --git a/packages/excalidraw/renderer/renderElement.ts b/packages/excalidraw/renderer/renderElement.ts index 9209c46d6..9d34cd0eb 100644 --- a/packages/excalidraw/renderer/renderElement.ts +++ b/packages/excalidraw/renderer/renderElement.ts @@ -32,7 +32,7 @@ import { isMagicFrameElement, isImageElement, } from "../element/typeChecks"; -import { getVerticalOffset } from "../fonts"; +import { getVerticalOffset } from "../fonts/FontMetadata"; import { getContainingFrame } from "../frame"; import { ShapeCache } from "../scene/ShapeCache"; import { getCornerRadius } from "../shapes"; diff --git a/packages/excalidraw/renderer/staticSvgScene.ts b/packages/excalidraw/renderer/staticSvgScene.ts index 23a6890df..d8496edc2 100644 --- a/packages/excalidraw/renderer/staticSvgScene.ts +++ b/packages/excalidraw/renderer/staticSvgScene.ts @@ -23,7 +23,7 @@ import { isInitializedImageElement, isTextElement, } from "../element/typeChecks"; -import { getVerticalOffset } from "../fonts"; +import { getVerticalOffset } from "../fonts/FontMetadata"; import { getContainingFrame } from "../frame"; import { ShapeCache } from "../scene/ShapeCache"; import { getCornerRadius, isPathALoop } from "../shapes";