@solidtv/renderer 1.0.5 → 1.0.6

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

@@ -417,12 +417,13 @@ export const isFontLoaded = (fontFamily: string): boolean => {
  */
 export const getFontMetrics = (
   fontFamily: string,
-
   fontSize: number,
 ): NormalizedFontMetrics => {
-  const out = normalizedMetrics.get(fontFamily);
-  if (out !== undefined) {
-    return out;
+  const label = fontFamily + '_' + fontSize;
+  const metricsCache = normalizedMetrics.get(label);
+
+  if (metricsCache !== undefined) {
+    return metricsCache;
   }
   let metrics = fontCache.get(fontFamily)!.metrics;
   return processFontMetrics(fontFamily, fontSize, metrics);
@@ -433,7 +434,7 @@ export const processFontMetrics = (
   fontSize: number,
   metrics: FontMetrics,
 ): NormalizedFontMetrics => {
-  const label = fontFamily + fontSize;
+  const label = fontFamily + '_' + fontSize;
   const normalized = normalizeFontMetrics(metrics, fontSize);
   normalizedMetrics.set(label, normalized);
   return normalized;

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

@@ -32,6 +32,10 @@ const init = (stage: Stage): void => {
 };
 
 const font: FontHandler = SdfFontHandler;
+const layoutCache = new Map<string, TextLayout>();
+
+const getLayoutCacheKey = (props: CoreTextNodeProps): string =>
+  `${props.fontFamily}-${props.fontSize}-${props.letterSpacing}-${props.lineHeight}-${props.maxHeight}-${props.maxWidth}-${props.textAlign}-${props.text}`;
 
 /**
  * SDF text renderer using MSDF/SDF fonts with WebGL
@@ -49,6 +53,18 @@ const renderText = (props: CoreTextNodeProps): TextRenderInfo => {
     };
   }
 
+  const cacheKey = getLayoutCacheKey(props);
+  let layout = layoutCache.get(cacheKey);
+  if (layout !== undefined) {
+    return {
+      remainingLines: 0,
+      hasRemainingText: false,
+      width: layout.width,
+      height: layout.height,
+      layout,
+    };
+  }
+
   // Get font cache for this font family
   const fontData = SdfFontHandler.getFontData(props.fontFamily);
   if (fontData === undefined) {
@@ -60,7 +76,8 @@ const renderText = (props: CoreTextNodeProps): TextRenderInfo => {
   }
 
   // Calculate text layout and generate glyph data for caching
-  const layout = generateTextLayout(props, fontData);
+  layout = generateTextLayout(props, fontData);
+  layoutCache.set(cacheKey, layout);
 
   // For SDF renderer, ImageData is null since we render via WebGL
   return {
@@ -68,7 +85,7 @@ const renderText = (props: CoreTextNodeProps): TextRenderInfo => {
     hasRemainingText: false,
     width: layout.width,
     height: layout.height,
-    layout, // Cache layout for addQuads
+    layout,
   };
 };
 
@@ -302,14 +319,10 @@ const generateTextLayout = (
 
       // Calculate glyph position and atlas coordinates (in design units)
       const glyphLayout: GlyphLayout = {
-        codepoint,
-        glyphId: glyph.id,
         x: currentX + glyph.xoffset,
         y: currentY + glyph.yoffset,
         width: glyph.width,
         height: glyph.height,
-        xOffset: glyph.xoffset,
-        yOffset: glyph.yoffset,
         atlasX: glyph.x * invAtlasWidth,
         atlasY: glyph.y * invAtlasHeight,
         atlasWidth: glyph.width * invAtlasWidth,

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

@@ -236,41 +236,10 @@ export interface TrProps extends TrFontProps {
  * Glyph layout information for WebGL rendering
  */
 export interface GlyphLayout {
-  /**
-   * Unicode codepoint
-   */
-  codepoint: number;
-  /**
-   * Glyph ID in the font atlas
-   */
-  glyphId: number;
-  /**
-   * X position relative to text origin
-   */
   x: number;
-  /**
-   * Y position relative to text origin
-   */
   y: number;
-  /**
-   * Width of glyph in font units
-   */
   width: number;
-  /**
-   * Height of glyph in font units
-   */
   height: number;
-  /**
-   * X offset for glyph positioning
-   */
-  xOffset: number;
-  /**
-   * Y offset for glyph positioning
-   */
-  yOffset: number;
-  /**
-   * Atlas texture coordinates (normalized 0-1)
-   */
   atlasX: number;
   atlasY: number;
   atlasWidth: number;

package/src/main-api/Renderer.ts

@@ -957,8 +957,10 @@ export class RendererMain extends EventEmitter {
     this.canvas.width = deviceLogicalWidth * devicePhysicalPixelRatio;
     this.canvas.height = deviceLogicalHeight * devicePhysicalPixelRatio;
 
-    this.canvas.style.width = `${deviceLogicalWidth}px`;
-    this.canvas.style.height = `${deviceLogicalHeight}px`;
+    if (this.canvas.style) {
+      this.canvas.style.width = `${deviceLogicalWidth}px`;
+      this.canvas.style.height = `${deviceLogicalHeight}px`;
+    }
 
     this.stage.renderer.updateViewport();