@solidtv/renderer 1.1.2 → 1.1.4

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

@@ -42,12 +42,10 @@ export const Border: WebGlShaderType<BorderProps> = {
     varying vec2 v_outerBorderUv;
     varying vec2 v_innerBorderUv;
     varying vec2 v_halfDimensions;
-    varying float v_edgeWidth;
 
     void main() {
       vec2 screenSpace = vec2(2.0 / u_resolution.x, -2.0 / u_resolution.y);
       vec2 edge = clamp(a_nodeCoords * 2.0 - vec2(1.0), -1.0, 1.0);
-      v_edgeWidth = 1.0 / u_pixelRatio;
 
       float borderTop = u_borderWidth.x;
       float borderRight = u_borderWidth.y;
@@ -120,7 +118,6 @@ export const Border: WebGlShaderType<BorderProps> = {
     varying vec2 v_outerBorderUv;
     varying vec2 v_innerBorderUv;
     varying vec2 v_halfDimensions;
-    varying float v_edgeWidth;
 
     float box(vec2 p, vec2 s) {
       vec2 q = abs(p) - s;
@@ -131,24 +128,25 @@ export const Border: WebGlShaderType<BorderProps> = {
       vec4 color = texture2D(u_texture, v_textureCoords) * v_color;
       vec4 resultColor = vec4(0.0);
       vec2 boxUv = v_nodeCoords.xy * u_dimensions - v_halfDimensions;
+      float edgeWidth = 1.0 / u_pixelRatio;
 
-      float outerDist = box(boxUv + v_outerBorderUv, v_outerSize - v_edgeWidth);
-      float innerDist = box(boxUv + v_innerBorderUv, v_innerSize - v_edgeWidth);
+      float outerDist = box(boxUv + v_outerBorderUv, v_outerSize - edgeWidth);
+      float innerDist = box(boxUv + v_innerBorderUv, v_innerSize - edgeWidth);
 
       if(u_borderGap == 0.0) {
-        float outerAlpha = 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, outerDist);
-        float innerAlpha = 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, innerDist);
+        float outerAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, outerDist);
+        float innerAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, innerDist);
         resultColor = mix(resultColor, u_borderColor, outerAlpha * u_borderColor.a);
         resultColor = mix(resultColor, color, innerAlpha);
         gl_FragColor = resultColor * u_alpha;
         return;
       }
 
-      float nodeDist = box(boxUv, v_halfDimensions - v_edgeWidth);
-      float nodeAlpha = 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, nodeDist);
+      float nodeDist = box(boxUv, v_halfDimensions - edgeWidth);
+      float nodeAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, nodeDist);
 
       float borderDist = max(-innerDist, outerDist);
-      float borderAlpha = 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, borderDist);
+      float borderAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, borderDist);
       resultColor = mix(resultColor, color, nodeAlpha);
       resultColor = mix(resultColor, u_borderColor, borderAlpha * u_borderColor.a);
 

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

@@ -53,20 +53,18 @@ export const RoundedWithBorder: WebGlShaderType<RoundedWithBorderProps> = {
     varying vec4 v_innerBorderRadius;
     varying vec4 v_outerBorderRadius;
     varying vec2 v_halfDimensions;
-    varying float v_edgeWidth;
-    varying float v_borderZero;
 
     void main() {
       vec2 vertexPos = a_position * u_pixelRatio;
       vec2 screenSpace = vec2(2.0 / u_resolution.x, -2.0 / u_resolution.y);
       vec2 edge = clamp(a_nodeCoords * 2.0 - vec2(1.0), -1.0, 1.0);
       vec2 edgeOffset = vec2(0.0);
+      float borderZero = 1.0 - step(0.001, dot(abs(u_borderWidth), vec4(1.0)));
 
-      v_borderZero = u_borderWidth == vec4(0.0) ? 1.0 : 0.0;
       v_innerSize = vec2(0.0);
       v_outerSize = vec2(0.0);
 
-      if(v_borderZero == 0.0) {
+      if(borderZero == 0.0) {
         float borderTop = u_borderWidth.x;
         float borderRight = u_borderWidth.y;
         float borderBottom = u_borderWidth.z;
@@ -125,7 +123,6 @@ export const RoundedWithBorder: WebGlShaderType<RoundedWithBorderProps> = {
       v_textureCoords = a_textureCoords + (screenSpace + edgeOffset) / (u_dimensions);
 
       v_halfDimensions = u_dimensions * 0.5;
-      v_edgeWidth = 1.0 / u_pixelRatio;
     }
   `,
   fragment: `
@@ -159,8 +156,6 @@ export const RoundedWithBorder: WebGlShaderType<RoundedWithBorderProps> = {
     varying vec4 v_innerBorderRadius;
     varying vec4 v_outerBorderRadius;
     varying vec2 v_halfDimensions;
-    varying float v_edgeWidth;
-    varying float v_borderZero;
 
     float roundedBox(vec2 p, vec2 s, vec4 r) {
       r.xy = (p.x > 0.0) ? r.yz : r.xw;
@@ -173,36 +168,38 @@ export const RoundedWithBorder: WebGlShaderType<RoundedWithBorderProps> = {
       vec4 color = texture2D(u_texture, v_textureCoords) * v_color;
       vec4 resultColor = vec4(0.0);
       vec2 boxUv = v_nodeCoords.xy * u_dimensions - v_halfDimensions;
+      float borderZero = 1.0 - step(0.001, dot(abs(u_borderWidth), vec4(1.0)));
+      float edgeWidth = 1.0 / u_pixelRatio;
 
       float nodeDist;
       float nodeAlpha;
 
-      if(v_borderZero == 1.0) {
-        nodeDist = roundedBox(boxUv, v_halfDimensions - v_edgeWidth, u_radius);
-        nodeAlpha = 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, nodeDist);
+      if(borderZero == 1.0) {
+        nodeDist = roundedBox(boxUv, v_halfDimensions - edgeWidth, u_radius);
+        nodeAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, nodeDist);
         gl_FragColor = (color * nodeAlpha) * u_alpha;
         return;
       }
 
-      float outerDist = roundedBox(boxUv + v_outerBorderUv, v_outerSize - v_edgeWidth, v_outerBorderRadius);
-      float innerDist = roundedBox(boxUv + v_innerBorderUv, v_innerSize - v_edgeWidth, v_innerBorderRadius);
+      float outerDist = roundedBox(boxUv + v_outerBorderUv, v_outerSize - edgeWidth, v_outerBorderRadius);
+      float innerDist = roundedBox(boxUv + v_innerBorderUv, v_innerSize - edgeWidth, v_innerBorderRadius);
 
       if(u_borderGap == 0.0) {
-        float outerAlpha = 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, outerDist);
-        float innerAlpha = 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, innerDist);
+        float outerAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, outerDist);
+        float innerAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, innerDist);
         resultColor = mix(resultColor, u_borderColor, outerAlpha * u_borderColor.a);
         resultColor = mix(resultColor, color, innerAlpha);
         gl_FragColor = resultColor * u_alpha;
         return;
       }
 
-      nodeDist = roundedBox(boxUv, v_halfDimensions - v_edgeWidth, u_radius);
-      nodeAlpha = 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, nodeDist);
-      float innerAlpha = 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, innerDist);
+      nodeDist = roundedBox(boxUv, v_halfDimensions - edgeWidth, u_radius);
+      nodeAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, nodeDist);
+      float innerAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, innerDist);
       float gapAlpha = max(0.0, innerAlpha - nodeAlpha);
 
       float borderDist = max(-innerDist, outerDist);
-      float borderAlpha = 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, borderDist);
+      float borderAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, borderDist);
 
       resultColor = (color * nodeAlpha) + (u_fillColor * gapAlpha);
       resultColor = mix(resultColor, u_borderColor, borderAlpha * u_borderColor.a);

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

@@ -59,22 +59,19 @@ export const RoundedWithBorderAndShadow: WebGlShaderType<RoundedWithBorderAndSha
     varying vec4 v_innerBorderRadius;
     varying vec4 v_outerBorderRadius;
     varying vec2 v_halfDimensions;
-    varying float v_edgeWidth;
-    varying float v_borderZero;
 
     void main() {
       vec2 screenSpace = vec2(2.0 / u_resolution.x,  -2.0 / u_resolution.y);
       vec2 edge = clamp(a_nodeCoords * 2.0 - vec2(1.0), -1.0, 1.0);
+      float borderZero = 1.0 - step(0.001, dot(abs(u_borderWidth), vec4(1.0)));
 
       vec2 edgeOffset = edge * ((u_shadow.w * 2.0)+ u_shadow.z) + u_shadow.xy;
       vec2 vertexPos = (a_position + edge + edgeOffset) * u_pixelRatio;
 
-      v_borderZero = u_borderWidth == vec4(0.0) ? 1.0 : 0.0;
-
       v_innerSize = vec2(0.0);
       v_outerSize = vec2(0.0);
 
-      if(v_borderZero == 0.0) {
+      if(borderZero == 0.0) {
         float borderTop = u_borderWidth.x;
         float borderRight = u_borderWidth.y;
         float borderBottom = u_borderWidth.z;
@@ -129,7 +126,6 @@ export const RoundedWithBorderAndShadow: WebGlShaderType<RoundedWithBorderAndSha
       gl_Position = vec4(vertexPos.x * screenSpace.x - 1.0, -sign(screenSpace.y) * (vertexPos.y * -abs(screenSpace.y)) + 1.0, 0.0, 1.0);
 
       v_halfDimensions = u_dimensions * 0.5;
-      v_edgeWidth = 1.0 / u_pixelRatio;
       v_color = a_color;
       v_nodeCoords = a_nodeCoords + (screenSpace + edgeOffset) / (u_dimensions);
       v_textureCoords = a_textureCoords + (screenSpace + edgeOffset) / (u_dimensions);
@@ -167,8 +163,6 @@ export const RoundedWithBorderAndShadow: WebGlShaderType<RoundedWithBorderAndSha
     varying vec4 v_innerBorderRadius;
     varying vec4 v_outerBorderRadius;
     varying vec2 v_halfDimensions;
-    varying float v_edgeWidth;
-    varying float v_borderZero;
 
     float roundedBox(vec2 p, vec2 s, vec4 r) {
       r.xy = (p.x > 0.0) ? r.yz : r.xw;
@@ -189,32 +183,34 @@ export const RoundedWithBorderAndShadow: WebGlShaderType<RoundedWithBorderAndSha
       vec4 color = texture2D(u_texture, v_textureCoords) * v_color;
       vec4 resultColor = vec4(0.0);
       vec2 boxUv = v_nodeCoords.xy * u_dimensions - v_halfDimensions;
+      float borderZero = 1.0 - step(0.001, dot(abs(u_borderWidth), vec4(1.0)));
+      float edgeWidth = 1.0 / u_pixelRatio;
       float nodeDist;
       float nodeAlpha;
       float shadowAlpha;
 
-      if(v_borderZero == 1.0) {
-        nodeDist = roundedBox(boxUv, v_halfDimensions - v_edgeWidth, u_radius);
-        nodeAlpha = 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, nodeDist);
-        shadowAlpha = shadowBox(boxUv - u_shadow.xy, v_halfDimensions + u_shadow.w - v_edgeWidth, u_radius + u_shadow.z);
+      if(borderZero == 1.0) {
+        nodeDist = roundedBox(boxUv, v_halfDimensions - edgeWidth, u_radius);
+        nodeAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, nodeDist);
+        shadowAlpha = shadowBox(boxUv - u_shadow.xy, v_halfDimensions + u_shadow.w - edgeWidth, u_radius + u_shadow.z);
         resultColor = mix(resultColor, u_shadowColor, shadowAlpha);
         gl_FragColor = mix(resultColor, color, nodeAlpha) * u_alpha;
         return;
       }
 
       if(v_outerSize.x > v_halfDimensions.x || v_outerSize.y > v_halfDimensions.y) {
-        shadowAlpha = shadowBox(boxUv + v_outerBorderUv - u_shadow.xy, v_outerSize + u_shadow.w - v_edgeWidth, v_outerBorderRadius + u_shadow.z);
+        shadowAlpha = shadowBox(boxUv + v_outerBorderUv - u_shadow.xy, v_outerSize + u_shadow.w - edgeWidth, v_outerBorderRadius + u_shadow.z);
       }
       else {
-        shadowAlpha = shadowBox(boxUv - u_shadow.xy, v_halfDimensions + u_shadow.w - v_edgeWidth, u_radius + u_shadow.z);
+        shadowAlpha = shadowBox(boxUv - u_shadow.xy, v_halfDimensions + u_shadow.w - edgeWidth, u_radius + u_shadow.z);
       }
 
-      float outerDist = roundedBox(boxUv + v_outerBorderUv, v_outerSize - v_edgeWidth, v_outerBorderRadius);
-      float innerDist = roundedBox(boxUv + v_innerBorderUv, v_innerSize - v_edgeWidth, v_innerBorderRadius);
+      float outerDist = roundedBox(boxUv + v_outerBorderUv, v_outerSize - edgeWidth, v_outerBorderRadius);
+      float innerDist = roundedBox(boxUv + v_innerBorderUv, v_innerSize - edgeWidth, v_innerBorderRadius);
 
       if(u_borderGap == 0.0) {
-        float outerAlpha = 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, outerDist);
-        float innerAlpha = 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, innerDist);
+        float outerAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, outerDist);
+        float innerAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, innerDist);
         resultColor = mix(resultColor, u_shadowColor, shadowAlpha);
         resultColor = mix(resultColor, u_borderColor, outerAlpha * u_borderColor.a);
         resultColor = mix(resultColor, color, innerAlpha);
@@ -222,10 +218,10 @@ export const RoundedWithBorderAndShadow: WebGlShaderType<RoundedWithBorderAndSha
         return;
       }
 
-      nodeDist = roundedBox(boxUv, v_halfDimensions - v_edgeWidth, u_radius);
-      nodeAlpha = 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, nodeDist);
+      nodeDist = roundedBox(boxUv, v_halfDimensions - edgeWidth, u_radius);
+      nodeAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, nodeDist);
       float borderDist = max(-innerDist, outerDist);
-      float borderAlpha = 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, borderDist);
+      float borderAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, borderDist);
       resultColor = mix(resultColor, u_shadowColor, shadowAlpha);
       resultColor = mix(resultColor, color, nodeAlpha);
       resultColor = mix(resultColor, u_borderColor, borderAlpha * u_borderColor.a);

package/src/core/text-rendering/CanvasFontHandler.ts

@@ -65,7 +65,7 @@ const processFontData = (
 /**
  * Load a font by providing fontFamily, fontUrl, and optional metrics
  */
-export const loadFont = async (
+export const loadFont = (
   stage: Stage,
   options: FontLoadOptions,
 ): Promise<void> => {
@@ -73,7 +73,7 @@ export const loadFont = async (
 
   // If already loaded, return immediately
   if (fontCache.has(fontFamily) === true) {
-    return;
+    return Promise.resolve();
   }
 
   const existingPromise = fontLoadPromises.get(fontFamily);
@@ -117,7 +117,7 @@ export const getFontFamilies = (): FontFamilyMap => {
  */
 export const init = (
   c: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
-  mc: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
+  mc?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
 ): void => {
   if (initialized === true) {
     return;
@@ -130,7 +130,7 @@ export const init = (
   }
 
   context = c;
-  measureContext = mc;
+  measureContext = mc || c;
 
   // Register the default 'sans-serif' font face
   const defaultMetrics: FontMetrics = {

package/src/core/text-rendering/CanvasTextRenderer.ts

@@ -1,6 +1,10 @@
 import { assertTruthy } from '../../utils.js';
 import type { Stage } from '../Stage.js';
-import type { TextLineStruct, TextRenderInfo } from './TextRenderer.js';
+import type {
+  FontHandler,
+  TextLineStruct,
+  TextRenderInfo,
+} from './TextRenderer.js';
 import * as CanvasFontHandler from './CanvasFontHandler.js';
 import type { CoreTextNodeProps } from '../CoreTextNode.js';
 import { hasZeroWidthSpace } from './Utils.js';
@@ -9,6 +13,7 @@ import { mapTextLayout } from './TextLayoutEngine.js';
 const MAX_TEXTURE_DIMENSION = 4096;
 
 const type = 'canvas' as const;
+const font: FontHandler = CanvasFontHandler;
 
 let canvas: HTMLCanvasElement | OffscreenCanvas | null = null;
 let context:
@@ -238,7 +243,7 @@ const renderQuads = (): void => {
  */
 const CanvasTextRenderer = {
   type,
-  font: CanvasFontHandler,
+  font,
   renderText,
   addQuads,
   renderQuads,

package/src/core/text-rendering/SdfFontHandler.ts

@@ -259,14 +259,14 @@ export const canRenderFont = (trProps: TrProps): boolean => {
  * @param {string} options.atlasUrl - PNG atlas texture URL
  * @param {FontMetrics} options.metrics - Optional font metrics
  */
-export const loadFont = async (
+export const loadFont = (
   stage: Stage,
   options: FontLoadOptions,
 ): Promise<void> => {
   const { fontFamily, atlasUrl, atlasDataUrl, metrics } = options;
   // Early return if already loaded
   if (fontCache.get(fontFamily) !== undefined) {
-    return;
+    return Promise.resolve();
   }
 
   // Early return if already loading
@@ -276,8 +276,8 @@ export const loadFont = async (
   }
 
   if (atlasDataUrl === undefined) {
-    throw new Error(
-      `Atlas data URL must be provided for SDF font: ${fontFamily}`,
+    return Promise.reject(
+      new Error(`Atlas data URL must be provided for SDF font: ${fontFamily}`),
     );
   }
 

package/src/core/text-rendering/Utils.ts

@@ -1,5 +1,3 @@
-import type { NormalizedFontMetrics } from './TextRenderer.js';
-
 const invisibleChars = /[\u200B\u200C\u200D\uFEFF\u00AD\u2060]/g;
 
 /**

package/src/core/textures/ImageTexture.ts

@@ -12,10 +12,7 @@ import {
 import { isSvgImage, loadSvg } from '../lib/textureSvg.js';
 import { fetchJson } from '../lib/utils.js';
 import type { Platform } from '../platforms/Platform.js';
-import {
-  ENABLE_COMPRESSED_TEXTURES,
-  isProductionEnvironment,
-} from '../../utils.js';
+import { ENABLE_COMPRESSED_TEXTURES } from '../../utils.js';
 
 /**
  * Properties of the {@link ImageTexture}

package/src/core/textures/SubTexture.ts

@@ -1,4 +1,3 @@
-import type { Dimensions } from '../../common/CommonTypes.js';
 import { assertTruthy } from '../../utils.js';
 import type { CoreTextureManager } from '../CoreTextureManager.js';
 import { ImageTexture } from './ImageTexture.js';
@@ -8,7 +7,6 @@ import {
   type TextureData,
   type TextureFailedEventHandler,
   type TextureLoadedEventHandler,
-  type TextureState,
 } from './Texture.js';
 
 let subTextureId = 0;

package/src/core/textures/Texture.ts

@@ -153,6 +153,13 @@ export abstract class Texture extends EventEmitter {
 
   public textureData: TextureData | null = null;
 
+  /**
+   * Cache key under which this texture is registered in the
+   * {@link CoreTextureManager} keyCache, or `null` if the texture is
+   * not cached. Owned by the texture manager.
+   */
+  public cacheKey: string | null = null;
+
   public memUsed = 0;
 
   /**