@lightningjs/renderer 0.3.0 → 0.3.2

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

@@ -0,0 +1,66 @@
+/*
+ * 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.
+ */
+
+/**
+ * A wrapper Generator class that makes a generator peekable.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export class PeekableIterator<T = unknown, TReturn = any, TNext = unknown>
+  implements Iterator<T, TReturn, TNext>
+{
+  private peekBuffer: IteratorResult<T, TReturn>[] = [];
+  private _lastIndex;
+
+  constructor(private iterator: Iterator<T, TReturn, TNext>, indexBase = 0) {
+    this.iterator = iterator;
+    this._lastIndex = indexBase - 1;
+    this.peekBuffer = [];
+  }
+
+  next(): IteratorResult<T, TReturn> {
+    const nextResult =
+      this.peekBuffer.length > 0
+        ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          this.peekBuffer.pop()!
+        : this.iterator.next();
+
+    if (nextResult.done) {
+      this._lastIndex = -1;
+    } else {
+      this._lastIndex++;
+    }
+    return nextResult;
+  }
+
+  peek(): IteratorResult<T, TReturn> {
+    if (this.peekBuffer.length > 0) {
+      // We know that the buffer is not empty, so we can safely use the
+      // non-null assertion operator
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      return this.peekBuffer[0]!;
+    }
+    const result = this.iterator.next();
+    this.peekBuffer.push(result);
+    return result;
+  }
+
+  get lastIndex(): number {
+    return this._lastIndex;
+  }
+}

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

@@ -0,0 +1,52 @@
+/*
+ * 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.
+ */
+
+export const SpecialCodepoints = {
+  LINE_FEED: 0x0a,
+  CARRIAGE_RETURN: 0x0d,
+  SPACE: 0x20,
+  TAB: 0x09,
+  ZERO_WIDTH_SPACE: 0x200b,
+  ZERO_WIDTH_NON_JOINER: 0x200c,
+  ZERO_WIDTH_JOINER: 0x200d,
+  LEFT_TO_RIGHT_MARK: 0x200e,
+  RIGHT_TO_LEFT_MARK: 0x200f,
+  LEFT_TO_RIGHT_EMBEDDING: 0x202a,
+  RIGHT_TO_LEFT_EMBEDDING: 0x202b,
+  POP_DIRECTIONAL_FORMATTING: 0x202c,
+  LEFT_TO_RIGHT_OVERRIDE: 0x202d,
+  RIGHT_TO_LEFT_OVERRIDE: 0x202e,
+  LINE_SEPARATOR: 0x2028,
+  PARAGRAPH_SEPARATOR: 0x2029,
+  OBJECT_REPLACEMENT_CHARACTER: 0xfffc,
+  REPLACEMENT_CHARACTER: 0xfffd,
+  ZERO_WIDTH_NO_BREAK_SPACE: 0xfeff,
+  LEFT_TO_RIGHT_ISOLATE: 0x2066,
+  RIGHT_TO_LEFT_ISOLATE: 0x2067,
+  FIRST_STRONG_ISOLATE: 0x2068,
+  POP_DIRECTIONAL_ISOLATE: 0x2069,
+  INHIBIT_SYMMETRIC_SWAPPING: 0x206a,
+  ACTIVATE_SYMMETRIC_SWAPPING: 0x206b,
+  INHIBIT_ARABIC_FORM_SHAPING: 0x206c,
+  ACTIVATE_ARABIC_FORM_SHAPING: 0x206d,
+  NATIONAL_DIGIT_SHAPES: 0x206e,
+  NOMINAL_DIGIT_SHAPES: 0x206f,
+  LEFT_TO_RIGHT_BOUNDARY: 0x200e,
+  RIGHT_TO_LEFT_BOUNDARY: 0x200f,
+};

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

@@ -0,0 +1,32 @@
+/*
+ * 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.
+ */
+
+/**
+ * Number of floating point numbers that represent a single glyph in the SDF vertex buffer.
+ *
+ * @remarks
+ * The vertex buffer contains:
+ *  - 6 vertex positions
+ *  - 6 texture coordinates
+ *  - = 12 positions/coordinates per glyph
+ *
+ * Each vertex position and texture coordinate consist of 2 floating point numbers (x/y).
+ * So there are 12 * 2 = 24 floating point numbers that make up a single glyph.
+ */
+export const FLOATS_PER_GLYPH = 24;

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

@@ -0,0 +1,76 @@
+/*
+ * 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 { TrProps, TextRendererState } from '../../TextRenderer.js';
+import type { SdfTextRendererState } from '../SdfTextRenderer.js';
+
+/**
+ * Gets the start conditions for the layout loop.
+ *
+ * @remarks
+ * Returns `undefined` if the layout loop should not be run.
+ *
+ * @param fontSize
+ * @param fontSizeRatio
+ * @param sdfLineHeight
+ * @param renderWindow
+ * @param lineCache
+ * @param textH
+ * @returns
+ */
+export function getStartConditions(
+  fontSize: TrProps['fontSize'],
+  offsetY: TrProps['offsetY'],
+  fontSizeRatio: number,
+  sdfLineHeight: number,
+  renderWindow: SdfTextRendererState['renderWindow'],
+  lineCache: SdfTextRendererState['lineCache'],
+  textH: TextRendererState['textH'],
+):
+  | {
+      x: number;
+      y: number;
+      lineIndex: number;
+    }
+  | undefined {
+  // State variables
+  let startLineIndex = 0;
+  if (renderWindow) {
+    startLineIndex = Math.min(
+      Math.max(Math.floor(renderWindow.y1 / fontSize), 0),
+      lineCache.length,
+    );
+  }
+
+  // TODO: Possibly break out startX / startY into a separate function
+  // TODO: (fontSize / 6.4286 / fontSizeRatio) Adding this to the startY helps the text line up better with Canvas rendered text
+  const startX = 0;
+  const startY = offsetY / fontSizeRatio + startLineIndex * sdfLineHeight; // TODO: Figure out what determines the initial y offset of text.
+
+  // Don't attempt to render anything if we know we're starting past the established end of the text
+  if (textH && startY >= textH / fontSizeRatio) {
+    return;
+  }
+
+  return {
+    x: startX,
+    y: startY,
+    lineIndex: startLineIndex,
+  };
+}

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

@@ -0,0 +1,133 @@
+/*
+ * 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 { describe, expect, it } from 'vitest';
+import { getUnicodeCodepoints } from './getUnicodeCodepoints.js';
+import { SpecialCodepoints } from './SpecialCodepoints.js';
+
+describe('getUnicodeCodePoints()', () => {
+  it('should yield unicode code points for each character of the string.', () => {
+    const codePoints = getUnicodeCodepoints(
+      'Hello. 你好。வணக்கம். שלום. नमस्ते. سلام.🙂😍\u200E\u200F\u202A\u202B\u202C\u202D\u202E\u2066\u2067\u2068\u2069\u206A\u206B\u206C\u206D\u206E\u206F\uFEFF',
+    );
+
+    // Latin (LTR)
+    expect(codePoints.next().value).toBe(72); // H
+    expect(codePoints.next().value).toBe(101); // e
+    expect(codePoints.next().value).toBe(108); // l
+    expect(codePoints.next().value).toBe(108); // l
+    expect(codePoints.next().value).toBe(111); // o
+    expect(codePoints.next().value).toBe(46); // .q
+    expect(codePoints.next().value).toBe(32); // space
+    // Chinese (LTR)
+    expect(codePoints.next().value).toBe(20320); // 你
+    expect(codePoints.next().value).toBe(22909); // 好
+    expect(codePoints.next().value).toBe(12290); // 。
+    // Tamil (LTR)
+    expect(codePoints.next().value).toBe(2997); // வ
+    expect(codePoints.next().value).toBe(2979); // ண
+    expect(codePoints.next().value).toBe(2965); // க
+    expect(codePoints.next().value).toBe(3021); // ்
+    expect(codePoints.next().value).toBe(2965); // க
+    expect(codePoints.next().value).toBe(2990); // ம
+    expect(codePoints.next().value).toBe(3021); // ்
+    expect(codePoints.next().value).toBe(46); // .
+    expect(codePoints.next().value).toBe(32); // space
+    // Hebrew (RTL)
+    expect(codePoints.next().value).toBe(1513); // ש
+    expect(codePoints.next().value).toBe(1500); // ל
+    expect(codePoints.next().value).toBe(1493); // ש
+    expect(codePoints.next().value).toBe(1501); // ם
+    expect(codePoints.next().value).toBe(46); // .
+    expect(codePoints.next().value).toBe(32); // space
+    // Hindi (LTR)
+    expect(codePoints.next().value).toBe(2344); // न
+    expect(codePoints.next().value).toBe(2350); // म
+    expect(codePoints.next().value).toBe(2360); // स
+    expect(codePoints.next().value).toBe(2381); // ्
+    expect(codePoints.next().value).toBe(2340); // त
+    expect(codePoints.next().value).toBe(2375); // े
+    expect(codePoints.next().value).toBe(46); // .
+    expect(codePoints.next().value).toBe(32); // space
+    // Arabic (RTL)
+    expect(codePoints.next().value).toBe(1587); // س
+    expect(codePoints.next().value).toBe(1604); // ل
+    expect(codePoints.next().value).toBe(1575); // ا
+    expect(codePoints.next().value).toBe(1605); // م
+    expect(codePoints.next().value).toBe(46); // .
+
+    // Emoji (LTR)
+    expect(codePoints.next().value).toBe(128578); // 🙂
+    expect(codePoints.next().value).toBe(128525); // 😍
+
+    // Unicode control characters
+    expect(codePoints.next().value).toBe(SpecialCodepoints.LEFT_TO_RIGHT_MARK); // LEFT-TO-RIGHT MARK
+    expect(codePoints.next().value).toBe(SpecialCodepoints.RIGHT_TO_LEFT_MARK); // RIGHT-TO-LEFT MARK
+    expect(codePoints.next().value).toBe(
+      SpecialCodepoints.LEFT_TO_RIGHT_EMBEDDING,
+    ); // LEFT-TO-RIGHT EMBEDDING
+    expect(codePoints.next().value).toBe(
+      SpecialCodepoints.RIGHT_TO_LEFT_EMBEDDING,
+    ); // RIGHT-TO-LEFT EMBEDDING
+    expect(codePoints.next().value).toBe(
+      SpecialCodepoints.POP_DIRECTIONAL_FORMATTING,
+    ); // POP DIRECTIONAL FORMATTING
+    expect(codePoints.next().value).toBe(
+      SpecialCodepoints.LEFT_TO_RIGHT_OVERRIDE,
+    ); // LEFT-TO-RIGHT OVERRIDE
+    expect(codePoints.next().value).toBe(
+      SpecialCodepoints.RIGHT_TO_LEFT_OVERRIDE,
+    ); // RIGHT-TO-LEFT OVERRIDE
+    expect(codePoints.next().value).toBe(
+      SpecialCodepoints.LEFT_TO_RIGHT_ISOLATE,
+    ); // LEFT-TO-RIGHT ISOLATE
+    expect(codePoints.next().value).toBe(
+      SpecialCodepoints.RIGHT_TO_LEFT_ISOLATE,
+    ); // RIGHT-TO-LEFT ISOLATE
+    expect(codePoints.next().value).toBe(
+      SpecialCodepoints.FIRST_STRONG_ISOLATE,
+    ); // FIRST STRONG ISOLATE
+    expect(codePoints.next().value).toBe(
+      SpecialCodepoints.POP_DIRECTIONAL_ISOLATE,
+    ); // POP DIRECTIONAL ISOLATE
+    expect(codePoints.next().value).toBe(
+      SpecialCodepoints.INHIBIT_SYMMETRIC_SWAPPING,
+    ); // INHIBIT SYMMETRIC SWAPPING
+    expect(codePoints.next().value).toBe(
+      SpecialCodepoints.ACTIVATE_SYMMETRIC_SWAPPING,
+    ); // ACTIVATE SYMMETRIC SWAPPING
+    expect(codePoints.next().value).toBe(
+      SpecialCodepoints.INHIBIT_ARABIC_FORM_SHAPING,
+    ); // INHIBIT ARABIC FORM SHAPING
+    expect(codePoints.next().value).toBe(
+      SpecialCodepoints.ACTIVATE_ARABIC_FORM_SHAPING,
+    ); // ACTIVATE ARABIC FORM SHAPING
+    expect(codePoints.next().value).toBe(
+      SpecialCodepoints.NATIONAL_DIGIT_SHAPES,
+    ); // NATIONAL DIGIT SHAPES
+    expect(codePoints.next().value).toBe(
+      SpecialCodepoints.NOMINAL_DIGIT_SHAPES,
+    ); // NOMINAL DIGIT SHAPES
+    expect(codePoints.next().value).toBe(
+      SpecialCodepoints.ZERO_WIDTH_NO_BREAK_SPACE,
+    ); // ZERO WIDTH NO-BREAK SPACE
+    // End of string
+    expect(codePoints.next().done).toBe(true);
+  });
+});

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

@@ -0,0 +1,38 @@
+/*
+ * 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.
+ */
+
+// Reversible Generator Wrapper Class
+
+/**
+ * Generator function that yields each Unicode code point in the given string.
+ */
+export function* getUnicodeCodepoints(
+  text: string,
+  start = 0,
+): Generator<number> {
+  let i = start;
+  while (i < text.length) {
+    const codePoint = text.codePointAt(i);
+    if (codePoint === undefined) {
+      throw new Error('Invalid Unicode code point');
+    }
+    yield codePoint;
+    i += codePoint <= 0xffff ? 1 : 2;
+  }
+}