@solidtv/renderer 1.2.6 → 1.2.8

package/src/core/lib/textureSvg.ts

@@ -1,5 +1,6 @@
 import { assertTruthy } from '../../utils.js';
 import { type TextureData } from '../textures/Texture.js';
+import { isBase64Image } from './utils.js';
 
 /**
  * Tests if the given location is a SVG
@@ -14,11 +15,21 @@ export function isSvgImage(url: string): boolean {
 }
 
 /**
- * Loads a SVG image
- * @param url
- * @returns
+ * Loads a SVG image and rasterizes it for use as a texture.
+ *
+ * @remarks
+ * Rasterizes at `pixelRatio` to keep the texture sharp on HiDPI / 4K displays.
+ * `width`/`height` are interpreted as the logical (CSS-pixel) target size; the
+ * backing canvas is allocated at `width * pixelRatio` × `height * pixelRatio`.
+ *
+ * When `sw`/`sh` are provided they describe a source-region crop on the SVG
+ * (not a crop of the destination canvas) and are sampled via the 9-arg form of
+ * drawImage.
+ *
+ * Returns an `ImageBitmap` when available (zero CPU readback, transferable),
+ * falling back to `ImageData` on older browsers without `createImageBitmap`.
  */
-export const loadSvg = (
+export const loadSvg = async (
   url: string,
   width: number | null,
   height: number | null,
@@ -26,34 +37,62 @@ export const loadSvg = (
   sy: number | null,
   sw: number | null,
   sh: number | null,
+  pixelRatio: number,
 ): Promise<TextureData> => {
-  return new Promise((resolve, reject) => {
-    const canvas = document.createElement('canvas');
-    const ctx = canvas.getContext('2d');
-    assertTruthy(ctx);
-
-    ctx.imageSmoothingEnabled = true;
-    const img = new Image();
-    img.onload = () => {
-      const x = sx ?? 0;
-      const y = sy ?? 0;
-      const w = width || img.width;
-      const h = height || img.height;
-
-      canvas.width = w;
-      canvas.height = h;
-      ctx.drawImage(img, 0, 0, w, h);
-
-      resolve({
-        data: ctx.getImageData(x, y, sw ?? w, sh ?? h),
-        premultiplyAlpha: false,
-      });
-    };
+  const img = new Image();
+  if (isBase64Image(url) === false) {
+    img.crossOrigin = 'anonymous';
+  }
 
+  await new Promise<void>((resolve, reject) => {
+    img.onload = () => resolve();
     img.onerror = (err) => {
-      reject(err);
+      reject(
+        err instanceof Error ? err : new Error(`SVG loading failed: ${url}`),
+      );
     };
-
     img.src = url;
   });
+
+  // Target size precedence: explicit w/h on the texture, then the source
+  // crop dims (so a node that only sets srcWidth/srcHeight gets a texture
+  // sized to the crop, matching pre-fix behavior), then the SVG's intrinsic
+  // dimensions.
+  const targetW = width || sw || img.naturalWidth || img.width;
+  const targetH = height || sh || img.naturalHeight || img.height;
+  // Clamp the DPR multiplier so a sub-1 stage pixelRatio (e.g. an app
+  // rendering at 720p inside a 1080p design grid) doesn't downscale the
+  // raster below the requested size. HiDPI upscaling still applies.
+  const ratio = pixelRatio > 1 ? pixelRatio : 1;
+  const physW = Math.max(1, Math.ceil(targetW * ratio));
+  const physH = Math.max(1, Math.ceil(targetH * ratio));
+
+  const canvas = document.createElement('canvas');
+  canvas.width = physW;
+  canvas.height = physH;
+  const ctx = canvas.getContext('2d');
+  assertTruthy(ctx);
+
+  if (sw !== null && sh !== null) {
+    ctx.drawImage(img, sx ?? 0, sy ?? 0, sw, sh, 0, 0, physW, physH);
+  } else {
+    ctx.drawImage(img, 0, 0, physW, physH);
+  }
+
+  if (typeof createImageBitmap === 'function') {
+    try {
+      const bitmap = await createImageBitmap(canvas);
+      return {
+        data: bitmap,
+        premultiplyAlpha: false,
+      };
+    } catch {
+      // fall through to ImageData
+    }
+  }
+
+  return {
+    data: ctx.getImageData(0, 0, physW, physH),
+    premultiplyAlpha: false,
+  };
 };

package/src/core/shaders/canvas/Blur.ts

@@ -0,0 +1,23 @@
+import type { CanvasShaderType } from '../../renderers/canvas/CanvasShaderNode.js';
+import { BlurTemplate, type BlurProps } from '../templates/BlurTemplate.js';
+
+export interface ComputedBlurValues {
+  filter: string;
+}
+
+/**
+ * Canvas2D Blur backed by the native `ctx.filter = 'blur(Npx)'`. Browsers that
+ * lack filter support (Chrome 38-52) will silently no-op — accept the
+ * degradation rather than emulating a multi-pass blur in JS.
+ */
+export const Blur: CanvasShaderType<BlurProps, ComputedBlurValues> = {
+  props: BlurTemplate.props,
+  saveAndRestore: true,
+  update() {
+    this.computed.filter = `blur(${this.props!.amount}px)`;
+  },
+  render(ctx, _node, renderContext) {
+    ctx.filter = this.computed.filter!;
+    renderContext();
+  },
+};

package/src/core/shaders/templates/BlurTemplate.test.ts

@@ -0,0 +1,23 @@
+import { describe, it, expect } from 'vitest';
+import { BlurTemplate, type BlurProps } from './BlurTemplate.js';
+import { resolveShaderProps } from '../../renderers/CoreShaderNode.js';
+
+function resolve(input: Partial<BlurProps>): BlurProps {
+  const props = { ...input } as Record<string, unknown>;
+  resolveShaderProps(props, BlurTemplate.props as never);
+  return props as unknown as BlurProps;
+}
+
+describe('BlurTemplate', () => {
+  it('applies default amount when omitted', () => {
+    expect(resolve({}).amount).toBe(4);
+  });
+
+  it('passes through user-provided amount', () => {
+    expect(resolve({ amount: 10 }).amount).toBe(10);
+  });
+
+  it('passes through zero (no blur)', () => {
+    expect(resolve({ amount: 0 }).amount).toBe(0);
+  });
+});

package/src/core/shaders/templates/BlurTemplate.ts

@@ -0,0 +1,25 @@
+import type { CoreShaderType } from '../../renderers/CoreShaderNode.js';
+
+/**
+ * Properties of the {@link Blur} shader.
+ *
+ * Intended for nodes with an Image Texture. Applying it to color-only or text
+ * nodes will just blur the solid fill.
+ */
+export interface BlurProps {
+  /**
+   * Blur amount in node-space pixels.
+   *
+   * Single-pass kernel — small values (1-8) look best. Larger values still
+   * work but lose smoothness because there are only 9 samples per pixel.
+   *
+   * @default 4
+   */
+  amount: number;
+}
+
+export const BlurTemplate: CoreShaderType<BlurProps> = {
+  props: {
+    amount: 4,
+  },
+};

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

@@ -0,0 +1,47 @@
+import type { WebGlShaderType } from '../../renderers/webgl/WebGlShaderNode.js';
+import { BlurTemplate, type BlurProps } from '../templates/BlurTemplate.js';
+
+/**
+ * Single-pass 3x3 Gaussian-approximation blur (1,2,1 / 2,4,2 / 1,2,1) / 16.
+ *
+ * 9 texture fetches, no second pass, no render target — designed for Image
+ * Textures on constrained devices. Larger blurs trade smoothness for speed;
+ * if a higher-quality blur is needed, stack multiple nodes or do a separable
+ * pass via a RenderTexture.
+ */
+export const Blur: WebGlShaderType<BlurProps> = {
+  props: BlurTemplate.props,
+  update() {
+    this.uniform1f('u_amount', this.props!.amount);
+  },
+  fragment: `
+    # ifdef GL_FRAGMENT_PRECISION_HIGH
+    precision highp float;
+    # else
+    precision mediump float;
+    # endif
+
+    uniform vec2 u_dimensions;
+    uniform sampler2D u_texture;
+    uniform float u_amount;
+
+    varying vec4 v_color;
+    varying vec2 v_textureCoords;
+
+    void main() {
+      vec2 px = vec2(u_amount) / u_dimensions;
+
+      vec4 c = texture2D(u_texture, v_textureCoords) * 0.25;
+      c += texture2D(u_texture, v_textureCoords + vec2( px.x, 0.0)) * 0.125;
+      c += texture2D(u_texture, v_textureCoords + vec2(-px.x, 0.0)) * 0.125;
+      c += texture2D(u_texture, v_textureCoords + vec2(0.0,  px.y)) * 0.125;
+      c += texture2D(u_texture, v_textureCoords + vec2(0.0, -px.y)) * 0.125;
+      c += texture2D(u_texture, v_textureCoords + vec2( px.x,  px.y)) * 0.0625;
+      c += texture2D(u_texture, v_textureCoords + vec2(-px.x, -px.y)) * 0.0625;
+      c += texture2D(u_texture, v_textureCoords + vec2( px.x, -px.y)) * 0.0625;
+      c += texture2D(u_texture, v_textureCoords + vec2(-px.x,  px.y)) * 0.0625;
+
+      gl_FragColor = c * v_color;
+    }
+  `,
+};

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

@@ -322,13 +322,35 @@ export const loadFont = (
   const nwff: CoreTextNode[] = (nodesWaitingForFont[fontFamily] = []);
   // Create loading promise
   const loadPromise = (async (): Promise<void> => {
-    // Load font JSON data
-    const response = await fetch(atlasDataUrl);
-    if (!response.ok) {
-      throw new Error(`Failed to load font data: ${response.statusText}`);
-    }
-
-    const fontData = (await response.json()) as SdfFontData;
+    const fontData = await new Promise<SdfFontData>((resolve, reject) => {
+      const xhr = new XMLHttpRequest();
+      xhr.open('GET', atlasDataUrl, true);
+      xhr.responseType = 'json';
+      xhr.onload = () => {
+        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 0) {
+          let data = xhr.response;
+          if (typeof data === 'string') {
+            try {
+              data = JSON.parse(data);
+            } catch (e) {
+              reject(new Error('Failed to parse font data JSON'));
+              return;
+            }
+          }
+          resolve(data as SdfFontData);
+        } else {
+          reject(new Error(`Failed to load font data: ${xhr.statusText}`));
+        }
+      };
+      xhr.onerror = () => {
+        reject(
+          new Error(
+            'Network error occurred while trying to load the font data.',
+          ),
+        );
+      };
+      xhr.send(null);
+    });
     if (!fontData || !fontData.chars) {
       throw new Error('Invalid SDF font data format');
     }

package/src/core/textures/ImageTexture.ts

@@ -314,19 +314,7 @@ export class ImageTexture extends Texture {
       return this.loadImage(absoluteSrc);
     }
 
-    if (type === 'svg') {
-      return loadSvg(
-        absoluteSrc,
-        this.props.w,
-        this.props.h,
-        this.props.sx,
-        this.props.sy,
-        this.props.sw,
-        this.props.sh,
-      );
-    }
-
-    if (isSvgImage(src) === true) {
+    if (type === 'svg' || isSvgImage(src) === true) {
       return loadSvg(
         absoluteSrc,
         this.props.w,
@@ -335,6 +323,7 @@ export class ImageTexture extends Texture {
         this.props.sy,
         this.props.sw,
         this.props.sh,
+        this.txManager.pixelRatio,
       );
     }
 

package/src/main-api/Inspector.ts

@@ -859,7 +859,6 @@ export class Inspector {
     // but we need it from the inspector to set the initial properties on the div element
     const mergedProps = {
       ...node.props,
-       
       ...(node as unknown as { textProps: CoreTextNodeProps }).textProps,
     } as CoreTextNodeProps;
     const div = this.createDiv(node.id, mergedProps);
@@ -1230,6 +1229,11 @@ export class Inspector {
 
     // CSS mappable attribute
     if (stylePropertyMap[property]) {
+      // Text nodes must always stay at opacity 0.001 — never let alpha updates override it.
+      if (property === 'alpha' && div.style.pointerEvents === 'none') {
+        return;
+      }
+
       const mappedStyleResponse = stylePropertyMap[property]?.(value);
 
       if (mappedStyleResponse === null) {
@@ -1354,7 +1358,10 @@ export class Inspector {
         div.style.left = `${x - w * mountX}px`;
         div.style.width = `${w}px`;
         div.style.height = `${h}px`;
-        div.style.opacity = `${alpha}`;
+        // Text nodes must keep opacity at 0.001 — never override it from animation props.
+        if (div.style.pointerEvents !== 'none') {
+          div.style.opacity = `${alpha}`;
+        }
         div.style.rotate = `${rotation}rad`;
         div.style.scale = `${scale}`;
         div.style.color = convertColorToRgba(color);

package/dist/tsconfig.tsbuildinfo

@@ -1 +0,0 @@
-{"fileNames":[],"fileInfos":[],"root":[],"options":{"allowJs":true,"allowSyntheticDefaultImports":true,"composite":true,"declaration":true,"experimentalDecorators":true,"module":100,"noImplicitAny":false,"noImplicitOverride":true,"noUncheckedIndexedAccess":true,"outDir":"./","rootDir":"..","sourceMap":true,"strict":true,"target":9,"verbatimModuleSyntax":true},"version":"5.8.3"}