diff --git a/packages/excalidraw/fonts/FontMetadata.ts b/packages/common/src/font-metadata.ts similarity index 91% rename from packages/excalidraw/fonts/FontMetadata.ts rename to packages/common/src/font-metadata.ts index 5ed493f2d..b70c0e36c 100644 --- a/packages/excalidraw/fonts/FontMetadata.ts +++ b/packages/common/src/font-metadata.ts @@ -5,15 +5,6 @@ import type { FontFamilyValues, } from "@excalidraw/element/types"; -import { - FreedrawIcon, - FontFamilyNormalIcon, - FontFamilyHeadingIcon, - FontFamilyCodeIcon, -} from "../components/icons"; - -import type { JSX } from "react"; - /** * Encapsulates font metrics with additional font metadata. * */ @@ -29,8 +20,6 @@ export interface FontMetadata { /** harcoded unitless line-height, https://github.com/excalidraw/excalidraw/pull/6360#issuecomment-1477635971 */ lineHeight: number; }; - /** element to be displayed as an icon */ - icon?: JSX.Element; /** flag to indicate a deprecated font */ deprecated?: true; /** flag to indicate a server-side only font */ @@ -49,7 +38,6 @@ export const FONT_METADATA: Record = { descender: -374, lineHeight: 1.25, }, - icon: FreedrawIcon, }, [FONT_FAMILY.Nunito]: { metrics: { @@ -58,7 +46,6 @@ export const FONT_METADATA: Record = { descender: -353, lineHeight: 1.35, }, - icon: FontFamilyNormalIcon, }, [FONT_FAMILY["Lilita One"]]: { metrics: { @@ -67,7 +54,6 @@ export const FONT_METADATA: Record = { descender: -220, lineHeight: 1.15, }, - icon: FontFamilyHeadingIcon, }, [FONT_FAMILY["Comic Shanns"]]: { metrics: { @@ -76,7 +62,6 @@ export const FONT_METADATA: Record = { descender: -250, lineHeight: 1.25, }, - icon: FontFamilyCodeIcon, }, [FONT_FAMILY.Virgil]: { metrics: { @@ -85,7 +70,6 @@ export const FONT_METADATA: Record = { descender: -374, lineHeight: 1.25, }, - icon: FreedrawIcon, deprecated: true, }, [FONT_FAMILY.Helvetica]: { @@ -95,7 +79,6 @@ export const FONT_METADATA: Record = { descender: -471, lineHeight: 1.15, }, - icon: FontFamilyNormalIcon, deprecated: true, local: true, }, @@ -106,7 +89,6 @@ export const FONT_METADATA: Record = { descender: -480, lineHeight: 1.2, }, - icon: FontFamilyCodeIcon, deprecated: true, }, [FONT_FAMILY["Liberation Sans"]]: { diff --git a/packages/common/src/index.ts b/packages/common/src/index.ts index f4718d89d..1ae86610d 100644 --- a/packages/common/src/index.ts +++ b/packages/common/src/index.ts @@ -1,6 +1,7 @@ export * from "./binary-heap"; export * from "./colors"; export * from "./constants"; +export * from "./font-metadata"; export * from "./keys"; export * from "./points"; export * from "./promise-pool"; diff --git a/packages/element/src/newElement.ts b/packages/element/src/newElement.ts index 92e6991d8..f0972cf2d 100644 --- a/packages/element/src/newElement.ts +++ b/packages/element/src/newElement.ts @@ -8,15 +8,13 @@ import { VERTICAL_ALIGN, randomInteger, randomId, - getNewGroupIdsForDuplication, arrayToMap, getFontString, getUpdatedTimestamp, isTestEnv, + getLineHeight } from "@excalidraw/common"; -import { getLineHeight } from "@excalidraw/excalidraw/fonts/FontMetadata"; - import type { Radians } from "@excalidraw/math"; import type { AppState } from "@excalidraw/excalidraw/types"; @@ -32,6 +30,7 @@ import { bumpVersion, newElementWith } from "./mutateElement"; import { getBoundTextMaxWidth } from "./textElement"; import { normalizeText, measureText } from "./textMeasurements"; import { wrapText } from "./textWrapping"; +import { getNewGroupIdsForDuplication } from "./groups"; import { getElementAbsoluteCoords } from "."; diff --git a/packages/element/src/renderElement.ts b/packages/element/src/renderElement.ts index 53f9be5bf..5c21f0735 100644 --- a/packages/element/src/renderElement.ts +++ b/packages/element/src/renderElement.ts @@ -13,6 +13,7 @@ import { distance, getFontString, isRTL, + getVerticalOffset, } from "@excalidraw/common"; import { getElementAbsoluteCoords } from "@excalidraw/element/bounds"; import { getUncroppedImageElement } from "@excalidraw/element/cropElement"; @@ -38,8 +39,6 @@ import { import { getContainingFrame } from "@excalidraw/element/frame"; import { getCornerRadius } from "@excalidraw/element/shapes"; -// TODO_SEP: consider separating -import { getVerticalOffset } from "@excalidraw/excalidraw/fonts/FontMetadata"; import type { ExcalidrawElement, diff --git a/packages/excalidraw/actions/actionProperties.tsx b/packages/excalidraw/actions/actionProperties.tsx index 0ca2eef3b..eeb693d9a 100644 --- a/packages/excalidraw/actions/actionProperties.tsx +++ b/packages/excalidraw/actions/actionProperties.tsx @@ -19,6 +19,7 @@ import { getFontFamilyString, getShortcutKey, tupleToCoors, + getLineHeight, } from "@excalidraw/common"; import { @@ -121,7 +122,6 @@ import { } from "../components/icons"; import { Fonts } from "../fonts"; -import { getLineHeight } from "../fonts/FontMetadata"; import { getLanguage, t } from "../i18n"; import { canHaveArrowheads, diff --git a/packages/excalidraw/actions/actionStyles.ts b/packages/excalidraw/actions/actionStyles.ts index ae9d4bfe4..b87b7b7d9 100644 --- a/packages/excalidraw/actions/actionStyles.ts +++ b/packages/excalidraw/actions/actionStyles.ts @@ -4,6 +4,7 @@ import { DEFAULT_TEXT_ALIGN, CODES, KEYS, + getLineHeight, } from "@excalidraw/common"; import { @@ -28,7 +29,6 @@ import type { ExcalidrawTextElement } from "@excalidraw/element/types"; import { paintIcon } from "../components/icons"; -import { getLineHeight } from "../fonts/FontMetadata"; import { t } from "../i18n"; import { getSelectedElements } from "../scene"; import { CaptureUpdateAction } from "../store"; diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx index 16fb4ba06..996fc9215 100644 --- a/packages/excalidraw/components/App.tsx +++ b/packages/excalidraw/components/App.tsx @@ -72,6 +72,7 @@ import { normalizeLink, toValidURL, getGridPoint, + getLineHeight, type EXPORT_IMAGE_TYPES, } from "@excalidraw/common"; @@ -424,7 +425,6 @@ import { } from "../components/hyperlink/Hyperlink"; import { Fonts } from "../fonts"; -import { getLineHeight } from "../fonts/FontMetadata"; import { editorJotaiStore } from "../editor-jotai"; import { ImageSceneDataError } from "../errors"; import { diff --git a/packages/excalidraw/components/FontPicker/FontPickerList.tsx b/packages/excalidraw/components/FontPicker/FontPickerList.tsx index e24f4700c..2ec9e7d6d 100644 --- a/packages/excalidraw/components/FontPicker/FontPickerList.tsx +++ b/packages/excalidraw/components/FontPicker/FontPickerList.tsx @@ -9,7 +9,12 @@ import React, { import { type FontFamilyValues } from "@excalidraw/element/types"; -import { arrayToList, debounce, getFontFamilyString } from "@excalidraw/common"; +import { + arrayToList, + debounce, + FONT_FAMILY, + getFontFamilyString, +} from "@excalidraw/common"; import type { ValueOf } from "@excalidraw/common/utility-types"; @@ -24,7 +29,12 @@ import DropdownMenuItem, { DropDownMenuItemBadgeType, DropDownMenuItemBadge, } from "../dropdownMenu/DropdownMenuItem"; -import { FontFamilyNormalIcon } from "../icons"; +import { + FontFamilyCodeIcon, + FontFamilyHeadingIcon, + FontFamilyNormalIcon, + FreedrawIcon, +} from "../icons"; import { fontPickerKeyHandler } from "./keyboardNavHandlers"; @@ -51,6 +61,24 @@ interface FontPickerListProps { onClose: () => void; } +const getFontFamilyIcon = (fontFamily: FontFamilyValues): JSX.Element => { + switch (fontFamily) { + case FONT_FAMILY.Excalifont: + case FONT_FAMILY.Virgil: + return FreedrawIcon; + case FONT_FAMILY.Nunito: + case FONT_FAMILY.Helvetica: + return FontFamilyNormalIcon; + case FONT_FAMILY["Lilita One"]: + return FontFamilyHeadingIcon; + case FONT_FAMILY["Comic Shanns"]: + case FONT_FAMILY.Cascadia: + return FontFamilyCodeIcon; + default: + return FontFamilyNormalIcon; + } +}; + export const FontPickerList = React.memo( ({ selectedFontFamily, @@ -76,7 +104,7 @@ export const FontPickerList = React.memo( .map(([familyId, { metadata, fontFaces }]) => { const fontDescriptor = { value: familyId, - icon: metadata.icon ?? FontFamilyNormalIcon, + icon: getFontFamilyIcon(familyId), text: fontFaces[0]?.fontFace?.family ?? "Unknown", }; diff --git a/packages/excalidraw/data/restore.ts b/packages/excalidraw/data/restore.ts index 5f383b463..030a22fb8 100644 --- a/packages/excalidraw/data/restore.ts +++ b/packages/excalidraw/data/restore.ts @@ -16,6 +16,7 @@ import { arrayToMap, getSizeFromPoints, normalizeLink, + getLineHeight, } from "@excalidraw/common"; import { getNonDeletedElements, @@ -65,7 +66,6 @@ import type { MarkOptional, Mutable } from "@excalidraw/common/utility-types"; import { getDefaultAppState } from "../appState"; -import { getLineHeight } from "../fonts/FontMetadata"; import { getNormalizedGridSize, getNormalizedGridStep, diff --git a/packages/excalidraw/data/transform.ts b/packages/excalidraw/data/transform.ts index 267ce8a2f..255996f94 100644 --- a/packages/excalidraw/data/transform.ts +++ b/packages/excalidraw/data/transform.ts @@ -13,6 +13,7 @@ import { getFontString, isDevEnv, toBrandedType, + getLineHeight, } from "@excalidraw/common"; import { getCommonBounds, @@ -61,8 +62,6 @@ import type { import type { MarkOptional } from "@excalidraw/common/utility-types"; -import { getLineHeight } from "../fonts/FontMetadata"; - export type ValidLinearElement = { type: "arrow" | "line"; x: number; diff --git a/packages/excalidraw/fonts/Emoji/index.ts b/packages/excalidraw/fonts/Emoji/index.ts index 323d075cb..09aea663d 100644 --- a/packages/excalidraw/fonts/Emoji/index.ts +++ b/packages/excalidraw/fonts/Emoji/index.ts @@ -1,4 +1,5 @@ -import { LOCAL_FONT_PROTOCOL } from "../FontMetadata"; +import { LOCAL_FONT_PROTOCOL } from "@excalidraw/common"; + import { type ExcalidrawFontFaceDescriptor } from "../Fonts"; export const EmojiFontFaces: ExcalidrawFontFaceDescriptor[] = [ diff --git a/packages/excalidraw/fonts/ExcalidrawFontFace.ts b/packages/excalidraw/fonts/ExcalidrawFontFace.ts index 8295d1015..46ea3d018 100644 --- a/packages/excalidraw/fonts/ExcalidrawFontFace.ts +++ b/packages/excalidraw/fonts/ExcalidrawFontFace.ts @@ -1,9 +1,7 @@ -import { promiseTry } from "@excalidraw/common"; +import { promiseTry, LOCAL_FONT_PROTOCOL } from "@excalidraw/common"; import { subsetWoff2GlyphsByCodepoints } from "../subset/subset-main"; -import { LOCAL_FONT_PROTOCOL } from "./FontMetadata"; - type DataURL = string; export class ExcalidrawFontFace { diff --git a/packages/excalidraw/fonts/Fonts.ts b/packages/excalidraw/fonts/Fonts.ts index 70eb13280..5b035254f 100644 --- a/packages/excalidraw/fonts/Fonts.ts +++ b/packages/excalidraw/fonts/Fonts.ts @@ -10,7 +10,13 @@ import { getContainerElement } from "@excalidraw/element/textElement"; import { charWidth } from "@excalidraw/element/textMeasurements"; import { containsCJK } from "@excalidraw/element/textWrapping"; -import { getFontString, PromisePool, promiseTry } from "@excalidraw/common"; +import { + FONT_METADATA, + type FontMetadata, + getFontString, + PromisePool, + promiseTry, +} from "@excalidraw/common"; import { ShapeCache } from "@excalidraw/element/ShapeCache"; @@ -26,7 +32,6 @@ import { ComicShannsFontFaces } from "./ComicShanns"; import { EmojiFontFaces } from "./Emoji"; import { ExcalidrawFontFace } from "./ExcalidrawFontFace"; import { ExcalifontFontFaces } from "./Excalifont"; -import { FONT_METADATA, type FontMetadata } from "./FontMetadata"; import { HelveticaFontFaces } from "./Helvetica"; import { LiberationFontFaces } from "./Liberation"; import { LilitaFontFaces } from "./Lilita"; diff --git a/packages/excalidraw/fonts/Helvetica/index.ts b/packages/excalidraw/fonts/Helvetica/index.ts index f13d15118..20a08e464 100644 --- a/packages/excalidraw/fonts/Helvetica/index.ts +++ b/packages/excalidraw/fonts/Helvetica/index.ts @@ -1,4 +1,5 @@ -import { LOCAL_FONT_PROTOCOL } from "../FontMetadata"; +import { LOCAL_FONT_PROTOCOL } from "@excalidraw/common"; + import { type ExcalidrawFontFaceDescriptor } from "../Fonts"; export const HelveticaFontFaces: ExcalidrawFontFaceDescriptor[] = [ diff --git a/packages/excalidraw/fonts/Lilita/index.ts b/packages/excalidraw/fonts/Lilita/index.ts index 37a5d6a5e..4641dcb0f 100644 --- a/packages/excalidraw/fonts/Lilita/index.ts +++ b/packages/excalidraw/fonts/Lilita/index.ts @@ -1,4 +1,5 @@ -import { GOOGLE_FONTS_RANGES } from "../FontMetadata"; +import { GOOGLE_FONTS_RANGES } from "@excalidraw/common"; + import { type ExcalidrawFontFaceDescriptor } from "../Fonts"; import LilitaLatinExt from "./Lilita-Regular-i7dPIFZ9Zz-WBtRtedDbYE98RXi4EwSsbg.woff2"; diff --git a/packages/excalidraw/fonts/Nunito/index.ts b/packages/excalidraw/fonts/Nunito/index.ts index 3b092b0d6..07fb757c8 100644 --- a/packages/excalidraw/fonts/Nunito/index.ts +++ b/packages/excalidraw/fonts/Nunito/index.ts @@ -1,4 +1,5 @@ -import { GOOGLE_FONTS_RANGES } from "../FontMetadata"; +import { GOOGLE_FONTS_RANGES } from "@excalidraw/common"; + import { type ExcalidrawFontFaceDescriptor } from "../Fonts"; import Cyrilic from "./Nunito-Regular-XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTA3j6zbXWjgevT5.woff2"; diff --git a/packages/excalidraw/renderer/staticSvgScene.ts b/packages/excalidraw/renderer/staticSvgScene.ts index 60f7d366d..413613a44 100644 --- a/packages/excalidraw/renderer/staticSvgScene.ts +++ b/packages/excalidraw/renderer/staticSvgScene.ts @@ -6,6 +6,7 @@ import { getFontFamilyString, isRTL, isTestEnv, + getVerticalOffset, } from "@excalidraw/common"; import { normalizeLink, toValidURL } from "@excalidraw/common"; import { getElementAbsoluteCoords, hashString } from "@excalidraw/element"; @@ -44,8 +45,6 @@ import type { NonDeletedExcalidrawElement, } from "@excalidraw/element/types"; -import { getVerticalOffset } from "../fonts/FontMetadata"; - import type { RenderableElementsMap, SVGRenderConfig } from "../scene/types"; import type { AppState, BinaryFiles } from "../types"; import type { Drawable } from "roughjs/bin/core"; diff --git a/packages/excalidraw/tests/clipboard.test.tsx b/packages/excalidraw/tests/clipboard.test.tsx index d8868c115..8afa1bdc6 100644 --- a/packages/excalidraw/tests/clipboard.test.tsx +++ b/packages/excalidraw/tests/clipboard.test.tsx @@ -5,11 +5,10 @@ import { getElementBounds } from "@excalidraw/element"; import { getLineHeightInPx } from "@excalidraw/element/textMeasurements"; -import { KEYS, arrayToMap } from "@excalidraw/common"; +import { KEYS, arrayToMap, getLineHeight } from "@excalidraw/common"; import { createPasteEvent, serializeAsClipboardJSON } from "../clipboard"; -import { getLineHeight } from "../fonts/FontMetadata"; import { Excalidraw } from "../index"; import { API } from "./helpers/api";