@lightningjs/renderer 0.6.1 → 0.7.0

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

@@ -0,0 +1,205 @@
+/*
+ * 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 { setRenderWindow, type SdfRenderWindow } from './setRenderWindow.js';
+
+function makeRenderWindow(): SdfRenderWindow {
+  return {
+    screen: { x1: 0, y1: 0, x2: 0, y2: 0 },
+    sdf: { x1: 0, y1: 0, x2: 0, y2: 0 },
+    firstLineIdx: 0,
+    numLines: 0,
+    valid: false,
+  };
+}
+
+describe('setRenderWindow', () => {
+  it('should return a empty window when visibleWindow is empty', () => {
+    const rw = makeRenderWindow();
+    setRenderWindow(rw, 0, 0, 0, 10, 0, { x1: 0, y1: 0, x2: 0, y2: 0 }, 1);
+    expect(rw).toEqual({
+      screen: { x1: 0, y1: 0, x2: 0, y2: 0 },
+      sdf: { x1: 0, y1: 0, x2: 0, y2: 0 },
+      firstLineIdx: 0,
+      numLines: 0,
+      valid: true,
+    });
+
+    setRenderWindow(
+      rw,
+      0,
+      0,
+      0,
+      20,
+      0,
+      { x1: 100, y1: 100, x2: 100, y2: 100 },
+      2,
+    );
+    expect(rw).toEqual({
+      screen: { x1: 0, y1: 0, x2: 0, y2: 0 },
+      sdf: { x1: 0, y1: 0, x2: 0, y2: 0 },
+      firstLineIdx: 0,
+      numLines: 0,
+      valid: true,
+    });
+
+    setRenderWindow(
+      rw,
+      100,
+      200,
+      300,
+      10,
+      30,
+      { x1: 0, y1: 0, x2: 0, y2: 0 },
+      1,
+    );
+    expect(rw).toEqual({
+      screen: { x1: 0, y1: 0, x2: 0, y2: 0 },
+      sdf: { x1: 0, y1: 0, x2: 0, y2: 0 },
+      firstLineIdx: 0,
+      numLines: 0,
+      valid: true,
+    });
+    setRenderWindow(
+      rw,
+      400,
+      500,
+      100,
+      20,
+      40,
+      {
+        x1: 100,
+        y1: 100,
+        x2: 100,
+        y2: 100,
+      },
+      1,
+    ),
+      expect(rw).toEqual({
+        screen: { x1: 0, y1: 0, x2: 0, y2: 0 },
+        sdf: { x1: 0, y1: 0, x2: 0, y2: 0 },
+        firstLineIdx: 0,
+        numLines: 0,
+        valid: true,
+      });
+  });
+
+  it('should return a window with no margin around the visible area if lineHeight and/or bufferMargin set are zero', () => {
+    const rw = makeRenderWindow();
+
+    setRenderWindow(rw, 0, 0, 0, 10, 0, { x1: 0, y1: 0, x2: 100, y2: 100 }, 1),
+      expect(rw).toEqual({
+        screen: { x1: 0, y1: 0, x2: 100, y2: 100 },
+        sdf: { x1: 0, y1: 0, x2: 100, y2: 100 },
+        firstLineIdx: 0,
+        numLines: 10,
+        valid: true,
+      });
+
+    setRenderWindow(rw, 0, 0, 0, 10, 0, { x1: 0, y1: 0, x2: 200, y2: 205 }, 2);
+    expect(rw).toEqual({
+      screen: { x1: 0, y1: 0, x2: 200, y2: 210 },
+      sdf: { x1: 0, y1: 0, x2: 100, y2: 105 },
+      firstLineIdx: 0,
+      numLines: 21,
+      valid: true,
+    });
+  });
+
+  it('should return a window with a margin around the visible area (if boundsMargin set)', () => {
+    const rw = makeRenderWindow();
+
+    setRenderWindow(
+      rw,
+      0,
+      0,
+      0,
+      10,
+      100,
+      { x1: 0, y1: 0, x2: 100, y2: 100 },
+      1,
+    ),
+      expect(rw).toEqual({
+        screen: { x1: 0, y1: -100, x2: 100, y2: 200 },
+        sdf: { x1: 0, y1: -100, x2: 100, y2: 200 },
+        firstLineIdx: -10,
+        numLines: 30,
+        valid: true,
+      });
+
+    setRenderWindow(
+      rw,
+      0,
+      0,
+      0,
+      10,
+      200,
+      { x1: 0, y1: 0, x2: 200, y2: 200 },
+      1,
+    );
+    expect(rw).toEqual({
+      screen: { x1: 0, y1: -200, x2: 200, y2: 400 },
+      sdf: { x1: 0, y1: -200, x2: 200, y2: 400 },
+      firstLineIdx: -20,
+      numLines: 60,
+      valid: true,
+    });
+  });
+
+  it('should return a window scrolled to scrollY when set', () => {
+    const rw = makeRenderWindow();
+
+    setRenderWindow(
+      rw,
+      0,
+      0,
+      100,
+      10,
+      100,
+      { x1: 0, y1: 0, x2: 100, y2: 100 },
+      1,
+    ),
+      expect(rw).toEqual({
+        screen: { x1: 0, y1: 0, x2: 100, y2: 300 },
+        sdf: { x1: 0, y1: 0, x2: 100, y2: 300 },
+        firstLineIdx: 0,
+        numLines: 30,
+        valid: true,
+      });
+
+    setRenderWindow(
+      rw,
+      0,
+      0,
+      105,
+      10,
+      100,
+      { x1: 0, y1: 0, x2: 100, y2: 100 },
+      1,
+    ),
+      expect(rw).toEqual({
+        screen: { x1: 0, y1: 0, x2: 100, y2: 310 },
+        sdf: { x1: 0, y1: 0, x2: 100, y2: 310 },
+        firstLineIdx: 0,
+        numLines: 31,
+        valid: true,
+      });
+  });
+});

package/src/core/text-rendering/renderers/SdfTextRenderer/internal/{makeRenderWindow.ts → setRenderWindow.ts}

@@ -19,6 +19,15 @@
 
 import { isBoundPositive, type Bound } from '../../../../lib/utils.js';
 import type { TrProps } from '../../TextRenderer.js';
+import { roundDownToMultiple, roundUpToMultiple } from './util.js';
+
+export interface SdfRenderWindow {
+  screen: Bound;
+  sdf: Bound;
+  firstLineIdx: number;
+  numLines: number;
+  valid: boolean;
+}
 
 /**
  * Create a render window from the given parameters.
@@ -32,33 +41,53 @@ import type { TrProps } from '../../TextRenderer.js';
  * @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 lineHeight 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(
+export function setRenderWindow(
+  outRenderWindow: SdfRenderWindow,
   x: TrProps['x'],
   y: TrProps['y'],
   scrollY: TrProps['scrollY'],
   lineHeight: number,
-  numExtraLines: number,
+  bufferMargin: 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,
-      };
+  fontSizeRatio: number,
+): void {
+  const { screen, sdf } = outRenderWindow;
+  if (!isBoundPositive(visibleWindow)) {
+    screen.x1 = 0;
+    screen.y1 = 0;
+    screen.x2 = 0;
+    screen.y2 = 0;
+    sdf.x1 = 0;
+    sdf.y1 = 0;
+    sdf.x2 = 0;
+    sdf.y2 = 0;
+    outRenderWindow.numLines = 0;
+    outRenderWindow.firstLineIdx = 0;
+  } else {
+    const x1 = visibleWindow.x1 - x;
+    const x2 = x1 + (visibleWindow.x2 - visibleWindow.x1);
+    const y1Base = visibleWindow.y1 - y + scrollY;
+    const y1 = roundDownToMultiple(y1Base - bufferMargin, lineHeight || 1);
+    const y2 = roundUpToMultiple(
+      y1Base + (visibleWindow.y2 - visibleWindow.y1) + bufferMargin,
+      lineHeight || 1,
+    );
+
+    screen.x1 = x1;
+    screen.y1 = y1;
+    screen.x2 = x2;
+    screen.y2 = y2;
+    sdf.x1 = x1 / fontSizeRatio;
+    sdf.y1 = y1 / fontSizeRatio;
+    sdf.x2 = x2 / fontSizeRatio;
+    sdf.y2 = y2 / fontSizeRatio;
+
+    outRenderWindow.numLines = Math.ceil((y2 - y1) / lineHeight);
+    outRenderWindow.firstLineIdx = Math.floor(y1 / lineHeight);
+  }
+  outRenderWindow.valid = true;
 }

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

@@ -0,0 +1,40 @@
+/*
+ * 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.
+ */
+
+/**
+ * Round up to the nearest multiple of the given number.
+ *
+ * @param value
+ * @param multiple
+ * @returns
+ */
+export function roundUpToMultiple(value: number, multiple: number) {
+  return Math.ceil(value / multiple) * multiple;
+}
+
+/**
+ * Round down to the nearest multiple of the given number.
+ *
+ * @param value
+ * @param multiple
+ * @returns
+ */
+export function roundDownToMultiple(value: number, multiple: number) {
+  return Math.floor(value / multiple) * multiple;
+}

package/src/core/text-rendering/renderers/TextRenderer.ts

@@ -25,6 +25,10 @@ import type {
   TrFontFace,
   TrFontFaceDescriptors,
 } from '../font-face-types/TrFontFace.js';
+import type {
+  TextBaseline,
+  TextVerticalAlign,
+} from './LightningTextTextureRenderer.js';
 
 /**
  * Augmentable map of text renderer type IDs to text renderer types.
@@ -244,6 +248,56 @@ export interface TrProps extends TrFontProps {
    * @default 0
    */
   letterSpacing: number;
+  /**
+   * Line height for text (in pixels)
+   *
+   * @remarks
+   * This property sets the height of each line.
+   *
+   * @default 0
+   */
+  lineHeight: number;
+  /**
+   * Max lines for text
+   *
+   * @remarks
+   * This property sets max number of lines of a text paragraph.
+   * Not yet implemented in the SDF renderer.
+   *
+   * @default 0
+   */
+  maxLines: number;
+  /**
+   * Baseline for text
+   *
+   * @remarks
+   * This property sets the text baseline used when drawing text.
+   * Not yet implemented in the SDF renderer.
+   *
+   * @default alphabetic
+   */
+  textBaseline: TextBaseline;
+  /**
+   * Vertical Align for text when lineHeight > fontSize
+   *
+   * @remarks
+   * This property sets the vertical align of the text.
+   * Not yet implemented in the SDF renderer.
+   *
+   * @default middle
+   */
+  verticalAlign: TextVerticalAlign;
+  /**
+   * Overflow Suffix for text
+   *
+   * @remarks
+   * The suffix to be added when text is cropped due to overflow.
+   * Not yet implemented in the SDF renderer.
+   *
+   * @default "..."
+   */
+  overflowSuffix: string;
+
   zIndex: number;
   debug: Partial<TextRendererDebugProps>;
 }
@@ -307,6 +361,21 @@ const trPropSetterDefaults: TrPropSetters = {
   letterSpacing: (state, value) => {
     state.props.letterSpacing = value;
   },
+  lineHeight: (state, value) => {
+    state.props.lineHeight = value;
+  },
+  maxLines: (state, value) => {
+    state.props.maxLines = value;
+  },
+  textBaseline: (state, value) => {
+    state.props.textBaseline = value;
+  },
+  verticalAlign: (state, value) => {
+    state.props.verticalAlign = value;
+  },
+  overflowSuffix: (state, value) => {
+    state.props.overflowSuffix = value;
+  },
   debug: (state, value) => {
     state.props.debug = value;
   },
@@ -348,6 +417,10 @@ export abstract class TextRenderer<
             (state: StateT, value: TrProps[keyof TrProps]) => {
               if (state.props[key as keyof TrProps] !== value) {
                 setter(state, value as never);
+                // Assume any prop change will require a render
+                // This is required because otherwise a paused RAF will result
+                // in renders when text props are changed.
+                this.stage.requestRender();
               }
             },
           ];

package/src/core/textures/ImageTexture.ts

@@ -83,15 +83,23 @@ export class ImageTexture extends Texture {
         premultiplyAlpha,
       };
     }
-    const response = await fetch(src);
-    const blob = await response.blob();
-    return {
-      data: await createImageBitmap(blob, {
-        premultiplyAlpha: premultiplyAlpha ? 'premultiply' : 'none',
-        colorSpaceConversion: 'none',
-        imageOrientation: 'none',
-      }),
-    };
+
+    if (this.txManager.imageWorkerManager.imageWorkersEnabled) {
+      return await this.txManager.imageWorkerManager.getImage(
+        src,
+        premultiplyAlpha,
+      );
+    } else {
+      const response = await fetch(src);
+      const blob = await response.blob();
+      return {
+        data: await createImageBitmap(blob, {
+          premultiplyAlpha: premultiplyAlpha ? 'premultiply' : 'none',
+          colorSpaceConversion: 'none',
+          imageOrientation: 'none',
+        }),
+      };
+    }
   }
 
   static override makeCacheKey(props: ImageTextureProps): string | false {

package/src/core/utils.ts

@@ -23,6 +23,8 @@
  * @module
  */
 
+import memo from 'memize';
+
 export const EPSILON = 0.000001;
 export let ARRAY_TYPE =
   typeof Float32Array !== 'undefined' ? Float32Array : Array;
@@ -119,97 +121,97 @@ const getTimingBezier = (
   };
 };
 
-export const getTimingFunction = (
-  str: string,
-): ((time: number) => number | undefined) => {
-  switch (str) {
-    case 'linear':
-      return function (time: number) {
-        return time;
-      };
-    case 'ease':
-      return getTimingBezier(0.25, 0.1, 0.25, 1.0);
-
-    case 'ease-in':
-      return getTimingBezier(0.42, 0, 1.0, 1.0);
-    case 'ease-out':
-      return getTimingBezier(0, 0, 0.58, 1.0);
-    case 'ease-in-out':
-      return getTimingBezier(0.42, 0, 0.58, 1.0);
-
-    case 'ease-in-sine':
-      return getTimingBezier(0.12, 0, 0.39, 0);
-    case 'ease-out-sine':
-      return getTimingBezier(0.12, 0, 0.39, 0);
-    case 'ease-in-out-sine':
-      return getTimingBezier(0.37, 0, 0.63, 1);
-
-    case 'ease-in-cubic':
-      return getTimingBezier(0.32, 0, 0.67, 0);
-    case 'ease-out-cubic':
-      return getTimingBezier(0.33, 1, 0.68, 1);
-    case 'ease-in-out-cubic':
-      return getTimingBezier(0.65, 0, 0.35, 1);
-
-    case 'ease-in-circ':
-      return getTimingBezier(0.55, 0, 1, 0.45);
-    case 'ease-out-circ':
-      return getTimingBezier(0, 0.55, 0.45, 1);
-    case 'ease-in-out-circ':
-      return getTimingBezier(0.85, 0, 0.15, 1);
-
-    case 'ease-in-back':
-      return getTimingBezier(0.36, 0, 0.66, -0.56);
-    case 'ease-out-back':
-      return getTimingBezier(0.34, 1.56, 0.64, 1);
-    case 'ease-in-out-back':
-      return getTimingBezier(0.68, -0.6, 0.32, 1.6);
-
-    case 'step-start':
-      return function () {
-        return 1;
-      };
-    case 'step-end':
-      return function (time: number) {
-        return time === 1 ? 1 : 0;
-      };
-    default:
-      // eslint-disable-next-line no-case-declarations
-      const s = 'cubic-bezier(';
-      if (str && str.indexOf(s) === 0) {
-        const parts = str
-          .substr(s.length, str.length - s.length - 1)
-          .split(',');
-        if (parts.length !== 4) {
+export const getTimingFunction = memo(
+  (str: string): ((time: number) => number | undefined) => {
+    switch (str) {
+      case 'linear':
+        return function (time: number) {
+          return time;
+        };
+      case 'ease':
+        return getTimingBezier(0.25, 0.1, 0.25, 1.0);
+
+      case 'ease-in':
+        return getTimingBezier(0.42, 0, 1.0, 1.0);
+      case 'ease-out':
+        return getTimingBezier(0, 0, 0.58, 1.0);
+      case 'ease-in-out':
+        return getTimingBezier(0.42, 0, 0.58, 1.0);
+
+      case 'ease-in-sine':
+        return getTimingBezier(0.12, 0, 0.39, 0);
+      case 'ease-out-sine':
+        return getTimingBezier(0.12, 0, 0.39, 0);
+      case 'ease-in-out-sine':
+        return getTimingBezier(0.37, 0, 0.63, 1);
+
+      case 'ease-in-cubic':
+        return getTimingBezier(0.32, 0, 0.67, 0);
+      case 'ease-out-cubic':
+        return getTimingBezier(0.33, 1, 0.68, 1);
+      case 'ease-in-out-cubic':
+        return getTimingBezier(0.65, 0, 0.35, 1);
+
+      case 'ease-in-circ':
+        return getTimingBezier(0.55, 0, 1, 0.45);
+      case 'ease-out-circ':
+        return getTimingBezier(0, 0.55, 0.45, 1);
+      case 'ease-in-out-circ':
+        return getTimingBezier(0.85, 0, 0.15, 1);
+
+      case 'ease-in-back':
+        return getTimingBezier(0.36, 0, 0.66, -0.56);
+      case 'ease-out-back':
+        return getTimingBezier(0.34, 1.56, 0.64, 1);
+      case 'ease-in-out-back':
+        return getTimingBezier(0.68, -0.6, 0.32, 1.6);
+
+      case 'step-start':
+        return function () {
+          return 1;
+        };
+      case 'step-end':
+        return function (time: number) {
+          return time === 1 ? 1 : 0;
+        };
+      default:
+        // eslint-disable-next-line no-case-declarations
+        const s = 'cubic-bezier(';
+        if (str && str.indexOf(s) === 0) {
+          const parts = str
+            .substr(s.length, str.length - s.length - 1)
+            .split(',');
+          if (parts.length !== 4) {
+            console.warn('Unknown timing function: ' + str);
+            // Fallback: use linear.
+            return function (time) {
+              return time;
+            };
+          }
+          const a = parseFloat(parts[0] || '0.42');
+          const b = parseFloat(parts[1] || '0');
+          const c = parseFloat(parts[2] || '1');
+          const d = parseFloat(parts[3] || '1');
+
+          if (isNaN(a) || isNaN(b) || isNaN(c) || isNaN(d)) {
+            console.warn(' Unknown timing function: ' + str);
+            // Fallback: use linear.
+            return function (time) {
+              return time;
+            };
+          }
+
+          return getTimingBezier(a, b, c, d);
+        } else {
           console.warn('Unknown timing function: ' + str);
           // Fallback: use linear.
           return function (time) {
             return time;
           };
         }
-        const a = parseFloat(parts[0] || '0.42');
-        const b = parseFloat(parts[1] || '0');
-        const c = parseFloat(parts[2] || '1');
-        const d = parseFloat(parts[3] || '1');
-
-        if (isNaN(a) || isNaN(b) || isNaN(c) || isNaN(d)) {
-          console.warn(' Unknown timing function: ' + str);
-          // Fallback: use linear.
-          return function (time) {
-            return time;
-          };
-        }
-
-        return getTimingBezier(a, b, c, d);
-      } else {
-        console.warn('Unknown timing function: ' + str);
-        // Fallback: use linear.
-        return function (time) {
-          return time;
-        };
-      }
-  }
-};
+    }
+  },
+);
 
 if (!Math.hypot)
   Math.hypot = (...args: number[]) => {

package/src/env.d.ts

@@ -0,0 +1,7 @@
+interface ImportMetaEnv {
+  readonly PROD: boolean;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

package/src/main-api/ICoreDriver.ts

@@ -17,6 +17,7 @@
  * limitations under the License.
  */
 
+import type { FpsUpdatePayload } from '../common/CommonTypes.js';
 import type {
   INode,
   INodeWritableProps,
@@ -56,5 +57,5 @@ export interface ICoreDriver {
 
   onBeforeDestroyNode(node: INode): void;
 
-  onFpsUpdate(fps: number): void;
+  onFpsUpdate(fpsData: FpsUpdatePayload): void;
 }