@lightningjs/renderer 0.7.4 → 0.7.6

package/dist/src/core/renderers/webgl/shaders/effects/LinearGradientEffect.js

@@ -87,24 +87,24 @@ export class LinearGradientEffect extends ShaderEffect {
         },
     };
     static methods = {
-        fromLinear: `
-      vec4 function(vec4 linearRGB) {
-        vec4 higher = vec4(1.055)*pow(linearRGB, vec4(1.0/2.4)) - vec4(0.055);
-        vec4 lower = linearRGB * vec4(12.92);
-        return mix(higher, lower, 1.0);
-      }
+        fromLinear: `
+      vec4 function(vec4 linearRGB) {
+        vec4 higher = vec4(1.055)*pow(linearRGB, vec4(1.0/2.4)) - vec4(0.055);
+        vec4 lower = linearRGB * vec4(12.92);
+        return mix(higher, lower, 1.0);
+      }
     `,
-        toLinear: `
-      vec4 function(vec4 sRGB) {
-        vec4 higher = pow((sRGB + vec4(0.055))/vec4(1.055), vec4(2.4));
-        vec4 lower = sRGB/vec4(12.92);
-        return mix(higher, lower, 1.0);
-      }
+        toLinear: `
+      vec4 function(vec4 sRGB) {
+        vec4 higher = pow((sRGB + vec4(0.055))/vec4(1.055), vec4(2.4));
+        vec4 lower = sRGB/vec4(12.92);
+        return mix(higher, lower, 1.0);
+      }
     `,
-        calcPoint: `
-      vec2 function(float d, float angle) {
-        return d * vec2(cos(angle), sin(angle)) + (u_dimensions * 0.5);
-      }
+        calcPoint: `
+      vec2 function(float d, float angle) {
+        return d * vec2(cos(angle), sin(angle)) + (u_dimensions * 0.5);
+      }
     `,
     };
     static ColorLoop = (amount) => {
@@ -116,21 +116,21 @@ export class LinearGradientEffect extends ShaderEffect {
     };
     static onColorize = (props) => {
         const colors = props.colors.length || 1;
-        return `
-      float a = angle - (PI / 180.0 * 90.0);
-      float lineDist = abs(u_dimensions.x * cos(a)) + abs(u_dimensions.y * sin(a));
-      vec2 f = $calcPoint(lineDist * 0.5, a);
-      vec2 t = $calcPoint(lineDist * 0.5, a + PI);
-      vec2 gradVec = t - f;
-      float dist = dot(v_textureCoordinate.xy * u_dimensions - f, gradVec) / dot(gradVec, gradVec);
-
-      float stopCalc = (dist - stops[0]) / (stops[1] - stops[0]);
-      vec4 colorOut = $fromLinear(mix($toLinear(colors[0]), $toLinear(colors[1]), stopCalc));
-      for(int i = 1; i < ${colors}-1; i++) {
-        stopCalc = (dist - stops[i]) / (stops[i + 1] - stops[i]);
-        colorOut = mix(colorOut, colors[i + 1], clamp(stopCalc, 0.0, 1.0));
-      }
-      return mix(maskColor, colorOut, clamp(colorOut.a, 0.0, 1.0));
+        return `
+      float a = angle - (PI / 180.0 * 90.0);
+      float lineDist = abs(u_dimensions.x * cos(a)) + abs(u_dimensions.y * sin(a));
+      vec2 f = $calcPoint(lineDist * 0.5, a);
+      vec2 t = $calcPoint(lineDist * 0.5, a + PI);
+      vec2 gradVec = t - f;
+      float dist = dot(v_textureCoordinate.xy * u_dimensions - f, gradVec) / dot(gradVec, gradVec);
+
+      float stopCalc = (dist - stops[0]) / (stops[1] - stops[0]);
+      vec4 colorOut = $fromLinear(mix($toLinear(colors[0]), $toLinear(colors[1]), stopCalc));
+      for(int i = 1; i < ${colors}-1; i++) {
+        stopCalc = (dist - stops[i]) / (stops[i + 1] - stops[i]);
+        colorOut = mix(colorOut, colors[i + 1], clamp(stopCalc, 0.0, 1.0));
+      }
+      return mix(maskColor, colorOut, clamp(colorOut.a, 0.0, 1.0));
     `;
     };
 }

package/dist/src/core/renderers/webgl/shaders/effects/RadialGradientEffect.js

@@ -97,19 +97,19 @@ export class RadialGradientEffect extends ShaderEffect {
     };
     static onColorize = (props) => {
         const colors = props.colors.length || 1;
-        return `
-      vec2 point = v_textureCoordinate.xy * u_dimensions;
-      vec2 projection = vec2(pivot.x * u_dimensions.x, pivot.y * u_dimensions.y);
-
-      float dist = length((point - projection) / vec2(width, height));
-
-      float stopCalc = (dist - stops[0]) / (stops[1] - stops[0]);
-      vec4 colorOut = mix(colors[0], colors[1], stopCalc);
-      for(int i = 1; i < ${colors}-1; i++) {
-        stopCalc = (dist - stops[i]) / (stops[i + 1] - stops[i]);
-        colorOut = mix(colorOut, colors[i + 1], clamp(stopCalc, 0.0, 1.0));
-      }
-      return mix(maskColor, colorOut, clamp(colorOut.a, 0.0, 1.0));
+        return `
+      vec2 point = v_textureCoordinate.xy * u_dimensions;
+      vec2 projection = vec2(pivot.x * u_dimensions.x, pivot.y * u_dimensions.y);
+
+      float dist = length((point - projection) / vec2(width, height));
+
+      float stopCalc = (dist - stops[0]) / (stops[1] - stops[0]);
+      vec4 colorOut = mix(colors[0], colors[1], stopCalc);
+      for(int i = 1; i < ${colors}-1; i++) {
+        stopCalc = (dist - stops[i]) / (stops[i + 1] - stops[i]);
+        colorOut = mix(colorOut, colors[i + 1], clamp(stopCalc, 0.0, 1.0));
+      }
+      return mix(maskColor, colorOut, clamp(colorOut.a, 0.0, 1.0));
     `;
     };
 }

package/dist/src/core/renderers/webgl/shaders/effects/RadialProgressEffect.js

@@ -80,47 +80,47 @@ export class RadialProgressEffect extends ShaderEffect {
         },
     };
     static methods = {
-        rotateUV: `
-    vec2 function(vec2 uv, float d) {
-      float s = sin(d);
-      float c = cos(d);
-      mat2 rotMatrix = mat2(c, -s, s, c);
-      return uv * rotMatrix;
-    }
+        rotateUV: `
+    vec2 function(vec2 uv, float d) {
+      float s = sin(d);
+      float c = cos(d);
+      mat2 rotMatrix = mat2(c, -s, s, c);
+      return uv * rotMatrix;
+    }
     `,
-        drawDot: `
-    float function(vec2 uv, vec2 p, float r) {
-      uv += p;
-      float circle = length(uv) - r;
-      return clamp(-circle, 0.0, 1.0);
-    }
+        drawDot: `
+    float function(vec2 uv, vec2 p, float r) {
+      uv += p;
+      float circle = length(uv) - r;
+      return clamp(-circle, 0.0, 1.0);
+    }
     `,
     };
-    static onEffectMask = `
-    float outerRadius = radius * u_dimensions.y * 0.5;
-
-    float endAngle = range * progress - 0.0005;
-
-    vec2 uv = v_textureCoordinate.xy * u_dimensions.xy - u_dimensions * 0.5;
-
-    uv = $rotateUV(uv, -(offset));
-    float linewidth = width * u_pixelRatio;
-    float circle = length(uv) - (outerRadius - linewidth) ;
-    circle = abs(circle) - linewidth;
-    circle = clamp(-circle, 0.0, 1.0);
-
-    float angle = (atan(uv.x, -uv.y) / 3.14159265359 * 0.5);
-    float p = endAngle / (PI * 2.);
-
-    circle *= step(fract(angle), fract(p));
-
-    circle = rounded < 1. ? circle : max(circle, $drawDot(uv, vec2(0, outerRadius - linewidth), linewidth));
-    circle = rounded < 1. ? circle : max(circle, $drawDot($rotateUV(uv, -(endAngle)), vec2(0, outerRadius - linewidth), linewidth));
-
-    return mix(shaderColor, maskColor, circle);
+    static onEffectMask = `
+    float outerRadius = radius * u_dimensions.y * 0.5;
+
+    float endAngle = range * progress - 0.0005;
+
+    vec2 uv = v_textureCoordinate.xy * u_dimensions.xy - u_dimensions * 0.5;
+
+    uv = $rotateUV(uv, -(offset));
+    float linewidth = width * u_pixelRatio;
+    float circle = length(uv) - (outerRadius - linewidth) ;
+    circle = abs(circle) - linewidth;
+    circle = clamp(-circle, 0.0, 1.0);
+
+    float angle = (atan(uv.x, -uv.y) / 3.14159265359 * 0.5);
+    float p = endAngle / (PI * 2.);
+
+    circle *= step(fract(angle), fract(p));
+
+    circle = rounded < 1. ? circle : max(circle, $drawDot(uv, vec2(0, outerRadius - linewidth), linewidth));
+    circle = rounded < 1. ? circle : max(circle, $drawDot($rotateUV(uv, -(endAngle)), vec2(0, outerRadius - linewidth), linewidth));
+
+    return mix(shaderColor, maskColor, circle);
   `;
-    static onColorize = `
-    return color;
+    static onColorize = `
+    return color;
   `;
 }
 //# sourceMappingURL=RadialProgressEffect.js.map

package/dist/src/core/renderers/webgl/shaders/effects/RadiusEffect.js

@@ -52,17 +52,17 @@ export class RadiusEffect extends ShaderEffect {
         },
     };
     static methods = {
-        fillMask: `
-      float function(float dist) {
-        return clamp(-dist, 0.0, 1.0);
-      }
+        fillMask: `
+      float function(float dist) {
+        return clamp(-dist, 0.0, 1.0);
+      }
     `,
-        boxDist: `
-      float function(vec2 p, vec2 size, float radius) {
-        size -= vec2(radius);
-        vec2 d = abs(p) - size;
-        return min(max(d.x, d.y), 0.0) + length(max(d, 0.0)) - radius;
-      }
+        boxDist: `
+      float function(vec2 p, vec2 size, float radius) {
+        size -= vec2(radius);
+        vec2 d = abs(p) - size;
+        return min(max(d.x, d.y), 0.0) + length(max(d, 0.0)) - radius;
+      }
     `,
     };
     static resolveDefaults(props) {
@@ -70,16 +70,16 @@ export class RadiusEffect extends ShaderEffect {
             radius: props.radius ?? 10,
         };
     }
-    static onShaderMask = `
-  vec2 halfDimensions = u_dimensions * 0.5;
-  float r = radius[0] * step(v_textureCoordinate.x, 0.5) * step(v_textureCoordinate.y, 0.5);
-  r = r + radius[1] * step(0.5, v_textureCoordinate.x) * step(v_textureCoordinate.y, 0.5);
-  r = r + radius[2] * step(0.5, v_textureCoordinate.x) * step(0.5, v_textureCoordinate.y);
-  r = r + radius[3] * step(v_textureCoordinate.x, 0.5) * step(0.5, v_textureCoordinate.y);
-  return $boxDist(v_textureCoordinate.xy * u_dimensions - halfDimensions, halfDimensions, r);
+    static onShaderMask = `
+  vec2 halfDimensions = u_dimensions * 0.5;
+  float r = radius[0] * step(v_textureCoordinate.x, 0.5) * step(v_textureCoordinate.y, 0.5);
+  r = r + radius[1] * step(0.5, v_textureCoordinate.x) * step(v_textureCoordinate.y, 0.5);
+  r = r + radius[2] * step(0.5, v_textureCoordinate.x) * step(0.5, v_textureCoordinate.y);
+  r = r + radius[3] * step(v_textureCoordinate.x, 0.5) * step(0.5, v_textureCoordinate.y);
+  return $boxDist(v_textureCoordinate.xy * u_dimensions - halfDimensions, halfDimensions, r);
   `;
-    static onEffectMask = `
-  return mix(vec4(0.0), maskColor, $fillMask(shaderMask));
+    static onEffectMask = `
+  return mix(vec4(0.0), maskColor, $fillMask(shaderMask));
   `;
 }
 //# sourceMappingURL=RadiusEffect.js.map

package/dist/src/core/scene/Scene.d.ts

@@ -0,0 +1,59 @@
+import type { CoreNode } from '../CoreNode.js';
+export type NodeTypes = Node;
+export declare class Scene {
+    /**
+     * Root node of the scene
+     *
+     * @type {Node}
+     * @memberof Scene
+     */
+    root: CoreNode;
+    constructor(root: CoreNode);
+    /**
+     * Get all nodes of a specific type
+     * @param type
+     * @returns
+     */
+    getNodeByType(type: string): Node[];
+    /**
+     * Find a node by id
+     * @param id
+     * @returns
+     */
+    getNodeById(id: string): Node | null;
+    /**
+     * Create a new node
+     * @param parent
+     * @returns
+     */
+    /**
+     * create a new RectangleNode
+     * @param w
+     * @param h
+     * @param parent
+     * @returns
+     */
+    /**
+     * Create a new CircleNode
+     * @param r
+     * @param parent
+     * @returns
+     */
+    /**
+     * Create a new TextNode
+     * @param text
+     * @param parent
+     * @returns
+     */
+    /**
+     * Setup and attaching Node
+     * @param node
+     * @param parent
+     * @returns
+     */
+    /**
+     * Update the scene
+     * @param delta
+     */
+    update(delta: number): void;
+}

package/dist/src/core/scene/Scene.js

@@ -0,0 +1,106 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2023 Comcast Cable Communications Management, LLC.
+ *
+ * Licensed under the Apache License, Version 2.0 (the License);
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export class Scene {
+    /**
+     * Root node of the scene
+     *
+     * @type {Node}
+     * @memberof Scene
+     */
+    root;
+    constructor(root) {
+        this.root = root;
+    }
+    /**
+     * Get all nodes of a specific type
+     * @param type
+     * @returns
+     */
+    getNodeByType(type) {
+        return [];
+    }
+    /**
+     * Find a node by id
+     * @param id
+     * @returns
+     */
+    getNodeById(id) {
+        return null;
+    }
+    /**
+     * Create a new node
+     * @param parent
+     * @returns
+     */
+    // public createNode(settings: Partial<INodeWritableProps> = {}): NodeTypes {
+    //   return createNode(settings);
+    // }
+    /**
+     * create a new RectangleNode
+     * @param w
+     * @param h
+     * @param parent
+     * @returns
+     */
+    // public rectangle(w: number, h: number, parent: NodeTypes | null = null) {
+    //   // TODO: Fix this
+    //   // return this.create(new RectangleNode(w, h), parent);
+    // }
+    /**
+     * Create a new CircleNode
+     * @param r
+     * @param parent
+     * @returns
+     */
+    // public circle(r: number, parent: NodeTypes | null = null) {
+    //   // TODO: Fix this
+    //   // return this.create(new CircleNode(r), parent);
+    // }
+    /**
+     * Create a new TextNode
+     * @param text
+     * @param parent
+     * @returns
+     */
+    // public text(text = '', parent: NodeTypes | null = null) {
+    //   // TODO: Fix this
+    //   // return this.create(new TextNode(text), parent);
+    // }
+    /**
+     * Setup and attaching Node
+     * @param node
+     * @param parent
+     * @returns
+     */
+    // private create(node: NodeTypes, parent: NodeTypes | null = null): NodeTypes {
+    //   if (!parent) {
+    //     parent = this.root;
+    //   }
+    //   node.parent = parent;
+    //   return node;
+    // }
+    /**
+     * Update the scene
+     * @param delta
+     */
+    update(delta) {
+        this.root.update(delta);
+    }
+}
+//# sourceMappingURL=Scene.js.map

package/dist/src/core/scene/Scene.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Scene.js","sourceRoot":"","sources":["../../../../src/core/scene/Scene.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAMH,MAAM,OAAO,KAAK;IAChB;;;;;OAKG;IACI,IAAI,CAAW;IAEtB,YAAY,IAAc;QACxB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACnB,CAAC;IAED;;;;OAIG;IACI,aAAa,CAAC,IAAY;QAC/B,OAAO,EAAE,CAAC;IACZ,CAAC;IAED;;;;OAIG;IACI,WAAW,CAAC,EAAU;QAC3B,OAAO,IAAI,CAAC;IACd,CAAC;IAED;;;;OAIG;IACH,6EAA6E;IAC7E,iCAAiC;IACjC,IAAI;IAEJ;;;;;;OAMG;IACH,4EAA4E;IAC5E,sBAAsB;IACtB,4DAA4D;IAC5D,IAAI;IAEJ;;;;;OAKG;IACH,8DAA8D;IAC9D,sBAAsB;IACtB,sDAAsD;IACtD,IAAI;IAEJ;;;;;OAKG;IACH,4DAA4D;IAC5D,sBAAsB;IACtB,uDAAuD;IACvD,IAAI;IAEJ;;;;;OAKG;IACH,gFAAgF;IAChF,mBAAmB;IACnB,0BAA0B;IAC1B,MAAM;IAEN,0BAA0B;IAC1B,iBAAiB;IACjB,IAAI;IAEJ;;;OAGG;IACI,MAAM,CAAC,KAAa;QACzB,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC;CACF"}

package/dist/src/core/text-rendering/TrFontManager.js

@@ -16,8 +16,80 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { SdfTrFontFace } from './font-face-types/SdfTrFontFace/SdfTrFontFace.js';
-import { WebTrFontFace } from './font-face-types/WebTrFontFace.js';
+import memize from 'memize';
+const weightConversions = {
+    normal: 400,
+    bold: 700,
+    bolder: 900,
+    lighter: 100,
+};
+const fontWeightToNumber = (weight) => {
+    if (typeof weight === 'number') {
+        return weight;
+    }
+    return weightConversions[weight] || 400;
+};
+function rawResolveFontToUse(familyMapsByPriority, family, weightIn, style, stretch) {
+    let weight = fontWeightToNumber(weightIn);
+    for (const fontFamiles of familyMapsByPriority) {
+        const fontFaces = fontFamiles[family];
+        if (!fontFaces) {
+            continue;
+        }
+        if (fontFaces.size === 1) {
+            // No Exact match found, find nearest weight match
+            console.warn(`TrFontManager: Only one font face found for family: '${family}' - will be used for all weights and styles`);
+            return fontFaces.values().next().value;
+        }
+        const weightMap = new Map();
+        for (const fontFace of fontFaces) {
+            const fontFamilyWeight = fontWeightToNumber(fontFace.descriptors.weight);
+            if (fontFamilyWeight === weight &&
+                fontFace.descriptors.style === style &&
+                fontFace.descriptors.stretch === stretch) {
+                return fontFace;
+            }
+            weightMap.set(fontFamilyWeight, fontFace);
+        }
+        // No Exact match found, find nearest weight match
+        const msg = `TrFontManager: No exact match: '${family} Weight: ${weight} Style: ${style} Stretch: ${stretch}'`;
+        console.error(msg);
+        // Follow the CSS font-weight algorithm to find the nearest weight match
+        // https://www.w3.org/TR/2018/REC-css-fonts-3-20180920/#font-matching-algorithm
+        if (weight === 400 && weightMap.has(500)) {
+            return weightMap.get(500);
+        }
+        if (weight === 500 && weightMap.has(400)) {
+            return weightMap.get(400);
+        }
+        if (weight < 400) {
+            while (weight > 0) {
+                if (weightMap.has(weight)) {
+                    return weightMap.get(weight);
+                }
+                weight -= 100;
+            }
+            // reset back for the next loop
+            weight = 600;
+        }
+        while (weight < 1000) {
+            if (weightMap.has(weight)) {
+                return weightMap.get(weight);
+            }
+            weight += 100;
+        }
+        // finally check lower again
+        weight = 500;
+        while (weight > 0) {
+            if (weightMap.has(weight)) {
+                return weightMap.get(weight);
+            }
+            weight -= 100;
+        }
+    }
+    return;
+}
+const resolveFontToUse = memize(rawResolveFontToUse);
 export class TrFontManager {
     textRenderers;
     constructor(textRenderers) {
@@ -45,31 +117,8 @@ export class TrFontManager {
      * @returns
      */
     static resolveFontFace(familyMapsByPriority, props) {
-        const closeFaces = [];
-        const exactMatch = familyMapsByPriority.reduce((prev, fontFamiles) => {
-            if (prev) {
-                return prev;
-            }
-            const fontFaces = fontFamiles[props.fontFamily];
-            if (!fontFaces) {
-                return undefined;
-            }
-            const fontFacesCopy = new Set(fontFaces);
-            // Remove any font faces that don't match the style exactly
-            // TODO: In the future we may enhance this to find the best match
-            // based on font weight, style, etc.
-            // See https://www.w3.org/TR/2018/REC-css-fonts-3-20180920/#font-matching-algorithm
-            for (const fontFace of fontFacesCopy) {
-                if (fontFace.descriptors.stretch !== props.fontStretch ||
-                    fontFace.descriptors.style !== props.fontStyle ||
-                    fontFace.descriptors.weight !== props.fontWeight) {
-                    fontFacesCopy.delete(fontFace);
-                }
-            }
-            // Return the first font face that matches the style exactly
-            return fontFacesCopy.values().next().value;
-        }, undefined);
-        return exactMatch || closeFaces[0];
+        const { fontFamily, fontWeight, fontStyle, fontStretch } = props;
+        return resolveFontToUse(familyMapsByPriority, fontFamily, fontWeight, fontStyle, fontStretch);
     }
 }
 //# sourceMappingURL=TrFontManager.js.map

package/dist/src/core/text-rendering/TrFontManager.js.map

@@ -1 +1 @@
-{"version":3,"file":"TrFontManager.js","sourceRoot":"","sources":["../../../../src/core/text-rendering/TrFontManager.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,kDAAkD,CAAC;AAEjF,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AAUnE,MAAM,OAAO,aAAa;IACJ;IAApB,YAAoB,aAAuC;QAAvC,kBAAa,GAAb,aAAa,CAA0B;QACzD,2BAA2B;IAC7B,CAAC;IAEM,WAAW,CAAC,IAAgB;QACjC,iEAAiE;QACjE,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,aAAa,EAAE;YACrC,MAAM,EAAE,GAAG,IAAI,CAAC,aAAa,CAAC,IAA6B,CAAC,CAAC;YAC7D,IAAI,EAAE,IAAI,EAAE,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE;gBACtC,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;aACtB;SACF;IACH,CAAC;IAED;;;;;;;;;;OAUG;IACI,MAAM,CAAC,eAAe,CAC3B,oBAAqC,EACrC,KAAkB;QAElB,MAAM,UAAU,GAAoB,EAAE,CAAC;QACvC,MAAM,UAAU,GAAG,oBAAoB,CAAC,MAAM,CAC5C,CAAC,IAAI,EAAE,WAAW,EAAE,EAAE;YACpB,IAAI,IAAI,EAAE;gBACR,OAAO,IAAI,CAAC;aACb;YACD,MAAM,SAAS,GAAG,WAAW,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;YAChD,IAAI,CAAC,SAAS,EAAE;gBACd,OAAO,SAAS,CAAC;aAClB;YACD,MAAM,aAAa,GAAG,IAAI,GAAG,CAAC,SAAS,CAAC,CAAC;YAEzC,2DAA2D;YAC3D,iEAAiE;YACjE,oCAAoC;YACpC,mFAAmF;YACnF,KAAK,MAAM,QAAQ,IAAI,aAAa,EAAE;gBACpC,IACE,QAAQ,CAAC,WAAW,CAAC,OAAO,KAAK,KAAK,CAAC,WAAW;oBAClD,QAAQ,CAAC,WAAW,CAAC,KAAK,KAAK,KAAK,CAAC,SAAS;oBAC9C,QAAQ,CAAC,WAAW,CAAC,MAAM,KAAK,KAAK,CAAC,UAAU,EAChD;oBACA,aAAa,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;iBAChC;aACF;YAED,4DAA4D;YAC5D,OAAO,aAAa,CAAC,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC;QAC7C,CAAC,EACD,SAAS,CACV,CAAC;QAEF,OAAO,UAAU,IAAI,UAAU,CAAC,CAAC,CAAC,CAAC;IACrC,CAAC;CACF"}
+{"version":3,"file":"TrFontManager.js","sourceRoot":"","sources":["../../../../src/core/text-rendering/TrFontManager.ts"],"names":[],"mappings":"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"}

package/dist/src/core/text-rendering/renderers/CanvasTextRenderer.js

@@ -124,11 +124,17 @@ export class CanvasTextRenderer extends TextRenderer {
             },
             width: (state, value) => {
                 state.props.width = value;
-                this.invalidateLayoutCache(state);
+                // Only invalidate layout cache if we're containing in the horizontal direction
+                if (state.props.contain !== 'none') {
+                    this.invalidateLayoutCache(state);
+                }
             },
             height: (state, value) => {
                 state.props.height = value;
-                this.invalidateLayoutCache(state);
+                // Only invalidate layout cache if we're containing in the vertical direction
+                if (state.props.contain === 'both') {
+                    this.invalidateLayoutCache(state);
+                }
             },
             offsetY: (state, value) => {
                 state.props.offsetY = value;