@lightningtv/renderer 3.0.0-beta1

package/dist/src/core/utils.js

@@ -0,0 +1,173 @@
+/*
+ * 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.
+ */
+/**
+ * Core Utility Functions
+ *
+ * @module
+ */
+export const EPSILON = 0.000001;
+export let ARRAY_TYPE = typeof Float32Array !== 'undefined' ? Float32Array : Array;
+export const RANDOM = Math.random;
+export const ANGLE_ORDER = 'zyx';
+const degree = Math.PI / 180;
+export const setMatrixArrayType = (type) => {
+    ARRAY_TYPE = type;
+};
+export const toRadian = (a) => {
+    return a * degree;
+};
+export const equals = (a, b) => {
+    return Math.abs(a - b) <= EPSILON * Math.max(1.0, Math.abs(a), Math.abs(b));
+};
+export const rand = (min, max) => {
+    return Math.floor(Math.random() * (max - min + 1) + min);
+};
+export const isPowerOfTwo = (value) => {
+    return value && !(value & (value - 1));
+};
+const getTimingBezier = (a, b, c, d) => {
+    const xc = 3.0 * a;
+    const xb = 3.0 * (c - a) - xc;
+    const xa = 1.0 - xc - xb;
+    const yc = 3.0 * b;
+    const yb = 3.0 * (d - b) - yc;
+    const ya = 1.0 - yc - yb;
+    return function (time) {
+        if (time >= 1.0) {
+            return 1;
+        }
+        if (time <= 0) {
+            return 0;
+        }
+        let t = 0.5, cbx, cbxd, dx;
+        for (let it = 0; it < 20; it++) {
+            cbx = t * (t * (t * xa + xb) + xc);
+            dx = time - cbx;
+            if (dx > -1e-8 && dx < 1e-8) {
+                return t * (t * (t * ya + yb) + yc);
+            }
+            // Cubic bezier derivative.
+            cbxd = t * (t * (3 * xa) + 2 * xb) + xc;
+            if (cbxd > 1e-10 && cbxd < 1e-10) {
+                // Problematic. Fall back to binary search method.
+                break;
+            }
+            t += dx / cbxd;
+        }
+        // Fallback: binary search method. This is more reliable when there are near-0 slopes.
+        let minT = 0;
+        let maxT = 1;
+        for (let it = 0; it < 20; it++) {
+            t = 0.5 * (minT + maxT);
+            cbx = t * (t * (t * xa + xb) + xc);
+            dx = time - cbx;
+            if (dx > -1e-8 && dx < 1e-8) {
+                // Solution found!
+                return t * (t * (t * ya + yb) + yc);
+            }
+            if (dx < 0) {
+                maxT = t;
+            }
+            else {
+                minT = t;
+            }
+        }
+    };
+};
+const timingMapping = {};
+const timingLookup = {
+    ease: [0.25, 0.1, 0.25, 1.0],
+    'ease-in': [0.42, 0, 1.0, 1.0],
+    'ease-out': [0, 0, 0.58, 1.0],
+    'ease-in-out': [0.42, 0, 0.58, 1.0],
+    'ease-in-sine': [0.12, 0, 0.39, 0],
+    'ease-out-sine': [0.12, 0, 0.39, 0],
+    'ease-in-out-sine': [0.37, 0, 0.63, 1],
+    'ease-in-cubic': [0.32, 0, 0.67, 0],
+    'ease-out-cubic': [0.33, 1, 0.68, 1],
+    'ease-in-out-cubic': [0.65, 0, 0.35, 1],
+    'ease-in-circ': [0.55, 0, 1, 0.45],
+    'ease-out-circ': [0, 0.55, 0.45, 1],
+    'ease-in-out-circ': [0.85, 0, 0.15, 1],
+    'ease-in-back': [0.36, 0, 0.66, -0.56],
+    'ease-out-back': [0.34, 1.56, 0.64, 1],
+    'ease-in-out-back': [0.68, -0.6, 0.32, 1.6],
+};
+const defaultTiming = (t) => t;
+const parseCubicBezier = (str) => {
+    //cubic-bezier(0.84, 0.52, 0.56, 0.6)
+    const regex = /-?\d*\.?\d+/g;
+    const match = str.match(regex);
+    if (match) {
+        const [num1, num2, num3, num4] = match;
+        const a = parseFloat(num1 || '0.42');
+        const b = parseFloat(num2 || '0');
+        const c = parseFloat(num3 || '1');
+        const d = parseFloat(num4 || '1');
+        const timing = getTimingBezier(a, b, c, d);
+        timingMapping[str] = timing;
+        return timing;
+    }
+    // parse failed, return linear
+    console.warn('Unknown cubic-bezier timing: ' + str);
+    return defaultTiming;
+};
+export const getTimingFunction = (str) => {
+    if (str === 'linear') {
+        return defaultTiming;
+    }
+    if (timingMapping[str] !== undefined) {
+        return timingMapping[str] || defaultTiming;
+    }
+    if (str === 'step-start') {
+        return () => {
+            return 1;
+        };
+    }
+    if (str === 'step-end') {
+        return (time) => {
+            return time === 1 ? 1 : 0;
+        };
+    }
+    const lookup = timingLookup[str];
+    if (lookup !== undefined) {
+        const [a, b, c, d] = lookup;
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore - TS doesn't understand that we've checked for undefined
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        const timing = getTimingBezier(a, b, c, d);
+        timingMapping[str] = timing;
+        return timing;
+    }
+    if (str.startsWith('cubic-bezier')) {
+        return parseCubicBezier(str);
+    }
+    console.warn('Unknown timing function: ' + str);
+    return defaultTiming;
+};
+/**
+ * Convert bytes to string of megabytes with 2 decimal points
+ *
+ * @param bytes
+ * @returns
+ */
+export function bytesToMb(bytes) {
+    return (bytes / 1024 / 1024).toFixed(2);
+}
+//# sourceMappingURL=utils.js.map

package/dist/src/core/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/core/utils.ts"],"names":[],"mappings":"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"}

package/dist/src/main-api/INode.d.ts

@@ -0,0 +1,63 @@
+import type { IAnimationController } from '../common/IAnimationController.js';
+import { CoreNode, type CoreNodeAnimateProps, type CoreNodeProps } from '../core/CoreNode.js';
+import type { CoreTextNode, CoreTextNodeProps } from '../core/CoreTextNode.js';
+import type { AnimationSettings } from '../core/animations/CoreAnimation.js';
+import type { CoreShaderNode } from '../core/renderers/CoreShaderNode.js';
+/**
+ * A visual 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 Nodes, see {@link ITextNode}.
+ *
+ * ## INode vs CoreNode
+ * CoreNode is the name of the class for a Renderer Node and is only directly
+ * used internally by the Renderer. INode describes the public API of a
+ * Renderer Node including the ability to be tied to a specific Shader.
+ *
+ * Users of the Renderer API, should generally interact with INode objects
+ * instead of CoreNode objects.
+ */
+export interface INode<ShaderNode extends CoreShaderNode = CoreShaderNode> extends Omit<CoreNode, 'shader' | 'animate' | 'parent'> {
+    shader: ShaderNode;
+    animate(props: Partial<INodeAnimateProps<ShaderNode>>, settings: Partial<AnimationSettings>): IAnimationController;
+    parent: INode | null;
+}
+/**
+ * Properties used to animate() a Node
+ */
+export interface INodeAnimateProps<ShNode extends CoreShaderNode = CoreShaderNode> extends Omit<CoreNodeAnimateProps, 'shaderProps'> {
+    shaderProps: Partial<ShNode['props']>;
+}
+/**
+ * Properties used to create a new Node
+ */
+export interface INodeProps<ShNode extends CoreShaderNode = CoreShaderNode> extends Omit<CoreNodeProps, 'shader' | 'parent'> {
+    shader: ShNode;
+    parent: INode | null;
+}
+/**
+ * A visual Node in the Renderer scene graph that renders text.
+ *
+ * @remarks
+ * A Text Node is a special type of Node that renders text using a specific
+ * text renderer, such as Web/Canvas or Signed Distance Field (SDF) text.
+ *
+ * For non-text rendering, see {@link INode}.
+ *
+ * Users of the Renderer API, should generally interact with ITextNode objects
+ * instead of CoreTextNode objects.
+ */
+export interface ITextNode extends Omit<CoreTextNode, 'animate' | 'parent'> {
+    animate(props: Partial<INodeAnimateProps<CoreShaderNode>>, settings: Partial<AnimationSettings>): IAnimationController;
+    parent: INode | null;
+}
+/**
+ * Properties used to create a new Text Node
+ */
+export interface ITextNodeProps extends Omit<CoreTextNodeProps, 'parent'> {
+    parent: INode | null;
+}

package/dist/src/main-api/INode.js

@@ -0,0 +1,2 @@
+import { CoreNode, } from '../core/CoreNode.js';
+//# sourceMappingURL=INode.js.map

package/dist/src/main-api/INode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"INode.js","sourceRoot":"","sources":["../../../src/main-api/INode.ts"],"names":[],"mappings":"AAmBA,OAAO,EACL,QAAQ,GAGT,MAAM,qBAAqB,CAAC"}

package/dist/src/main-api/Inspector.d.ts

@@ -0,0 +1,21 @@
+import { CoreNode, type CoreNodeAnimateProps, type CoreNodeProps } from '../core/CoreNode.js';
+import { type RendererMainSettings } from './Renderer.js';
+import type { AnimationSettings } from '../core/animations/CoreAnimation.js';
+import type { CoreTextNode, CoreTextNodeProps } from '../core/CoreTextNode.js';
+export declare class Inspector {
+    private root;
+    private canvas;
+    private height;
+    private width;
+    private scaleX;
+    private scaleY;
+    constructor(canvas: HTMLCanvasElement, settings: RendererMainSettings);
+    setRootPosition(): void;
+    createDiv(id: number, properties: CoreNodeProps | CoreTextNodeProps): HTMLElement;
+    createNode(node: CoreNode): CoreNode;
+    createTextNode(node: CoreNode): CoreTextNode;
+    createProxy(node: CoreNode | CoreTextNode, div: HTMLElement): CoreNode | CoreTextNode;
+    destroyNode(id: number): void;
+    updateNodeProperty(div: HTMLElement, property: keyof CoreNodeProps | keyof CoreTextNodeProps, value: any, props: CoreNodeProps | CoreTextNodeProps): void;
+    animateNode(div: HTMLElement, props: CoreNodeAnimateProps, settings: AnimationSettings): void;
+}

package/dist/src/main-api/Inspector.js

@@ -0,0 +1,376 @@
+import { CoreNode, } from '../core/CoreNode.js';
+import {} from './Renderer.js';
+import { isProductionEnvironment } from '../utils.js';
+const stylePropertyMap = {
+    alpha: (v) => {
+        if (v === 1) {
+            return null;
+        }
+        return { prop: 'opacity', value: `${v}` };
+    },
+    x: (x) => {
+        return { prop: 'left', value: `${x}px` };
+    },
+    y: (y) => {
+        return { prop: 'top', value: `${y}px` };
+    },
+    width: (w) => {
+        if (w === 0) {
+            return null;
+        }
+        return { prop: 'width', value: `${w}px` };
+    },
+    height: (h) => {
+        if (h === 0) {
+            return null;
+        }
+        return { prop: 'height', value: `${h}px` };
+    },
+    fontSize: (fs) => {
+        if (fs === 0) {
+            return null;
+        }
+        return { prop: 'font-size', value: `${fs}px` };
+    },
+    lineHeight: (lh) => {
+        if (lh === 0) {
+            return null;
+        }
+        return { prop: 'line-height', value: `${lh}px` };
+    },
+    zIndex: () => 'z-index',
+    fontFamily: () => 'font-family',
+    fontStyle: () => 'font-style',
+    fontWeight: () => 'font-weight',
+    fontStretch: () => 'font-stretch',
+    letterSpacing: () => 'letter-spacing',
+    textAlign: () => 'text-align',
+    overflowSuffix: () => 'overflow-suffix',
+    maxLines: () => 'max-lines',
+    contain: () => 'contain',
+    verticalAlign: () => 'vertical-align',
+    clipping: (v) => {
+        if (v === false) {
+            return null;
+        }
+        return { prop: 'overflow', value: v ? 'hidden' : 'visible' };
+    },
+    rotation: (v) => {
+        if (v === 0) {
+            return null;
+        }
+        return { prop: 'transform', value: `rotate(${v}rad)` };
+    },
+    scale: (v) => {
+        if (v === 1) {
+            return null;
+        }
+        return { prop: 'transform', value: `scale(${v})` };
+    },
+    scaleX: (v) => {
+        if (v === 1) {
+            return null;
+        }
+        return { prop: 'transform', value: `scaleX(${v})` };
+    },
+    scaleY: (v) => {
+        if (v === 1) {
+            return null;
+        }
+        return { prop: 'transform', value: `scaleY(${v})` };
+    },
+    color: (v) => {
+        if (v === 0) {
+            return null;
+        }
+        return { prop: 'color', value: convertColorToRgba(v) };
+    },
+};
+const convertColorToRgba = (color) => {
+    const a = (color & 0xff) / 255;
+    const b = (color >> 8) & 0xff;
+    const g = (color >> 16) & 0xff;
+    const r = (color >> 24) & 0xff;
+    return `rgba(${r},${g},${b},${a})`;
+};
+const domPropertyMap = {
+    id: 'test-id',
+};
+const gradientColorPropertyMap = [
+    'colorTop',
+    'colorBottom',
+    'colorLeft',
+    'colorRight',
+    'colorTl',
+    'colorTr',
+    'colorBl',
+    'colorBr',
+];
+const knownProperties = new Set([
+    ...Object.keys(stylePropertyMap),
+    ...Object.keys(domPropertyMap),
+    // ...gradientColorPropertyMap,
+    'src',
+    'parent',
+    'data',
+]);
+export class Inspector {
+    root = null;
+    canvas = null;
+    height = 1080;
+    width = 1920;
+    scaleX = 1;
+    scaleY = 1;
+    constructor(canvas, settings) {
+        if (isProductionEnvironment())
+            return;
+        if (!settings) {
+            throw new Error('settings is required');
+        }
+        // calc dimensions based on the devicePixelRatio
+        this.height = Math.ceil(settings.appHeight ?? 1080 / (settings.deviceLogicalPixelRatio ?? 1));
+        this.width = Math.ceil(settings.appWidth ?? 1920 / (settings.deviceLogicalPixelRatio ?? 1));
+        this.scaleX = settings.deviceLogicalPixelRatio ?? 1;
+        this.scaleY = settings.deviceLogicalPixelRatio ?? 1;
+        this.canvas = canvas;
+        this.root = document.createElement('div');
+        this.setRootPosition();
+        document.body.appendChild(this.root);
+        //listen for changes on canvas
+        const mutationObserver = new MutationObserver(this.setRootPosition.bind(this));
+        mutationObserver.observe(canvas, {
+            attributes: true,
+            childList: false,
+            subtree: false,
+        });
+        // Create a ResizeObserver to watch for changes in the element's size
+        const resizeObserver = new ResizeObserver(this.setRootPosition.bind(this));
+        resizeObserver.observe(canvas);
+        //listen for changes on window
+        window.addEventListener('resize', this.setRootPosition.bind(this));
+        console.warn('Inspector is enabled, this will impact performance');
+    }
+    setRootPosition() {
+        if (this.root === null || this.canvas === null) {
+            return;
+        }
+        // get the world position of the canvas object, so we can match the inspector to it
+        const rect = this.canvas.getBoundingClientRect();
+        const top = document.documentElement.scrollTop + rect.top;
+        const left = document.documentElement.scrollLeft + rect.left;
+        this.root.id = 'root';
+        this.root.style.left = `${left}px`;
+        this.root.style.top = `${top}px`;
+        this.root.style.width = `${this.width}px`;
+        this.root.style.height = `${this.height}px`;
+        this.root.style.position = 'absolute';
+        this.root.style.transformOrigin = '0 0 0';
+        this.root.style.transform = `scale(${this.scaleX}, ${this.scaleY})`;
+        this.root.style.overflow = 'hidden';
+        this.root.style.zIndex = '65534';
+    }
+    createDiv(id, properties) {
+        const div = document.createElement('div');
+        div.style.position = 'absolute';
+        div.id = id.toString();
+        // set initial properties
+        for (const key in properties) {
+            this.updateNodeProperty(div, 
+            // really typescript? really?
+            key, properties[key], properties);
+        }
+        return div;
+    }
+    createNode(node) {
+        const div = this.createDiv(node.id, node.props);
+        div.node = node;
+        node.div = div;
+        node.on('inViewport', () => div.setAttribute('state', 'inViewport'));
+        node.on('inBounds', () => div.setAttribute('state', 'inBounds'));
+        node.on('outOfBounds', () => div.setAttribute('state', 'outOfBounds'));
+        // Monitor only relevant properties by trapping with selective assignment
+        return this.createProxy(node, div);
+    }
+    createTextNode(node) {
+        const div = this.createDiv(node.id, node.props);
+        div.node = node;
+        node.div = div;
+        return this.createProxy(node, div);
+    }
+    createProxy(node, div) {
+        // Define traps for each property in knownProperties
+        knownProperties.forEach((property) => {
+            let originalProp = Object.getOwnPropertyDescriptor(node, property);
+            if (originalProp === undefined) {
+                // Search the prototype chain for the property descriptor
+                const proto = Object.getPrototypeOf(node);
+                originalProp = Object.getOwnPropertyDescriptor(proto, property);
+            }
+            if (originalProp === undefined) {
+                return;
+            }
+            Object.defineProperty(node, property, {
+                get() {
+                    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+                    return originalProp?.get?.call(node);
+                },
+                set: (value) => {
+                    originalProp?.set?.call(node, value);
+                    this.updateNodeProperty(div, property, value, node.props);
+                },
+                configurable: true,
+                enumerable: true,
+            });
+        });
+        const originalDestroy = node.destroy;
+        Object.defineProperty(node, 'destroy', {
+            value: () => {
+                this.destroyNode(node.id);
+                originalDestroy.call(node);
+            },
+        });
+        const originalAnimate = node.animate;
+        Object.defineProperty(node, 'animate', {
+            value: (props, settings) => {
+                const animationController = originalAnimate.call(node, props, settings);
+                const originalStart = animationController.start.bind(animationController);
+                animationController.start = () => {
+                    this.animateNode(div, props, settings);
+                    return originalStart();
+                };
+                return animationController;
+            },
+        });
+        return node;
+    }
+    destroyNode(id) {
+        const div = document.getElementById(id.toString());
+        div?.remove();
+    }
+    updateNodeProperty(div, property, 
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    value, props) {
+        if (this.root === null || value === undefined || value === null) {
+            return;
+        }
+        /**
+         * Special case for parent property
+         */
+        if (property === 'parent') {
+            const parentId = value.id;
+            // only way to detect if the parent is the root node
+            // if you are reading this and have a better way, please let me know
+            if (parentId === 1) {
+                this.root.appendChild(div);
+                return;
+            }
+            const parent = document.getElementById(parentId.toString());
+            parent?.appendChild(div);
+            return;
+        }
+        // special case for text
+        if (property === 'text') {
+            div.innerHTML = String(value);
+            // hide text because we can't render SDF fonts
+            // it would look weird and obstruct the WebGL rendering
+            div.style.visibility = 'hidden';
+            return;
+        }
+        // special case for images
+        // we're not setting any CSS properties to avoid images getting loaded twice
+        // as the renderer will handle the loading of the image. Setting it to `data-src`
+        if (property === 'src' && value) {
+            div.setAttribute(`data-src`, String(value));
+            return;
+        }
+        // special case for color gradients (normal colors are handled by the stylePropertyMap)
+        // FIXME the renderer seems to return the same number for all colors
+        // if (gradientColorPropertyMap.includes(property as string)) {
+        //   const color = convertColorToRgba(value as number);
+        //   div.setAttribute(`data-${property}`, color);
+        //   return;
+        // }
+        if (property === 'rtt' && value) {
+            div.setAttribute('data-rtt', String(value));
+            return;
+        }
+        // CSS mappable attribute
+        if (stylePropertyMap[property]) {
+            const mappedStyleResponse = stylePropertyMap[property]?.(value);
+            if (mappedStyleResponse === null) {
+                return;
+            }
+            if (typeof mappedStyleResponse === 'string') {
+                div.style.setProperty(mappedStyleResponse, String(value));
+                return;
+            }
+            if (typeof mappedStyleResponse === 'object') {
+                let value = mappedStyleResponse.value;
+                if (property === 'x') {
+                    const mount = props.mountX;
+                    const width = props.width;
+                    if (mount) {
+                        value = `${parseInt(value) - width * mount}px`;
+                    }
+                }
+                else if (property === 'y') {
+                    const mount = props.mountY;
+                    const height = props.height;
+                    if (mount) {
+                        value = `${parseInt(value) - height * mount}px`;
+                    }
+                }
+                div.style.setProperty(mappedStyleResponse.prop, value);
+            }
+            return;
+        }
+        // DOM properties
+        if (domPropertyMap[property]) {
+            const domProperty = domPropertyMap[property];
+            if (!domProperty) {
+                return;
+            }
+            div.setAttribute(String(domProperty), String(value));
+            return;
+        }
+        // custom data properties
+        if (property === 'data') {
+            for (const key in value) {
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+                const keyValue = value[key];
+                if (keyValue === undefined) {
+                    div.removeAttribute(`data-${key}`);
+                }
+                else {
+                    div.setAttribute(`data-${key}`, String(keyValue));
+                }
+            }
+            return;
+        }
+    }
+    // simple animation handler
+    animateNode(div, props, settings) {
+        const { duration = 1000, delay = 0,
+        // easing = 'linear',
+        // repeat = 0,
+        // loop = false,
+        // stopMethod = false,
+         } = settings;
+        const { x, y, width, height, alpha = 1, rotation = 0, scale = 1, color, mountX, mountY, } = props;
+        // ignoring loops and repeats for now, as that might be a bit too much for the inspector
+        function animate() {
+            setTimeout(() => {
+                div.style.top = `${y - height * mountY}px`;
+                div.style.left = `${x - width * mountX}px`;
+                div.style.width = `${width}px`;
+                div.style.height = `${height}px`;
+                div.style.opacity = `${alpha}`;
+                div.style.rotate = `${rotation}rad`;
+                div.style.scale = `${scale}`;
+                div.style.color = convertColorToRgba(color);
+            }, duration);
+        }
+        setTimeout(animate, delay);
+    }
+}
+//# sourceMappingURL=Inspector.js.map