@lightningjs/renderer 3.0.0-beta10 → 3.0.0-beta11

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

@@ -1,99 +1,99 @@
-/*
- * 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 { RGBA } from '../../lib/utils.js';
-
-/**
- * Text Overflow Values
- */
-export type TextOverflow =
-  | 'ellipsis'
-  | 'clip'
-  | (string & Record<never, never>);
-
-/***
- * Text Horizontal Align Values
- */
-export type TextAlign = 'left' | 'center' | 'right';
-
-/***
- * Text Baseline Values
- */
-export type TextBaseline =
-  | 'alphabetic'
-  | 'top'
-  | 'hanging'
-  | 'middle'
-  | 'ideographic'
-  | 'bottom';
-
-/***
- * Text Vertical Align Values
- */
-export type TextVerticalAlign = 'top' | 'middle' | 'bottom';
-
-/**
- * Text Texture Settings
- */
-export interface Settings {
-  w: number;
-  h: number;
-  text: string;
-  fontStyle: string;
-  fontSize: number;
-  fontBaselineRatio: number;
-  fontFamily: string | null;
-  wordWrap: boolean;
-  wordWrapWidth: number;
-  wordBreak: 'normal' | 'break-all' | 'break-word';
-  textOverflow: TextOverflow | null;
-  lineHeight: number | null;
-  textBaseline: TextBaseline;
-  textAlign: TextAlign;
-  verticalAlign: TextVerticalAlign;
-  offsetY: number | null;
-  maxLines: number;
-  maxHeight: number | null;
-  overflowSuffix: string;
-  precision: number;
-  textColor: RGBA;
-  paddingLeft: number;
-  paddingRight: number;
-  shadow: boolean;
-  shadowColor: RGBA;
-  shadowOffsetX: number;
-  shadowOffsetY: number;
-  shadowBlur: number;
-  highlight: boolean;
-  highlightHeight: number;
-  highlightColor: RGBA;
-  highlightOffset: number;
-  highlightPaddingLeft: number;
-  highlightPaddingRight: number;
-  letterSpacing: number;
-  textIndent: number;
-  cutSx: number;
-  cutSy: number;
-  cutEx: number;
-  cutEy: number;
-  advancedRenderer: boolean;
-
-  // Normally stage options
-  textRenderIssueMargin: number;
-}
+/*
+ * 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 { RGBA } from '../../lib/utils.js';
+
+/**
+ * Text Overflow Values
+ */
+export type TextOverflow =
+  | 'ellipsis'
+  | 'clip'
+  | (string & Record<never, never>);
+
+/***
+ * Text Horizontal Align Values
+ */
+export type TextAlign = 'left' | 'center' | 'right';
+
+/***
+ * Text Baseline Values
+ */
+export type TextBaseline =
+  | 'alphabetic'
+  | 'top'
+  | 'hanging'
+  | 'middle'
+  | 'ideographic'
+  | 'bottom';
+
+/***
+ * Text Vertical Align Values
+ */
+export type TextVerticalAlign = 'top' | 'middle' | 'bottom';
+
+/**
+ * Text Texture Settings
+ */
+export interface Settings {
+  w: number;
+  h: number;
+  text: string;
+  fontStyle: string;
+  fontSize: number;
+  fontBaselineRatio: number;
+  fontFamily: string | null;
+  wordWrap: boolean;
+  wordWrapWidth: number;
+  wordBreak: 'normal' | 'break-all' | 'break-word';
+  textOverflow: TextOverflow | null;
+  lineHeight: number | null;
+  textBaseline: TextBaseline;
+  textAlign: TextAlign;
+  verticalAlign: TextVerticalAlign;
+  offsetY: number | null;
+  maxLines: number;
+  maxHeight: number | null;
+  overflowSuffix: string;
+  precision: number;
+  textColor: RGBA;
+  paddingLeft: number;
+  paddingRight: number;
+  shadow: boolean;
+  shadowColor: RGBA;
+  shadowOffsetX: number;
+  shadowOffsetY: number;
+  shadowBlur: number;
+  highlight: boolean;
+  highlightHeight: number;
+  highlightColor: RGBA;
+  highlightOffset: number;
+  highlightPaddingLeft: number;
+  highlightPaddingRight: number;
+  letterSpacing: number;
+  textIndent: number;
+  cutSx: number;
+  cutSy: number;
+  cutEx: number;
+  cutEy: number;
+  advancedRenderer: boolean;
+
+  // Normally stage options
+  textRenderIssueMargin: number;
+}

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

@@ -1,206 +1,206 @@
-/*
- * 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
-    });
-  });
-});
+/*
+ * 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
+    });
+  });
+});