@lightningjs/renderer 3.0.0-beta1 → 3.0.0-beta10

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

@@ -1,509 +0,0 @@
-/*
- * 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 { EventEmitter } from '../../../common/EventEmitter.js';
-import { assertTruthy } from '../../../utils.js';
-import type { CoreNode } from '../../CoreNode.js';
-import type { CoreTextNode } from '../../CoreTextNode.js';
-import type { Stage } from '../../Stage.js';
-import {
-  getNormalizedRgbaComponents,
-  getNormalizedAlphaComponent,
-} from '../../lib/utils.js';
-import { type FontFamilyMap } from '../TrFontManager.js';
-import type { TrFontFace } from '../font-face-types/TrFontFace.js';
-import { WebTrFontFace } from '../font-face-types/WebTrFontFace.js';
-import {
-  LightningTextTextureRenderer,
-  type RenderInfo,
-} from './LightningTextTextureRenderer.js';
-import {
-  TextRenderer,
-  type TextRendererState,
-  type TrFontProps,
-  type TrPropSetters,
-  type TrProps,
-} from './TextRenderer.js';
-
-const resolvedGlobal = typeof self === 'undefined' ? globalThis : self;
-
-/**
- * Global font set regardless of if run in the main thread or a web worker
- */
-const globalFontSet: FontFaceSet = (resolvedGlobal.document?.fonts ||
-  (resolvedGlobal as any).fonts) as FontFaceSet;
-
-declare module './TextRenderer.js' {
-  interface TextRendererMap {
-    canvas: CanvasTextRenderer;
-  }
-}
-
-function getFontCssString(props: TrProps): string {
-  const { fontFamily, fontStyle, fontWeight, fontStretch, fontSize } = props;
-  return [fontStyle, fontWeight, fontStretch, `${fontSize}px`, fontFamily].join(
-    ' ',
-  );
-}
-
-export interface CanvasTextRendererState extends TextRendererState {
-  node: CoreTextNode;
-  props: TrProps;
-  fontInfo:
-    | {
-        fontFace: WebTrFontFace;
-        cssString: string;
-        loaded: boolean;
-      }
-    | undefined;
-  textureNode: CoreNode | undefined;
-  lightning2TextRenderer: LightningTextTextureRenderer;
-  renderInfo: RenderInfo | undefined;
-}
-
-export class CanvasTextRenderer extends TextRenderer<CanvasTextRendererState> {
-  protected canvas: OffscreenCanvas | HTMLCanvasElement;
-  protected context:
-    | OffscreenCanvasRenderingContext2D
-    | CanvasRenderingContext2D;
-  /**
-   * Font family map used to store web font faces that were added to the
-   * canvas text renderer.
-   */
-  private fontFamilies: FontFamilyMap = {};
-  private fontFamilyArray: FontFamilyMap[] = [this.fontFamilies];
-
-  public type: 'canvas' | 'sdf' = 'canvas';
-
-  constructor(stage: Stage) {
-    super(stage);
-    if (typeof OffscreenCanvas !== 'undefined') {
-      this.canvas = new OffscreenCanvas(0, 0);
-    } else {
-      this.canvas = document.createElement('canvas');
-    }
-
-    let context = this.canvas.getContext('2d', {
-      willReadFrequently: true,
-    }) as OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D | null;
-    if (!context) {
-      // A browser may appear to support OffscreenCanvas but not actually support the Canvas '2d' context
-      // Here we try getting the context again after falling back to an HTMLCanvasElement.
-      // See: https://github.com/lightning-js/renderer/issues/26#issuecomment-1750438486
-      this.canvas = document.createElement('canvas');
-      context = this.canvas.getContext('2d', {
-        willReadFrequently: true,
-      });
-    }
-    assertTruthy(context);
-    this.context = context;
-
-    // Install the default 'san-serif' font face
-    this.addFontFace(
-      new WebTrFontFace({
-        fontFamily: 'sans-serif',
-        descriptors: {},
-        fontUrl: '',
-      }),
-    );
-  }
-
-  //#region Overrides
-  override getPropertySetters(): Partial<
-    TrPropSetters<CanvasTextRendererState>
-  > {
-    return {
-      fontFamily: (state, value) => {
-        state.props.fontFamily = value;
-        state.fontInfo = undefined;
-        this.invalidateLayoutCache(state);
-      },
-      fontWeight: (state, value) => {
-        state.props.fontWeight = value;
-        state.fontInfo = undefined;
-        this.invalidateLayoutCache(state);
-      },
-      fontStyle: (state, value) => {
-        state.props.fontStyle = value;
-        state.fontInfo = undefined;
-        this.invalidateLayoutCache(state);
-      },
-      fontStretch: (state, value) => {
-        state.props.fontStretch = value;
-        state.fontInfo = undefined;
-        this.invalidateLayoutCache(state);
-      },
-      fontSize: (state, value) => {
-        state.props.fontSize = value;
-        state.fontInfo = undefined;
-        this.invalidateLayoutCache(state);
-      },
-      text: (state, value) => {
-        state.props.text = value;
-        this.invalidateLayoutCache(state);
-      },
-      textAlign: (state, value) => {
-        state.props.textAlign = value;
-        this.invalidateLayoutCache(state);
-      },
-      color: (state, value) => {
-        state.props.color = value;
-        this.invalidateLayoutCache(state);
-      },
-      x: (state, value) => {
-        state.props.x = value;
-      },
-      y: (state, value) => {
-        state.props.y = value;
-      },
-      contain: (state, value) => {
-        state.props.contain = value;
-        this.invalidateLayoutCache(state);
-      },
-      width: (state, value) => {
-        state.props.width = value;
-        // Only invalidate layout cache if we're containing in the horizontal direction
-        if (state.props.contain !== 'none') {
-          this.invalidateLayoutCache(state);
-        }
-      },
-      height: (state, value) => {
-        state.props.height = value;
-        // Only invalidate layout cache if we're containing in the vertical direction
-        if (state.props.contain === 'both') {
-          this.invalidateLayoutCache(state);
-        }
-      },
-      offsetY: (state, value) => {
-        state.props.offsetY = value;
-        this.invalidateLayoutCache(state);
-      },
-      scrollY: (state, value) => {
-        state.props.scrollY = value;
-      },
-      letterSpacing: (state, value) => {
-        state.props.letterSpacing = value;
-        this.invalidateLayoutCache(state);
-      },
-      lineHeight: (state, value) => {
-        state.props.lineHeight = value;
-        this.invalidateLayoutCache(state);
-      },
-      maxLines: (state, value) => {
-        state.props.maxLines = value;
-        this.invalidateLayoutCache(state);
-      },
-      textBaseline: (state, value) => {
-        state.props.textBaseline = value;
-        this.invalidateLayoutCache(state);
-      },
-      verticalAlign: (state, value) => {
-        state.props.verticalAlign = value;
-        this.invalidateLayoutCache(state);
-      },
-      overflowSuffix: (state, value) => {
-        state.props.overflowSuffix = value;
-        this.invalidateLayoutCache(state);
-      },
-    };
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  override canRenderFont(props: TrFontProps): boolean {
-    // The canvas renderer can render any font because it automatically
-    // falls back to system fonts. The CanvasTextRenderer should be
-    // checked last if other renderers are preferred.
-    return true;
-  }
-
-  override isFontFaceSupported(fontFace: TrFontFace): boolean {
-    return fontFace instanceof WebTrFontFace;
-  }
-
-  override addFontFace(fontFace: TrFontFace): void {
-    // Make sure the font face is an Canvas font face (it should have already passed
-    // the `isFontFaceSupported` check)
-    assertTruthy(fontFace instanceof WebTrFontFace);
-
-    const fontFamily = fontFace.fontFamily;
-
-    // Add the font face to the document
-    // Except for the 'sans-serif' font family, which the Renderer provides
-    // as a special default fallback.
-    if (fontFamily !== 'sans-serif') {
-      // @ts-expect-error `add()` method should be available from a FontFaceSet
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-      globalFontSet.add(fontFace.fontFace);
-    }
-
-    let faceSet = this.fontFamilies[fontFamily];
-    if (!faceSet) {
-      faceSet = new Set();
-      this.fontFamilies[fontFamily] = faceSet;
-    }
-    faceSet.add(fontFace);
-  }
-
-  override createState(
-    props: TrProps,
-    node: CoreTextNode,
-  ): CanvasTextRendererState {
-    return {
-      node,
-      props,
-      status: 'initialState',
-      updateScheduled: false,
-      emitter: new EventEmitter(),
-      textureNode: undefined,
-      lightning2TextRenderer: new LightningTextTextureRenderer(
-        this.canvas,
-        this.context,
-      ),
-      renderInfo: undefined,
-      forceFullLayoutCalc: false,
-      textW: 0,
-      textH: 0,
-      fontInfo: undefined,
-      isRenderable: false,
-      debugData: {
-        updateCount: 0,
-        layoutCount: 0,
-        drawCount: 0,
-        lastLayoutNumCharacters: 0,
-        layoutSum: 0,
-        drawSum: 0,
-        bufferSize: 0,
-      },
-    };
-  }
-
-  override updateState(state: CanvasTextRendererState): void {
-    // On the first update call we need to set the status to loading
-    if (state.status === 'initialState') {
-      this.setStatus(state, 'loading');
-      // check if we're on screen
-      // if (this.isValidOnScreen(state) === true) {
-      //   this.setStatus(state, 'loading');
-      // }
-    }
-
-    if (state.status === 'loaded') {
-      // If we're loaded, we don't need to do anything
-      return;
-    }
-
-    // If fontInfo is invalid, we need to establish it
-    if (!state.fontInfo) {
-      return this.loadFont(state);
-    }
-
-    // If we're waiting for a font face to load, don't render anything
-    if (!state.fontInfo.loaded) {
-      return;
-    }
-
-    if (!state.renderInfo) {
-      state.renderInfo = this.calculateRenderInfo(state);
-      state.textH = state.renderInfo.lineHeight * state.renderInfo.lines.length;
-      state.textW = state.renderInfo.width;
-      this.renderSingleCanvasPage(state);
-    }
-
-    // handle scrollable text !!!
-    // if (state.isScrollable === true) {
-    //   return this.renderScrollableCanvasPages(state);
-    // }
-
-    // handle single page text
-  }
-
-  renderSingleCanvasPage(state: CanvasTextRendererState): void {
-    assertTruthy(state.renderInfo);
-    const node = state.node;
-
-    const texture = this.stage.txManager.createTexture('ImageTexture', {
-      premultiplyAlpha: true,
-      src: function (
-        this: CanvasTextRenderer,
-        lightning2TextRenderer: LightningTextTextureRenderer,
-        renderInfo: RenderInfo,
-      ) {
-        // load the canvas texture
-        assertTruthy(renderInfo);
-        lightning2TextRenderer.draw(renderInfo, {
-          lines: renderInfo.lines,
-          lineWidths: renderInfo.lineWidths,
-        });
-        if (this.canvas.width === 0 || this.canvas.height === 0) {
-          return null;
-        }
-        return this.context.getImageData(
-          0,
-          0,
-          this.canvas.width,
-          this.canvas.height,
-        );
-      }.bind(this, state.lightning2TextRenderer, state.renderInfo),
-    });
-
-    if (state.textureNode) {
-      // Use the existing texture node
-      state.textureNode.texture = texture;
-      // Update the alpha
-      state.textureNode.alpha = getNormalizedAlphaComponent(state.props.color);
-    } else {
-      // Create a new texture node
-      const textureNode = this.stage.createNode({
-        parent: node,
-        texture,
-        autosize: true,
-        // The alpha channel of the color is ignored when rasterizing the text
-        // texture so we need to pass it directly to the texture node.
-        alpha: getNormalizedAlphaComponent(state.props.color),
-      });
-      state.textureNode = textureNode;
-    }
-
-    this.setStatus(state, 'loaded');
-  }
-
-  loadFont = (state: CanvasTextRendererState): void => {
-    const cssString = getFontCssString(state.props);
-
-    const trFontFace = this.stage.fontManager.resolveFontFace(
-      this.fontFamilyArray,
-      state.props,
-      'canvas',
-    ) as WebTrFontFace | undefined;
-    assertTruthy(trFontFace, `Could not resolve font face for ${cssString}`);
-    state.fontInfo = {
-      fontFace: trFontFace,
-      cssString: cssString,
-      // TODO: For efficiency we would use this here but it's not reliable on WPE -> document.fonts.check(cssString),
-      loaded: false,
-    };
-    // If font is not loaded, set up a handler to update the font info when the font loads
-    if (!state.fontInfo.loaded) {
-      globalFontSet
-        .load(cssString)
-        .then(this.onFontLoaded.bind(this, state, cssString))
-        .catch(this.onFontLoadError.bind(this, state, cssString));
-      return;
-    }
-  };
-
-  calculateRenderInfo(state: CanvasTextRendererState): RenderInfo {
-    state.lightning2TextRenderer.settings = {
-      text: state.props.text,
-      textAlign: state.props.textAlign,
-      fontFamily: state.props.fontFamily,
-      trFontFace: state.fontInfo?.fontFace,
-      fontSize: state.props.fontSize,
-      fontStyle: [
-        state.props.fontStretch,
-        state.props.fontStyle,
-        state.props.fontWeight,
-      ].join(' '),
-      textColor: getNormalizedRgbaComponents(state.props.color),
-      offsetY: state.props.offsetY,
-      wordWrap: state.props.contain !== 'none',
-      wordWrapWidth:
-        state.props.contain === 'none' ? undefined : state.props.width,
-      letterSpacing: state.props.letterSpacing,
-      lineHeight: state.props.lineHeight ?? null,
-      maxLines: state.props.maxLines,
-      maxHeight:
-        state.props.contain === 'both'
-          ? state.props.height - state.props.offsetY
-          : null,
-      textBaseline: state.props.textBaseline,
-      verticalAlign: state.props.verticalAlign,
-      overflowSuffix: state.props.overflowSuffix,
-      w: state.props.contain !== 'none' ? state.props.width : undefined,
-    };
-    state.renderInfo = state.lightning2TextRenderer.calculateRenderInfo();
-    return state.renderInfo;
-  }
-
-  override renderQuads(): void {
-    // Do nothing. The renderer will render the child node(s) that were created
-    // in the state update.
-    return;
-  }
-
-  override destroyState(state: CanvasTextRendererState): void {
-    if (state.status === 'destroyed') {
-      return;
-    }
-    super.destroyState(state);
-
-    if (state.textureNode) {
-      state.textureNode.destroy();
-      delete state.textureNode;
-    }
-    delete state.renderInfo;
-  }
-  //#endregion Overrides
-
-  /**
-   * Invalidate the layout cache stored in the state. This will cause the text
-   * to be re-rendered on the next update.
-   *
-   * @remarks
-   * This also invalidates the visible window cache.
-   *
-   * @param state
-   */
-  private invalidateLayoutCache(state: CanvasTextRendererState): void {
-    state.renderInfo = undefined;
-    this.setStatus(state, 'loading');
-    this.scheduleUpdateState(state);
-  }
-
-  private onFontLoaded(
-    state: CanvasTextRendererState,
-    cssString: string,
-  ): void {
-    if (cssString !== state.fontInfo?.cssString || !state.fontInfo) {
-      return;
-    }
-    state.fontInfo.loaded = true;
-    this.scheduleUpdateState(state);
-  }
-
-  private onFontLoadError(
-    state: CanvasTextRendererState,
-    cssString: string,
-    error: Error,
-  ): void {
-    if (cssString !== state.fontInfo?.cssString || !state.fontInfo) {
-      return;
-    }
-
-    // Font didn't actually load, but we'll log the error and mark it as loaded
-    // because the browser can still render with a fallback font.
-    state.fontInfo.loaded = true;
-
-    console.error(
-      `CanvasTextRenderer: Error loading font '${state.fontInfo.cssString}'`,
-      error,
-    );
-    this.scheduleUpdateState(state);
-  }
-}