@lightningjs/renderer 0.4.1 → 0.5.0

package/src/core/lib/Matrix3d.ts

@@ -0,0 +1,290 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+
+// Matrix3d is a 3x3 matrix in column-major order because that's how WebGL likes it.
+// The matrix is stored in a Float32Array in the following order:
+// | 0 3 6 |
+// | 1 4 7 |
+// | 2 5 8 |
+// The following constants are used to index into the array in a row-major way.
+const m0 = 0;
+const m1 = 3;
+const m2 = 6;
+const m3 = 1;
+const m4 = 4;
+const m5 = 7;
+const m6 = 2;
+const m7 = 5;
+const m8 = 8;
+
+/**
+ * A 3x3 matrix representing a 2D transformation.
+ *
+ * @remarks
+ * The matrix is stored in column-major order in the `data` property which can
+ * be passed directly to a WebGL shader uniform.
+ *
+ * The matrix is stored in a Float32Array in the following index order:
+ * | 0 3 6 |
+ * | 1 4 7 |
+ * | 2 5 8 |
+ *
+ * Only the first two rows are really used for the transformation. The last row is
+ * generally always `[0, 0, 1]` if you only use the 2D transformation methods
+ * provided by this class.
+ *
+ * For convenience, entries in the first two rows can be accessed by the following
+ * getter properties:
+ * | ta tb tx |
+ * | tc td ty |
+ * | 0  0  1  |
+ */
+export class Matrix3d {
+  public data: Float32Array;
+
+  /**
+   * Creates a new 3x3 matrix.
+   *
+   * @param entries Row-major 3x3 matrix
+   */
+  public constructor(
+    entries?:
+      | [number, number, number, number, number, number, number, number, number]
+      | Float32Array,
+  ) {
+    if (entries) {
+      // Transpose the input matrix so that it's in column-major order.
+      this.data = new Float32Array(9);
+      this.data[m0] = entries[0]!;
+      this.data[m1] = entries[3]!;
+      this.data[m2] = entries[6]!;
+      this.data[m3] = entries[1]!;
+      this.data[m4] = entries[4]!;
+      this.data[m5] = entries[7]!;
+      this.data[m6] = entries[2]!;
+      this.data[m7] = entries[5]!;
+      this.data[m8] = entries[8]!;
+    } else {
+      this.data = new Float32Array(9);
+    }
+  }
+
+  /**
+   * Returns a temporary matrix that can be used for calculations.
+   *
+   * @remarks
+   * This is useful for avoiding allocations in tight loops.
+   *
+   * The matrix is not guaranteed to be the same between calls.
+   *
+   * @returns
+   */
+  public static get temp(): Matrix3d {
+    return tempMatrix;
+  }
+
+  public static multiply(a: Matrix3d, b: Matrix3d, out?: Matrix3d): Matrix3d {
+    const e0 =
+      a.data[m0]! * b.data[m0]! +
+      a.data[m1]! * b.data[m3]! +
+      a.data[m2]! * b.data[m6]!;
+    const e1 =
+      a.data[m0]! * b.data[m1]! +
+      a.data[m1]! * b.data[m4]! +
+      a.data[m2]! * b.data[m7]!;
+    const e2 =
+      a.data[m0]! * b.data[m2]! +
+      a.data[m1]! * b.data[m5]! +
+      a.data[m2]! * b.data[m8]!;
+    const e3 =
+      a.data[m3]! * b.data[m0]! +
+      a.data[m4]! * b.data[m3]! +
+      a.data[m5]! * b.data[m6]!;
+    const e4 =
+      a.data[m3]! * b.data[m1]! +
+      a.data[m4]! * b.data[m4]! +
+      a.data[m5]! * b.data[m7]!;
+    const e5 =
+      a.data[m3]! * b.data[m2]! +
+      a.data[m4]! * b.data[m5]! +
+      a.data[m5]! * b.data[m8]!;
+    const e6 =
+      a.data[m6]! * b.data[m0]! +
+      a.data[m7]! * b.data[m3]! +
+      a.data[m8]! * b.data[m6]!;
+    const e7 =
+      a.data[m6]! * b.data[m1]! +
+      a.data[m7]! * b.data[m4]! +
+      a.data[m8]! * b.data[m7]!;
+    const e8 =
+      a.data[m6]! * b.data[m2]! +
+      a.data[m7]! * b.data[m5]! +
+      a.data[m8]! * b.data[m8]!;
+    if (!out) {
+      out = new Matrix3d();
+    }
+    out.data[m0] = e0;
+    out.data[m1] = e1;
+    out.data[m2] = e2;
+    out.data[m3] = e3;
+    out.data[m4] = e4;
+    out.data[m5] = e5;
+    out.data[m6] = e6;
+    out.data[m7] = e7;
+    out.data[m8] = e8;
+    return out;
+  }
+
+  public static identity(out?: Matrix3d): Matrix3d {
+    if (!out) {
+      out = new Matrix3d();
+    }
+    out.data[m0] = 1;
+    out.data[m1] = 0;
+    out.data[m2] = 0;
+    out.data[m3] = 0;
+    out.data[m4] = 1;
+    out.data[m5] = 0;
+    out.data[m6] = 0;
+    out.data[m7] = 0;
+    out.data[m8] = 1;
+    return out;
+  }
+
+  public static translate(x: number, y: number, out?: Matrix3d): Matrix3d {
+    if (!out) {
+      out = new Matrix3d();
+    }
+    out.data[m0] = 1;
+    out.data[m1] = 0;
+    out.data[m2] = x;
+    out.data[m3] = 0;
+    out.data[m4] = 1;
+    out.data[m5] = y;
+    out.data[m6] = 0;
+    out.data[m7] = 0;
+    out.data[m8] = 1;
+    return out;
+  }
+
+  public static scale(sx: number, sy: number, out?: Matrix3d): Matrix3d {
+    if (!out) {
+      out = new Matrix3d();
+    }
+    out.data[m0] = sx;
+    out.data[m1] = 0;
+    out.data[m2] = 0;
+    out.data[m3] = 0;
+    out.data[m4] = sy;
+    out.data[m5] = 0;
+    out.data[m6] = 0;
+    out.data[m7] = 0;
+    out.data[m8] = 1;
+    return out;
+  }
+
+  public static rotate(angle: number, out?: Matrix3d): Matrix3d {
+    const cos = Math.cos(angle);
+    const sin = Math.sin(angle);
+    if (!out) {
+      out = new Matrix3d();
+    }
+    out.data[m0] = cos;
+    out.data[m1] = -sin;
+    out.data[m2] = 0;
+    out.data[m3] = sin;
+    out.data[m4] = cos;
+    out.data[m5] = 0;
+    out.data[m6] = 0;
+    out.data[m7] = 0;
+    out.data[m8] = 1;
+    return out;
+  }
+
+  public static copy(
+    src: Matrix3d,
+    dst?: Matrix3d,
+    transpose?: boolean,
+  ): Matrix3d {
+    if (!dst) {
+      dst = new Matrix3d();
+    }
+    dst.data[0] = src.data[0]!;
+    dst.data[1] = src.data[1]!;
+    dst.data[2] = src.data[2]!;
+    dst.data[3] = src.data[3]!;
+    dst.data[4] = src.data[4]!;
+    dst.data[5] = src.data[5]!;
+    dst.data[6] = src.data[6]!;
+    dst.data[7] = src.data[7]!;
+    dst.data[8] = src.data[8]!;
+    return dst;
+  }
+
+  public translate(x: number, y: number): Matrix3d {
+    this.data[m2] = this.data[m0]! * x + this.data[m1]! * y + this.data[m2]!;
+    this.data[m5] = this.data[m3]! * x + this.data[m4]! * y + this.data[m5]!;
+    return this;
+  }
+
+  public scale(sx: number, sy: number): Matrix3d {
+    this.data[m0] = this.data[m0]! * sx;
+    this.data[m1] = this.data[m1]! * sy;
+    this.data[m3] = this.data[m3]! * sx;
+    this.data[m4] = this.data[m4]! * sy;
+    return this;
+  }
+
+  public rotate(angle: number): Matrix3d {
+    if (angle === 0 || !((angle % Math.PI) * 2)) {
+      return this;
+    }
+    const cos = Math.cos(angle);
+    const sin = Math.sin(angle);
+    const e0 = this.data[m0]! * cos + this.data[m1]! * sin;
+    const e1 = this.data[m1]! * cos - this.data[m0]! * sin;
+    const e3 = this.data[m3]! * cos + this.data[m4]! * sin;
+    const e4 = this.data[m4]! * cos - this.data[m3]! * sin;
+    this.data[m0] = e0;
+    this.data[m1] = e1;
+    this.data[m3] = e3;
+    this.data[m4] = e4;
+    return this;
+  }
+
+  public multiply(other: Matrix3d): Matrix3d {
+    return Matrix3d.multiply(this, other, this);
+  }
+
+  get tx(): number {
+    return this.data[m2]!;
+  }
+
+  get ty(): number {
+    return this.data[m5]!;
+  }
+
+  get ta(): number {
+    return this.data[m0]!;
+  }
+
+  get tb(): number {
+    return this.data[m1]!;
+  }
+
+  get tc(): number {
+    return this.data[m3]!;
+  }
+
+  get td(): number {
+    return this.data[m4]!;
+  }
+
+  transformPoint(x: number, y: number): [number, number] {
+    return [
+      this.data[m0]! * x + this.data[m1]! * y + this.data[m2]!,
+      this.data[m3]! * x + this.data[m4]! * y + this.data[m3]!,
+    ];
+  }
+}
+
+const tempMatrix = new Matrix3d();

package/src/core/lib/utils.ts

@@ -56,6 +56,10 @@ export const norm = (rgba: number): number => {
   return v;
 };
 
+export function getNormalizedAlphaComponent(rgba: number): number {
+  return (rgba & 0xff) / 255.0;
+}
+
 /**
  * Get a CSS color string from a RGBA color
  *

package/src/core/renderers/CoreRenderer.ts

@@ -39,15 +39,13 @@ export interface QuadOptions {
   shader: CoreShader | null;
   shaderProps: Record<string, unknown> | null;
   alpha: number;
-  scale: number;
   clippingRect: Rect | null;
-  wpx: number;
-  wpy: number;
+  tx: number;
+  ty: number;
   ta: number;
   tb: number;
   tc: number;
   td: number;
-  worldScale: number;
 }
 
 export abstract class CoreRenderer {

package/src/core/renderers/webgl/WebGlCoreRenderer.ts

@@ -23,10 +23,7 @@ import {
   hasOwn,
   mergeColorAlphaPremultiplied,
 } from '../../../utils.js';
-import {
-  CoreRenderer,
-  type QuadOptions as QuadOptions,
-} from '../CoreRenderer.js';
+import { CoreRenderer, type QuadOptions } from '../CoreRenderer.js';
 import { WebGlCoreRenderOp } from './WebGlCoreRenderOp.js';
 import type { CoreContextTexture } from '../CoreContextTexture.js';
 import {
@@ -220,7 +217,6 @@ export class WebGlCoreRenderer extends CoreRenderer {
     const {
       width,
       height,
-      clippingRect,
       colorTl,
       colorTr,
       colorBl,
@@ -229,8 +225,9 @@ export class WebGlCoreRenderer extends CoreRenderer {
       shader,
       shaderProps,
       alpha,
-      wpx,
-      wpy,
+      clippingRect,
+      tx,
+      ty,
       ta,
       tb,
       tc,
@@ -331,8 +328,8 @@ export class WebGlCoreRenderer extends CoreRenderer {
     // render quad advanced
     if (tb !== 0 || tc !== 0) {
       // Upper-Left
-      fQuadBuffer[bufferIdx++] = wpx; // vertexX
-      fQuadBuffer[bufferIdx++] = wpy; // vertexY
+      fQuadBuffer[bufferIdx++] = tx; // vertexX
+      fQuadBuffer[bufferIdx++] = ty; // vertexY
       fQuadBuffer[bufferIdx++] = texCoordX1; // texCoordX
       fQuadBuffer[bufferIdx++] = texCoordY1; // texCoordY
       uiQuadBuffer[bufferIdx++] = mergeColorAlphaPremultiplied(
@@ -343,8 +340,8 @@ export class WebGlCoreRenderer extends CoreRenderer {
       fQuadBuffer[bufferIdx++] = textureIdx; // texIndex
 
       // Upper-Right
-      fQuadBuffer[bufferIdx++] = wpx + width * ta;
-      fQuadBuffer[bufferIdx++] = wpy + width * tc;
+      fQuadBuffer[bufferIdx++] = tx + width * ta;
+      fQuadBuffer[bufferIdx++] = ty + width * tc;
       fQuadBuffer[bufferIdx++] = texCoordX2;
       fQuadBuffer[bufferIdx++] = texCoordY1;
       uiQuadBuffer[bufferIdx++] = mergeColorAlphaPremultiplied(
@@ -355,8 +352,8 @@ export class WebGlCoreRenderer extends CoreRenderer {
       fQuadBuffer[bufferIdx++] = textureIdx;
 
       // Lower-Left
-      fQuadBuffer[bufferIdx++] = wpx + height * tb;
-      fQuadBuffer[bufferIdx++] = wpy + height * td;
+      fQuadBuffer[bufferIdx++] = tx + height * tb;
+      fQuadBuffer[bufferIdx++] = ty + height * td;
       fQuadBuffer[bufferIdx++] = texCoordX1;
       fQuadBuffer[bufferIdx++] = texCoordY2;
       uiQuadBuffer[bufferIdx++] = mergeColorAlphaPremultiplied(
@@ -367,8 +364,8 @@ export class WebGlCoreRenderer extends CoreRenderer {
       fQuadBuffer[bufferIdx++] = textureIdx;
 
       // Lower-Right
-      fQuadBuffer[bufferIdx++] = wpx + width * ta + height * tb;
-      fQuadBuffer[bufferIdx++] = wpy + width * tc + height * td;
+      fQuadBuffer[bufferIdx++] = tx + width * ta + height * tb;
+      fQuadBuffer[bufferIdx++] = ty + width * tc + height * td;
       fQuadBuffer[bufferIdx++] = texCoordX2;
       fQuadBuffer[bufferIdx++] = texCoordY2;
       uiQuadBuffer[bufferIdx++] = mergeColorAlphaPremultiplied(
@@ -380,12 +377,12 @@ export class WebGlCoreRenderer extends CoreRenderer {
     } else {
       // Calculate the right corner of the quad
       // multiplied by the scale
-      const rightCornerX = wpx + width * ta;
-      const rightCornerY = wpy + height * td;
+      const rightCornerX = tx + width * ta;
+      const rightCornerY = ty + height * td;
 
       // Upper-Left
-      fQuadBuffer[bufferIdx++] = wpx; // vertexX
-      fQuadBuffer[bufferIdx++] = wpy; // vertexY
+      fQuadBuffer[bufferIdx++] = tx; // vertexX
+      fQuadBuffer[bufferIdx++] = ty; // vertexY
       fQuadBuffer[bufferIdx++] = texCoordX1; // texCoordX
       fQuadBuffer[bufferIdx++] = texCoordY1; // texCoordY
       uiQuadBuffer[bufferIdx++] = mergeColorAlphaPremultiplied(
@@ -397,7 +394,7 @@ export class WebGlCoreRenderer extends CoreRenderer {
 
       // Upper-Right
       fQuadBuffer[bufferIdx++] = rightCornerX;
-      fQuadBuffer[bufferIdx++] = wpy;
+      fQuadBuffer[bufferIdx++] = ty;
       fQuadBuffer[bufferIdx++] = texCoordX2;
       fQuadBuffer[bufferIdx++] = texCoordY1;
       uiQuadBuffer[bufferIdx++] = mergeColorAlphaPremultiplied(
@@ -408,7 +405,7 @@ export class WebGlCoreRenderer extends CoreRenderer {
       fQuadBuffer[bufferIdx++] = textureIdx;
 
       // Lower-Left
-      fQuadBuffer[bufferIdx++] = wpx;
+      fQuadBuffer[bufferIdx++] = tx;
       fQuadBuffer[bufferIdx++] = rightCornerY;
       fQuadBuffer[bufferIdx++] = texCoordX1;
       fQuadBuffer[bufferIdx++] = texCoordY2;

package/src/core/renderers/webgl/WebGlCoreShader.ts

@@ -282,9 +282,9 @@ export abstract class WebGlCoreShader extends CoreShader {
     }
   }
 
-  setUniform(name: string, value: any): void {
+  setUniform(name: string, ...value: any[]): void {
     // @ts-expect-error Typing of args is too funky apparently for TS
-    this.gl[this.uniformTypes[name]](this.uniformLocations[name], value);
+    this.gl[this.uniformTypes[name]](this.uniformLocations[name], ...value);
   }
 
   bindBufferCollection(buffer: BufferCollection) {

package/src/core/renderers/webgl/shaders/SdfShader.ts

@@ -16,13 +16,14 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
 import { getNormalizedRgbaComponents } from '../../../lib/utils.js';
 import type { WebGlCoreCtxTexture } from '../WebGlCoreCtxTexture.js';
 import type { WebGlCoreRenderer } from '../WebGlCoreRenderer.js';
 import { WebGlCoreShader } from '../WebGlCoreShader.js';
 import type { ShaderProgramSources } from '../internal/ShaderUtils.js';
 
+const IDENTITY_MATRIX_3x3 = new Float32Array([1, 0, 0, 0, 1, 0, 0, 0, 1]);
+
 declare module '../../../CoreShaderManager.js' {
   interface ShaderMap {
     SdfShader: typeof SdfShader;
@@ -33,7 +34,8 @@ declare module '../../../CoreShaderManager.js' {
  * Properties of the {@link SdfShader}
  */
 export interface SdfShaderProps {
-  offset?: [number, number];
+  transform?: Float32Array;
+  scrollY?: number;
   /**
    * Color in RGBA format
    *
@@ -65,9 +67,10 @@ export class SdfShader extends WebGlCoreShader {
       attributes: ['a_position', 'a_textureCoordinate'],
       uniforms: [
         { name: 'u_resolution', uniform: 'uniform2fv' },
+        { name: 'u_transform', uniform: 'uniformMatrix3fv' },
+        { name: 'u_scrollY', uniform: 'uniform1f' },
         { name: 'u_pixelRatio', uniform: 'uniform1f' },
         { name: 'u_texture', uniform: 'uniform2f' },
-        { name: 'u_offset', uniform: 'uniform2fv' },
         { name: 'u_color', uniform: 'uniform4fv' },
         { name: 'u_size', uniform: 'uniform1f' },
         { name: 'u_distanceRange', uniform: 'uniform1f' },
@@ -85,8 +88,10 @@ export class SdfShader extends WebGlCoreShader {
   protected override bindProps(props: SdfShaderProps): void {
     const resolvedProps = SdfShader.resolveDefaults(props);
     for (const key in resolvedProps) {
-      if (key === 'offset') {
-        this.setUniform('u_offset', resolvedProps[key]);
+      if (key === 'transform') {
+        this.setUniform('u_transform', false, resolvedProps[key]);
+      } else if (key === 'scrollY') {
+        this.setUniform('u_scrollY', resolvedProps[key]);
       } else if (key === 'color') {
         const components = getNormalizedRgbaComponents(resolvedProps.color);
         this.setUniform('u_color', components);
@@ -104,7 +109,8 @@ export class SdfShader extends WebGlCoreShader {
     props: SdfShaderProps = {},
   ): Required<SdfShaderProps> {
     return {
-      offset: props.offset ?? [0.0, 0.0],
+      transform: props.transform ?? IDENTITY_MATRIX_3x3,
+      scrollY: props.scrollY ?? 0,
       color: props.color ?? 0xffffffff,
       size: props.size ?? 16,
       distanceRange: props.distanceRange ?? 1.0,
@@ -119,15 +125,18 @@ export class SdfShader extends WebGlCoreShader {
       attribute vec2 a_position;
       attribute vec2 a_textureCoordinate;
 
-      uniform vec2 u_offset;
       uniform vec2 u_resolution;
+      uniform mat3 u_transform;
+      uniform float u_scrollY;
       uniform float u_pixelRatio;
       uniform float u_size;
 
       varying vec2 v_texcoord;
 
       void main() {
-        gl_Position = vec4(((a_position * u_size + u_offset) * u_pixelRatio / u_resolution * 2.0 - 1.0) * vec2(1, -1), 0, 1);
+        vec2 scrolledPosition = a_position * u_size - vec2(0, u_scrollY);
+        vec2 transformedPosition = (u_transform * vec3(scrolledPosition, 1)).xy;
+        gl_Position = vec4((transformedPosition * u_pixelRatio / u_resolution * 2.0 - 1.0) * vec2(1, -1), 0, 1);
         v_texcoord = a_textureCoordinate;
       }
     `,

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

@@ -20,12 +20,14 @@
 import { EventEmitter } from '../../../common/EventEmitter.js';
 import { assertTruthy } from '../../../utils.js';
 import type { Stage } from '../../Stage.js';
+import type { Matrix3d } from '../../lib/Matrix3d.js';
 import {
   intersectRect,
   type Bound,
   intersectBound,
   getNormalizedRgbaComponents,
   type Rect,
+  getNormalizedAlphaComponent,
 } from '../../lib/utils.js';
 import type { ImageTexture } from '../../textures/ImageTexture.js';
 import type { TrFontFace } from '../font-face-types/TrFontFace.js';
@@ -456,7 +458,9 @@ export class CanvasTextRenderer extends TextRenderer<CanvasTextRendererState> {
 
   override renderQuads(
     state: CanvasTextRendererState,
+    transform: Matrix3d,
     clippingRect: Rect | null,
+    alpha: number,
   ): void {
     const { stage } = this;
 
@@ -498,11 +502,15 @@ export class CanvasTextRenderer extends TextRenderer<CanvasTextRendererState> {
     const renderWindowHeight = renderWindow.y2 - renderWindow.y1;
     const pageSize = renderWindowHeight / 3.0;
 
-    const { zIndex, alpha } = state.props;
+    const { zIndex, color } = state.props;
+
+    // Color alpha of text is not properly rendered to the Canvas texture, so we
+    // need to apply it here.
+    const combinedAlpha = alpha * getNormalizedAlphaComponent(color);
 
     if (canvasPages[0].valid) {
       this.stage.renderer.addRenderable({
-        alpha,
+        alpha: combinedAlpha,
         clippingRect,
         colorBl: 0xffffffff,
         colorBr: 0xffffffff,
@@ -515,19 +523,17 @@ export class CanvasTextRenderer extends TextRenderer<CanvasTextRendererState> {
         shader: null,
         shaderProps: null,
         zIndex,
-        worldScale: 1,
-        scale: 1,
-        wpx: x,
-        wpy: y - scrollY + renderWindow.y1,
-        ta: 1,
-        tb: 0,
-        tc: 0,
-        td: 1,
+        tx: transform.tx,
+        ty: transform.ty - scrollY + renderWindow.y1,
+        ta: transform.ta,
+        tb: transform.tb,
+        tc: transform.tc,
+        td: transform.td,
       });
     }
     if (canvasPages[1].valid) {
       this.stage.renderer.addRenderable({
-        alpha,
+        alpha: combinedAlpha,
         clippingRect,
         colorBl: 0xffffffff,
         colorBr: 0xffffffff,
@@ -540,19 +546,17 @@ export class CanvasTextRenderer extends TextRenderer<CanvasTextRendererState> {
         shader: null,
         shaderProps: null,
         zIndex,
-        worldScale: 1,
-        scale: 1,
-        wpx: x,
-        wpy: y - scrollY + renderWindow.y1 + pageSize,
-        ta: 1,
-        tb: 0,
-        tc: 0,
-        td: 1,
+        tx: transform.tx,
+        ty: transform.ty - scrollY + renderWindow.y1 + pageSize,
+        ta: transform.ta,
+        tb: transform.tb,
+        tc: transform.tc,
+        td: transform.td,
       });
     }
     if (canvasPages[2].valid) {
       this.stage.renderer.addRenderable({
-        alpha,
+        alpha: combinedAlpha,
         clippingRect,
         colorBl: 0xffffffff,
         colorBr: 0xffffffff,
@@ -565,14 +569,12 @@ export class CanvasTextRenderer extends TextRenderer<CanvasTextRendererState> {
         shader: null,
         shaderProps: null,
         zIndex,
-        worldScale: 1,
-        scale: 1,
-        wpx: x,
-        wpy: y - scrollY + renderWindow.y1 + pageSize + pageSize,
-        ta: 1,
-        tb: 0,
-        tc: 0,
-        td: 1,
+        tx: transform.tx,
+        ty: transform.ty - scrollY + renderWindow.y1 + pageSize + pageSize,
+        ta: transform.ta,
+        tb: transform.tb,
+        tc: transform.tc,
+        td: transform.td,
       });
     }