feat(troika-3d-text): add some useful font metrics to textRenderInfo …

…result The textRenderInfo result object now contains `ascender`, `descender`, `lineHeight`, and `topBaseline` measurements.
protectwise · Apr 17, 2020 · c7b14b8 · c7b14b8
1 parent c66fbec
commit c7b14b8
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 13 deletions.
diff --git a/packages/troika-3d-text/src/FontProcessor.js b/packages/troika-3d-text/src/FontProcessor.js
@@ -207,6 +207,7 @@ export default function createFontProcessor(fontParser, sdfGenerator, config) {
       // Determine line height and leading adjustments
       lineHeight = lineHeight * fontSize
       const halfLeading = (lineHeight - (ascender - descender) * fontSizeMult) / 2
+      const topBaseline = -(fontSize + halfLeading)
       const caretHeight = Math.min(lineHeight, (ascender - descender) * fontSizeMult)
       const caretBottomOffset = (ascender + descender) / 2 * fontSizeMult - caretHeight / 2
 
@@ -295,7 +296,7 @@ export default function createFontProcessor(fontParser, sdfGenerator, config) {
         // Process each line, applying alignment offsets, adding each glyph to the atlas, and
         // collecting all renderable glyphs into a single collection.
         const renderableGlyphs = []
-        let lineYOffset = -(fontSize + halfLeading)
+        let lineYOffset = topBaseline
         if (includeCaretPositions) {
           caretPositions = new Float32Array(text.length * 3)
         }
@@ -453,8 +454,12 @@ export default function createFontProcessor(fontParser, sdfGenerator, config) {
         glyphAtlasIndices, //atlas indices for each glyph
         caretPositions, //x,y of bottom of cursor position before each char, plus one after last char
         caretHeight, //height of cursor from bottom to top
-        totalBounds, //total rect including all glyphBounds; will be slightly larger than glyph edges due to SDF padding
         chunkedBounds, //total rects per (n=chunkedBoundsSize) consecutive glyphs
+        ascender: ascender * fontSizeMult, //font ascender
+        descender: descender * fontSizeMult, //font descender
+        lineHeight, //computed line height
+        topBaseline, //y coordinate of the top line's baseline
+        totalBounds, //total rect including all glyphBounds; will be slightly larger than glyph edges due to SDF padding
         totalBlockSize: [maxLineWidth, lines.length * lineHeight], //width and height of the text block; accurate for layout measurement
         newGlyphSDFs: newGlyphs //if this request included any new SDFs for the atlas, they'll be included here
       })

diff --git a/packages/troika-3d-text/src/TextBuilder.js b/packages/troika-3d-text/src/TextBuilder.js
@@ -68,16 +68,24 @@ const atlases = Object.create(null)
 
 /**
  * @typedef {object} TroikaTextRenderInfo - Format of the result from `getTextRenderInfo`.
- * @property {DataTexture} sdfTexture
- * @property {number} sdfGlyphSize
- * @property {number} sdfMinDistancePercent
- * @property {Float32Array} glyphBounds
- * @property {Float32Array} glyphAtlasIndices
- * @property {Float32Array} [caretPositions]
- * @property {number} [caretHeight]
- * @property {Array<number>} totalBounds
- * @property {Array<number>} totalBlockSize
- * @property {Array<number>} chunkedBounds
+ * @property {DataTexture} sdfTexture - The SDF atlas texture.
+ * @property {number} sdfGlyphSize - See `configureTextBuilder#config.sdfGlyphSize`
+ * @property {number} sdfMinDistancePercent - See `SDF_DISTANCE_PERCENT`
+ * @property {Float32Array} glyphBounds - List of [minX, minY, maxX, maxY] quad bounds for each glyph.
+ * @property {Float32Array} glyphAtlasIndices - List holding each glyph's index in the SDF atlas
+ * @property {Float32Array} [caretPositions] - A list of caret positions for all glyphs; this is
+ *           the bottom [x,y] of the cursor position before each char, plus one after the last char.
+ * @property {number} [caretHeight] - An appropriate height for all selection carets.
+ * @property {number} ascender - The font's ascender metric.
+ * @property {number} descender - The font's descender metric.
+ * @property {number} lineHeight - The final computed lineHeight measurement.
+ * @property {number} topBaseline - The y position of the top line's baseline.
+ * @property {Array<number>} totalBounds - The total [minX, minY, maxX, maxY] rect including all glyph
+ *           quad bounds; this will be slightly larger than the actual glyph path edges due to SDF padding.
+ * @property {Array<number>} totalBlockSize - The [width, height] of the text block; this does not include
+ *           extra SDF padding so it is accurate to use for measurement.
+ * @property {Array<number>} chunkedBounds - List of bounding rects for each consecutive set of N glyphs,
+ *           in the format `{start:N, end:N, rect:[minX, minY, maxX, maxY]}`.
  * @frozen
  */
 
@@ -163,8 +171,12 @@ export function getTextRenderInfo(args, callback) {
       glyphAtlasIndices: result.glyphAtlasIndices,
       caretPositions: result.caretPositions,
       caretHeight: result.caretHeight,
-      totalBounds: result.totalBounds,
       chunkedBounds: result.chunkedBounds,
+      ascender: result.ascender,
+      descender: result.descender,
+      lineHeight: result.lineHeight,
+      topBaseline: result.topBaseline,
+      totalBounds: result.totalBounds,
       totalBlockSize: result.totalBlockSize
     }))
   })