UNPKG

@tldraw/tlschema

Version:

tldraw infinite canvas SDK (schema).

8 lines (7 loc) 5.28 kB
{ "version": 3, "sources": ["../../src/styles/TLFontStyle.ts"], "sourcesContent": ["import { StyleProp } from './StyleProp'\nimport { TLThemeFont, TLThemeFonts, TLThemes } from './TLTheme'\n\n/**\n * Default font style property used by tldraw shapes for text styling.\n * Controls which typeface is used for text content within shapes.\n *\n * Available values:\n * - `draw` - Hand-drawn, sketchy font style\n * - `sans` - Clean sans-serif font\n * - `serif` - Traditional serif font\n * - `mono` - Monospace font for code-like text\n *\n * @example\n * ```ts\n * import { DefaultFontStyle } from '@tldraw/tlschema'\n *\n * // Use in shape props definition\n * interface MyTextShapeProps {\n * font: typeof DefaultFontStyle\n * // other props...\n * }\n *\n * // Create a text shape with monospace font\n * const textShape = {\n * // ... other properties\n * props: {\n * font: 'mono' as const,\n * // ... other props\n * }\n * }\n * ```\n *\n * @public\n */\nexport const DefaultFontStyle = StyleProp.defineEnum('tldraw:font', {\n\tdefaultValue: 'draw',\n\tvalues: ['draw', 'sans', 'serif', 'mono'],\n})\n\n/**\n * The names of all available font styles, derived from {@link TLThemeFonts}.\n * Extend {@link TLThemeFonts} to add custom font names.\n *\n * @example\n * ```ts\n * import { TLDefaultFontStyle } from '@tldraw/tlschema'\n *\n * // Valid font style values\n * const drawFont: TLDefaultFontStyle = 'draw'\n * const sansFont: TLDefaultFontStyle = 'sans'\n * const serifFont: TLDefaultFontStyle = 'serif'\n * const monoFont: TLDefaultFontStyle = 'mono'\n *\n * // Use in a function parameter\n * function setTextFont(font: TLDefaultFontStyle) {\n * // Apply font style to text\n * }\n * ```\n *\n * @public\n */\nexport type TLDefaultFontStyle = keyof TLThemeFonts & string\n\n/**\n * Mapping of font style names to their corresponding CSS font-family declarations.\n * These are the actual CSS font families used when rendering text with each font style.\n *\n * @example\n * ```ts\n * import { DefaultFontFamilies, TLDefaultFontStyle } from '@tldraw/tlschema'\n *\n * // Get CSS font family for a font style\n * const fontStyle: TLDefaultFontStyle = 'mono'\n * const cssFamily = DefaultFontFamilies[fontStyle] // \"'tldraw_mono', monospace\"\n *\n * // Apply to DOM element\n * element.style.fontFamily = DefaultFontFamilies.sans\n * ```\n *\n * @public\n */\nexport const DefaultFontFamilies = {\n\tdraw: \"'tldraw_draw', sans-serif\",\n\tsans: \"'tldraw_sans', sans-serif\",\n\tserif: \"'tldraw_serif', serif\",\n\tmono: \"'tldraw_mono', monospace\",\n}\n\n/** @internal */\nexport function isFontEntry(value: unknown): value is TLThemeFont {\n\treturn typeof value === 'object' && value !== null && 'fontFamily' in value\n}\n\n/**\n * Scan theme definitions and sync font registrations to match.\n * A font entry is any key in `TLThemeFonts` whose value is a {@link TLThemeFont}\n * object (i.e. has a `fontFamily` property).\n *\n * Fonts present in themes but not yet registered will be added.\n * Fonts currently registered but absent from all themes will be removed.\n *\n * @public\n */\nexport function registerFontsFromThemes(definitions: TLThemes): void {\n\tconst fontNames = new Set<string>()\n\tfor (const def of Object.values(definitions)) {\n\t\tif (!def.fonts) continue\n\t\tfor (const [key, value] of Object.entries(def.fonts)) {\n\t\t\tif (isFontEntry(value)) {\n\t\t\t\tfontNames.add(key)\n\t\t\t}\n\t\t}\n\t}\n\n\tconst toAdd = [...fontNames].filter((v) => !DefaultFontStyle.values.includes(v as any))\n\tif (toAdd.length > 0) {\n\t\tDefaultFontStyle.addValues(...(toAdd as any))\n\t}\n\n\tconst toRemove = DefaultFontStyle.values.filter((v) => !fontNames.has(v as string))\n\tif (toRemove.length > 0) {\n\t\tDefaultFontStyle.removeValues(...toRemove)\n\t}\n\n\tif (process.env.NODE_ENV !== 'production') {\n\t\tfor (const def of Object.values(definitions)) {\n\t\t\tfor (const font of fontNames) {\n\t\t\t\tif (!def.fonts || !(font in def.fonts)) {\n\t\t\t\t\tconsole.warn(\n\t\t\t\t\t\t`Theme '${def.id}' is missing font '${font}'. Shapes using this font won't render correctly in this theme.`\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n"], "mappings": "AAAA,SAAS,iBAAiB;AAmCnB,MAAM,mBAAmB,UAAU,WAAW,eAAe;AAAA,EACnE,cAAc;AAAA,EACd,QAAQ,CAAC,QAAQ,QAAQ,SAAS,MAAM;AACzC,CAAC;AA4CM,MAAM,sBAAsB;AAAA,EAClC,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AACP;AAGO,SAAS,YAAY,OAAsC;AACjE,SAAO,OAAO,UAAU,YAAY,UAAU,QAAQ,gBAAgB;AACvE;AAYO,SAAS,wBAAwB,aAA6B;AACpE,QAAM,YAAY,oBAAI,IAAY;AAClC,aAAW,OAAO,OAAO,OAAO,WAAW,GAAG;AAC7C,QAAI,CAAC,IAAI,MAAO;AAChB,eAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,IAAI,KAAK,GAAG;AACrD,UAAI,YAAY,KAAK,GAAG;AACvB,kBAAU,IAAI,GAAG;AAAA,MAClB;AAAA,IACD;AAAA,EACD;AAEA,QAAM,QAAQ,CAAC,GAAG,SAAS,EAAE,OAAO,CAAC,MAAM,CAAC,iBAAiB,OAAO,SAAS,CAAQ,CAAC;AACtF,MAAI,MAAM,SAAS,GAAG;AACrB,qBAAiB,UAAU,GAAI,KAAa;AAAA,EAC7C;AAEA,QAAM,WAAW,iBAAiB,OAAO,OAAO,CAAC,MAAM,CAAC,UAAU,IAAI,CAAW,CAAC;AAClF,MAAI,SAAS,SAAS,GAAG;AACxB,qBAAiB,aAAa,GAAG,QAAQ;AAAA,EAC1C;AAEA,MAAI,QAAQ,IAAI,aAAa,cAAc;AAC1C,eAAW,OAAO,OAAO,OAAO,WAAW,GAAG;AAC7C,iBAAW,QAAQ,WAAW;AAC7B,YAAI,CAAC,IAAI,SAAS,EAAE,QAAQ,IAAI,QAAQ;AACvC,kBAAQ;AAAA,YACP,UAAU,IAAI,EAAE,sBAAsB,IAAI;AAAA,UAC3C;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAAA,EACD;AACD;", "names": [] }