@lightningtv/solid 3.1.6 → 3.1.8

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

@@ -5,72 +5,45 @@ Experimental DOM renderer
 */
 
 import * as lng from '@lightningjs/renderer';
-import { EventEmitter } from '@lightningjs/renderer/utils';
 
-import { Config } from './config.js';
-import {
-  IRendererShader,
-  IRendererStage,
-  IRendererShaderProps,
-  IRendererTextureProps,
-  IRendererTexture,
+import { EventEmitter } from '@lightningjs/renderer/utils';
+import { Config } from '../config.js';
+import type {
+  ExtractProps,
   IRendererMain,
   IRendererNode,
   IRendererNodeProps,
+  IRendererShader,
+  IRendererStage,
   IRendererTextNode,
   IRendererTextNodeProps,
-} from './lightningInit.js';
-import { isFunc } from './utils.js';
-
-const colorToRgba = (c: number) =>
-  `rgba(${(c >> 24) & 0xff},${(c >> 16) & 0xff},${(c >> 8) & 0xff},${(c & 0xff) / 255})`;
-
-function applyEasing(
-  easing: string | lng.TimingFunction,
-  progress: number,
-): number {
-  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: number, end: number, t: number): number {
-  return start + (end - start) * t;
-}
-
-function interpolateColor(start: number, end: number, t: number): number {
-  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: string,
-  start: number,
-  end: number,
-  t: number,
-): number {
-  return name.startsWith('color')
-    ? interpolateColor(start, end, t)
-    : interpolate(start, end, t);
-}
+  DomRendererMainSettings,
+} from './domRendererTypes.js';
+import {
+  colorToRgba,
+  buildGradientStops,
+  computeLegacyObjectFit,
+  applySubTextureScaling,
+  getNodeLineHeight,
+  applyEasing,
+  interpolateProp,
+  isRenderStateInBounds,
+  nodeHasTextureSource,
+  computeRenderStateForNode,
+  compactString,
+} from './domRendererUtils.js';
+import { FontLoadOptions } from '../intrinsicTypes.js';
+
+// Feature detection for legacy brousers
+const _styleRef: any =
+  typeof document !== 'undefined' ? document.documentElement?.style || {} : {};
+
+const supportsObjectFit: boolean = 'objectFit' in _styleRef;
+const supportsObjectPosition: boolean = 'objectPosition' in _styleRef;
+const supportsMixBlendMode: boolean = 'mixBlendMode' in _styleRef;
+const supportsStandardMask: boolean = 'maskImage' in _styleRef;
+const supportsWebkitMask: boolean = 'webkitMaskImage' in _styleRef;
+const supportsCssMask: boolean = supportsStandardMask || supportsWebkitMask;
 
 /*
  Animations
@@ -117,6 +90,8 @@ function updateAnimations(time: number) {
       // Animation complete
       else {
         Object.assign(task.node.props, task.propsEnd);
+        task.node.boundsDirty = true;
+        task.node.markChildrenBoundsDirty();
         updateNodeStyles(task.node);
 
         task.stop();
@@ -251,17 +226,12 @@ function animate(
 let elMap = new WeakMap<DOMNode, HTMLElement>();
 
 function updateNodeParent(node: DOMNode | DOMText) {
-  if (node.parent != null) {
-    elMap.get(node.parent as DOMNode)!.appendChild(node.div);
+  const parent = node.props.parent;
+  if (parent instanceof DOMNode) {
+    elMap.get(parent)!.appendChild(node.div);
   }
 }
 
-function getNodeLineHeight(props: IRendererTextNodeProps): number {
-  return (
-    props.lineHeight ?? Config.fontSettings.lineHeight ?? 1.2 * props.fontSize
-  );
-}
-
 function updateNodeStyles(node: DOMNode | DOMText) {
   let { props } = node;
 
@@ -324,6 +294,9 @@ function updateNodeStyles(node: DOMNode | DOMText) {
     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;`;
     }
@@ -337,21 +310,45 @@ function updateNodeStyles(node: DOMNode | DOMText) {
     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;
@@ -363,12 +360,10 @@ function updateNodeStyles(node: DOMNode | DOMText) {
 
     // 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;`;
+    if (props.w !== 0) style += `width: ${props.w < 0 ? 0 : props.w}px;`;
     if (props.h !== 0) style += `height: ${props.h}px;`;
 
     let vGradient =
@@ -387,57 +382,101 @@ function updateNodeStyles(node: DOMNode | DOMText) {
         : vGradient || hGradient;
 
     let srcImg: string | null = null;
-    let srcPos: null | { x: number; y: number } = null;
+    let srcPos: null | InstanceType<lng.TextureMap['SubTexture']>['props'] =
+      null;
+    let rawImgSrc: string | null = null;
 
     if (
       props.texture != null &&
       props.texture.type === lng.TextureType.subTexture
     ) {
-      srcPos = (props.texture as any).props;
-      srcImg = `url(${(props.texture as any).props.texture.props.src})`;
+      const texture = props.texture as InstanceType<
+        lng.TextureMap['SubTexture']
+      >;
+      srcPos = texture.props;
+      rawImgSrc = (texture.props.texture as any).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 as any).clipX ?? 0.5;
+        const clipY = (resizeMode as any).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 if (props.w && !props.h) {
+        imgStyleParts.push('width: 100%');
+        imgStyleParts.push('height: auto');
+      } else if (props.h && !props.w) {
+        imgStyleParts.push('width: auto');
+        imgStyleParts.push('height: 100%');
       } else {
-        bgStyle += 'background-size: 100% 100%;';
+        imgStyleParts.push('width: 100%');
+        imgStyleParts.push('height: 100%');
+        imgStyleParts.push('object-fit: fill');
       }
-
-      if (maskStyle !== '') {
-        bgStyle += maskStyle;
-      }
-      // 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')));
+      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};`;
       bgStyle += `background-repeat: no-repeat;`;
@@ -447,13 +486,13 @@ function updateNodeStyles(node: DOMNode | DOMText) {
     }
 
     if (props.shader?.props != null) {
-      let shader = props.shader.props;
+      let shaderProps = 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 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 (
@@ -462,10 +501,10 @@ function updateNodeStyles(node: DOMNode | DOMText) {
         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
@@ -474,49 +513,302 @@ function updateNodeStyles(node: DOMNode | DOMText) {
       } 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 as
+          | Partial<lng.RadialGradientProps>
+          | undefined;
+        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 as
+          | Partial<lng.LinearGradientProps>
+          | undefined;
+        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: lng.NodeTextureLoadedPayload = {
+              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 as any)?.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: lng.NodeTextureFailedPayload = {
+              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 as any)?.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', style);
-}
+  node.div.setAttribute('style', compactString(style));
 
-const fontFamiliesToLoad = new Set<string>();
+  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;
+    }
+  }
+}
 
 const textNodesToMeasure = new Set<DOMText>();
 
 type Size = { width: number; height: number };
 
 function getElSize(node: DOMNode): Size {
-  let rect = node.div.getBoundingClientRect();
+  const rawRect = node.div.getBoundingClientRect();
 
-  let dpr = Config.rendererOptions?.deviceLogicalPixelRatio ?? 1;
-  rect.height /= dpr;
-  rect.width /= dpr;
+  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) {
@@ -526,7 +818,7 @@ function getElSize(node: DOMNode): Size {
     }
   }
 
-  return rect;
+  return { width, height };
 }
 
 /*
@@ -542,7 +834,6 @@ function updateDOMTextSize(node: DOMText): void {
       if (node.props.h !== size.height) {
         node.props.h = size.height;
         updateNodeStyles(node);
-        node.emit('loaded');
       }
       break;
     case 'none':
@@ -551,10 +842,21 @@ function updateDOMTextSize(node: DOMText): void {
         node.props.w = size.width;
         node.props.h = size.height;
         updateNodeStyles(node);
-        node.emit('loaded');
       }
       break;
   }
+
+  if (!node.loaded) {
+    const payload: lng.NodeTextLoadedPayload = {
+      type: 'text',
+      dimensions: {
+        w: node.props.w,
+        h: node.props.h,
+      },
+    };
+    node.emit('loaded', payload);
+    node.loaded = true;
+  }
 }
 
 function updateDOMTextMeasurements() {
@@ -566,16 +868,17 @@ function scheduleUpdateDOMTextMeasurement(node: DOMText) {
   /*
     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);
+      }
     }
   }
 
@@ -583,12 +886,13 @@ function scheduleUpdateDOMTextMeasurement(node: DOMText) {
 }
 
 function updateNodeData(node: DOMNode | DOMText) {
-  for (let key in node.data) {
-    let keyValue: unknown = node.data[key];
+  const data = node.data;
+  for (let key in data) {
+    let keyValue: unknown = data[key];
     if (keyValue === undefined) {
       node.div.removeAttribute('data-' + key);
     } else {
-      node.div.setAttribute('data-' + key, String(keyValue));
+      node.div.dataset[key] = String(keyValue);
     }
   }
 }
@@ -596,7 +900,7 @@ function updateNodeData(node: DOMNode | DOMText) {
 function resolveNodeDefaults(
   props: Partial<IRendererNodeProps>,
 ): IRendererNodeProps {
-  const color = props.color ?? 0xffffffff;
+  const color = props.color ?? 0x00000000;
 
   return {
     x: props.x ?? 0,
@@ -677,15 +981,31 @@ const defaultShader: IRendererShader = {
 
 let lastNodeId = 0;
 
-class DOMNode extends EventEmitter implements IRendererNode {
+const CoreNodeRenderStateMap = new Map<number, string>([
+  [0, 'init'],
+  [2, 'outOfBounds'],
+  [4, 'inBounds'],
+  [8, 'inViewport'],
+]);
+
+export class DOMNode extends EventEmitter implements IRendererNode {
   div = document.createElement('div');
   divBg: HTMLElement | undefined;
   divBorder: HTMLElement | undefined;
+  imgEl: HTMLImageElement | undefined;
+  lazyImagePendingSrc: string | null = null;
+  lazyImageSubTextureProps:
+    | InstanceType<lng.TextureMap['SubTexture']>['props']
+    | null = null;
+  boundsDirty = true;
+  children = new Set<DOMNode>();
 
   id = ++lastNodeId;
 
   renderState: lng.CoreNodeRenderState = 0 /* Init */;
 
+  preventCleanup = true;
+
   constructor(
     public stage: IRendererStage,
     public props: IRendererNodeProps,
@@ -697,6 +1017,11 @@ class DOMNode extends EventEmitter implements IRendererNode {
     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);
@@ -704,6 +1029,10 @@ class DOMNode extends EventEmitter implements IRendererNode {
 
   destroy(): void {
     elMap.delete(this);
+    const parent = this.props.parent;
+    if (parent instanceof DOMNode) {
+      parent.children.delete(this);
+    }
     this.div.parentNode!.removeChild(this.div);
   }
 
@@ -711,52 +1040,132 @@ class DOMNode extends EventEmitter implements IRendererNode {
     return this.props.parent;
   }
   set parent(value: IRendererNode | null) {
+    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);
   }
 
+  public 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: lng.CoreNodeRenderState) {
+    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() {
@@ -847,14 +1256,17 @@ class DOMNode extends EventEmitter implements IRendererNode {
     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(): IRendererNode['textureOptions'] {
@@ -868,13 +1280,16 @@ class DOMNode extends EventEmitter implements IRendererNode {
     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);
   }
@@ -955,6 +1370,7 @@ class DOMNode extends EventEmitter implements IRendererNode {
     this.props.shader = v;
     updateNodeStyles(this);
   }
+
   get data(): IRendererNode['data'] {
     return this.props.data;
   }
@@ -999,29 +1415,45 @@ class DOMNode extends EventEmitter implements IRendererNode {
   }
   set boundsMargin(value: number | [number, number, number, number] | null) {
     this.props.boundsMargin = value;
+    this.boundsDirty = true;
+    this.markChildrenBoundsDirty();
   }
 
   get absX(): number {
-    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(): number {
-    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 {
+  public loaded = false;
+
   constructor(
     stage: IRendererStage,
     public override props: IRendererTextNodeProps,
   ) {
     super(stage, 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);
@@ -1030,29 +1462,46 @@ 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;
@@ -1064,34 +1513,43 @@ 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);
   }
@@ -1099,6 +1557,7 @@ class DOMText extends DOMNode {
     return this.props.overflowSuffix;
   }
   set overflowSuffix(v) {
+    if (this.props.overflowSuffix === v) return;
     this.props.overflowSuffix = v;
     updateNodeStyles(this);
   }
@@ -1106,15 +1565,19 @@ 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;
@@ -1171,11 +1634,12 @@ function updateRootPosition(this: DOMRendererMain) {
 export class DOMRendererMain implements IRendererMain {
   root: DOMNode;
   canvas: HTMLCanvasElement;
-
   stage: IRendererStage;
+  private eventListeners: Map<string, Set<(target: any, data: any) => void>> =
+    new Map();
 
   constructor(
-    public settings: lng.RendererMainSettings,
+    public settings: DomRendererMainSettings,
     rawTarget: string | HTMLElement,
   ) {
     let target: HTMLElement;
@@ -1203,15 +1667,20 @@ export class DOMRendererMain implements IRendererMain {
       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() {},
     };
 
@@ -1221,7 +1690,7 @@ export class DOMRendererMain implements IRendererMain {
         w: settings.appWidth ?? 1920,
         h: settings.appHeight ?? 1080,
         shader: defaultShader,
-        zIndex: 65534,
+        zIndex: 1,
       }),
     );
     this.stage.root = this.root;
@@ -1255,6 +1724,77 @@ export class DOMRendererMain implements IRendererMain {
     window.addEventListener('resize', updateRootPosition.bind(this));
   }
 
+  removeAllListeners(): void {
+    if (this.eventListeners.size === 0) return;
+    this.eventListeners.forEach((listeners) => listeners.clear());
+    this.eventListeners.clear();
+  }
+
+  once<K extends string | number>(
+    event: Extract<K, string>,
+    listener: { [s: string]: (target: any, data: any) => void }[K],
+  ): void {
+    const wrappedListener = (target: any, data: any) => {
+      this.off(event, wrappedListener);
+      listener(target, data);
+    };
+    this.on(event, wrappedListener);
+  }
+
+  on(name: string, callback: (target: any, data: any) => void) {
+    let listeners = this.eventListeners.get(name);
+    if (!listeners) {
+      listeners = new Set();
+      this.eventListeners.set(name, listeners);
+    }
+    listeners.add(callback);
+  }
+
+  off<K extends string | number>(
+    event: Extract<K, string>,
+    listener: { [s: string]: (target: any, data: any) => void }[K],
+  ): void {
+    const listeners = this.eventListeners.get(event);
+    if (listeners) {
+      listeners.delete(listener);
+      if (listeners.size === 0) {
+        this.eventListeners.delete(event);
+      }
+    }
+  }
+
+  emit<K extends string | number>(
+    event: Extract<K, string>,
+    data: Parameters<any>[1],
+  ): void;
+  emit<K extends string | number>(
+    event: Extract<K, string>,
+    target: any,
+    data: Parameters<any>[1],
+  ): void;
+  emit<K extends string | number>(
+    event: Extract<K, string>,
+    targetOrData: any,
+    maybeData?: Parameters<any>[1],
+  ): void {
+    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: Partial<IRendererNodeProps>): IRendererNode {
     return new DOMNode(this.stage, resolveNodeDefaults(props));
   }
@@ -1263,17 +1803,32 @@ export class DOMRendererMain implements IRendererMain {
     return new DOMText(this.stage, resolveTextNodeDefaults(props));
   }
 
+  /** 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(
-    shaderType: string,
-    props?: IRendererShaderProps,
-  ): IRendererShader {
-    return { shaderType, props, program: {} };
+    ...args: Parameters<typeof lng.RendererMain.prototype.createShader>
+  ): ReturnType<typeof lng.RendererMain.prototype.createShader> {
+    const [shaderType, props] = args;
+    return {
+      // @ts-ignore
+      shaderType,
+      props,
+      program: {},
+    };
   }
 
-  createTexture(
-    textureType: keyof lng.TextureMap,
-    props: IRendererTextureProps,
-  ): IRendererTexture {
+  createTexture<Type extends keyof lng.TextureMap>(
+    textureType: Type,
+    props: ExtractProps<lng.TextureMap[Type]>,
+  ): InstanceType<lng.TextureMap[Type]> {
     let type = lng.TextureType.generic;
     switch (textureType) {
       case 'SubTexture':
@@ -1292,10 +1847,29 @@ export class DOMRendererMain implements IRendererMain {
         type = lng.TextureType.renderToTexture;
         break;
     }
-    return { type, props };
+    return { type, props } as InstanceType<lng.TextureMap[Type]>;
   }
+}
 
-  on(name: string, callback: (target: any, data: any) => void) {
-    console.log('on', name, callback);
+export function loadFontToDom(font: FontLoadOptions): void {
+  // 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 as FontFaceSet & {
+      add?: (font: FontFace) => FontFaceSet;
+    };
+    fontSet.add?.(fontFace);
   }
 }
+
+export function isDomRenderer(
+  r: lng.RendererMain | DOMRendererMain,
+): r is DOMRendererMain {
+  return r instanceof DOMRendererMain;
+}