@lightningjs/renderer 0.7.5 → 0.7.6

package/src/main-api/INode.ts

@@ -1,499 +1,499 @@
-/*
- * 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 { IEventEmitter } from '@lightningjs/threadx';
-import type { IAnimationController } from '../common/IAnimationController.js';
-import type { ShaderRef, TextureRef } from './RendererMain.js';
-import type {
-  TextRendererMap,
-  TrProps,
-} from '../core/text-rendering/renderers/TextRenderer.js';
-import type { AnimationSettings } from '../core/animations/CoreAnimation.js';
-
-/**
- * Writable properties of a Node.
- */
-export interface INodeWritableProps {
-  /**
-   * The x coordinate of the Node's Mount Point.
-   *
-   * @remarks
-   * See {@link mountX} and {@link mountY} for more information about setting
-   * the Mount Point.
-   *
-   * @default `0`
-   */
-  x: number;
-  /**
-   * The y coordinate of the Node's Mount Point.
-   *
-   * @remarks
-   * See {@link mountX} and {@link mountY} for more information about setting
-   * the Mount Point.
-   *
-   * @default `0`
-   */
-  y: number;
-  /**
-   * The width of the Node.
-   *
-   * @default `0`
-   */
-  width: number;
-  /**
-   * The height of the Node.
-   *
-   * @default `0`
-   */
-  height: number;
-  /**
-   * The alpha opacity of the Node.
-   *
-   * @remarks
-   * The alpha value is a number between 0 and 1, where 0 is fully transparent
-   * and 1 is fully opaque.
-   *
-   * @default `1`
-   */
-  alpha: number;
-  /**
-   * Clipping Mode
-   *
-   * @remarks
-   * Enable Clipping Mode when you want to prevent the drawing of a Node and
-   * its descendants from overflowing outside of the Node's x/y/width/height
-   * bounds.
-   *
-   * For WebGL, clipping is implemented using the high-performance WebGL
-   * operation scissor. As a consequence, clipping does not work for
-   * non-rectangular areas. So, if the element is rotated
-   * (by itself or by any of its ancestors), clipping will not work as intended.
-   *
-   * TODO: Add support for non-rectangular clipping either automatically or
-   * via Render-To-Texture.
-   *
-   * @default `false`
-   */
-  clipping: boolean;
-  /**
-   * The color of the Node.
-   *
-   * @remarks
-   * The color value is a number in the format 0xRRGGBBAA, where RR is the red
-   * component, GG is the green component, BB is the blue component, and AA is
-   * the alpha component.
-   *
-   * Gradient colors may be set by setting the different color sub-properties:
-   * {@link colorTop}, {@link colorBottom}, {@link colorLeft}, {@link colorRight},
-   * {@link colorTl}, {@link colorTr}, {@link colorBr}, {@link colorBl} accordingly.
-   *
-   * @default `0xffffffff` (opaque white)
-   */
-  color: number;
-  /**
-   * The color of the top edge of the Node for gradient rendering.
-   *
-   * @remarks
-   * See {@link color} for more information about color values and gradient
-   * rendering.
-   */
-  colorTop: number;
-  /**
-   * The color of the bottom edge of the Node for gradient rendering.
-   *
-   * @remarks
-   * See {@link color} for more information about color values and gradient
-   * rendering.
-   */
-  colorBottom: number;
-  /**
-   * The color of the left edge of the Node for gradient rendering.
-   *
-   * @remarks
-   * See {@link color} for more information about color values and gradient
-   * rendering.
-   */
-  colorLeft: number;
-  /**
-   * The color of the right edge of the Node for gradient rendering.
-   *
-   * @remarks
-   * See {@link color} for more information about color values and gradient
-   * rendering.
-   */
-  colorRight: number;
-  /**
-   * The color of the top-left corner of the Node for gradient rendering.
-   *
-   * @remarks
-   * See {@link color} for more information about color values and gradient
-   * rendering.
-   */
-  colorTl: number;
-  /**
-   * The color of the top-right corner of the Node for gradient rendering.
-   *
-   * @remarks
-   * See {@link color} for more information about color values and gradient
-   * rendering.
-   */
-  colorTr: number;
-  /**
-   * The color of the bottom-right corner of the Node for gradient rendering.
-   *
-   * @remarks
-   * See {@link color} for more information about color values and gradient
-   * rendering.
-   */
-  colorBr: number;
-  /**
-   * The color of the bottom-left corner of the Node for gradient rendering.
-   *
-   * @remarks
-   * See {@link color} for more information about color values and gradient
-   * rendering.
-   */
-  colorBl: number;
-  /**
-   * The Node's parent Node.
-   *
-   * @remarks
-   * The value `null` indicates that the Node has no parent. This may either be
-   * because the Node is the root Node of the scene graph, or because the Node
-   * has been removed from the scene graph.
-   *
-   * In order to make sure that a Node can be rendered on the screen, it must
-   * be added to the scene graph by setting it's parent property to a Node that
-   * is already in the scene graph such as the root Node.
-   *
-   * @default `null`
-   */
-  parent: INode | null;
-  /**
-   * The Node's z-index.
-   *
-   * @remarks
-   * TBD
-   */
-  zIndex: number;
-  /**
-   * The Node's Texture.
-   *
-   * @remarks
-   * The `texture` defines a rasterized image that is contained within the
-   * {@link width} and {@link height} dimensions of the Node. If null, the
-   * Node will use an opaque white {@link ColorTexture} when being drawn, which
-   * essentially enables colors (including gradients) to be drawn.
-   *
-   * If set, by default, the texture will be drawn, as is, stretched to the
-   * dimensions of the Node. This behavior can be modified by setting the TBD
-   * and TBD properties.
-   *
-   * To create a Texture in order to set it on this property, call
-   * {@link RendererMain.createTexture}.
-   *
-   * If the {@link src} is set on a Node, the Node will use the
-   * {@link ImageTexture} by default and the Node will simply load the image at
-   * the specified URL.
-   *
-   * Note: If this is a Text Node, the Texture will be managed by the Node's
-   * {@link TextRenderer} and should not be set explicitly.
-   */
-  texture: TextureRef | null;
-  /**
-   * The Node's shader
-   *
-   * @remarks
-   * The `shader` defines a {@link Shader} used to draw the Node. By default,
-   * the Default Shader is used which simply draws the defined {@link texture}
-   * or {@link color}(s) within the Node without any special effects.
-   *
-   * To create a Shader in order to set it on this property, call
-   * {@link RendererMain.createShader}.
-   *
-   * Note: If this is a Text Node, the Shader will be managed by the Node's
-   * {@link TextRenderer} and should not be set explicitly.
-   */
-  shader: ShaderRef | null;
-  /**
-   * Image URL
-   *
-   * @remarks
-   * When set, the Node's {@link texture} is automatically set to an
-   * {@link ImageTexture} using the source image URL provided (with all other
-   * settings being defaults)
-   */
-  src: string;
-  zIndexLocked: number;
-  /**
-   * Scale to render the Node at
-   *
-   * @remarks
-   * The scale value multiplies the provided {@link width} and {@link height}
-   * of the Node around the Node's Pivot Point (defined by the {@link pivot}
-   * props).
-   *
-   * Behind the scenes, setting this property sets both the {@link scaleX} and
-   * {@link scaleY} props to the same value.
-   *
-   * NOTE: When the scaleX and scaleY props are explicitly set to different values,
-   * this property returns `null`. Setting `null` on this property will have no
-   * effect.
-   *
-   * @default 1.0
-   */
-  scale: number | null;
-  /**
-   * Scale to render the Node at (X-Axis)
-   *
-   * @remarks
-   * The scaleX value multiplies the provided {@link width} of the Node around
-   * the Node's Pivot Point (defined by the {@link pivot} props).
-   *
-   * @default 1.0
-   */
-  scaleX: number;
-  /**
-   * Scale to render the Node at (Y-Axis)
-   *
-   * @remarks
-   * The scaleY value multiplies the provided {@link height} of the Node around
-   * the Node's Pivot Point (defined by the {@link pivot} props).
-   *
-   * @default 1.0
-   */
-  scaleY: number;
-  /**
-   * Combined position of the Node's Mount Point
-   *
-   * @remarks
-   * The value can be any number between `0.0` and `1.0`:
-   * - `0.0` defines the Mount Point at the top-left corner of the Node.
-   * - `0.5` defines it at the center of the Node.
-   * - `1.0` defines it at the bottom-right corner of the node.
-   *
-   * Use the {@link mountX} and {@link mountY} props seperately for more control
-   * of the Mount Point.
-   *
-   * When assigned, the same value is also passed to both the {@link mountX} and
-   * {@link mountY} props.
-   *
-   * @default 0 (top-left)
-   */
-  mount: number;
-  /**
-   * X position of the Node's Mount Point
-   *
-   * @remarks
-   * The value can be any number between `0.0` and `1.0`:
-   * - `0.0` defines the Mount Point's X position as the left-most edge of the
-   *   Node
-   * - `0.5` defines it as the horizontal center of the Node
-   * - `1.0` defines it as the right-most edge of the Node.
-   *
-   * The combination of {@link mountX} and {@link mountY} define the Mount Point
-   *
-   * @default 0 (left-most edge)
-   */
-  mountX: number;
-  /**
-   * Y position of the Node's Mount Point
-   *
-   * @remarks
-   * The value can be any number between `0.0` and `1.0`:
-   * - `0.0` defines the Mount Point's Y position as the top-most edge of the
-   *   Node
-   * - `0.5` defines it as the vertical center of the Node
-   * - `1.0` defines it as the bottom-most edge of the Node.
-   *
-   * The combination of {@link mountX} and {@link mountY} define the Mount Point
-   *
-   * @default 0 (top-most edge)
-   */
-  mountY: number;
-  /**
-   * Combined position of the Node's Pivot Point
-   *
-   * @remarks
-   * The value can be any number between `0.0` and `1.0`:
-   * - `0.0` defines the Pivot Point at the top-left corner of the Node.
-   * - `0.5` defines it at the center of the Node.
-   * - `1.0` defines it at the bottom-right corner of the node.
-   *
-   * Use the {@link pivotX} and {@link pivotY} props seperately for more control
-   * of the Pivot Point.
-   *
-   * When assigned, the same value is also passed to both the {@link pivotX} and
-   * {@link pivotY} props.
-   *
-   * @default 0.5 (center)
-   */
-  pivot: number;
-  /**
-   * X position of the Node's Pivot Point
-   *
-   * @remarks
-   * The value can be any number between `0.0` and `1.0`:
-   * - `0.0` defines the Pivot Point's X position as the left-most edge of the
-   *   Node
-   * - `0.5` defines it as the horizontal center of the Node
-   * - `1.0` defines it as the right-most edge of the Node.
-   *
-   * The combination of {@link pivotX} and {@link pivotY} define the Pivot Point
-   *
-   * @default 0.5 (centered on x-axis)
-   */
-  pivotX: number;
-  /**
-   * Y position of the Node's Pivot Point
-   *
-   * @remarks
-   * The value can be any number between `0.0` and `1.0`:
-   * - `0.0` defines the Pivot Point's Y position as the top-most edge of the
-   *   Node
-   * - `0.5` defines it as the vertical center of the Node
-   * - `1.0` defines it as the bottom-most edge of the Node.
-   *
-   * The combination of {@link pivotX} and {@link pivotY} define the Pivot Point
-   *
-   * @default 0.5 (centered on y-axis)
-   */
-  pivotY: number;
-  /**
-   * Rotation of the Node (in Radians)
-   *
-   * @remarks
-   * Sets the amount to rotate the Node by around it's Pivot Point (defined by
-   * the {@link pivot} props). Positive values rotate the Node clockwise, while
-   * negative values rotate it counter-clockwise.
-   *
-   * Example values:
-   * - `-Math.PI / 2`: 90 degree rotation counter-clockwise
-   * - `0`: No rotation
-   * - `Math.PI / 2`: 90 degree rotation clockwise
-   * - `Math.PI`: 180 degree rotation clockwise
-   * - `3 * Math.PI / 2`: 270 degree rotation clockwise
-   * - `2 * Math.PI`: 360 rotation clockwise
-   */
-  rotation: number;
-  /**
-   * Node data element for custom data storage (optional)
-   *
-   * @remarks
-   * This property is used to store custom data on the Node as a key/value data store.
-   * Data values are limited to string, numbers, booleans. Strings will be truncated
-   * to a 2048 character limit for performance reasons.
-   *
-   * This is not a data storage mechanism for large amounts of data please use a
-   * dedicated data storage mechanism for that.
-   *
-   * The custom data will be reflected in the inspector as part of `data-*` attributes
-   *
-   * @default `undefined`
-   */
-  data?: CustomDataMap;
-}
-
-/**
- * A custom data map which can be stored on the INode
- *
- * @remarks
- * This is a map of key-value pairs that can be stored on an INode. It is used
- * to store custom data that can be used by the application.
- * The data stored can only be of type string, number or boolean.
- */
-export type CustomDataMap = {
-  [key: string]: string | number | boolean;
-};
-
-export type INodeAnimatableProps = {
-  [Key in keyof INodeWritableProps as NonNullable<
-    INodeWritableProps[Key]
-  > extends number
-    ? Key
-    : never]: number;
-};
-
-export interface INodeEvents {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  [s: string]: (target: INode, data: any) => void;
-}
-
-/**
- * Main API interface representing a Node in the Renderer scene graph.
- *
- * @remarks
- * A Node is a basic building block of the Renderer scene graph. It can be a
- * container for other Nodes, or it can be a leaf Node that renders a solid
- * color, gradient, image, or specific texture, using a specific shader.
- *
- * For text rendering, see {@link ITextNode}.
- *
- * Nodes are represented by an interface since they may be implemented in
- * different ways depending on the Core Driver. For example, the MainCoreDriver
- * implements it with it's `MainOnlyNode` while the ThreadXCoreDriver implements
- * it with it's `ThreadXMainNode`.
- */
-export interface INode extends INodeWritableProps, IEventEmitter<INodeEvents> {
-  id: number;
-  readonly children: INode[];
-  animate(
-    props: Partial<INodeAnimatableProps>,
-    settings: Partial<AnimationSettings>,
-  ): IAnimationController;
-  destroy(): void;
-  flush(): void;
-}
-
-export interface ITextNodeWritableProps extends INodeWritableProps, TrProps {
-  /**
-   * Force Text Node to use a specific Text Renderer
-   *
-   * @remarks
-   * By default, Text Nodes resolve the Text Renderer to use based on the font
-   * that is matched using the font family and other font selection properties.
-   *
-   * If two fonts supported by two separate Text Renderers are matched setting
-   * this override forces the Text Node to resolve to the Text Renderer defined
-   * here.
-   *
-   * @default null
-   */
-  textRendererOverride: keyof TextRendererMap | null;
-}
-
-/**
- * Main API interface representing a Node in the Renderer scene graph that renders text.
- *
- * @remarks
- * A Text Node is the second graphical building block of the Renderer scene
- * graph. It renders text using a specific text renderer that is automatically
- * chosen based on the font requested and what type of fonts are installed
- * into an app via a CoreExtension.
- *
- * The text renderer can be overridden by setting the `textRendererOverride`
- *
- * The `texture` and `shader` properties are managed by loaded text renderer and
- * should not be set directly.
- *
- * For non-text rendering, see {@link INode}.
- */
-export interface ITextNode extends INode, ITextNodeWritableProps {
-  // Based on inputs
-}
+/*
+ * 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 { IEventEmitter } from '@lightningjs/threadx';
+import type { IAnimationController } from '../common/IAnimationController.js';
+import type { ShaderRef, TextureRef } from './RendererMain.js';
+import type {
+  TextRendererMap,
+  TrProps,
+} from '../core/text-rendering/renderers/TextRenderer.js';
+import type { AnimationSettings } from '../core/animations/CoreAnimation.js';
+
+/**
+ * Writable properties of a Node.
+ */
+export interface INodeWritableProps {
+  /**
+   * The x coordinate of the Node's Mount Point.
+   *
+   * @remarks
+   * See {@link mountX} and {@link mountY} for more information about setting
+   * the Mount Point.
+   *
+   * @default `0`
+   */
+  x: number;
+  /**
+   * The y coordinate of the Node's Mount Point.
+   *
+   * @remarks
+   * See {@link mountX} and {@link mountY} for more information about setting
+   * the Mount Point.
+   *
+   * @default `0`
+   */
+  y: number;
+  /**
+   * The width of the Node.
+   *
+   * @default `0`
+   */
+  width: number;
+  /**
+   * The height of the Node.
+   *
+   * @default `0`
+   */
+  height: number;
+  /**
+   * The alpha opacity of the Node.
+   *
+   * @remarks
+   * The alpha value is a number between 0 and 1, where 0 is fully transparent
+   * and 1 is fully opaque.
+   *
+   * @default `1`
+   */
+  alpha: number;
+  /**
+   * Clipping Mode
+   *
+   * @remarks
+   * Enable Clipping Mode when you want to prevent the drawing of a Node and
+   * its descendants from overflowing outside of the Node's x/y/width/height
+   * bounds.
+   *
+   * For WebGL, clipping is implemented using the high-performance WebGL
+   * operation scissor. As a consequence, clipping does not work for
+   * non-rectangular areas. So, if the element is rotated
+   * (by itself or by any of its ancestors), clipping will not work as intended.
+   *
+   * TODO: Add support for non-rectangular clipping either automatically or
+   * via Render-To-Texture.
+   *
+   * @default `false`
+   */
+  clipping: boolean;
+  /**
+   * The color of the Node.
+   *
+   * @remarks
+   * The color value is a number in the format 0xRRGGBBAA, where RR is the red
+   * component, GG is the green component, BB is the blue component, and AA is
+   * the alpha component.
+   *
+   * Gradient colors may be set by setting the different color sub-properties:
+   * {@link colorTop}, {@link colorBottom}, {@link colorLeft}, {@link colorRight},
+   * {@link colorTl}, {@link colorTr}, {@link colorBr}, {@link colorBl} accordingly.
+   *
+   * @default `0xffffffff` (opaque white)
+   */
+  color: number;
+  /**
+   * The color of the top edge of the Node for gradient rendering.
+   *
+   * @remarks
+   * See {@link color} for more information about color values and gradient
+   * rendering.
+   */
+  colorTop: number;
+  /**
+   * The color of the bottom edge of the Node for gradient rendering.
+   *
+   * @remarks
+   * See {@link color} for more information about color values and gradient
+   * rendering.
+   */
+  colorBottom: number;
+  /**
+   * The color of the left edge of the Node for gradient rendering.
+   *
+   * @remarks
+   * See {@link color} for more information about color values and gradient
+   * rendering.
+   */
+  colorLeft: number;
+  /**
+   * The color of the right edge of the Node for gradient rendering.
+   *
+   * @remarks
+   * See {@link color} for more information about color values and gradient
+   * rendering.
+   */
+  colorRight: number;
+  /**
+   * The color of the top-left corner of the Node for gradient rendering.
+   *
+   * @remarks
+   * See {@link color} for more information about color values and gradient
+   * rendering.
+   */
+  colorTl: number;
+  /**
+   * The color of the top-right corner of the Node for gradient rendering.
+   *
+   * @remarks
+   * See {@link color} for more information about color values and gradient
+   * rendering.
+   */
+  colorTr: number;
+  /**
+   * The color of the bottom-right corner of the Node for gradient rendering.
+   *
+   * @remarks
+   * See {@link color} for more information about color values and gradient
+   * rendering.
+   */
+  colorBr: number;
+  /**
+   * The color of the bottom-left corner of the Node for gradient rendering.
+   *
+   * @remarks
+   * See {@link color} for more information about color values and gradient
+   * rendering.
+   */
+  colorBl: number;
+  /**
+   * The Node's parent Node.
+   *
+   * @remarks
+   * The value `null` indicates that the Node has no parent. This may either be
+   * because the Node is the root Node of the scene graph, or because the Node
+   * has been removed from the scene graph.
+   *
+   * In order to make sure that a Node can be rendered on the screen, it must
+   * be added to the scene graph by setting it's parent property to a Node that
+   * is already in the scene graph such as the root Node.
+   *
+   * @default `null`
+   */
+  parent: INode | null;
+  /**
+   * The Node's z-index.
+   *
+   * @remarks
+   * TBD
+   */
+  zIndex: number;
+  /**
+   * The Node's Texture.
+   *
+   * @remarks
+   * The `texture` defines a rasterized image that is contained within the
+   * {@link width} and {@link height} dimensions of the Node. If null, the
+   * Node will use an opaque white {@link ColorTexture} when being drawn, which
+   * essentially enables colors (including gradients) to be drawn.
+   *
+   * If set, by default, the texture will be drawn, as is, stretched to the
+   * dimensions of the Node. This behavior can be modified by setting the TBD
+   * and TBD properties.
+   *
+   * To create a Texture in order to set it on this property, call
+   * {@link RendererMain.createTexture}.
+   *
+   * If the {@link src} is set on a Node, the Node will use the
+   * {@link ImageTexture} by default and the Node will simply load the image at
+   * the specified URL.
+   *
+   * Note: If this is a Text Node, the Texture will be managed by the Node's
+   * {@link TextRenderer} and should not be set explicitly.
+   */
+  texture: TextureRef | null;
+  /**
+   * The Node's shader
+   *
+   * @remarks
+   * The `shader` defines a {@link Shader} used to draw the Node. By default,
+   * the Default Shader is used which simply draws the defined {@link texture}
+   * or {@link color}(s) within the Node without any special effects.
+   *
+   * To create a Shader in order to set it on this property, call
+   * {@link RendererMain.createShader}.
+   *
+   * Note: If this is a Text Node, the Shader will be managed by the Node's
+   * {@link TextRenderer} and should not be set explicitly.
+   */
+  shader: ShaderRef | null;
+  /**
+   * Image URL
+   *
+   * @remarks
+   * When set, the Node's {@link texture} is automatically set to an
+   * {@link ImageTexture} using the source image URL provided (with all other
+   * settings being defaults)
+   */
+  src: string;
+  zIndexLocked: number;
+  /**
+   * Scale to render the Node at
+   *
+   * @remarks
+   * The scale value multiplies the provided {@link width} and {@link height}
+   * of the Node around the Node's Pivot Point (defined by the {@link pivot}
+   * props).
+   *
+   * Behind the scenes, setting this property sets both the {@link scaleX} and
+   * {@link scaleY} props to the same value.
+   *
+   * NOTE: When the scaleX and scaleY props are explicitly set to different values,
+   * this property returns `null`. Setting `null` on this property will have no
+   * effect.
+   *
+   * @default 1.0
+   */
+  scale: number | null;
+  /**
+   * Scale to render the Node at (X-Axis)
+   *
+   * @remarks
+   * The scaleX value multiplies the provided {@link width} of the Node around
+   * the Node's Pivot Point (defined by the {@link pivot} props).
+   *
+   * @default 1.0
+   */
+  scaleX: number;
+  /**
+   * Scale to render the Node at (Y-Axis)
+   *
+   * @remarks
+   * The scaleY value multiplies the provided {@link height} of the Node around
+   * the Node's Pivot Point (defined by the {@link pivot} props).
+   *
+   * @default 1.0
+   */
+  scaleY: number;
+  /**
+   * Combined position of the Node's Mount Point
+   *
+   * @remarks
+   * The value can be any number between `0.0` and `1.0`:
+   * - `0.0` defines the Mount Point at the top-left corner of the Node.
+   * - `0.5` defines it at the center of the Node.
+   * - `1.0` defines it at the bottom-right corner of the node.
+   *
+   * Use the {@link mountX} and {@link mountY} props seperately for more control
+   * of the Mount Point.
+   *
+   * When assigned, the same value is also passed to both the {@link mountX} and
+   * {@link mountY} props.
+   *
+   * @default 0 (top-left)
+   */
+  mount: number;
+  /**
+   * X position of the Node's Mount Point
+   *
+   * @remarks
+   * The value can be any number between `0.0` and `1.0`:
+   * - `0.0` defines the Mount Point's X position as the left-most edge of the
+   *   Node
+   * - `0.5` defines it as the horizontal center of the Node
+   * - `1.0` defines it as the right-most edge of the Node.
+   *
+   * The combination of {@link mountX} and {@link mountY} define the Mount Point
+   *
+   * @default 0 (left-most edge)
+   */
+  mountX: number;
+  /**
+   * Y position of the Node's Mount Point
+   *
+   * @remarks
+   * The value can be any number between `0.0` and `1.0`:
+   * - `0.0` defines the Mount Point's Y position as the top-most edge of the
+   *   Node
+   * - `0.5` defines it as the vertical center of the Node
+   * - `1.0` defines it as the bottom-most edge of the Node.
+   *
+   * The combination of {@link mountX} and {@link mountY} define the Mount Point
+   *
+   * @default 0 (top-most edge)
+   */
+  mountY: number;
+  /**
+   * Combined position of the Node's Pivot Point
+   *
+   * @remarks
+   * The value can be any number between `0.0` and `1.0`:
+   * - `0.0` defines the Pivot Point at the top-left corner of the Node.
+   * - `0.5` defines it at the center of the Node.
+   * - `1.0` defines it at the bottom-right corner of the node.
+   *
+   * Use the {@link pivotX} and {@link pivotY} props seperately for more control
+   * of the Pivot Point.
+   *
+   * When assigned, the same value is also passed to both the {@link pivotX} and
+   * {@link pivotY} props.
+   *
+   * @default 0.5 (center)
+   */
+  pivot: number;
+  /**
+   * X position of the Node's Pivot Point
+   *
+   * @remarks
+   * The value can be any number between `0.0` and `1.0`:
+   * - `0.0` defines the Pivot Point's X position as the left-most edge of the
+   *   Node
+   * - `0.5` defines it as the horizontal center of the Node
+   * - `1.0` defines it as the right-most edge of the Node.
+   *
+   * The combination of {@link pivotX} and {@link pivotY} define the Pivot Point
+   *
+   * @default 0.5 (centered on x-axis)
+   */
+  pivotX: number;
+  /**
+   * Y position of the Node's Pivot Point
+   *
+   * @remarks
+   * The value can be any number between `0.0` and `1.0`:
+   * - `0.0` defines the Pivot Point's Y position as the top-most edge of the
+   *   Node
+   * - `0.5` defines it as the vertical center of the Node
+   * - `1.0` defines it as the bottom-most edge of the Node.
+   *
+   * The combination of {@link pivotX} and {@link pivotY} define the Pivot Point
+   *
+   * @default 0.5 (centered on y-axis)
+   */
+  pivotY: number;
+  /**
+   * Rotation of the Node (in Radians)
+   *
+   * @remarks
+   * Sets the amount to rotate the Node by around it's Pivot Point (defined by
+   * the {@link pivot} props). Positive values rotate the Node clockwise, while
+   * negative values rotate it counter-clockwise.
+   *
+   * Example values:
+   * - `-Math.PI / 2`: 90 degree rotation counter-clockwise
+   * - `0`: No rotation
+   * - `Math.PI / 2`: 90 degree rotation clockwise
+   * - `Math.PI`: 180 degree rotation clockwise
+   * - `3 * Math.PI / 2`: 270 degree rotation clockwise
+   * - `2 * Math.PI`: 360 rotation clockwise
+   */
+  rotation: number;
+  /**
+   * Node data element for custom data storage (optional)
+   *
+   * @remarks
+   * This property is used to store custom data on the Node as a key/value data store.
+   * Data values are limited to string, numbers, booleans. Strings will be truncated
+   * to a 2048 character limit for performance reasons.
+   *
+   * This is not a data storage mechanism for large amounts of data please use a
+   * dedicated data storage mechanism for that.
+   *
+   * The custom data will be reflected in the inspector as part of `data-*` attributes
+   *
+   * @default `undefined`
+   */
+  data?: CustomDataMap;
+}
+
+/**
+ * A custom data map which can be stored on the INode
+ *
+ * @remarks
+ * This is a map of key-value pairs that can be stored on an INode. It is used
+ * to store custom data that can be used by the application.
+ * The data stored can only be of type string, number or boolean.
+ */
+export type CustomDataMap = {
+  [key: string]: string | number | boolean;
+};
+
+export type INodeAnimatableProps = {
+  [Key in keyof INodeWritableProps as NonNullable<
+    INodeWritableProps[Key]
+  > extends number
+    ? Key
+    : never]: number;
+};
+
+export interface INodeEvents {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [s: string]: (target: INode, data: any) => void;
+}
+
+/**
+ * Main API interface representing a Node in the Renderer scene graph.
+ *
+ * @remarks
+ * A Node is a basic building block of the Renderer scene graph. It can be a
+ * container for other Nodes, or it can be a leaf Node that renders a solid
+ * color, gradient, image, or specific texture, using a specific shader.
+ *
+ * For text rendering, see {@link ITextNode}.
+ *
+ * Nodes are represented by an interface since they may be implemented in
+ * different ways depending on the Core Driver. For example, the MainCoreDriver
+ * implements it with it's `MainOnlyNode` while the ThreadXCoreDriver implements
+ * it with it's `ThreadXMainNode`.
+ */
+export interface INode extends INodeWritableProps, IEventEmitter<INodeEvents> {
+  id: number;
+  readonly children: INode[];
+  animate(
+    props: Partial<INodeAnimatableProps>,
+    settings: Partial<AnimationSettings>,
+  ): IAnimationController;
+  destroy(): void;
+  flush(): void;
+}
+
+export interface ITextNodeWritableProps extends INodeWritableProps, TrProps {
+  /**
+   * Force Text Node to use a specific Text Renderer
+   *
+   * @remarks
+   * By default, Text Nodes resolve the Text Renderer to use based on the font
+   * that is matched using the font family and other font selection properties.
+   *
+   * If two fonts supported by two separate Text Renderers are matched setting
+   * this override forces the Text Node to resolve to the Text Renderer defined
+   * here.
+   *
+   * @default null
+   */
+  textRendererOverride: keyof TextRendererMap | null;
+}
+
+/**
+ * Main API interface representing a Node in the Renderer scene graph that renders text.
+ *
+ * @remarks
+ * A Text Node is the second graphical building block of the Renderer scene
+ * graph. It renders text using a specific text renderer that is automatically
+ * chosen based on the font requested and what type of fonts are installed
+ * into an app via a CoreExtension.
+ *
+ * The text renderer can be overridden by setting the `textRendererOverride`
+ *
+ * The `texture` and `shader` properties are managed by loaded text renderer and
+ * should not be set directly.
+ *
+ * For non-text rendering, see {@link INode}.
+ */
+export interface ITextNode extends INode, ITextNodeWritableProps {
+  // Based on inputs
+}