@lightningjs/renderer 3.0.0-beta7 → 3.0.0-beta8

package/src/core/shaders/webgl/LinearGradient.ts

@@ -27,11 +27,12 @@ import type { WebGlShaderType } from '../../renderers/webgl/WebGlShaderNode.js';
 export const LinearGradient: WebGlShaderType<LinearGradientProps> = {
   props: LinearGradientTemplate.props,
   update() {
-    this.uniform1f('u_angle', this.props!.angle - (Math.PI / 180) * 90);
-    this.uniform1fv('u_stops', new Float32Array(this.props!.stops));
+    const props = this.props!;
+    this.uniform1f('u_angle', props.angle - (Math.PI / 180) * 90);
+    this.uniform1fv('u_stops', new Float32Array(props.stops));
     const colors: number[] = [];
-    for (let i = 0; i < this.props!.colors.length; i++) {
-      const norm = getNormalizedRgbaComponents(this.props!.colors[i]!);
+    for (let i = 0; i < props.colors.length; i++) {
+      const norm = getNormalizedRgbaComponents(props.colors[i]!);
       colors.push(norm[0], norm[1], norm[2], norm[3]);
     }
     this.uniform4fv('u_colors', new Float32Array(colors));

package/src/core/shaders/webgl/RadialGradient.ts

@@ -28,16 +28,17 @@ import type { WebGlShaderType } from '../../renderers/webgl/WebGlShaderNode.js';
 export const RadialGradient: WebGlShaderType<RadialGradientProps> = {
   props: RadialGradientTemplate.props,
   update(node: CoreNode) {
+    const props = this.props!;
     this.uniform2f(
       'u_projection',
-      this.props!.pivot[0] * node.width,
-      this.props!.pivot[1] * node.height,
+      props.pivot[0] * node.width,
+      props.pivot[1] * node.height,
     );
-    this.uniform2f('u_size', this.props!.width * 0.5, this.props!.height * 0.5);
-    this.uniform1fv('u_stops', new Float32Array(this.props!.stops));
+    this.uniform2f('u_size', props.width * 0.5, props.height * 0.5);
+    this.uniform1fv('u_stops', new Float32Array(props.stops));
     const colors: number[] = [];
-    for (let i = 0; i < this.props!.colors.length; i++) {
-      const norm = getNormalizedRgbaComponents(this.props!.colors[i]!);
+    for (let i = 0; i < props.colors.length; i++) {
+      const norm = getNormalizedRgbaComponents(props.colors[i]!);
       colors.push(norm[0], norm[1], norm[2], norm[3]);
     }
     this.uniform4fv('u_colors', new Float32Array(colors));

package/src/core/shaders/webgl/RoundedWithBorder.ts

@@ -65,6 +65,7 @@ export const RoundedWithBorder: WebGlShaderType<RoundedWithBorderProps> = {
     varying vec4 v_innerRadius;
     varying vec2 v_innerSize;
     varying vec2 v_halfDimensions;
+    varying float v_borderZero;
 
     void main() {
       vec2 normalized = a_position * u_pixelRatio;
@@ -76,14 +77,18 @@ export const RoundedWithBorder: WebGlShaderType<RoundedWithBorderProps> = {
 
       v_halfDimensions = u_dimensions * 0.5;
 
-      v_innerRadius = vec4(
-        max(0.0, u_radius.x - max(u_borderWidth.x, u_borderWidth.w) - 0.5),
-        max(0.0, u_radius.y - max(u_borderWidth.x, u_borderWidth.y) - 0.5),
-        max(0.0, u_radius.z - max(u_borderWidth.z, u_borderWidth.y) - 0.5),
-        max(0.0, u_radius.w - max(u_borderWidth.z, u_borderWidth.w) - 0.5)
-      );
+      v_borderZero = u_borderWidth == vec4(0.0) ? 1.0 : 0.0;
 
-      v_innerSize = (vec2(u_dimensions.x - (u_borderWidth[3] + u_borderWidth[1]) + 1.0, u_dimensions.y - (u_borderWidth[0] + u_borderWidth[2])) - 2.0) * 0.5;
+      if(v_borderZero == 0.0) {
+        v_innerRadius = vec4(
+          max(0.0, u_radius.x - max(u_borderWidth.x, u_borderWidth.w) - 0.5),
+          max(0.0, u_radius.y - max(u_borderWidth.x, u_borderWidth.y) - 0.5),
+          max(0.0, u_radius.z - max(u_borderWidth.z, u_borderWidth.y) - 0.5),
+          max(0.0, u_radius.w - max(u_borderWidth.z, u_borderWidth.w) - 0.5)
+        );
+
+        v_innerSize = (vec2(u_dimensions.x - (u_borderWidth[3] + u_borderWidth[1]) + 1.0, u_dimensions.y - (u_borderWidth[0] + u_borderWidth[2])) - 2.0) * 0.5;
+      }
 
       gl_Position = vec4(normalized.x * screenSpace.x - 1.0, normalized.y * -abs(screenSpace.y) + 1.0, 0.0, 1.0);
       gl_Position.y = -sign(screenSpace.y) * gl_Position.y;
@@ -114,6 +119,7 @@ export const RoundedWithBorder: WebGlShaderType<RoundedWithBorderProps> = {
     varying vec2 v_halfDimensions;
     varying vec4 v_innerRadius;
     varying vec2 v_innerSize;
+    varying float v_borderZero;
 
     float roundedBox(vec2 p, vec2 s, vec4 r) {
       r.xy = (p.x > 0.0) ? r.yz : r.xw;
@@ -130,6 +136,11 @@ export const RoundedWithBorder: WebGlShaderType<RoundedWithBorderProps> = {
 
       float outerAlpha = 1.0 - smoothstep(0.0, 1.0, outerDist);
 
+      if(v_borderZero == 1.0) {
+        gl_FragColor = mix(vec4(0.0), color, outerAlpha) * u_alpha;
+        return;
+      }
+
       boxUv.x += u_borderWidth.y > u_borderWidth.w ? (u_borderWidth.y - u_borderWidth.w) * 0.5 : -(u_borderWidth.w - u_borderWidth.y) * 0.5;
       boxUv.y += u_borderWidth.z > u_borderWidth.x ? ((u_borderWidth.z - u_borderWidth.x) * 0.5 + 0.5) : -(u_borderWidth.x - u_borderWidth.z) * 0.5;
 

package/src/core/shaders/webgl/RoundedWithBorderAndShadow.ts

@@ -28,19 +28,16 @@ export const RoundedWithBorderAndShadow: WebGlShaderType<RoundedWithBorderAndSha
   {
     props: RoundedWithBorderAndShadowTemplate.props,
     update(node: CoreNode) {
-      this.uniformRGBA('u_borderColor', this.props!['border-color']);
-      this.uniform4fa('u_borderWidth', this.props!['border-width'] as Vec4);
+      const props = this.props!;
+      this.uniformRGBA('u_borderColor', props['border-color']);
+      this.uniform4fa('u_borderWidth', props['border-width'] as Vec4);
 
-      this.uniformRGBA('u_shadowColor', this.props!['shadow-color']);
-      this.uniform4fa('u_shadow', this.props!['shadow-projection']);
+      this.uniformRGBA('u_shadowColor', props['shadow-color']);
+      this.uniform4fa('u_shadow', props['shadow-projection']);
 
       this.uniform4fa(
         'u_radius',
-        calcFactoredRadiusArray(
-          this.props!.radius as Vec4,
-          node.width,
-          node.height,
-        ),
+        calcFactoredRadiusArray(props.radius as Vec4, node.width, node.height),
       );
     },
     vertex: `
@@ -71,6 +68,7 @@ export const RoundedWithBorderAndShadow: WebGlShaderType<RoundedWithBorderAndSha
     varying vec4 v_innerRadius;
     varying vec2 v_innerSize;
     varying vec2 v_halfDimensions;
+    varying float v_borderZero;
 
     void main() {
       vec2 screenSpace = vec2(2.0 / u_resolution.x,  -2.0 / u_resolution.y);
@@ -84,18 +82,23 @@ export const RoundedWithBorderAndShadow: WebGlShaderType<RoundedWithBorderAndSha
 
       v_halfDimensions = u_dimensions * 0.5;
 
-      v_innerRadius = vec4(
-        max(0.0, u_radius.x - max(u_borderWidth.x, u_borderWidth.w) - 0.5),
-        max(0.0, u_radius.y - max(u_borderWidth.x, u_borderWidth.y) - 0.5),
-        max(0.0, u_radius.z - max(u_borderWidth.z, u_borderWidth.y) - 0.5),
-        max(0.0, u_radius.w - max(u_borderWidth.z, u_borderWidth.w) - 0.5)
-      );
-
-      v_innerSize = (vec2(u_dimensions.x - (u_borderWidth[3] + u_borderWidth[1]) - 1.0, u_dimensions.y - (u_borderWidth[0] + u_borderWidth[2])) - 2.0) * 0.5;
-
       v_color = a_color;
       v_nodeCoords = a_nodeCoords + (screenSpace + shadowEdge) / (u_dimensions);
       v_textureCoords = a_textureCoords + (screenSpace + shadowEdge) / (u_dimensions);
+
+      v_borderZero = u_borderWidth == vec4(0.0) ? 1.0 : 0.0;
+
+
+      if(v_borderZero == 0.0) {
+        v_innerRadius = vec4(
+          max(0.0, u_radius.x - max(u_borderWidth.x, u_borderWidth.w) - 0.5),
+          max(0.0, u_radius.y - max(u_borderWidth.x, u_borderWidth.y) - 0.5),
+          max(0.0, u_radius.z - max(u_borderWidth.z, u_borderWidth.y) - 0.5),
+          max(0.0, u_radius.w - max(u_borderWidth.z, u_borderWidth.w) - 0.5)
+        );
+
+        v_innerSize = (vec2(u_dimensions.x - (u_borderWidth[3] + u_borderWidth[1]) - 1.0, u_dimensions.y - (u_borderWidth[0] + u_borderWidth[2])) - 2.0) * 0.5;
+      }
     }
   `,
     fragment: `
@@ -125,6 +128,7 @@ export const RoundedWithBorderAndShadow: WebGlShaderType<RoundedWithBorderAndSha
     varying vec2 v_halfDimensions;
     varying vec4 v_innerRadius;
     varying vec2 v_innerSize;
+    varying float v_borderZero;
 
     float roundedBox(vec2 p, vec2 s, vec4 r) {
       r.xy = (p.x > 0.0) ? r.yz : r.xw;
@@ -149,15 +153,20 @@ export const RoundedWithBorderAndShadow: WebGlShaderType<RoundedWithBorderAndSha
 
       float outerAlpha = 1.0 - smoothstep(0.0, 1.0, outerDist);
 
+      float shadowAlpha = shadowBox(boxUv - u_shadow.xy, v_halfDimensions + u_shadow.w, u_radius + u_shadow.z);
+      vec4 shadow = mix(vec4(0.0), u_shadowColor, shadowAlpha);
+
+      if(v_borderZero == 1.0) {
+        gl_FragColor = mix(shadow, color, outerAlpha) * u_alpha;
+        return;
+      }
+
       boxUv.x += u_borderWidth.y > u_borderWidth.w ? (u_borderWidth.y - u_borderWidth.w) * 0.5 : -(u_borderWidth.w - u_borderWidth.y) * 0.5;
       boxUv.y += u_borderWidth.z > u_borderWidth.x ? ((u_borderWidth.z - u_borderWidth.x) * 0.5 + 0.5) : -(u_borderWidth.x - u_borderWidth.z) * 0.5;
 
       float innerDist = roundedBox(boxUv, v_innerSize, v_innerRadius);
       float innerAlpha = 1.0 - smoothstep(0.0, 1.0, innerDist);
 
-      float shadowAlpha = shadowBox(boxUv - u_shadow.xy, v_halfDimensions + u_shadow.w, u_radius + u_shadow.z);
-
-      vec4 shadow = mix(vec4(0.0), u_shadowColor, shadowAlpha);
       vec4 resColor = mix(u_borderColor, color, innerAlpha);
       resColor = mix(shadow, resColor, outerAlpha);
       gl_FragColor = resColor * u_alpha;

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

@@ -659,7 +659,6 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
         },
       ]);
       state.bufferUploaded = false;
-      assertTruthy(state.webGlBuffers);
       webGlBuffers = state.webGlBuffers;
     }
 
@@ -671,9 +670,7 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
       state.bufferUploaded = true;
     }
 
-    assertTruthy(trFontFace);
     if (scrollable && contain === 'both') {
-      assertTruthy(elementBounds.valid);
       const elementRect = convertBoundToRect(elementBounds, tmpRect);
 
       if (node.clippingRect.valid) {
@@ -695,7 +692,7 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
         sdfShaderProps: {
           transform: node.globalTransform!.getFloatArr(),
           color: mergeColorAlpha(color, node.worldAlpha),
-          size: fontSize / (trFontFace.data?.info.size || 0),
+          size: fontSize / (trFontFace!.data?.info.size || 0),
           scrollY,
           distanceRange,
           debug: debug.sdfShaderDebug,
@@ -717,65 +714,12 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
     );
 
     const texture = state.trFontFace?.texture;
-    assertTruthy(texture);
-    const ctxTexture = texture.ctxTexture;
+    const ctxTexture = texture!.ctxTexture;
 
     renderOp.addTexture(ctxTexture as WebGlCtxTexture);
     renderOp.numQuads = state.bufferNumQuads;
 
     renderer.addRenderOp(renderOp);
-
-    // if (!debug.disableScissor) {
-    //   renderer.enableScissor(
-    //     visibleRect.x,
-    //     visibleRect.y,
-    //     visibleRect.w,
-    //     visibleRect.h,
-    //   );
-    // }
-
-    // Draw the arrays
-    // gl.drawArrays(
-    //   gl.TRIANGLES, // Primitive type
-    //   0,
-    //   bufferNumVertices, // Number of verticies
-    // );
-
-    // renderer.disableScissor();
-
-    // if (debug.showElementRect) {
-    //   this.renderer.drawBorder(
-    //     Colors.Blue,
-    //     elementRect.x,
-    //     elementRect.y,
-    //     elementRect.w,
-    //     elementRect.h,
-    //   );
-    // }
-
-    // if (debug.showVisibleRect) {
-    //   this.renderer.drawBorder(
-    //     Colors.Green,
-    //     visibleRect.x,
-    //     visibleRect.y,
-    //     visibleRect.w,
-    //     visibleRect.h,
-    //   );
-    // }
-
-    // if (debug.showRenderWindow && renderWindow) {
-    //   this.renderer.drawBorder(
-    //     Colors.Red,
-    //     x + renderWindow.x1,
-    //     y + renderWindow.y1 - scrollY,
-    //     x + renderWindow.x2 - (x + renderWindow.x1),
-    //     y + renderWindow.y2 - scrollY - (y + renderWindow.y1 - scrollY),
-    //   );
-    // }
-    // if (debug.printLayoutTime) {
-    //   debugData.drawSum += performance.now() - drawStartTime;
-    //   debugData.drawCount++;
-    // }
   }
 
   override setIsRenderable(

package/src/core/textures/ImageTexture.ts

@@ -149,24 +149,25 @@ export class ImageTexture extends Texture {
       img.crossOrigin = 'anonymous';
     }
 
-    return new Promise<{ data: HTMLImageElement; premultiplyAlpha: boolean }>(
-      (resolve) => {
-        img.onload = () => {
-          resolve({ data: img, premultiplyAlpha: hasAlpha });
-        };
+    return new Promise<{
+      data: HTMLImageElement | null;
+      premultiplyAlpha: boolean;
+    }>((resolve) => {
+      img.onload = () => {
+        resolve({ data: img, premultiplyAlpha: hasAlpha });
+      };
 
-        img.onerror = () => {
-          console.warn('Image loading failed, returning fallback object.');
-          resolve({ data: img, premultiplyAlpha: hasAlpha });
-        };
+      img.onerror = () => {
+        console.warn('Image loading failed, returning fallback object.');
+        resolve({ data: null, premultiplyAlpha: hasAlpha });
+      };
 
-        if (src instanceof Blob) {
-          img.src = URL.createObjectURL(src);
-        } else {
-          img.src = src;
-        }
-      },
-    );
+      if (src instanceof Blob) {
+        img.src = URL.createObjectURL(src);
+      } else {
+        img.src = src;
+      }
+    });
   }
 
   async createImageBitmap(

package/src/core/textures/Texture.ts

@@ -250,6 +250,20 @@ export abstract class Texture extends EventEmitter {
     this.ctxTexture?.free();
   }
 
+  /**
+   * Destroy the texture.
+   *
+   * @remarks
+   * This method is called when the texture is no longer needed and should be
+   * cleaned up.
+   */
+  destroy(): void {
+    this.removeAllListeners();
+    this.free();
+    this.freeTextureData();
+    this.renderableOwners.clear();
+  }
+
   /**
    * Free the source texture data for this Texture.
    *

package/src/main-api/Inspector.ts

@@ -7,7 +7,7 @@ import { type RendererMainSettings } from './Renderer.js';
 import type { AnimationSettings } from '../core/animations/CoreAnimation.js';
 import type { IAnimationController } from '../common/IAnimationController.js';
 import { isProductionEnvironment } from '../utils.js';
-import type { CoreTextNode, CoreTextNodeProps } from '../core/CoreTextNode.js';
+import { CoreTextNode, type CoreTextNodeProps } from '../core/CoreTextNode.js';
 
 /**
  * Inspector
@@ -166,6 +166,8 @@ const knownProperties = new Set<string>([
 export class Inspector {
   private root: HTMLElement | null = null;
   private canvas: HTMLCanvasElement | null = null;
+  private mutationObserver: MutationObserver = new MutationObserver(() => {});
+  private resizeObserver: ResizeObserver = new ResizeObserver(() => {});
   private height = 1080;
   private width = 1920;
   private scaleX = 1;
@@ -196,18 +198,18 @@ export class Inspector {
     document.body.appendChild(this.root);
 
     //listen for changes on canvas
-    const mutationObserver = new MutationObserver(
+    this.mutationObserver = new MutationObserver(
       this.setRootPosition.bind(this),
     );
-    mutationObserver.observe(canvas, {
+    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);
+    this.resizeObserver = new ResizeObserver(this.setRootPosition.bind(this));
+    this.resizeObserver.observe(canvas);
 
     //listen for changes on window
     window.addEventListener('resize', this.setRootPosition.bind(this));
@@ -259,6 +261,24 @@ export class Inspector {
     return div;
   }
 
+  createNodes(node: CoreNode): boolean {
+    if (this.root === null) {
+      return false;
+    }
+
+    const div = this.root.querySelector(`[id="${node.id}"]`);
+    if (div === null && node instanceof CoreTextNode) {
+      this.createTextNode(node);
+    } else if (div === null && node instanceof CoreNode) {
+      this.createNode(node);
+    }
+
+    for (const child of node.children) {
+      this.createNodes(child);
+    }
+    return true;
+  }
+
   createNode(node: CoreNode): CoreNode {
     const div = this.createDiv(node.id, node.props);
     (div as HTMLElement & { node: CoreNode }).node = node;
@@ -323,6 +343,7 @@ export class Inspector {
         this.destroyNode(node.id);
         originalDestroy.call(node);
       },
+      configurable: true,
     });
 
     const originalAnimate = node.animate;
@@ -343,11 +364,24 @@ export class Inspector {
 
         return animationController;
       },
+      configurable: true,
     });
 
     return node;
   }
 
+  public destroy() {
+    // Remove DOM observers
+    this.mutationObserver.disconnect();
+    this.resizeObserver.disconnect();
+
+    // Remove resize listener
+    window.removeEventListener('resize', this.setRootPosition.bind(this));
+    if (this.root && this.root.parentNode) {
+      this.root.remove();
+    }
+  }
+
   destroyNode(id: number) {
     const div = document.getElementById(id.toString());
     div?.remove();
@@ -475,6 +509,19 @@ export class Inspector {
     }
   }
 
+  updateViewport(
+    width: number,
+    height: number,
+    deviceLogicalPixelRatio: number,
+  ) {
+    this.scaleX = deviceLogicalPixelRatio ?? 1;
+    this.scaleY = deviceLogicalPixelRatio ?? 1;
+
+    this.width = width;
+    this.height = height;
+    this.setRootPosition();
+  }
+
   // simple animation handler
   animateNode(
     div: HTMLElement,