@lightningjs/renderer 0.3.0 → 0.3.2

package/src/core/text-rendering/renderers/SdfTextRenderer/internal/layoutText.ts

@@ -0,0 +1,381 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2023 Comcast Cable Communications Management, LLC.
+ *
+ * Licensed under the Apache License, Version 2.0 (the License);
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { assertTruthy } from '../../../../../utils.js';
+import type {
+  FontShaperProps,
+  MappedGlyphInfo,
+  UnmappedCharacterInfo,
+} from '../../../font-face-types/SdfTrFontFace/internal/FontShaper.js';
+import type { TrProps, TextRendererState } from '../../TextRenderer.js';
+import type { SdfTextRendererState } from '../SdfTextRenderer.js';
+import { PeekableIterator } from './PeekableGenerator.js';
+import { FLOATS_PER_GLYPH } from './constants.js';
+import { getUnicodeCodepoints } from './getUnicodeCodepoints.js';
+import { measureText } from './measureText.js';
+
+export function layoutText(
+  curLineIndex: number,
+  startX: number,
+  startY: number,
+  text: TrProps['text'],
+  textAlign: TrProps['textAlign'],
+  width: TrProps['width'],
+  height: TrProps['height'],
+  fontSize: TrProps['fontSize'],
+  letterSpacing: TrProps['letterSpacing'],
+  /**
+   * Mutated
+   */
+  vertexBuffer: NonNullable<SdfTextRendererState['vertexBuffer']>,
+  contain: TrProps['contain'],
+  /**
+   * Mutated
+   */
+  lineCache: SdfTextRendererState['lineCache'],
+  renderWindow: SdfTextRendererState['renderWindow'],
+  trFontFace: SdfTextRendererState['trFontFace'],
+  forceFullLayoutCalc: TextRendererState['forceFullLayoutCalc'],
+  scrollable: TrProps['scrollable'],
+): {
+  bufferNumFloats: number;
+  bufferNumQuads: number;
+  layoutNumCharacters: number;
+  fullyProcessed: boolean;
+  maxX: number;
+  maxY: number;
+} {
+  assertTruthy(trFontFace, 'Font face must be loaded');
+  assertTruthy(trFontFace.loaded, 'Font face must be loaded');
+  assertTruthy(trFontFace.data, 'Font face must be loaded');
+  assertTruthy(trFontFace.shaper, 'Font face must be loaded');
+
+  // Regardless of fontSize (or other scaling properties), we layout the vertices of each glyph
+  // using the fixed coordinate space determined by font size used to produce the atlas.
+  // Scaling for display is handled by shader uniforms inexpensively.
+  // So we have:
+  //  - vertex space: the space in which the vertices of each glyph are laid out
+  //  - screen space: the screen pixel space
+  // Input properties such as x, y, w, fontSize, letterSpacing, etc. are all expressed in screen space.
+  // We convert these to the vertex space by dividing them the `fontSizeRatio` factor.
+
+  /**
+   * `lineHeight` in vertex coordinates
+   */
+  const vertexLineHeight = trFontFace.data.info.size;
+  /**
+   * See above
+   */
+  const fontSizeRatio = fontSize / vertexLineHeight;
+  /**
+   * `w` in vertex coordinates
+   */
+  const vertexW = width / fontSizeRatio;
+  /**
+   * `letterSpacing` in vertex coordinates
+   */
+  const vertexLSpacing = letterSpacing / fontSizeRatio;
+
+  const startingLineCacheEntry = lineCache[curLineIndex];
+  const startingCodepointIndex = startingLineCacheEntry?.codepointIndex || 0;
+  const startingMaxX = startingLineCacheEntry?.maxX || 0;
+  const startingMaxY = startingLineCacheEntry?.maxY || 0;
+
+  let maxX = startingMaxX;
+  let maxY = startingMaxY;
+  let curX = startX;
+  let curY = startY;
+
+  let bufferOffset = 0;
+  /**
+   * Buffer offset to last word boundry. This is -1 when we aren't in a word boundry.
+   */
+  const lastWord: {
+    codepointIndex: number;
+    bufferOffset: number;
+    xStart: number;
+  } = {
+    codepointIndex: -1,
+    bufferOffset: -1,
+    xStart: -1,
+  };
+
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const shaper = trFontFace.shaper;
+
+  const shaperProps: FontShaperProps = {
+    letterSpacing: vertexLSpacing,
+  };
+
+  // Get glyphs
+  let glyphs = shaper.shapeText(
+    shaperProps,
+    new PeekableIterator(
+      getUnicodeCodepoints(text, startingCodepointIndex),
+      startingCodepointIndex,
+    ),
+  );
+
+  let glyphResult:
+    | IteratorResult<MappedGlyphInfo | UnmappedCharacterInfo, void>
+    | undefined;
+
+  let curLineBufferStart = -1;
+
+  const bufferLineInfos: {
+    bufferStart: number;
+    bufferEnd: number;
+  }[] = [];
+
+  const truncateSeq = '...';
+  const vertexTruncateHeight = height / fontSizeRatio;
+  const truncateSeqVertexWidth = measureText(truncateSeq, shaperProps, shaper);
+
+  // Line-by-line layout
+  let moreLines = true;
+  while (moreLines) {
+    const nextLineWillFit =
+      contain !== 'both' ||
+      scrollable ||
+      curY + vertexLineHeight + vertexLineHeight <= vertexTruncateHeight;
+    const lineVertexW = nextLineWillFit
+      ? vertexW
+      : vertexW - truncateSeqVertexWidth;
+    /**
+     * Vertex X position to the beginning of the last word boundary. This becomes -1 when we start traversing a word.
+     */
+    let xStartLastWordBoundary = 0;
+    // Layout glyphs in this line
+    // Any break statements in this while loop will trigger a line break
+    while ((glyphResult = glyphs.next()) && !glyphResult.done) {
+      const glyph = glyphResult.value;
+
+      if (curLineIndex === lineCache.length) {
+        lineCache.push({
+          codepointIndex: glyph.cluster,
+          maxY,
+          maxX,
+        });
+      } else if (curLineIndex > lineCache.length) {
+        throw new Error('Unexpected lineCache length');
+      }
+
+      // If we encounter a word boundary (white space or newline) we invalidate
+      // the lastWord and set the xStartLastWordBoundary if we haven't already.
+      if (glyph.codepoint === 32 || glyph.codepoint === 10) {
+        if (lastWord.codepointIndex !== -1) {
+          lastWord.codepointIndex = -1;
+          xStartLastWordBoundary = curX;
+        }
+      } else if (lastWord.codepointIndex === -1) {
+        lastWord.codepointIndex = glyph.cluster;
+        lastWord.bufferOffset = bufferOffset;
+        lastWord.xStart = xStartLastWordBoundary;
+      }
+
+      if (glyph.mapped) {
+        // Mapped glyph
+        const charEndX = curX + glyph.xOffset + glyph.width;
+        // Word wrap check
+        if (
+          // We are containing the text
+          contain !== 'none' &&
+          // The current glyph reaches outside the contained width
+          charEndX >= lineVertexW &&
+          // There is a last word that we can break to the next line
+          lastWord.codepointIndex !== -1 &&
+          // We have advanced at least one character since the last word started
+          lastWord.codepointIndex < glyph.cluster &&
+          // Prevents infinite loop when a single word is longer than the width
+          lastWord.xStart > 0
+        ) {
+          // The current word is about to go off the edge of the container width
+          // Reinitialize the iterator starting at the last word
+          // and proceeding to the next line
+          if (nextLineWillFit) {
+            glyphs = shaper.shapeText(
+              shaperProps,
+              new PeekableIterator(
+                getUnicodeCodepoints(text, lastWord.codepointIndex),
+                lastWord.codepointIndex,
+              ),
+            );
+            bufferOffset = lastWord.bufferOffset;
+            break;
+          } else {
+            glyphs = shaper.shapeText(
+              shaperProps,
+              new PeekableIterator(getUnicodeCodepoints(truncateSeq, 0), 0),
+            );
+            curX = lastWord.xStart;
+            bufferOffset = lastWord.bufferOffset;
+          }
+        } else {
+          // This glyph fits, so we can add it to the buffer
+          const quadX = curX + glyph.xOffset;
+          const quadY = curY + glyph.yOffset;
+
+          const lineIsBelowWindowTop = renderWindow
+            ? curY + vertexLineHeight >= renderWindow.y1 / fontSizeRatio
+            : true;
+          const lineIsAboveWindowBottom = renderWindow
+            ? curY <= renderWindow.y2 / fontSizeRatio
+            : true;
+
+          // Only add to buffer for rendering if the line is within the render window
+          if (lineIsBelowWindowTop && lineIsAboveWindowBottom) {
+            if (curLineBufferStart === -1) {
+              curLineBufferStart = bufferOffset;
+            }
+
+            const atlasEntry = trFontFace.getAtlasEntry(glyph.glyphId);
+
+            // Add texture coordinates
+            const u = atlasEntry.x / trFontFace.data.common.scaleW;
+            const v = atlasEntry.y / trFontFace.data.common.scaleH;
+            const uvWidth = atlasEntry.width / trFontFace.data.common.scaleW;
+            const uvHeight = atlasEntry.height / trFontFace.data.common.scaleH;
+
+            // TODO: (Performance) We can optimize this by using ELEMENT_ARRAY_BUFFER
+            // eliminating the need to duplicate vertices
+
+            // Top-left
+            vertexBuffer[bufferOffset++] = quadX;
+            vertexBuffer[bufferOffset++] = quadY;
+            vertexBuffer[bufferOffset++] = u;
+            vertexBuffer[bufferOffset++] = v;
+
+            // Top-right
+            vertexBuffer[bufferOffset++] = quadX + glyph.width;
+            vertexBuffer[bufferOffset++] = quadY;
+            vertexBuffer[bufferOffset++] = u + uvWidth;
+            vertexBuffer[bufferOffset++] = v;
+
+            // Bottom-left
+            vertexBuffer[bufferOffset++] = quadX;
+            vertexBuffer[bufferOffset++] = quadY + glyph.height;
+            vertexBuffer[bufferOffset++] = u;
+            vertexBuffer[bufferOffset++] = v + uvHeight;
+
+            // Bottom-right
+            vertexBuffer[bufferOffset++] = quadX + glyph.width;
+            vertexBuffer[bufferOffset++] = quadY + glyph.height;
+            vertexBuffer[bufferOffset++] = u + uvWidth;
+            vertexBuffer[bufferOffset++] = v + uvHeight;
+          }
+
+          maxY = Math.max(maxY, quadY + glyph.height);
+          curX += glyph.xAdvance;
+          maxX = Math.max(maxX, curX);
+        }
+      } else {
+        // Unmapped character
+
+        // Handle newlines
+        if (glyph.codepoint === 10) {
+          break;
+        }
+      }
+    }
+
+    // Prepare for the next line...
+    if (curLineBufferStart !== -1) {
+      bufferLineInfos.push({
+        bufferStart: curLineBufferStart,
+        bufferEnd: bufferOffset,
+      });
+      curLineBufferStart = -1;
+    }
+    curX = 0;
+    curY += vertexLineHeight;
+    curLineIndex++;
+    lastWord.codepointIndex = -1;
+    xStartLastWordBoundary = 0;
+
+    // Figure out if there are any more lines to render...
+    if (
+      !forceFullLayoutCalc &&
+      contain === 'both' &&
+      renderWindow &&
+      curY > renderWindow.y2 / fontSizeRatio
+    ) {
+      // Stop layout calculation early (for performance purposes) if:
+      // - We're not forcing a full layout calculation (for width/height calculation)
+      // - ...and we're containing the text vertically+horizontally (contain === 'both')
+      // - ...and we have a render window
+      // - ...and the next line is below the bottom of the render window
+      moreLines = false;
+    } else if (glyphResult && glyphResult.done) {
+      // If we've reached the end of the text, we know we're done
+      moreLines = false;
+    } else if (contain === 'both' && !scrollable && !nextLineWillFit) {
+      // If we're contained vertically+horizontally (contain === 'both')
+      // but not scrollable and the next line won't fit, we're done.
+      moreLines = false;
+    }
+  }
+
+  // Use textAlign to determine if we need to adjust the x position of the text
+  // in the buffer line by line
+  if (textAlign === 'center') {
+    const vertexTextW = contain === 'none' ? maxX : vertexW;
+
+    for (let i = 0; i < bufferLineInfos.length; i++) {
+      const line = bufferLineInfos[i]!;
+      // - 4 = the x position of a rightmost vertex
+      const lineWidth =
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        vertexBuffer[line.bufferEnd - 4]! - vertexBuffer[line.bufferStart]!;
+
+      const xOffset = (vertexTextW - lineWidth) / 2;
+      for (let j = line.bufferStart; j < line.bufferEnd; j += 4) {
+        vertexBuffer[j] += xOffset;
+      }
+    }
+  } else if (textAlign === 'right') {
+    const vertexTextW = contain === 'none' ? maxX : vertexW;
+
+    for (let i = 0; i < bufferLineInfos.length; i++) {
+      const line = bufferLineInfos[i]!;
+      const lineWidth =
+        line.bufferEnd === line.bufferStart
+          ? 0
+          : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            vertexBuffer[line.bufferEnd - 4]! - vertexBuffer[line.bufferStart]!;
+
+      const xOffset = vertexTextW - lineWidth;
+      for (let j = line.bufferStart; j < line.bufferEnd; j += 4) {
+        vertexBuffer[j] += xOffset;
+      }
+    }
+  }
+
+  assertTruthy(glyphResult);
+
+  return {
+    bufferNumFloats: bufferOffset,
+    bufferNumQuads: bufferOffset / 16,
+    layoutNumCharacters: glyphResult.done
+      ? text.length - startingCodepointIndex
+      : glyphResult.value.cluster - startingCodepointIndex + 1,
+    fullyProcessed: !!glyphResult.done,
+    maxX,
+    maxY,
+  };
+}

package/src/core/text-rendering/renderers/SdfTextRenderer/internal/makeRenderWindow.test.ts

@@ -0,0 +1,136 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2023 Comcast Cable Communications Management, LLC.
+ *
+ * Licensed under the Apache License, Version 2.0 (the License);
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { expect, describe, it } from 'vitest';
+import { makeRenderWindow } from './makeRenderWindow.js';
+
+describe('makeRenderWindow', () => {
+  it('should return a empty window when all inputs are zero / empty', () => {
+    expect(
+      makeRenderWindow(0, 0, 0, 0, 0, { x1: 0, y1: 0, x2: 0, y2: 0 }),
+    ).toEqual({
+      x1: 0,
+      y1: 0,
+      x2: 0,
+      y2: 0,
+    });
+    // Visible window is empty
+    expect(
+      makeRenderWindow(0, 0, 0, 0, 0, { x1: 100, y1: 100, x2: 100, y2: 100 }),
+    ).toEqual({
+      x1: 0,
+      y1: 0,
+      x2: 0,
+      y2: 0,
+    });
+  });
+
+  it('should return an empty window when the visible window is empty regardless of other inputs', () => {
+    expect(
+      makeRenderWindow(100, 200, 300, 10, 3, { x1: 0, y1: 0, x2: 0, y2: 0 }),
+    ).toEqual({
+      x1: 0,
+      y1: 0,
+      x2: 0,
+      y2: 0,
+    });
+    expect(
+      makeRenderWindow(400, 500, 100, 20, 2, {
+        x1: 100,
+        y1: 100,
+        x2: 100,
+        y2: 100,
+      }),
+    ).toEqual({
+      x1: 0,
+      y1: 0,
+      x2: 0,
+      y2: 0,
+    });
+  });
+
+  it('should return a window with no margin around the visible area if lineHeight and/or numExtraLines set are zero', () => {
+    expect(
+      makeRenderWindow(0, 0, 0, 0, 0, { x1: 0, y1: 0, x2: 100, y2: 100 }),
+    ).toEqual({
+      x1: 0,
+      y1: 0,
+      x2: 100,
+      y2: 100,
+    });
+
+    expect(
+      makeRenderWindow(0, 0, 0, 10, 0, { x1: 0, y1: 0, x2: 100, y2: 100 }),
+    ).toEqual({
+      x1: 0,
+      y1: 0,
+      x2: 100,
+      y2: 100,
+    });
+
+    expect(
+      makeRenderWindow(0, 0, 0, 0, 2, { x1: 0, y1: 0, x2: 100, y2: 100 }),
+    ).toEqual({
+      x1: 0,
+      y1: 0,
+      x2: 100,
+      y2: 100,
+    });
+  });
+
+  it('should return a window with a margin around the visible area (if lineHeight/numExtraLines set)', () => {
+    expect(
+      makeRenderWindow(0, 0, 0, 10, 1, { x1: 0, y1: 0, x2: 100, y2: 100 }),
+    ).toEqual({
+      x1: 0,
+      y1: -10,
+      x2: 100,
+      y2: 110,
+    });
+
+    expect(
+      makeRenderWindow(0, 0, 0, 5, 3, { x1: 0, y1: 0, x2: 100, y2: 100 }),
+    ).toEqual({
+      x1: 0,
+      y1: -15,
+      x2: 100,
+      y2: 115,
+    });
+  });
+
+  it('should return a window scrolled to scrollY when set', () => {
+    expect(
+      makeRenderWindow(0, 0, 100, 10, 1, { x1: 0, y1: 0, x2: 100, y2: 100 }),
+    ).toEqual({
+      x1: 0,
+      y1: 90,
+      x2: 100,
+      y2: 210,
+    });
+
+    expect(
+      makeRenderWindow(0, 0, 200, 10, 1, { x1: 0, y1: 0, x2: 100, y2: 100 }),
+    ).toEqual({
+      x1: 0,
+      y1: 190,
+      x2: 100,
+      y2: 310,
+    });
+  });
+});

package/src/core/text-rendering/renderers/SdfTextRenderer/internal/makeRenderWindow.ts

@@ -0,0 +1,64 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2023 Comcast Cable Communications Management, LLC.
+ *
+ * Licensed under the Apache License, Version 2.0 (the License);
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { isBoundPositive, type Bound } from '../../../../lib/utils.js';
+import type { TrProps } from '../../TextRenderer.js';
+
+/**
+ * Create a render window from the given parameters.
+ *
+ * @remarks
+ * The render window is a rectangle that defines the area of the text that
+ * should be rendered. It is used to skip rendering parts of the text that
+ * are outside of the render window. The render window is relative to the
+ * text's top left corner of the overrall text.
+ *
+ * @param x The x coordinate of the text element's top left corner relative to the screen.
+ * @param y The y coordinate of the text element's top left corner relative to the screen.
+ * @param scrollY The amount of pixels to scroll the text vertically.
+ * @param lineHeight The height of a single line of text.
+ * @param numExtraLines The number of extra lines to render above and below the visible window.
+ * @param visibleWindow The visible window of the text element relative to the screen
+ * @returns
+ */
+export function makeRenderWindow(
+  x: TrProps['x'],
+  y: TrProps['y'],
+  scrollY: TrProps['scrollY'],
+  lineHeight: number,
+  numExtraLines: number,
+  visibleWindow: Bound,
+): Bound {
+  const bufferMargin = lineHeight * numExtraLines;
+  const x1 = visibleWindow.x1 - x;
+  const y1 = visibleWindow.y1 - y;
+  return isBoundPositive(visibleWindow)
+    ? {
+        x1: x1,
+        y1: y1 + scrollY - bufferMargin,
+        x2: x1 + (visibleWindow.x2 - visibleWindow.x1),
+        y2: y1 + scrollY + (visibleWindow.y2 - visibleWindow.y1) + bufferMargin,
+      }
+    : {
+        x1: 0,
+        y1: 0,
+        x2: 0,
+        y2: 0,
+      };
+}

package/src/core/text-rendering/renderers/SdfTextRenderer/internal/measureText.test.ts

@@ -0,0 +1,41 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2023 Comcast Cable Communications Management, LLC.
+ *
+ * Licensed under the Apache License, Version 2.0 (the License);
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { expect, describe, it } from 'vitest';
+import { measureText } from './measureText.js';
+import sdfData from 'test/mockdata/Ubuntu-Bold.msdf.json';
+import {
+  SdfFontShaper,
+  type SdfFontData,
+} from '../../../font-face-types/SdfTrFontFace/internal/SdfFontShaper.js';
+
+describe('measureText', () => {
+  it('should measure text width', () => {
+    const PERIOD_WIDTH = 10.332;
+    const shaper = new SdfFontShaper(sdfData as unknown as SdfFontData);
+    expect(measureText('', { letterSpacing: 0 }, shaper)).toBe(0);
+    expect(measureText('.', { letterSpacing: 0 }, shaper)).toBe(PERIOD_WIDTH);
+    expect(measureText('..', { letterSpacing: 0 }, shaper)).toBeCloseTo(
+      PERIOD_WIDTH * 2,
+    );
+    expect(measureText('..', { letterSpacing: 5 }, shaper)).toBeCloseTo(
+      PERIOD_WIDTH * 2 + 5,
+    );
+  });
+});

package/src/core/text-rendering/renderers/SdfTextRenderer/internal/measureText.ts

@@ -0,0 +1,51 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2023 Comcast Cable Communications Management, LLC.
+ *
+ * Licensed under the Apache License, Version 2.0 (the License);
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type {
+  FontShaper,
+  FontShaperProps,
+} from '../../../font-face-types/SdfTrFontFace/internal/FontShaper.js';
+import { PeekableIterator } from './PeekableGenerator.js';
+import { getUnicodeCodepoints } from './getUnicodeCodepoints.js';
+
+/**
+ * Measures a single-line of text width ignoring any unmapped glyphs including line breaks
+ *
+ * @param text
+ * @param shaperProps
+ * @param shaper
+ * @returns
+ */
+export function measureText(
+  text: string,
+  shaperProps: FontShaperProps,
+  shaper: FontShaper,
+): number {
+  const glyphs = shaper.shapeText(
+    shaperProps,
+    new PeekableIterator(getUnicodeCodepoints(text, 0), 0),
+  );
+  let width = 0;
+  for (const glyph of glyphs) {
+    if (glyph.mapped) {
+      width += glyph.xAdvance;
+    }
+  }
+  return width;
+}