@lightningjs/renderer 3.0.0-beta2 → 3.0.0-beta21

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

@@ -1,840 +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 {
-  type Bound,
-  type Rect,
-  createBound,
-  type BoundWithValid,
-  intersectRect,
-  type RectWithValid,
-  copyRect,
-  boundsOverlap,
-  convertBoundToRect,
-} from '../../../lib/utils.js';
-import {
-  TextRenderer,
-  type TrProps,
-  type TextRendererState,
-  type TrFontProps,
-  type TrPropSetters,
-} from '../TextRenderer.js';
-import { SdfTrFontFace } from '../../font-face-types/SdfTrFontFace/SdfTrFontFace.js';
-import { FLOATS_PER_GLYPH } from './internal/constants.js';
-import { getStartConditions } from './internal/getStartConditions.js';
-import { layoutText } from './internal/layoutText.js';
-import {
-  setRenderWindow,
-  type SdfRenderWindow,
-} from './internal/setRenderWindow.js';
-import type { TrFontFace } from '../../font-face-types/TrFontFace.js';
-import { type FontFamilyMap } from '../../TrFontManager.js';
-import { assertTruthy, mergeColorAlpha } from '../../../../utils.js';
-import type { Stage } from '../../../Stage.js';
-import { WebGlRenderOp } from '../../../renderers/webgl/WebGlRenderOp.js';
-import { BufferCollection } from '../../../renderers/webgl/internal/BufferCollection.js';
-import { Sdf, type SdfShaderProps } from '../../../shaders/webgl/SdfShader.js';
-import type { WebGlCtxTexture } from '../../../renderers/webgl/WebGlCtxTexture.js';
-import { EventEmitter } from '../../../../common/EventEmitter.js';
-import type { Matrix3d } from '../../../lib/Matrix3d.js';
-import type { Dimensions } from '../../../../common/CommonTypes.js';
-import { WebGlRenderer } from '../../../renderers/webgl/WebGlRenderer.js';
-import { calcDefaultLineHeight } from '../../TextRenderingUtils.js';
-import type { WebGlShaderProgram } from '../../../renderers/webgl/WebGlShaderProgram.js';
-import type { WebGlShaderNode } from '../../../renderers/webgl/WebGlShaderNode.js';
-import type { CoreTextNode } from '../../../CoreTextNode.js';
-
-declare module '../TextRenderer.js' {
-  interface TextRendererMap {
-    sdf: SdfTextRenderer;
-  }
-
-  // Add prefixed SDF-specific props to TextRendererDebugProps
-  interface TextRendererDebugProps {
-    sdfShaderDebug: boolean;
-  }
-}
-
-export interface LineCacheItem {
-  codepointIndex: number;
-  maxY: number;
-  maxX: number;
-}
-
-export interface SdfTextRendererState extends TextRendererState {
-  /**
-   * Cache for layout resume points indexed by the `curY` for each line
-   * in the render sequence.
-   *
-   * Allows faster rendering by skipping parts of the layout loop that are
-   * outside of the renderWindow.
-   */
-  lineCache: LineCacheItem[];
-
-  renderWindow: SdfRenderWindow;
-
-  elementBounds: BoundWithValid;
-
-  clippingRect: RectWithValid;
-
-  bufferNumFloats: number;
-
-  bufferNumQuads: number;
-
-  vertexBuffer: Float32Array | undefined;
-
-  webGlBuffers: BufferCollection | null;
-
-  bufferUploaded: boolean;
-
-  distanceRange: number;
-
-  trFontFace: SdfTrFontFace | undefined;
-
-  /**
-   * Resolved line height in logical screen pixel units
-   */
-  resLineHeight: number | undefined;
-}
-
-/**
- * Ephemeral rect object used for calculations
- */
-const tmpRect: Rect = {
-  x: 0,
-  y: 0,
-  width: 0,
-  height: 0,
-};
-
-/**
- * Singleton class for rendering text using signed distance fields.
- *
- * @remarks
- * SdfTextRenderer supports both single-channel and multi-channel signed distance fields.
- */
-export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
-  /**
-   * Map of font family names to a set of font faces.
-   */
-  private ssdfFontFamilies: FontFamilyMap = {};
-  private msdfFontFamilies: FontFamilyMap = {};
-  private fontFamilyArray: FontFamilyMap[] = [
-    this.ssdfFontFamilies,
-    this.msdfFontFamilies,
-  ];
-  private sdfShader: WebGlShaderNode;
-  private rendererBounds: Bound;
-
-  public type: 'canvas' | 'sdf' = 'sdf';
-
-  constructor(stage: Stage) {
-    super(stage);
-    this.stage.shManager.registerShaderType('Sdf', Sdf);
-    this.sdfShader = this.stage.shManager.createShader(
-      'Sdf',
-    ) as WebGlShaderNode;
-    this.rendererBounds = {
-      x1: 0,
-      y1: 0,
-      x2: this.stage.options.appWidth,
-      y2: this.stage.options.appHeight,
-    };
-  }
-
-  //#region Overrides
-  getPropertySetters(): Partial<TrPropSetters<SdfTextRendererState>> {
-    return {
-      fontFamily: (state, value) => {
-        state.props.fontFamily = value;
-        this.releaseFontFace(state);
-        this.invalidateLayoutCache(state);
-      },
-      fontWeight: (state, value) => {
-        state.props.fontWeight = value;
-        this.releaseFontFace(state);
-        this.invalidateLayoutCache(state);
-      },
-      fontStyle: (state, value) => {
-        state.props.fontStyle = value;
-        this.releaseFontFace(state);
-        this.invalidateLayoutCache(state);
-      },
-      fontStretch: (state, value) => {
-        state.props.fontStretch = value;
-        this.releaseFontFace(state);
-        this.invalidateLayoutCache(state);
-      },
-      fontSize: (state, value) => {
-        state.props.fontSize = value;
-        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;
-      },
-      x: (state, value) => {
-        state.props.x = value;
-        if (state.elementBounds.valid) {
-          this.setElementBoundsX(state);
-          // Only schedule an update if the text is not already rendered
-          // (renderWindow is invalid) and the element possibly overlaps the screen
-          // This is to avoid unnecessary updates when we know text is off-screen
-          if (
-            !state.renderWindow.valid &&
-            boundsOverlap(state.elementBounds, this.rendererBounds)
-          ) {
-            this.scheduleUpdateState(state);
-          }
-        }
-      },
-      y: (state, value) => {
-        state.props.y = value;
-        if (state.elementBounds.valid) {
-          this.setElementBoundsY(state);
-          // See x() for explanation
-          if (
-            !state.renderWindow.valid &&
-            boundsOverlap(state.elementBounds, this.rendererBounds)
-          ) {
-            this.scheduleUpdateState(state);
-          }
-        }
-      },
-      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);
-      },
-      scrollable: (state, value) => {
-        state.props.scrollable = value;
-        this.invalidateLayoutCache(state);
-      },
-      scrollY: (state, value) => {
-        state.props.scrollY = value;
-        // Scrolling doesn't need to invalidate any caches, but it does need to
-        // schedule an update
-        this.scheduleUpdateState(state);
-      },
-      letterSpacing: (state, value) => {
-        state.props.letterSpacing = value;
-        this.invalidateLayoutCache(state);
-      },
-      lineHeight: (state, value) => {
-        state.props.lineHeight = value;
-        state.resLineHeight = undefined;
-        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);
-      },
-      debug: (state, value) => {
-        state.props.debug = value;
-      },
-    };
-  }
-
-  override canRenderFont(props: TrFontProps): boolean {
-    // TODO: Support matching on font stretch, weight and style (if/when needed)
-    // For now we just match on the font family name
-    // '$$SDF_FAILURE_TEST$$' is used to test the 'failure' event coming from text
-    const { fontFamily } = props;
-    return (
-      fontFamily in this.ssdfFontFamilies ||
-      fontFamily in this.msdfFontFamilies ||
-      fontFamily === '$$SDF_FAILURE_TEST$$'
-    );
-  }
-
-  override isFontFaceSupported(fontFace: TrFontFace): boolean {
-    return fontFace instanceof SdfTrFontFace;
-  }
-
-  override addFontFace(fontFace: TrFontFace): void {
-    // Make sure the font face is an SDF font face (it should have already passed
-    // the `isFontFaceSupported` check)
-    assertTruthy(fontFace instanceof SdfTrFontFace);
-    const familyName = fontFace.fontFamily;
-    const fontFamiles =
-      fontFace.type === 'ssdf'
-        ? this.ssdfFontFamilies
-        : fontFace.type === 'msdf'
-        ? this.msdfFontFamilies
-        : undefined;
-    if (!fontFamiles) {
-      console.warn(`Invalid font face type: ${fontFace.type as string}`);
-      return;
-    }
-    let faceSet = fontFamiles[familyName];
-    if (!faceSet) {
-      faceSet = new Set();
-      fontFamiles[familyName] = faceSet;
-    }
-    faceSet.add(fontFace);
-  }
-
-  override createState(props: TrProps): SdfTextRendererState {
-    return {
-      props,
-      status: 'initialState',
-      updateScheduled: false,
-      emitter: new EventEmitter(),
-      lineCache: [],
-      forceFullLayoutCalc: false,
-      renderWindow: {
-        screen: {
-          x1: 0,
-          y1: 0,
-          x2: 0,
-          y2: 0,
-        },
-        sdf: {
-          x1: 0,
-          y1: 0,
-          x2: 0,
-          y2: 0,
-        },
-        firstLineIdx: 0,
-        numLines: 0,
-        valid: false,
-      },
-      elementBounds: {
-        x1: 0,
-        y1: 0,
-        x2: 0,
-        y2: 0,
-        valid: false,
-      },
-      clippingRect: {
-        x: 0,
-        y: 0,
-        width: 0,
-        height: 0,
-        valid: false,
-      },
-      bufferNumFloats: 0,
-      bufferNumQuads: 0,
-      vertexBuffer: undefined,
-      webGlBuffers: null,
-      bufferUploaded: false,
-      textH: undefined,
-      textW: undefined,
-      distanceRange: 0,
-      trFontFace: undefined,
-      isRenderable: false,
-      resLineHeight: undefined,
-      debugData: {
-        updateCount: 0,
-        layoutCount: 0,
-        lastLayoutNumCharacters: 0,
-        layoutSum: 0,
-        drawSum: 0,
-        drawCount: 0,
-        bufferSize: 0,
-      },
-    };
-  }
-
-  override updateState(state: SdfTextRendererState): void {
-    let { trFontFace } = state;
-    const { textH, lineCache, debugData, forceFullLayoutCalc } = state;
-    debugData.updateCount++;
-
-    // On the first update call we need to set the status to loading
-    if (state.status === 'initialState') {
-      this.setStatus(state, 'loading');
-    }
-
-    // Resolve font face if we haven't yet
-    if (trFontFace === undefined) {
-      trFontFace = this.resolveFontFace(state.props);
-      state.trFontFace = trFontFace;
-      if (trFontFace === undefined) {
-        const msg = `SdfTextRenderer: Could not resolve font face for family: '${state.props.fontFamily}'`;
-        console.error(msg);
-        this.setStatus(state, 'failed', new Error(msg));
-        return;
-      }
-      trFontFace.texture.setRenderableOwner(state, true);
-    }
-
-    // If the font hasn't been loaded yet, stop here.
-    // Listen for the 'loaded' event and forward fontLoaded event
-    if (trFontFace.loaded === false) {
-      trFontFace.once('loaded', () => {
-        this.scheduleUpdateState(state);
-      });
-      return;
-    }
-
-    // If the font is loaded then so should the data
-    assertTruthy(trFontFace.data, 'Font face data should be loaded');
-    assertTruthy(trFontFace.metrics, 'Font face metrics should be loaded');
-
-    const {
-      text,
-      fontSize,
-      x,
-      y,
-      contain,
-      width,
-      height,
-      verticalAlign,
-      scrollable,
-      overflowSuffix,
-      maxLines,
-    } = state.props;
-
-    // scrollY only has an effect when contain === 'both' and scrollable === true
-    const scrollY = contain === 'both' && scrollable ? state.props.scrollY : 0;
-
-    const { renderWindow } = state;
-
-    /**
-     * The font size of the SDF font face (the basis for SDF space units)
-     */
-    const sdfFontSize = trFontFace.data.info.size;
-
-    /**
-     * Divide screen space units by this to get the SDF space units
-     * Mulitple SDF space units by this to get screen space units
-     */
-    const fontSizeRatio = fontSize / sdfFontSize;
-
-    // If not already resolved, resolve the line height and store it in the state
-    let resLineHeight = state.resLineHeight;
-    if (resLineHeight === undefined) {
-      const lineHeight = state.props.lineHeight;
-      // If lineHeight is undefined, use the maxCharHeight from the font face
-      if (lineHeight === undefined) {
-        resLineHeight = calcDefaultLineHeight(trFontFace.metrics, fontSize);
-      } else {
-        resLineHeight = lineHeight;
-      }
-      state.resLineHeight = resLineHeight;
-    }
-
-    // Needed in renderWindow calculation
-    const sdfLineHeight = resLineHeight / fontSizeRatio;
-
-    state.distanceRange =
-      fontSizeRatio * trFontFace.data.distanceField.distanceRange;
-
-    // Allocate buffers if needed
-    const neededLength = text.length * FLOATS_PER_GLYPH;
-    let vertexBuffer = state.vertexBuffer;
-    if (!vertexBuffer || vertexBuffer.length < neededLength) {
-      vertexBuffer = new Float32Array(neededLength * 2);
-    }
-
-    const elementBounds = state.elementBounds;
-    if (!elementBounds.valid) {
-      this.setElementBoundsX(state);
-      this.setElementBoundsY(state);
-      elementBounds.valid = true;
-    }
-
-    // Return early if we're still viewing inside the established render window
-    // No need to re-render what we've already rendered
-    // (Only if there's an established renderWindow and we're not suppressing early exit)
-    if (!forceFullLayoutCalc && renderWindow.valid) {
-      const rwScreen = renderWindow.screen;
-      if (
-        x + rwScreen.x1 <= elementBounds.x1 &&
-        x + rwScreen.x2 >= elementBounds.x2 &&
-        y - scrollY + rwScreen.y1 <= elementBounds.y1 &&
-        y - scrollY + rwScreen.y2 >= elementBounds.y2
-      ) {
-        this.setStatus(state, 'loaded');
-        return;
-      }
-      // Otherwise invalidate the renderWindow so it can be redone
-      renderWindow.valid = false;
-      this.setStatus(state, 'loading');
-    }
-
-    const { offsetY, textAlign } = state.props;
-
-    // Create a new renderWindow if needed
-    if (!renderWindow.valid) {
-      const isPossiblyOnScreen = boundsOverlap(
-        elementBounds,
-        this.rendererBounds,
-      );
-
-      if (!isPossiblyOnScreen) {
-        // If the element is not possibly on screen, we can skip the layout and rendering completely
-        return;
-      }
-
-      setRenderWindow(
-        renderWindow,
-        x,
-        y,
-        scrollY,
-        resLineHeight,
-        contain === 'both' ? elementBounds.y2 - elementBounds.y1 : 0,
-        elementBounds,
-        fontSizeRatio,
-      );
-      // console.log('newRenderWindow', renderWindow);
-    }
-
-    const start = getStartConditions(
-      sdfFontSize,
-      sdfLineHeight,
-      trFontFace,
-      verticalAlign,
-      offsetY,
-      fontSizeRatio,
-      renderWindow,
-      lineCache,
-      textH,
-    );
-
-    if (!start) {
-      // Nothing to render, return early, but still mark as loaded (since the text is just scrolled
-      // out of view)
-      this.setStatus(state, 'loaded');
-      return;
-    }
-
-    const { letterSpacing } = state.props;
-
-    const out2 = layoutText(
-      start.lineIndex,
-      start.sdfX,
-      start.sdfY,
-      text,
-      textAlign,
-      width,
-      height,
-      fontSize,
-      resLineHeight,
-      letterSpacing,
-      vertexBuffer,
-      contain,
-      lineCache,
-      renderWindow.sdf,
-      trFontFace,
-      forceFullLayoutCalc,
-      scrollable,
-      overflowSuffix,
-      maxLines,
-    );
-
-    state.bufferUploaded = false;
-    state.bufferNumFloats = out2.bufferNumFloats;
-    state.bufferNumQuads = out2.bufferNumQuads;
-    state.vertexBuffer = vertexBuffer;
-    state.renderWindow = renderWindow;
-    debugData.lastLayoutNumCharacters = out2.layoutNumCharacters;
-    debugData.bufferSize = vertexBuffer.byteLength;
-
-    // If we didn't exit early, we know we have completely computed w/h
-    if (out2.fullyProcessed) {
-      state.textW = out2.maxX * fontSizeRatio;
-      state.textH = out2.numLines * sdfLineHeight * fontSizeRatio;
-    }
-
-    // if (state.props.debug.printLayoutTime) {
-    //   debugData.layoutSum += performance.now() - updateStartTime;
-    //   debugData.layoutCount++;
-    // }
-    this.setStatus(state, 'loaded');
-  }
-
-  override renderQuads(node: CoreTextNode): void {
-    const state = node.trState as SdfTextRendererState;
-    if (!state.vertexBuffer) {
-      // Nothing to draw
-      return;
-    }
-
-    const renderer = this.stage.renderer;
-    assertTruthy(renderer instanceof WebGlRenderer);
-
-    const { fontSize, color, contain, scrollable, zIndex, debug } = state.props;
-
-    // scrollY only has an effect when contain === 'both' and scrollable === true
-    const scrollY = contain === 'both' && scrollable ? state.props.scrollY : 0;
-
-    const {
-      textW = 0,
-      textH = 0,
-      distanceRange,
-      vertexBuffer,
-      bufferUploaded,
-      trFontFace,
-      elementBounds,
-    } = state;
-
-    let { webGlBuffers } = state;
-
-    if (!webGlBuffers) {
-      const glw = renderer.glw;
-      const stride = 4 * Float32Array.BYTES_PER_ELEMENT;
-      const webGlBuffer = glw.createBuffer();
-      assertTruthy(webGlBuffer);
-      state.webGlBuffers = new BufferCollection([
-        {
-          buffer: webGlBuffer,
-          attributes: {
-            a_position: {
-              name: 'a_position',
-              size: 2, // 2 components per iteration
-              type: glw.FLOAT, // the data is 32bit floats
-              normalized: false, // don't normalize the data
-              stride, // 0 = move forward size * sizeof(type) each iteration to get the next position
-              offset: 0, // start at the beginning of the buffer
-            },
-            a_textureCoords: {
-              name: 'a_textureCoords',
-              size: 2,
-              type: glw.FLOAT,
-              normalized: false,
-              stride,
-              offset: 2 * Float32Array.BYTES_PER_ELEMENT,
-            },
-          },
-        },
-      ]);
-      state.bufferUploaded = false;
-      assertTruthy(state.webGlBuffers);
-      webGlBuffers = state.webGlBuffers;
-    }
-
-    if (!bufferUploaded) {
-      const glw = renderer.glw;
-
-      const buffer = webGlBuffers?.getBuffer('a_textureCoords') ?? null;
-      glw.arrayBufferData(buffer, vertexBuffer, glw.STATIC_DRAW);
-      state.bufferUploaded = true;
-    }
-
-    assertTruthy(trFontFace);
-    if (scrollable && contain === 'both') {
-      assertTruthy(elementBounds.valid);
-      const elementRect = convertBoundToRect(elementBounds, tmpRect);
-
-      if (node.clippingRect.valid) {
-        state.clippingRect.valid = true;
-        node.clippingRect = intersectRect(
-          node.clippingRect,
-          elementRect,
-          state.clippingRect,
-        );
-      } else {
-        state.clippingRect.valid = true;
-        node.clippingRect = copyRect(elementRect, state.clippingRect);
-      }
-    }
-
-    const renderOp = new WebGlRenderOp(
-      renderer,
-      {
-        sdfShaderProps: {
-          transform: node.globalTransform!.getFloatArr(),
-          color: mergeColorAlpha(color, node.worldAlpha),
-          size: fontSize / (trFontFace.data?.info.size || 0),
-          scrollY,
-          distanceRange,
-          debug: debug.sdfShaderDebug,
-        },
-        sdfBuffers: state.webGlBuffers as BufferCollection,
-        shader: this.sdfShader,
-        alpha: node.worldAlpha,
-        clippingRect: node.clippingRect,
-        height: textH,
-        width: textW,
-        rtt: false,
-        parentHasRenderTexture: node.parentHasRenderTexture,
-        framebufferDimensions: node.framebufferDimensions,
-      },
-      0,
-    );
-
-    const texture = state.trFontFace?.texture;
-    assertTruthy(texture);
-    const ctxTexture = texture.ctxTexture;
-
-    renderOp.addTexture(ctxTexture as WebGlCtxTexture);
-    renderOp.numQuads = state.bufferNumQuads;
-
-    renderer.addRenderOp(renderOp);
-
-    // if (!debug.disableScissor) {
-    //   renderer.enableScissor(
-    //     visibleRect.x,
-    //     visibleRect.y,
-    //     visibleRect.w,
-    //     visibleRect.h,
-    //   );
-    // }
-
-    // Draw the arrays
-    // gl.drawArrays(
-    //   gl.TRIANGLES, // Primitive type
-    //   0,
-    //   bufferNumVertices, // Number of verticies
-    // );
-
-    // renderer.disableScissor();
-
-    // if (debug.showElementRect) {
-    //   this.renderer.drawBorder(
-    //     Colors.Blue,
-    //     elementRect.x,
-    //     elementRect.y,
-    //     elementRect.w,
-    //     elementRect.h,
-    //   );
-    // }
-
-    // if (debug.showVisibleRect) {
-    //   this.renderer.drawBorder(
-    //     Colors.Green,
-    //     visibleRect.x,
-    //     visibleRect.y,
-    //     visibleRect.w,
-    //     visibleRect.h,
-    //   );
-    // }
-
-    // if (debug.showRenderWindow && renderWindow) {
-    //   this.renderer.drawBorder(
-    //     Colors.Red,
-    //     x + renderWindow.x1,
-    //     y + renderWindow.y1 - scrollY,
-    //     x + renderWindow.x2 - (x + renderWindow.x1),
-    //     y + renderWindow.y2 - scrollY - (y + renderWindow.y1 - scrollY),
-    //   );
-    // }
-    // if (debug.printLayoutTime) {
-    //   debugData.drawSum += performance.now() - drawStartTime;
-    //   debugData.drawCount++;
-    // }
-  }
-
-  override setIsRenderable(
-    state: SdfTextRendererState,
-    renderable: boolean,
-  ): void {
-    super.setIsRenderable(state, renderable);
-    state.trFontFace?.texture.setRenderableOwner(state, renderable);
-  }
-
-  override destroyState(state: SdfTextRendererState): void {
-    super.destroyState(state);
-    // If there's a Font Face assigned we must free the owner relation to its texture
-    state.trFontFace?.texture.setRenderableOwner(state, false);
-  }
-  //#endregion Overrides
-
-  public resolveFontFace(props: TrFontProps): SdfTrFontFace | undefined {
-    return this.stage.fontManager.resolveFontFace(
-      this.fontFamilyArray,
-      props,
-      'sdf',
-    ) as SdfTrFontFace | undefined;
-  }
-
-  /**
-   * Release the loaded SDF font face
-   *
-   * @param state
-   */
-  protected releaseFontFace(state: SdfTextRendererState) {
-    state.resLineHeight = undefined;
-    if (state.trFontFace) {
-      state.trFontFace.texture.setRenderableOwner(state, false);
-      state.trFontFace = undefined;
-    }
-  }
-
-  /**
-   * Invalidate the layout cache stored in the state. This will cause the text
-   * to be re-layed out on the next update.
-   *
-   * @remarks
-   * This also invalidates the visible window cache.
-   *
-   * @param state
-   */
-  protected invalidateLayoutCache(state: SdfTextRendererState): void {
-    state.renderWindow.valid = false;
-    state.elementBounds.valid = false;
-    state.textH = undefined;
-    state.textW = undefined;
-    state.lineCache = [];
-    this.setStatus(state, 'loading');
-    this.scheduleUpdateState(state);
-  }
-
-  protected setElementBoundsX(state: SdfTextRendererState): void {
-    const { x, contain, width } = state.props;
-    const { elementBounds } = state;
-    elementBounds.x1 = x;
-    elementBounds.x2 = contain !== 'none' ? x + width : Infinity;
-  }
-
-  protected setElementBoundsY(state: SdfTextRendererState): void {
-    const { y, contain, height } = state.props;
-    const { elementBounds } = state;
-    elementBounds.y1 = y;
-    elementBounds.y2 = contain === 'both' ? y + height : Infinity;
-  }
-}