@lightningjs/renderer 3.0.0-beta14 → 3.0.0-beta16

package/src/core/text-rendering/canvas/Utils.test.ts

@@ -1,206 +0,0 @@
-/*
- * If not stated otherwise in this file or this component's LICENSE file the
- * following copyright and licenses apply:
- *
- * Copyright 2025 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 { describe, it, expect, beforeEach, vi } from 'vitest';
-import { wrapText, measureText, wrapWord } from './Utils.js';
-
-// Mock canvas context for testing
-const createMockContext = (): CanvasRenderingContext2D =>
-  ({
-    measureText: vi.fn((text: string) => {
-      // Mock: each character is 10px wide, spaces are 5px
-      // ZWSP has 0 width
-      let width = 0;
-      for (const char of text) {
-        if (char === '\u200B') {
-          width += 0; // ZWSP has zero width
-        } else if (char === ' ') {
-          width += 5;
-        } else {
-          width += 10;
-        }
-      }
-      return { width };
-    }),
-  } as unknown as CanvasRenderingContext2D);
-
-describe('Canvas Text Utils', () => {
-  let mockContext: ReturnType<typeof createMockContext>;
-
-  beforeEach(() => {
-    mockContext = createMockContext();
-  });
-
-  describe('measureText', () => {
-    it('should measure text width correctly', () => {
-      const width = measureText(mockContext, 'hello', 0);
-      expect(width).toBe(50); // 5 characters * 10px each
-    });
-
-    it('should handle empty text', () => {
-      const width = measureText(mockContext, '', 0);
-      expect(width).toBe(0);
-    });
-
-    it('should account for letter spacing', () => {
-      const width = measureText(mockContext, 'hello', 2);
-      expect(width).toBe(60); // 5 characters * 10px + 5 * 2 letter spacing
-    });
-
-    it('should skip zero-width spaces in letter spacing calculation', () => {
-      const width = measureText(mockContext, 'hel\u200Blo', 2);
-      // With letter spacing=2: 'h'(10) + 2 + 'e'(10) + 2 + 'l'(10) + 2 + ZWSP(0) + 'l'(10) + 2 + 'o'(10) = 60
-      // The ZWSP is in the string but gets 0 width, letter spacing is still added for non-ZWSP chars
-      expect(width).toBe(60);
-    });
-
-    it('should handle spaces correctly', () => {
-      const width = measureText(mockContext, 'hi there', 0);
-      // With space=0, uses context.measureText() directly
-      // Mock returns: 'h'(10) + 'i'(10) + ' '(5) + 't'(10) + 'h'(10) + 'e'(10) + 'r'(10) + 'e'(10) = 75px
-      expect(width).toBe(75);
-    });
-  });
-
-  describe('wrapWord', () => {
-    it('should wrap long words that exceed width', () => {
-      const result = wrapWord(
-        mockContext,
-        'verylongword', // 12 chars = 120px
-        100, // maxWidth
-        '...',
-        0, // letterSpacing
-      );
-      expect(result).toContain('...');
-      expect(result.length).toBeLessThan('verylongword'.length);
-    });
-
-    it('should return word unchanged if it fits', () => {
-      const result = wrapWord(
-        mockContext,
-        'short', // 5 chars = 50px
-        100, // maxWidth
-        '...',
-        0,
-      );
-      expect(result).toBe('short');
-    });
-  });
-
-  describe('wrapText', () => {
-    it('should wrap text that exceeds max width', () => {
-      const result = wrapText(
-        mockContext,
-        'hello world test', // hello=50px + space=5px + world=50px = 105px > 100px
-        100, // wordWrapWidth
-        0, // letterSpacing
-        0, // indent
-      );
-      expect(result.l).toEqual(['hello', 'world test']);
-      expect(result.n).toEqual([]); // no real newlines
-    });
-
-    it('should handle single word that fits', () => {
-      const result = wrapText(mockContext, 'hello', 100, 0, 0);
-      expect(result.l).toEqual(['hello']);
-    });
-
-    it('should handle real newlines', () => {
-      const result = wrapText(mockContext, 'hello\nworld', 100, 0, 0);
-      expect(result.l).toEqual(['hello', 'world']);
-      expect(result.n).toEqual([1]); // newline after first line
-    });
-
-    it('should handle ZWSP as word break opportunity', () => {
-      // Test 1: ZWSP should provide break opportunity when needed
-      const result1 = wrapText(
-        mockContext,
-        'hello\u200Bworld test', // hello=50px + world=50px + space=5px + test=40px = 145px
-        100,
-        0,
-        0,
-      );
-      expect(result1.l).toEqual(['helloworld', 'test']); // Break at regular space, not ZWSP
-
-      // Test 2: ZWSP should NOT break when text fits on one line
-      const result2 = wrapText(
-        mockContext,
-        'hi\u200Bthere', // hi=20px + there=50px = 70px < 200px
-        200,
-        0,
-        0,
-      );
-      expect(result2.l).toEqual(['hithere']); // ZWSP is invisible, no space added
-
-      // Test 3: ZWSP should break when necessary due to width constraints
-      const result3 = wrapText(
-        mockContext,
-        'verylongword\u200Bmore', // First word will exceed 100px
-        100,
-        0,
-        0,
-      );
-      expect(result3.l.length).toBeGreaterThan(1); // Should break at ZWSP position
-    });
-
-    it('should handle indent correctly', () => {
-      const result = wrapText(
-        mockContext,
-        'hello world', // hello=50px + space=5px + world=50px = 105px, but with indent only 95px available
-        100,
-        0,
-        10, // indent
-      );
-      expect(result.l).toEqual(['hello', 'world']);
-    });
-
-    it('should preserve spaces but not ZWSP in output', () => {
-      const result = wrapText(
-        mockContext,
-        'word1 word2\u200Bword3',
-        200, // Wide enough to fit all
-        0,
-        0,
-      );
-      expect(result.l).toEqual(['word1 word2word3']); // Space preserved, ZWSP removed
-    });
-
-    it('should handle mixed ZWSP and regular spaces', () => {
-      const result = wrapText(
-        mockContext,
-        'word1\u200Bword2 word3\u200Bword4', // Mix of ZWSP and spaces
-        50, // Force wrapping
-        0,
-        0,
-      );
-      // Should break at both ZWSP and space opportunities when needed
-      expect(result.l.length).toBeGreaterThan(1);
-
-      // Test that ZWSP is not included in any line (invisible)
-      for (const line of result.l) {
-        expect(line).not.toContain('\u200B');
-      }
-
-      // Test that at least one line contains a regular space (if not broken at that point)
-      const hasSpace = result.l.some((line) => line.includes(' '));
-      // Note: spaces might be at break points, so this test is flexible
-      expect(typeof hasSpace).toBe('boolean'); // Just verify the test runs
-    });
-  });
-});

package/src/core/text-rendering/canvas/Utils.ts

@@ -1,178 +0,0 @@
-/*
- * If not stated otherwise in this file or this component's LICENSE file the
- * following copyright and licenses apply:
- *
- * Copyright 2025 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 { NormalizedFontMetrics } from '../TextRenderer.js';
-import { isZeroWidthSpace } from '../Utils.js';
-import type { TextBaseline } from './Settings.js';
-
-export const measureText = (
-  context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
-  word: string,
-  space = 0,
-) => {
-  if (space === 0) {
-    return context.measureText(word).width;
-  }
-  return word.split('').reduce((acc, char) => {
-    if (isZeroWidthSpace(char) === true) {
-      return acc;
-    }
-    return acc + context.measureText(char).width + space;
-  }, 0);
-};
-
-// Helper functions
-export const wrapWord = (
-  context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
-  word: string,
-  wordWrapWidth: number,
-  suffix: string,
-  letterSpacing: number,
-) => {
-  const suffixWidth = measureText(context, suffix, letterSpacing);
-  const wordLen = word.length;
-  const wordWidth = measureText(context, word, letterSpacing);
-  if (wordWidth <= wordWrapWidth) {
-    return word;
-  }
-  let cutoffIndex = Math.floor((wordWrapWidth * wordLen) / wordWidth);
-  let truncWordWidth =
-    measureText(context, word.substring(0, cutoffIndex), letterSpacing) +
-    suffixWidth;
-  if (truncWordWidth > wordWrapWidth) {
-    while (cutoffIndex > 0) {
-      truncWordWidth =
-        measureText(context, word.substring(0, cutoffIndex), letterSpacing) +
-        suffixWidth;
-      if (truncWordWidth > wordWrapWidth) {
-        cutoffIndex -= 1;
-      } else {
-        break;
-      }
-    }
-  } else {
-    while (cutoffIndex < wordLen) {
-      truncWordWidth =
-        measureText(context, word.substring(0, cutoffIndex), letterSpacing) +
-        suffixWidth;
-      if (truncWordWidth < wordWrapWidth) {
-        cutoffIndex += 1;
-      } else {
-        cutoffIndex -= 1;
-        break;
-      }
-    }
-  }
-  return (
-    word.substring(0, cutoffIndex) +
-    (wordWrapWidth >= suffixWidth ? suffix : '')
-  );
-};
-
-export const wrapText = (
-  context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
-  text: string,
-  wordWrapWidth: number,
-  letterSpacing: number,
-  indent: number,
-) => {
-  const spaceRegex = / |\u200B/g;
-  const lines = text.split(/\r?\n/g);
-  let allLines: string[] = [];
-  const realNewlines: number[] = [];
-  for (let i = 0; i < lines.length; i++) {
-    const resultLines: string[] = [];
-    let result = '';
-    let spaceLeft = wordWrapWidth - indent;
-    const line = lines[i] ?? '';
-    const words = line.split(spaceRegex);
-    const spaces = line.match(spaceRegex) || [];
-    for (let j = 0; j < words.length; j++) {
-      const space = spaces[j - 1] || '';
-      const word = words[j] || '';
-      const wordWidth = measureText(context, word, letterSpacing);
-      const wordWidthWithSpace =
-        wordWidth + measureText(context, space, letterSpacing);
-      if (j === 0 || wordWidthWithSpace > spaceLeft) {
-        if (j > 0) {
-          resultLines.push(result);
-          result = '';
-        }
-        result += word;
-        spaceLeft = wordWrapWidth - wordWidth - (j === 0 ? indent : 0);
-      } else {
-        spaceLeft -= wordWidthWithSpace;
-        // Don't add ZWSP to the output since it's invisible
-        if (space !== '\u200B') {
-          result += space + word;
-        } else {
-          result += word;
-        }
-      }
-    }
-    resultLines.push(result);
-    result = '';
-    allLines = allLines.concat(resultLines);
-    if (i < lines.length - 1) {
-      realNewlines.push(allLines.length);
-    }
-  }
-  return { l: allLines, n: realNewlines };
-};
-
-export const isNormalizedFontMetrics = (
-  obj: unknown,
-): obj is NormalizedFontMetrics => {
-  return (
-    typeof obj === 'object' &&
-    obj !== null &&
-    'ascender' in obj &&
-    typeof (obj as { ascender: unknown }).ascender === 'number' &&
-    'descender' in obj &&
-    typeof (obj as { descender: unknown }).descender === 'number' &&
-    'lineGap' in obj &&
-    typeof (obj as { lineGap: unknown }).lineGap === 'number'
-  );
-};
-
-/**
- * Calculate height for the canvas
- *
- * @param textBaseline
- * @param fontSize
- * @param lineHeight
- * @param numLines
- * @param offsetY
- * @returns
- */
-export const calcHeight = (
-  textBaseline: TextBaseline,
-  fontSize: number,
-  lineHeight: number,
-  numLines: number,
-  offsetY: number,
-) => {
-  const baselineOffset = textBaseline !== 'bottom' ? 0.5 * fontSize : 0;
-  return (
-    lineHeight * (numLines - 1) +
-    baselineOffset +
-    Math.max(lineHeight, fontSize) +
-    offsetY
-  );
-};

package/src/core/text-rendering/canvas/calculateRenderInfo.ts

@@ -1,299 +0,0 @@
-/*
- * If not stated otherwise in this file or this component's LICENSE file the
- * following copyright and licenses apply:
- *
- * Copyright 2025 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 { calculateFontMetrics } from '../Utils.js';
-import { wrapText, wrapWord, measureText, calcHeight } from './Utils.js';
-import { getFontMetrics, setFontMetrics } from '../CanvasFontHandler.js';
-import type {
-  NormalizedFontMetrics,
-  TextBaseline,
-  TextVerticalAlign,
-} from '../TextRenderer.js';
-import type { TextAlign, TextOverflow } from './Settings.js';
-
-export interface RenderInfo {
-  lines: string[];
-  precision: number;
-  remainingText: string;
-  moreTextLines: boolean;
-  width: number;
-  innerWidth: number;
-  height: number;
-  fontSize: number;
-  cutSx: number;
-  cutSy: number;
-  cutEx: number;
-  cutEy: number;
-  lineHeight: number | null;
-  defLineHeight: number;
-  lineWidths: number[];
-  offsetY: number;
-  paddingLeft: number;
-  paddingRight: number;
-  letterSpacing: number;
-  textIndent: number;
-  metrics: NormalizedFontMetrics;
-  text: string;
-  fontStyle: string;
-  fontBaselineRatio: number;
-  fontFamily: string | null;
-  wordWrap: boolean;
-  wordWrapWidth: number;
-  wordBreak: 'normal' | 'break-all' | 'break-word';
-  textOverflow: TextOverflow | null;
-  textBaseline: TextBaseline;
-  textAlign: TextAlign;
-  verticalAlign: TextVerticalAlign;
-  maxLines: number;
-  maxHeight: number | null;
-  overflowSuffix: string;
-  textColor: number;
-  shadow: boolean;
-  shadowColor: number;
-  shadowOffsetX: number;
-  shadowOffsetY: number;
-  shadowBlur: number;
-  highlight: boolean;
-  highlightHeight: number;
-  highlightColor: number;
-  highlightOffset: number;
-  highlightPaddingLeft: number;
-  highlightPaddingRight: number;
-  advancedRenderer: boolean;
-
-  // Normally stage options
-  textRenderIssueMargin: number;
-}
-
-export interface LineType {
-  text: string;
-  x: number;
-  y: number;
-  w: number;
-}
-
-export function calculateRenderInfo(
-  context: OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D,
-  renderInfo: RenderInfo,
-) {
-  const precision = renderInfo.precision;
-  const paddingLeft = renderInfo.paddingLeft * precision;
-  const paddingRight = renderInfo.paddingRight * precision;
-  const fontSize = renderInfo.fontSize * precision;
-  let offsetY =
-    renderInfo.offsetY === null ? null : renderInfo.offsetY * precision;
-  const w = renderInfo.width * precision;
-  const h = renderInfo.height * precision;
-  let wordWrapWidth = renderInfo.wordWrapWidth * precision;
-  const cutSx = renderInfo.cutSx * precision;
-  const cutEx = renderInfo.cutEx * precision;
-  const cutSy = renderInfo.cutSy * precision;
-  const cutEy = renderInfo.cutEy * precision;
-  const letterSpacing = (renderInfo.letterSpacing || 0) * precision;
-  const textIndent = renderInfo.textIndent * precision;
-
-  const fontFamily = renderInfo.fontFamily!;
-
-  // Set font properties
-  context.font = `${renderInfo.fontStyle} ${fontSize}px ${fontFamily}`;
-  context.textBaseline = renderInfo.textBaseline;
-
-  let metrics = getFontMetrics(fontFamily, fontSize);
-
-  if (metrics === null) {
-    metrics = calculateFontMetrics(context, fontFamily, fontSize);
-    setFontMetrics(fontFamily, metrics);
-  }
-
-  const defLineHeight =
-    fontSize *
-    (metrics.ascender - metrics.descender + metrics.lineGap) *
-    precision;
-  const lineHeight =
-    renderInfo.lineHeight !== null
-      ? renderInfo.lineHeight * precision
-      : defLineHeight;
-
-  const maxHeight = renderInfo.maxHeight;
-  const containedMaxLines =
-    maxHeight !== null && lineHeight > 0
-      ? Math.floor(maxHeight / lineHeight)
-      : 0;
-  const setMaxLines = renderInfo.maxLines;
-  const calcMaxLines =
-    containedMaxLines > 0 && setMaxLines > 0
-      ? Math.min(containedMaxLines, setMaxLines)
-      : Math.max(containedMaxLines, setMaxLines);
-
-  const textOverflow = renderInfo.textOverflow;
-  const wordWrap = renderInfo.wordWrap;
-
-  // Total width
-  let width = w || 2048 / precision;
-  // Inner width
-  let innerWidth = width - paddingLeft;
-  if (innerWidth < 10) {
-    width += 10 - innerWidth;
-    innerWidth = 10;
-  }
-  if (wordWrapWidth === 0) {
-    wordWrapWidth = innerWidth;
-  }
-
-  // Text overflow
-  let text: string = renderInfo.text;
-  if (textOverflow !== null && wordWrap === false) {
-    let suffix: string;
-    switch (textOverflow) {
-      case 'clip':
-        suffix = '';
-        break;
-      case 'ellipsis':
-        suffix = renderInfo.overflowSuffix;
-        break;
-      default:
-        suffix = String(textOverflow);
-    }
-    text = wrapWord(
-      context,
-      text,
-      wordWrapWidth - textIndent,
-      suffix,
-      letterSpacing,
-    );
-  }
-
-  // Word wrap
-  let linesInfo: { n: number[]; l: string[] };
-  if (wordWrap) {
-    linesInfo = wrapText(
-      context,
-      text,
-      wordWrapWidth,
-      letterSpacing,
-      textIndent,
-    );
-  } else {
-    linesInfo = { l: text.split(/(?:\r\n|\r|\n)/), n: [] };
-    const n = linesInfo.l.length;
-    for (let i = 0; i < n - 1; i++) {
-      linesInfo.n.push(i);
-    }
-  }
-  let lines: string[] = linesInfo.l;
-
-  let remainingText = '';
-  let moreTextLines = false;
-  if (calcMaxLines > 0 && lines.length > calcMaxLines) {
-    const usedLines = lines.slice(0, calcMaxLines);
-    let otherLines: string[] = [];
-    const overflowSuffix = renderInfo.overflowSuffix;
-
-    if (overflowSuffix.length > 0) {
-      const w = measureText(context, overflowSuffix, letterSpacing);
-      const al = wrapText(
-        context,
-        usedLines[usedLines.length - 1]!,
-        wordWrapWidth - w,
-        letterSpacing,
-        textIndent,
-      );
-      usedLines[usedLines.length - 1] = `${al.l[0]!}${overflowSuffix}`;
-      otherLines = [al.l.length > 1 ? al.l[1]! : ''];
-    } else {
-      otherLines = [''];
-    }
-    // Re-assemble the remaining text
-    let i: number;
-    const n = lines.length;
-    let j = 0;
-    const m = linesInfo.n.length;
-    for (i = calcMaxLines; i < n; i++) {
-      otherLines[j] += `${otherLines[j] ? ' ' : ''}${lines[i] ?? ''}`;
-      if (i + 1 < m && linesInfo.n[i + 1] !== undefined) {
-        j++;
-      }
-    }
-    remainingText = otherLines.join('\n');
-    moreTextLines = true;
-    lines = usedLines;
-  }
-
-  // Calculate text width
-  let maxLineWidth = 0;
-  const lineWidths: number[] = [];
-  for (let i = 0; i < lines.length; i++) {
-    const lineWidth =
-      measureText(context, lines[i]!, letterSpacing) +
-      (i === 0 ? textIndent : 0);
-    lineWidths.push(lineWidth);
-    maxLineWidth = Math.max(maxLineWidth, lineWidth);
-  }
-
-  if (w === 0) {
-    width = maxLineWidth + paddingLeft + paddingRight;
-    innerWidth = maxLineWidth;
-  }
-  if (
-    wordWrap === true &&
-    w > maxLineWidth &&
-    renderInfo.textAlign === 'left' &&
-    lines.length === 1
-  ) {
-    width = maxLineWidth + paddingLeft + paddingRight;
-  }
-
-  let height: number;
-  if (h > 0) {
-    height = h;
-  } else {
-    height = calcHeight(
-      renderInfo.textBaseline,
-      fontSize,
-      lineHeight,
-      lines.length,
-      offsetY as number,
-    );
-  }
-  if (offsetY === null) {
-    offsetY = fontSize;
-  }
-
-  renderInfo.width = width;
-  renderInfo.height = height;
-  renderInfo.lines = lines;
-  renderInfo.precision = precision;
-  renderInfo.remainingText = remainingText;
-  renderInfo.moreTextLines = moreTextLines;
-  renderInfo.innerWidth = innerWidth;
-  renderInfo.fontSize = fontSize;
-  renderInfo.cutSx = cutSx;
-  renderInfo.cutSy = cutSy;
-  renderInfo.cutEx = cutEx;
-  renderInfo.cutEy = cutEy;
-  renderInfo.lineHeight = lineHeight;
-  renderInfo.defLineHeight = defLineHeight;
-  renderInfo.lineWidths = lineWidths;
-  renderInfo.offsetY = offsetY;
-  renderInfo.paddingLeft = paddingLeft;
-  renderInfo.paddingRight = paddingRight;
-  renderInfo.letterSpacing = letterSpacing;
-  renderInfo.textIndent = textIndent;
-  renderInfo.metrics = metrics;
-}