@lightningtv/solid 3.1.7 → 3.1.8

package/dist/src/core/{domRenderer.js → dom-renderer/domRenderer.js}

@@ -5,41 +5,16 @@ Experimental DOM renderer
 */
 import * as lng from '@lightningjs/renderer';
 import { EventEmitter } from '@lightningjs/renderer/utils';
-import { Config } from './config.js';
-import { isFunc } from './utils.js';
-const colorToRgba = (c) => `rgba(${(c >> 24) & 0xff},${(c >> 16) & 0xff},${(c >> 8) & 0xff},${(c & 0xff) / 255})`;
-function applyEasing(easing, progress) {
-    if (isFunc(easing)) {
-        return easing(progress);
-    }
-    switch (easing) {
-        case 'linear':
-        default:
-            return progress;
-        case 'ease-in':
-            return progress * progress;
-        case 'ease-out':
-            return progress * (2 - progress);
-        case 'ease-in-out':
-            return progress < 0.5
-                ? 2 * progress * progress
-                : -1 + (4 - 2 * progress) * progress;
-    }
-}
-function interpolate(start, end, t) {
-    return start + (end - start) * t;
-}
-function interpolateColor(start, end, t) {
-    return ((interpolate((start >> 24) & 0xff, (end >> 24) & 0xff, t) << 24) |
-        (interpolate((start >> 16) & 0xff, (end >> 16) & 0xff, t) << 16) |
-        (interpolate((start >> 8) & 0xff, (end >> 8) & 0xff, t) << 8) |
-        interpolate(start & 0xff, end & 0xff, t));
-}
-function interpolateProp(name, start, end, t) {
-    return name.startsWith('color')
-        ? interpolateColor(start, end, t)
-        : interpolate(start, end, t);
-}
+import { Config } from '../config.js';
+import { colorToRgba, buildGradientStops, computeLegacyObjectFit, applySubTextureScaling, getNodeLineHeight, applyEasing, interpolateProp, isRenderStateInBounds, nodeHasTextureSource, computeRenderStateForNode, compactString, } from './domRendererUtils.js';
+// Feature detection for legacy brousers
+const _styleRef = typeof document !== 'undefined' ? document.documentElement?.style || {} : {};
+const supportsObjectFit = 'objectFit' in _styleRef;
+const supportsObjectPosition = 'objectPosition' in _styleRef;
+const supportsMixBlendMode = 'mixBlendMode' in _styleRef;
+const supportsStandardMask = 'maskImage' in _styleRef;
+const supportsWebkitMask = 'webkitMaskImage' in _styleRef;
+const supportsCssMask = supportsStandardMask || supportsWebkitMask;
 /*
  Animations
 */
@@ -78,6 +53,8 @@ function updateAnimations(time) {
             // Animation complete
             else {
                 Object.assign(task.node.props, task.propsEnd);
+                task.node.boundsDirty = true;
+                task.node.markChildrenBoundsDirty();
                 updateNodeStyles(task.node);
                 task.stop();
                 i--;
@@ -190,13 +167,11 @@ function animate(props, settings) {
 */
 let elMap = new WeakMap();
 function updateNodeParent(node) {
-    if (node.parent != null) {
-        elMap.get(node.parent).appendChild(node.div);
+    const parent = node.props.parent;
+    if (parent instanceof DOMNode) {
+        elMap.get(parent).appendChild(node.div);
     }
 }
-function getNodeLineHeight(props) {
-    return (props.lineHeight ?? Config.fontSettings.lineHeight ?? 1.2 * props.fontSize);
-}
 function updateNodeStyles(node) {
     let { props } = node;
     let style = `position: absolute; z-index: ${props.zIndex};`;
@@ -252,6 +227,9 @@ function updateNodeStyles(node) {
         if (textProps.fontWeight !== 'normal') {
             style += `font-weight: ${textProps.fontWeight};`;
         }
+        if (textProps.fontStretch && textProps.fontStretch !== 'normal') {
+            style += `font-stretch: ${textProps.fontStretch};`;
+        }
         if (textProps.lineHeight != null) {
             style += `line-height: ${textProps.lineHeight}px;`;
         }
@@ -264,20 +242,41 @@ function updateNodeStyles(node) {
         let maxLines = textProps.maxLines || Infinity;
         switch (textProps.contain) {
             case 'width':
-                style += `width: ${props.w}px; overflow: hidden;`;
+                if (textProps.maxWidth && textProps.maxWidth > 0) {
+                    style += `width: ${textProps.maxWidth}px;`;
+                }
+                else {
+                    style += `width: 100%;`;
+                }
+                style += `overflow: hidden;`;
                 break;
             case 'both': {
                 let lineHeight = getNodeLineHeight(textProps);
-                maxLines = Math.min(maxLines, Math.floor(props.h / lineHeight));
-                maxLines = Math.max(1, maxLines);
-                let height = maxLines * lineHeight;
-                style += `width: ${props.w}px; height: ${height}px; overflow: hidden;`;
+                const widthConstraint = textProps.maxWidth && textProps.maxWidth > 0
+                    ? `${textProps.maxWidth}px`
+                    : `100%`;
+                const heightConstraint = textProps.maxHeight && textProps.maxHeight > 0
+                    ? textProps.maxHeight
+                    : props.h;
+                let height = heightConstraint || 0;
+                if (height > 0) {
+                    const maxLinesByHeight = Math.max(1, Math.floor(height / lineHeight));
+                    maxLines = Math.min(maxLines, maxLinesByHeight);
+                    height = Math.max(lineHeight, maxLines * lineHeight);
+                }
+                else {
+                    maxLines = Number.isFinite(maxLines) ? Math.max(1, maxLines) : 1;
+                    height = maxLines * lineHeight;
+                }
+                style += `width: ${widthConstraint}; height: ${height}px; overflow: hidden;`;
                 break;
             }
             case 'none':
+                style += `width: -webkit-max-content;`;
                 style += `width: max-content;`;
                 break;
         }
+        style += `white-space: pre-wrap;`;
         if (maxLines !== Infinity) {
             // https://stackoverflow.com/a/13924997
             style += `display: -webkit-box;
@@ -288,12 +287,11 @@ function updateNodeStyles(node) {
         }
         // if (node.overflowSuffix) style += `overflow-suffix: ${node.overflowSuffix};`
         // if (node.verticalAlign) style += `vertical-align: ${node.verticalAlign};`
-        scheduleUpdateDOMTextMeasurement(node);
     }
     // <Node>
     else {
         if (props.w !== 0)
-            style += `width: ${props.w}px;`;
+            style += `width: ${props.w < 0 ? 0 : props.w}px;`;
         if (props.h !== 0)
             style += `height: ${props.h}px;`;
         let vGradient = props.colorBottom !== props.colorTop
@@ -307,53 +305,93 @@ function updateNodeStyles(node) {
             : vGradient || hGradient;
         let srcImg = null;
         let srcPos = null;
+        let rawImgSrc = null;
         if (props.texture != null &&
             props.texture.type === lng.TextureType.subTexture) {
-            srcPos = props.texture.props;
-            srcImg = `url(${props.texture.props.texture.props.src})`;
+            const texture = props.texture;
+            srcPos = texture.props;
+            rawImgSrc = texture.props.texture.props.src;
         }
         else if (props.src) {
-            srcImg = `url(${props.src})`;
+            rawImgSrc = props.src;
+        }
+        if (rawImgSrc) {
+            srcImg = `url(${rawImgSrc})`;
         }
         let bgStyle = '';
         let borderStyle = '';
         let radiusStyle = '';
         let maskStyle = '';
-        if (srcImg) {
-            if (props.color !== 0xffffffff && props.color !== 0x00000000) {
-                // use image as a mask
-                bgStyle += `background-color: ${colorToRgba(props.color)}; background-blend-mode: multiply;`;
-                maskStyle += `mask-image: ${srcImg};`;
-                if (srcPos !== null) {
-                    maskStyle += `mask-position: -${srcPos.x}px -${srcPos.y}px;`;
-                }
-                else {
-                    maskStyle += `mask-size: 100% 100%;`;
+        let needsBackgroundLayer = false;
+        let imgStyle = '';
+        let hasDivBgTint = false;
+        if (rawImgSrc) {
+            needsBackgroundLayer = true;
+            const hasTint = props.color !== 0xffffffff && props.color !== 0x00000000;
+            if (hasTint) {
+                bgStyle += `background-color: ${colorToRgba(props.color)};`;
+                if (srcImg) {
+                    maskStyle += `mask-image: ${srcImg};`;
+                    if (srcPos !== null) {
+                        maskStyle += `mask-position: -${srcPos.x}px -${srcPos.y}px;`;
+                    }
+                    else {
+                        maskStyle += `mask-size: 100% 100%;`;
+                    }
+                    hasDivBgTint = true;
                 }
             }
             else if (gradient) {
-                // use gradient as a mask
+                // use gradient as a mask when no tint is applied
                 maskStyle += `mask-image: ${gradient};`;
             }
-            bgStyle += `background-image: ${srcImg};`;
-            bgStyle += `background-repeat: no-repeat;`;
+            const imgStyleParts = [
+                'position: absolute',
+                'top: 0',
+                'left: 0',
+                'right: 0',
+                'bottom: 0',
+                'display: block',
+                'pointer-events: none',
+            ];
             if (props.textureOptions.resizeMode?.type) {
-                bgStyle += `background-size: ${props.textureOptions.resizeMode.type}; background-position: center;`;
+                const resizeMode = props.textureOptions.resizeMode;
+                imgStyleParts.push('width: 100%');
+                imgStyleParts.push('height: 100%');
+                imgStyleParts.push(`object-fit: ${resizeMode.type}`);
+                // Handle clipX and clipY for object-position
+                const clipX = resizeMode.clipX ?? 0.5;
+                const clipY = resizeMode.clipY ?? 0.5;
+                imgStyleParts.push(`object-position: ${clipX * 100}% ${clipY * 100}%`);
             }
             else if (srcPos !== null) {
-                bgStyle += `background-position: -${srcPos.x}px -${srcPos.y}px;`;
+                imgStyleParts.push('width: auto');
+                imgStyleParts.push('height: auto');
+                imgStyleParts.push('object-fit: none');
+                imgStyleParts.push(`object-position: -${srcPos.x}px -${srcPos.y}px`);
             }
-            else {
-                bgStyle += 'background-size: 100% 100%;';
+            else if (props.w && !props.h) {
+                imgStyleParts.push('width: 100%');
+                imgStyleParts.push('height: auto');
             }
-            if (maskStyle !== '') {
-                bgStyle += maskStyle;
+            else if (props.h && !props.w) {
+                imgStyleParts.push('width: auto');
+                imgStyleParts.push('height: 100%');
             }
-            // separate layers are needed for the mask
-            if (maskStyle !== '' && node.divBg == null) {
-                node.div.appendChild((node.divBg = document.createElement('div')));
-                node.div.appendChild((node.divBorder = document.createElement('div')));
+            else {
+                imgStyleParts.push('width: 100%');
+                imgStyleParts.push('height: 100%');
+                imgStyleParts.push('object-fit: fill');
+            }
+            if (hasTint) {
+                if (supportsMixBlendMode) {
+                    imgStyleParts.push('mix-blend-mode: multiply');
+                }
+                else {
+                    imgStyleParts.push('opacity: 0.9');
+                }
             }
+            imgStyle = imgStyleParts.join('; ') + ';';
         }
         else if (gradient) {
             bgStyle += `background-image: ${gradient};`;
@@ -364,20 +402,21 @@ function updateNodeStyles(node) {
             bgStyle += `background-color: ${colorToRgba(props.color)};`;
         }
         if (props.shader?.props != null) {
-            let shader = props.shader.props;
-            let borderWidth = shader['border-w'];
-            let borderColor = shader['border-color'];
-            let borderGap = shader['border-gap'] ?? 0;
-            let borderInset = shader['border-inset'] ?? true;
-            let radius = shader['radius'];
+            let shaderProps = props.shader.props;
+            let borderWidth = shaderProps['border-w'];
+            let borderColor = shaderProps['border-color'];
+            let borderGap = shaderProps['border-gap'] ?? 0;
+            let borderInset = shaderProps['border-inset'] ?? true;
+            let radius = shaderProps['radius'];
             // Border
             if (typeof borderWidth === 'number' &&
                 borderWidth !== 0 &&
                 typeof borderColor === 'number' &&
                 borderColor !== 0) {
+                const rgbaColor = colorToRgba(borderColor);
                 // Handle inset borders by making gap negative
                 let gap = borderInset ? -(borderWidth + borderGap) : borderGap;
-                borderStyle += `outline: ${borderWidth}px solid ${colorToRgba(borderColor)};`;
+                borderStyle += `outline: ${borderWidth}px solid ${rgbaColor};`;
                 borderStyle += `outline-offset: ${gap}px;`;
             }
             // Rounded
@@ -387,42 +426,254 @@ function updateNodeStyles(node) {
             else if (Array.isArray(radius) && radius.length === 4) {
                 radiusStyle += `border-radius: ${radius[0]}px ${radius[1]}px ${radius[2]}px ${radius[3]}px;`;
             }
+            if ('radial' in shaderProps) {
+                const rg = shaderProps.radial;
+                const colors = Array.isArray(rg?.colors) ? rg.colors : [];
+                const stops = Array.isArray(rg?.stops) ? rg.stops : undefined;
+                const pivot = Array.isArray(rg?.pivot) ? rg.pivot : [0.5, 0.5];
+                const width = typeof rg?.w === 'number' ? rg.w : props.w || 0;
+                const height = typeof rg?.h === 'number' ? rg.h : width;
+                if (colors.length > 0) {
+                    const gradientStops = buildGradientStops(colors, stops);
+                    if (gradientStops) {
+                        if (colors.length === 1) {
+                            // Single color -> solid fill
+                            if (srcImg || gradient) {
+                                maskStyle += `mask-image: linear-gradient(${gradientStops});`;
+                            }
+                            else {
+                                bgStyle += `background-color: ${colorToRgba(colors[0])};`;
+                            }
+                        }
+                        else {
+                            const isEllipse = width > 0 && height > 0 && width !== height;
+                            const pivotX = (pivot[0] ?? 0.5) * 100;
+                            const pivotY = (pivot[1] ?? 0.5) * 100;
+                            let sizePart = '';
+                            if (width > 0 && height > 0) {
+                                if (!isEllipse && width === height) {
+                                    sizePart = `${Math.round(width)}px`;
+                                }
+                                else {
+                                    sizePart = `${Math.round(width)}px ${Math.round(height)}px`;
+                                }
+                            }
+                            else {
+                                sizePart = 'closest-side';
+                            }
+                            const radialGradient = `radial-gradient(${isEllipse ? 'ellipse' : 'circle'} ${sizePart} at ${pivotX.toFixed(2)}% ${pivotY.toFixed(2)}%, ${gradientStops})`;
+                            if (srcImg || gradient) {
+                                maskStyle += `mask-image: ${radialGradient};`;
+                            }
+                            else {
+                                bgStyle += `background-image: ${radialGradient};`;
+                                bgStyle += `background-repeat: no-repeat;`;
+                                bgStyle += `background-size: 100% 100%;`;
+                            }
+                        }
+                    }
+                }
+            }
+            if ('linear' in shaderProps) {
+                const lg = shaderProps.linear;
+                const colors = Array.isArray(lg?.colors) ? lg.colors : [];
+                const stops = Array.isArray(lg?.stops) ? lg.stops : undefined;
+                const angleRad = typeof lg?.angle === 'number' ? lg.angle : 0; // radians
+                if (colors.length > 0) {
+                    const gradientStops = buildGradientStops(colors, stops);
+                    if (gradientStops) {
+                        if (colors.length === 1) {
+                            if (srcImg || gradient) {
+                                maskStyle += `mask-image: linear-gradient(${gradientStops});`;
+                            }
+                            else {
+                                bgStyle += `background-color: ${colorToRgba(colors[0])};`;
+                            }
+                        }
+                        else {
+                            const angleDeg = 180 * (angleRad / Math.PI - 1);
+                            const linearGradient = `linear-gradient(${angleDeg.toFixed(2)}deg, ${gradientStops})`;
+                            if (srcImg || gradient) {
+                                maskStyle += `mask-image: ${linearGradient};`;
+                            }
+                            else {
+                                bgStyle += `background-image: ${linearGradient};`;
+                                bgStyle += `background-repeat: no-repeat;`;
+                                bgStyle += `background-size: 100% 100%;`;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        if (maskStyle !== '') {
+            if (!supportsStandardMask && supportsWebkitMask) {
+                maskStyle = maskStyle.replace(/mask-/g, '-webkit-mask-');
+            }
+            else if (!supportsCssMask) {
+                maskStyle = '';
+            }
+            if (maskStyle !== '') {
+                needsBackgroundLayer = true;
+            }
         }
         style += radiusStyle;
-        bgStyle += radiusStyle;
-        borderStyle += radiusStyle;
-        if (node.divBg == null) {
-            style += bgStyle;
+        if (needsBackgroundLayer) {
+            if (node.divBg == null) {
+                node.divBg = document.createElement('div');
+                node.div.insertBefore(node.divBg, node.div.firstChild);
+            }
+            else if (node.divBg.parentElement !== node.div) {
+                node.div.insertBefore(node.divBg, node.div.firstChild);
+            }
+            let bgLayerStyle = 'position: absolute; top:0; left:0; right:0; bottom:0; z-index: -1; pointer-events: none; overflow: hidden;';
+            if (bgStyle) {
+                bgLayerStyle += bgStyle;
+            }
+            if (maskStyle) {
+                bgLayerStyle += maskStyle;
+            }
+            node.divBg.setAttribute('style', bgLayerStyle + radiusStyle);
+            if (rawImgSrc) {
+                if (!node.imgEl) {
+                    node.imgEl = document.createElement('img');
+                    node.imgEl.alt = '';
+                    node.imgEl.crossOrigin = 'anonymous';
+                    node.imgEl.setAttribute('aria-hidden', 'true');
+                    node.imgEl.setAttribute('loading', 'lazy');
+                    node.imgEl.removeAttribute('src');
+                    node.imgEl.addEventListener('load', () => {
+                        const payload = {
+                            type: 'texture',
+                            dimensions: {
+                                w: node.imgEl.naturalWidth,
+                                h: node.imgEl.naturalHeight,
+                            },
+                        };
+                        node.imgEl.style.display = '';
+                        applySubTextureScaling(node, node.imgEl, node.lazyImageSubTextureProps);
+                        const resizeMode = node.props.textureOptions?.resizeMode;
+                        const clipX = resizeMode?.clipX ?? 0.5;
+                        const clipY = resizeMode?.clipY ?? 0.5;
+                        computeLegacyObjectFit(node, node.imgEl, resizeMode, clipX, clipY, node.lazyImageSubTextureProps, supportsObjectFit, supportsObjectPosition);
+                        node.emit('loaded', payload);
+                    });
+                    node.imgEl.addEventListener('error', () => {
+                        if (node.imgEl) {
+                            node.imgEl.removeAttribute('src');
+                            node.imgEl.style.display = 'none';
+                            node.imgEl.removeAttribute('data-rawSrc');
+                        }
+                        const failedSrc = node.imgEl?.dataset.pendingSrc || node.lazyImagePendingSrc || '';
+                        const payload = {
+                            type: 'texture',
+                            error: new Error(`Failed to load image: ${failedSrc}`),
+                        };
+                        node.emit('failed', payload);
+                    });
+                }
+                node.lazyImagePendingSrc = rawImgSrc;
+                node.lazyImageSubTextureProps = srcPos;
+                node.imgEl.dataset.pendingSrc = rawImgSrc;
+                if (node.imgEl.parentElement !== node.divBg) {
+                    node.divBg.appendChild(node.imgEl);
+                }
+                node.imgEl.setAttribute('style', imgStyle);
+                if (hasDivBgTint) {
+                    node.imgEl.style.visibility = 'hidden';
+                }
+                if (isRenderStateInBounds(node.renderState)) {
+                    node.applyPendingImageSrc();
+                }
+                else if (!node.imgEl.dataset.rawSrc) {
+                    node.imgEl.removeAttribute('src');
+                }
+                if (srcPos &&
+                    node.imgEl.complete &&
+                    node.imgEl.dataset.rawSrc === rawImgSrc) {
+                    applySubTextureScaling(node, node.imgEl, srcPos);
+                }
+                if (!srcPos &&
+                    node.imgEl.complete &&
+                    (!supportsObjectFit || !supportsObjectPosition) &&
+                    node.imgEl.dataset.rawSrc === rawImgSrc) {
+                    const resizeMode = node.props.textureOptions?.resizeMode;
+                    const clipX = resizeMode?.clipX ?? 0.5;
+                    const clipY = resizeMode?.clipY ?? 0.5;
+                    computeLegacyObjectFit(node, node.imgEl, resizeMode, clipX, clipY, srcPos, supportsObjectFit, supportsObjectPosition);
+                }
+            }
+            else {
+                node.lazyImagePendingSrc = null;
+                node.lazyImageSubTextureProps = null;
+                if (node.imgEl) {
+                    node.imgEl.remove();
+                    node.imgEl = undefined;
+                }
+            }
         }
         else {
-            bgStyle += 'position: absolute; inset: 0; z-index: -1;';
-            node.divBg.setAttribute('style', bgStyle);
+            node.lazyImagePendingSrc = null;
+            node.lazyImageSubTextureProps = null;
+            if (node.imgEl) {
+                node.imgEl.remove();
+                node.imgEl = undefined;
+            }
+            if (node.divBg) {
+                node.divBg.remove();
+                node.divBg = undefined;
+            }
+            style += bgStyle;
+        }
+        const needsSeparateBorderLayer = needsBackgroundLayer && maskStyle !== '';
+        if (needsSeparateBorderLayer) {
+            if (node.divBorder == null) {
+                node.divBorder = document.createElement('div');
+                node.div.appendChild(node.divBorder);
+            }
+        }
+        else if (node.divBorder) {
+            node.divBorder.remove();
+            node.divBorder = undefined;
         }
         if (node.divBorder == null) {
             style += borderStyle;
         }
         else {
-            borderStyle += 'position: absolute; inset: 0; z-index: -1;';
-            node.divBorder.setAttribute('style', borderStyle);
+            let borderLayerStyle = 'position: absolute; top:0; left:0; right:0; bottom:0; z-index: -1; pointer-events: none;';
+            borderLayerStyle += borderStyle;
+            node.divBorder.setAttribute('style', borderLayerStyle + radiusStyle);
+        }
+    }
+    node.div.setAttribute('style', compactString(style));
+    if (node instanceof DOMNode && node !== node.stage.root) {
+        const hasTextureSrc = nodeHasTextureSource(node);
+        if (hasTextureSrc && node.boundsDirty) {
+            const next = computeRenderStateForNode(node);
+            if (next != null) {
+                node.updateRenderState(next);
+            }
+            node.boundsDirty = false;
+        }
+        else if (!hasTextureSrc) {
+            node.boundsDirty = false;
         }
     }
-    node.div.setAttribute('style', style);
 }
-const fontFamiliesToLoad = new Set();
 const textNodesToMeasure = new Set();
 function getElSize(node) {
-    let rect = node.div.getBoundingClientRect();
-    let dpr = Config.rendererOptions?.deviceLogicalPixelRatio ?? 1;
-    rect.height /= dpr;
-    rect.width /= dpr;
+    const rawRect = node.div.getBoundingClientRect();
+    const dpr = Config.rendererOptions?.deviceLogicalPixelRatio ?? 1;
+    let width = rawRect.width / dpr;
+    let height = rawRect.height / dpr;
     for (;;) {
         if (node.props.scale != null && node.props.scale !== 1) {
-            rect.height /= node.props.scale;
-            rect.width /= node.props.scale;
+            width /= node.props.scale;
+            height /= node.props.scale;
         }
         else {
-            rect.height /= node.props.scaleY;
-            rect.width /= node.props.scaleX;
+            width /= node.props.scaleX;
+            height /= node.props.scaleY;
         }
         if (node.parent instanceof DOMNode) {
             node = node.parent;
@@ -431,7 +682,7 @@ function getElSize(node) {
             break;
         }
     }
-    return rect;
+    return { width, height };
 }
 /*
   Text nodes with contain 'width' or 'none'
@@ -446,7 +697,6 @@ function updateDOMTextSize(node) {
             if (node.props.h !== size.height) {
                 node.props.h = size.height;
                 updateNodeStyles(node);
-                node.emit('loaded');
             }
             break;
         case 'none':
@@ -455,10 +705,20 @@ function updateDOMTextSize(node) {
                 node.props.w = size.width;
                 node.props.h = size.height;
                 updateNodeStyles(node);
-                node.emit('loaded');
             }
             break;
     }
+    if (!node.loaded) {
+        const payload = {
+            type: 'text',
+            dimensions: {
+                w: node.props.w,
+                h: node.props.h,
+            },
+        };
+        node.emit('loaded', payload);
+        node.loaded = true;
+    }
 }
 function updateDOMTextMeasurements() {
     textNodesToMeasure.forEach(updateDOMTextSize);
@@ -468,33 +728,36 @@ function scheduleUpdateDOMTextMeasurement(node) {
     /*
       Make sure the font is loaded before measuring
     */
-    if (node.fontFamily && !fontFamiliesToLoad.has(node.fontFamily)) {
-        fontFamiliesToLoad.add(node.fontFamily);
-        document.fonts.load(`16px ${node.fontFamily}`);
-    }
     if (textNodesToMeasure.size === 0) {
+        const fonts = document.fonts;
         if (document.fonts.status === 'loaded') {
             setTimeout(updateDOMTextMeasurements);
         }
         else {
-            document.fonts.ready.then(updateDOMTextMeasurements);
+            if (fonts && fonts.ready && typeof fonts.ready.then === 'function') {
+                fonts.ready.then(updateDOMTextMeasurements);
+            }
+            else {
+                setTimeout(updateDOMTextMeasurements, 500);
+            }
         }
     }
     textNodesToMeasure.add(node);
 }
 function updateNodeData(node) {
-    for (let key in node.data) {
-        let keyValue = node.data[key];
+    const data = node.data;
+    for (let key in data) {
+        let keyValue = data[key];
         if (keyValue === undefined) {
             node.div.removeAttribute('data-' + key);
         }
         else {
-            node.div.setAttribute('data-' + key, String(keyValue));
+            node.div.dataset[key] = String(keyValue);
         }
     }
 }
 function resolveNodeDefaults(props) {
-    const color = props.color ?? 0xffffffff;
+    const color = props.color ?? 0x00000000;
     return {
         x: props.x ?? 0,
         y: props.y ?? 0,
@@ -568,14 +831,26 @@ const defaultShader = {
     props: undefined,
 };
 let lastNodeId = 0;
-class DOMNode extends EventEmitter {
+const CoreNodeRenderStateMap = new Map([
+    [0, 'init'],
+    [2, 'outOfBounds'],
+    [4, 'inBounds'],
+    [8, 'inViewport'],
+]);
+export class DOMNode extends EventEmitter {
     stage;
     props;
     div = document.createElement('div');
     divBg;
     divBorder;
+    imgEl;
+    lazyImagePendingSrc = null;
+    lazyImageSubTextureProps = null;
+    boundsDirty = true;
+    children = new Set();
     id = ++lastNodeId;
     renderState = 0 /* Init */;
+    preventCleanup = true;
     constructor(stage, props) {
         super();
         this.stage = stage;
@@ -584,62 +859,152 @@ class DOMNode extends EventEmitter {
         this.div._node = this;
         this.div.setAttribute('data-id', String(this.id));
         elMap.set(this, this.div);
+        const parent = this.props.parent;
+        if (parent instanceof DOMNode) {
+            parent.children.add(this);
+        }
         updateNodeParent(this);
         updateNodeStyles(this);
         updateNodeData(this);
     }
     destroy() {
         elMap.delete(this);
+        const parent = this.props.parent;
+        if (parent instanceof DOMNode) {
+            parent.children.delete(this);
+        }
         this.div.parentNode.removeChild(this.div);
     }
     get parent() {
         return this.props.parent;
     }
     set parent(value) {
+        if (this.props.parent === value)
+            return;
+        const prevParent = this.props.parent;
+        if (prevParent instanceof DOMNode) {
+            prevParent.children.delete(this);
+            prevParent.markChildrenBoundsDirty();
+        }
         this.props.parent = value;
+        if (value instanceof DOMNode) {
+            value.children.add(this);
+            value.markChildrenBoundsDirty();
+        }
+        this.boundsDirty = true;
+        this.markChildrenBoundsDirty();
         updateNodeParent(this);
     }
+    markChildrenBoundsDirty() {
+        for (const child of this.children) {
+            child.boundsDirty = true;
+            if (child !== child.stage.root) {
+                if (nodeHasTextureSource(child)) {
+                    const nextState = computeRenderStateForNode(child);
+                    if (nextState != null) {
+                        child.updateRenderState(nextState);
+                    }
+                }
+                child.boundsDirty = false;
+            }
+            child.markChildrenBoundsDirty();
+        }
+    }
     animate = animate;
+    updateRenderState(renderState) {
+        if (renderState === this.renderState)
+            return;
+        const previous = this.renderState;
+        this.renderState = renderState;
+        const event = CoreNodeRenderStateMap.get(renderState);
+        if (isRenderStateInBounds(renderState)) {
+            this.applyPendingImageSrc();
+        }
+        if (event && event !== 'init') {
+            this.emit(event, { previous, current: renderState });
+        }
+        if (this.imgEl) {
+            this.imgEl.dataset.state = event;
+        }
+    }
+    applyPendingImageSrc() {
+        if (!this.imgEl)
+            return;
+        const pendingSrc = this.lazyImagePendingSrc;
+        if (!pendingSrc)
+            return;
+        if (this.imgEl.dataset.rawSrc === pendingSrc)
+            return;
+        this.imgEl.style.display = '';
+        this.imgEl.dataset.pendingSrc = pendingSrc;
+        this.imgEl.src = pendingSrc;
+        this.imgEl.dataset.rawSrc = pendingSrc;
+        this.imgEl.dataset.pendingSrc = '';
+    }
     get x() {
         return this.props.x;
     }
     set x(v) {
+        if (this.props.x === v)
+            return;
         this.props.x = v;
+        this.boundsDirty = true;
+        this.markChildrenBoundsDirty();
         updateNodeStyles(this);
     }
     get y() {
         return this.props.y;
     }
     set y(v) {
+        if (this.props.y === v)
+            return;
         this.props.y = v;
+        this.boundsDirty = true;
+        this.markChildrenBoundsDirty();
         updateNodeStyles(this);
     }
     get w() {
         return this.props.w;
     }
     set w(v) {
+        if (this.props.w === v)
+            return;
         this.props.w = v;
+        this.boundsDirty = true;
+        this.markChildrenBoundsDirty();
         updateNodeStyles(this);
     }
     get h() {
         return this.props.h;
     }
     set h(v) {
+        if (this.props.h === v)
+            return;
         this.props.h = v;
+        this.boundsDirty = true;
+        this.markChildrenBoundsDirty();
         updateNodeStyles(this);
     }
     get width() {
         return this.props.w;
     }
     set width(v) {
+        if (this.props.w === v)
+            return;
         this.props.w = v;
+        this.boundsDirty = true;
+        this.markChildrenBoundsDirty();
         updateNodeStyles(this);
     }
     get height() {
         return this.props.h;
     }
     set height(v) {
+        if (this.props.h === v)
+            return;
         this.props.h = v;
+        this.boundsDirty = true;
+        this.markChildrenBoundsDirty();
         updateNodeStyles(this);
     }
     get alpha() {
@@ -730,14 +1095,19 @@ class DOMNode extends EventEmitter {
         return this.props.zIndex;
     }
     set zIndex(v) {
-        this.props.zIndex = v;
+        if (this.props.zIndex === v)
+            return;
+        this.props.zIndex = Math.ceil(v);
         updateNodeStyles(this);
     }
     get texture() {
         return this.props.texture;
     }
     set texture(v) {
+        if (this.props.texture === v)
+            return;
         this.props.texture = v;
+        this.boundsDirty = true;
         updateNodeStyles(this);
     }
     get textureOptions() {
@@ -751,13 +1121,18 @@ class DOMNode extends EventEmitter {
         return this.props.src;
     }
     set src(v) {
+        if (this.props.src === v)
+            return;
         this.props.src = v;
+        this.boundsDirty = true;
         updateNodeStyles(this);
     }
     get scale() {
         return this.props.scale ?? 1;
     }
     set scale(v) {
+        if (this.props.scale === v)
+            return;
         this.props.scale = v;
         updateNodeStyles(this);
     }
@@ -880,25 +1255,37 @@ class DOMNode extends EventEmitter {
     }
     set boundsMargin(value) {
         this.props.boundsMargin = value;
+        this.boundsDirty = true;
+        this.markChildrenBoundsDirty();
     }
     get absX() {
-        return this.x + -this.width * this.mountX + (this.parent?.absX ?? 0);
+        const parent = this.props.parent;
+        return (this.x +
+            -this.w * this.mountX +
+            (parent instanceof DOMNode ? parent.absX : 0));
     }
     get absY() {
-        return this.y + -this.height * this.mountY + (this.parent?.absY ?? 0);
+        const parent = this.props.parent;
+        return (this.y +
+            -this.h * this.mountY +
+            (parent instanceof DOMNode ? parent.absY : 0));
     }
 }
 class DOMText extends DOMNode {
     props;
+    loaded = false;
     constructor(stage, props) {
         super(stage, props);
         this.props = props;
         this.div.innerText = props.text;
+        scheduleUpdateDOMTextMeasurement(this);
     }
     get text() {
         return this.props.text;
     }
     set text(v) {
+        if (this.props.text === v)
+            return;
         this.props.text = v;
         this.div.innerText = v;
         scheduleUpdateDOMTextMeasurement(this);
@@ -907,29 +1294,51 @@ class DOMText extends DOMNode {
         return this.props.fontFamily;
     }
     set fontFamily(v) {
+        if (this.props.fontFamily === v)
+            return;
         this.props.fontFamily = v;
         updateNodeStyles(this);
+        scheduleUpdateDOMTextMeasurement(this);
     }
     get fontSize() {
         return this.props.fontSize;
     }
     set fontSize(v) {
+        if (this.props.fontSize === v)
+            return;
         this.props.fontSize = v;
         updateNodeStyles(this);
+        scheduleUpdateDOMTextMeasurement(this);
     }
     get fontStyle() {
         return this.props.fontStyle;
     }
     set fontStyle(v) {
+        if (this.props.fontStyle === v)
+            return;
         this.props.fontStyle = v;
         updateNodeStyles(this);
+        scheduleUpdateDOMTextMeasurement(this);
     }
     get fontWeight() {
         return this.props.fontWeight;
     }
     set fontWeight(v) {
+        if (this.props.fontWeight === v)
+            return;
         this.props.fontWeight = v;
         updateNodeStyles(this);
+        scheduleUpdateDOMTextMeasurement(this);
+    }
+    get fontStretch() {
+        return this.props.fontStretch;
+    }
+    set fontStretch(v) {
+        if (this.props.fontStretch === v)
+            return;
+        this.props.fontStretch = v;
+        updateNodeStyles(this);
+        scheduleUpdateDOMTextMeasurement(this);
     }
     get forceLoad() {
         return this.props.forceLoad;
@@ -941,34 +1350,48 @@ class DOMText extends DOMNode {
         return this.props.lineHeight;
     }
     set lineHeight(v) {
+        if (this.props.lineHeight === v)
+            return;
         this.props.lineHeight = v;
         updateNodeStyles(this);
+        scheduleUpdateDOMTextMeasurement(this);
     }
     get maxWidth() {
         return this.props.maxWidth;
     }
     set maxWidth(v) {
+        if (this.props.maxWidth === v)
+            return;
         this.props.maxWidth = v;
         updateNodeStyles(this);
+        scheduleUpdateDOMTextMeasurement(this);
     }
     get maxHeight() {
         return this.props.maxHeight;
     }
     set maxHeight(v) {
+        if (this.props.maxHeight === v)
+            return;
         this.props.maxHeight = v;
         updateNodeStyles(this);
+        scheduleUpdateDOMTextMeasurement(this);
     }
     get letterSpacing() {
         return this.props.letterSpacing;
     }
     set letterSpacing(v) {
+        if (this.props.letterSpacing === v)
+            return;
         this.props.letterSpacing = v;
         updateNodeStyles(this);
+        scheduleUpdateDOMTextMeasurement(this);
     }
     get textAlign() {
         return this.props.textAlign;
     }
     set textAlign(v) {
+        if (this.props.textAlign === v)
+            return;
         this.props.textAlign = v;
         updateNodeStyles(this);
     }
@@ -976,6 +1399,8 @@ class DOMText extends DOMNode {
         return this.props.overflowSuffix;
     }
     set overflowSuffix(v) {
+        if (this.props.overflowSuffix === v)
+            return;
         this.props.overflowSuffix = v;
         updateNodeStyles(this);
     }
@@ -983,15 +1408,21 @@ class DOMText extends DOMNode {
         return this.props.maxLines;
     }
     set maxLines(v) {
+        if (this.props.maxLines === v)
+            return;
         this.props.maxLines = v;
         updateNodeStyles(this);
+        scheduleUpdateDOMTextMeasurement(this);
     }
     get contain() {
         return this.props.contain;
     }
     set contain(v) {
+        if (this.props.contain === v)
+            return;
         this.props.contain = v;
         updateNodeStyles(this);
+        scheduleUpdateDOMTextMeasurement(this);
     }
     get verticalAlign() {
         return this.props.verticalAlign;
@@ -1044,6 +1475,7 @@ export class DOMRendererMain {
     root;
     canvas;
     stage;
+    eventListeners = new Map();
     constructor(settings, rawTarget) {
         this.settings = settings;
         let target;
@@ -1070,22 +1502,27 @@ export class DOMRendererMain {
             root: null,
             renderer: {
                 mode: 'canvas',
+                boundsMargin: settings.boundsMargin,
             },
-            loadFont: async () => { },
             shManager: {
                 registerShaderType() { },
             },
             animationManager: {
-                registerAnimation() { },
-                unregisterAnimation() { },
+                registerAnimation(anim) {
+                    console.log('registerAnimation', anim);
+                },
+                unregisterAnimation(anim) {
+                    console.log('unregisterAnimation', anim);
+                },
             },
+            loadFont: async () => { },
             cleanup() { },
         };
         this.root = new DOMNode(this.stage, resolveNodeDefaults({
             w: settings.appWidth ?? 1920,
             h: settings.appHeight ?? 1080,
             shader: defaultShader,
-            zIndex: 65534,
+            zIndex: 1,
         }));
         this.stage.root = this.root;
         target.appendChild(this.root.div);
@@ -1116,14 +1553,76 @@ export class DOMRendererMain {
         new ResizeObserver(updateRootPosition.bind(this)).observe(this.canvas);
         window.addEventListener('resize', updateRootPosition.bind(this));
     }
+    removeAllListeners() {
+        if (this.eventListeners.size === 0)
+            return;
+        this.eventListeners.forEach((listeners) => listeners.clear());
+        this.eventListeners.clear();
+    }
+    once(event, listener) {
+        const wrappedListener = (target, data) => {
+            this.off(event, wrappedListener);
+            listener(target, data);
+        };
+        this.on(event, wrappedListener);
+    }
+    on(name, callback) {
+        let listeners = this.eventListeners.get(name);
+        if (!listeners) {
+            listeners = new Set();
+            this.eventListeners.set(name, listeners);
+        }
+        listeners.add(callback);
+    }
+    off(event, listener) {
+        const listeners = this.eventListeners.get(event);
+        if (listeners) {
+            listeners.delete(listener);
+            if (listeners.size === 0) {
+                this.eventListeners.delete(event);
+            }
+        }
+    }
+    emit(event, targetOrData, maybeData) {
+        const listeners = this.eventListeners.get(event);
+        if (!listeners || listeners.size === 0) {
+            return;
+        }
+        const hasExplicitTarget = arguments.length === 3;
+        const target = hasExplicitTarget ? targetOrData : this.root;
+        const data = hasExplicitTarget ? maybeData : targetOrData;
+        for (const listener of Array.from(listeners)) {
+            try {
+                listener(target, data);
+            }
+            catch (error) {
+                console.error(`Error in listener for event "${event}"`, error);
+            }
+        }
+    }
     createNode(props) {
         return new DOMNode(this.stage, resolveNodeDefaults(props));
     }
     createTextNode(props) {
         return new DOMText(this.stage, resolveTextNodeDefaults(props));
     }
-    createShader(shaderType, props) {
-        return { shaderType, props, program: {} };
+    /** TODO: restore this */
+    // createShader<ShType extends keyof ShaderMap>(
+    //   shType: ShType,
+    //   props?: OptionalShaderProps<ShType>,
+    // ): InstanceType<lng.ShaderMap[ShType]> {
+    //   return { shaderType: shType, props, program: {} } as InstanceType<
+    //     lng.ShaderMap[ShType]
+    //   >;
+    // }
+    createShader(...args) {
+        const [shaderType, props] = args;
+        return {
+            // @ts-ignore
+            shaderType,
+            props,
+            program: {},
+        };
     }
     createTexture(textureType, props) {
         let type = lng.TextureType.generic;
@@ -1146,8 +1645,20 @@ export class DOMRendererMain {
         }
         return { type, props };
     }
-    on(name, callback) {
-        console.log('on', name, callback);
+}
+export function loadFontToDom(font) {
+    // fontFamily: string;
+    // metrics?: FontMetrics;
+    // fontUrl?: string;
+    // atlasUrl?: string;
+    // atlasDataUrl?: string;
+    const fontFace = new FontFace(font.fontFamily, `url(${font.fontUrl})`);
+    if (typeof document !== 'undefined' && 'fonts' in document) {
+        const fontSet = document.fonts;
+        fontSet.add?.(fontFace);
     }
 }
+export function isDomRenderer(r) {
+    return r instanceof DOMRendererMain;
+}
 //# sourceMappingURL=domRenderer.js.map