@lightningjs/renderer 2.14.1 → 2.14.2

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

@@ -49,32 +49,32 @@ export class HolePunchEffect 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 onShaderMask = `
-  vec2 halfDimensions = u_dimensions * 0.5;
-  vec2 size = vec2(width, height) * 0.5;
-  vec2 basePos = v_textureCoordinate.xy * u_dimensions.xy - vec2(x, y);
-  vec2 pos = basePos - size;
-  float r = radius[0] * step(pos.x, 0.5) * step(pos.y, 0.5);
-  r = r + radius[1] * step(0.5, pos.x) * step(pos.y, 0.5);
-  r = r + radius[2] * step(0.5, pos.x) * step(0.5, pos.y);
-  r = r + radius[3] * step(pos.x, 0.5) * step(0.5, pos.y);
-  return $boxDist(pos, size, r);
+    static onShaderMask = `
+  vec2 halfDimensions = u_dimensions * 0.5;
+  vec2 size = vec2(width, height) * 0.5;
+  vec2 basePos = v_textureCoordinate.xy * u_dimensions.xy - vec2(x, y);
+  vec2 pos = basePos - size;
+  float r = radius[0] * step(pos.x, 0.5) * step(pos.y, 0.5);
+  r = r + radius[1] * step(0.5, pos.x) * step(pos.y, 0.5);
+  r = r + radius[2] * step(0.5, pos.x) * step(0.5, pos.y);
+  r = r + radius[3] * step(pos.x, 0.5) * step(0.5, pos.y);
+  return $boxDist(pos, size, r);
   `;
-    static onEffectMask = `
-  return mix(maskColor, vec4(0.0), $fillMask(shaderMask));
+    static onEffectMask = `
+  return mix(maskColor, vec4(0.0), $fillMask(shaderMask));
   `;
 }
 //# sourceMappingURL=HolePunchEffect.js.map

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

@@ -82,24 +82,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) => {
@@ -111,18 +111,18 @@ 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));
-      ${this.ColorLoop(colors)}
-      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));
+      ${this.ColorLoop(colors)}
+      return mix(maskColor, colorOut, clamp(colorOut.a, 0.0, 1.0));
     `;
     };
 }

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

@@ -100,16 +100,16 @@ 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);
-      ${this.ColorLoop(colors)}
-      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);
+      ${this.ColorLoop(colors)}
+      return mix(maskColor, colorOut, clamp(colorOut.a, 0.0, 1.0));
     `;
     };
 }

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

@@ -81,47 +81,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

@@ -38,17 +38,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) {
@@ -56,16 +56,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/shaders/canvas/Border.d.ts

@@ -0,0 +1,9 @@
+import type { CanvasShaderType } from '../../renderers/canvas/CanvasShaderNode.js';
+import type { Vec4 } from '../../renderers/webgl/internal/ShaderUtils.js';
+import { type BorderProps } from '../templates/BorderTemplate.js';
+export interface ComputedBorderValues {
+    borderColor: string;
+    borderAsym: boolean;
+    borderRadius: Vec4;
+}
+export declare const Border: CanvasShaderType<BorderProps, ComputedBorderValues>;

package/dist/src/core/shaders/canvas/Border.js

@@ -0,0 +1,57 @@
+/*
+ * 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.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { valuesAreEqual } from '../../lib/utils.js';
+import { formatRgba, parseColorRgba, } from '../../renderers/canvas/internal/ColorUtils.js';
+import { BorderTemplate, } from '../templates/BorderTemplate.js';
+import { strokeLine } from './utils/render.js';
+export const Border = {
+    props: BorderTemplate.props,
+    update() {
+        this.computed.borderColor = formatRgba(parseColorRgba(this.props.color));
+        this.computed.borderAsym = !valuesAreEqual(this.props.width);
+    },
+    render(ctx, quad, renderContext) {
+        renderContext();
+        ctx.strokeStyle = this.computed.borderColor;
+        if (this.computed.borderAsym === false && this.props.width[0] > 0) {
+            const bWidth = this.props.width[0];
+            const bHalfWidth = bWidth * 0.5;
+            ctx.lineWidth = bWidth;
+            ctx.beginPath();
+            ctx.strokeRect(quad.tx + bHalfWidth, quad.ty + bHalfWidth, quad.width - bWidth, quad.height - bWidth);
+            return;
+        }
+        const { 0: t, 1: r, 2: b, 3: l } = this.props.width;
+        if (t > 0) {
+            const y = quad.ty + t * 0.5;
+            strokeLine(ctx, quad.tx, y, quad.tx + quad.width, y, t);
+        }
+        if (r > 0) {
+            const x = quad.tx + quad.width - r * 0.5;
+            strokeLine(ctx, x, quad.ty, x, quad.ty + quad.height, r);
+        }
+        if (b > 0) {
+            const y = quad.ty + quad.height - b * 0.5;
+            strokeLine(ctx, quad.tx, y, quad.tx + quad.width, y, b);
+        }
+        if (l > 0) {
+            const x = quad.tx + l * 0.5;
+            strokeLine(ctx, x, quad.ty, x, quad.ty + quad.height, l);
+        }
+    },
+};
+//# sourceMappingURL=Border.js.map

package/dist/src/core/shaders/canvas/Border.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Border.js","sourceRoot":"","sources":["../../../../../src/core/shaders/canvas/Border.ts"],"names":[],"mappings":"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"}

package/dist/src/core/shaders/canvas/HolePunch.d.ts

@@ -0,0 +1,7 @@
+import type { CanvasShaderType } from '../../renderers/canvas/CanvasShaderNode.js';
+import type { Vec4 } from '../../renderers/webgl/internal/ShaderUtils.js';
+import { type HolePunchProps } from '../templates/HolePunchTemplate.js';
+export interface ComputedHolePunchValues {
+    radius: Vec4;
+}
+export declare const HolePunch: CanvasShaderType<HolePunchProps, ComputedHolePunchValues>;

package/dist/src/core/shaders/canvas/HolePunch.js

@@ -0,0 +1,38 @@
+/*
+ * 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.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { calcFactoredRadiusArray } from '../../lib/utils.js';
+import { HolePunchTemplate, } from '../templates/HolePunchTemplate.js';
+import { roundRect } from './utils/render.js';
+export const HolePunch = {
+    props: HolePunchTemplate.props,
+    update() {
+        this.computed.radius = calcFactoredRadiusArray(this.props.radius, this.props.width, this.props.height);
+    },
+    render(ctx, quad, renderContext) {
+        ctx.save();
+        renderContext();
+        const { x, y, width, height } = this.props;
+        ctx.beginPath();
+        roundRect(ctx, quad.tx + x, quad.ty + y, width, height, this.computed.radius);
+        ctx.closePath();
+        ctx.fillStyle = 'black';
+        ctx.globalCompositeOperation = 'destination-out';
+        ctx.fill();
+        ctx.restore();
+    },
+};
+//# sourceMappingURL=HolePunch.js.map

package/dist/src/core/shaders/canvas/HolePunch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HolePunch.js","sourceRoot":"","sources":["../../../../../src/core/shaders/canvas/HolePunch.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAG7D,OAAO,EACL,iBAAiB,GAElB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAM9C,MAAM,CAAC,MAAM,SAAS,GAGlB;IACF,KAAK,EAAE,iBAAiB,CAAC,KAAK;IAC9B,MAAM;QACJ,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,uBAAuB,CAC5C,IAAI,CAAC,KAAM,CAAC,MAAc,EAC1B,IAAI,CAAC,KAAM,CAAC,KAAK,EACjB,IAAI,CAAC,KAAM,CAAC,MAAM,CACnB,CAAC;IACJ,CAAC;IACD,MAAM,CAAC,GAAG,EAAE,IAAI,EAAE,aAAa;QAC7B,GAAG,CAAC,IAAI,EAAE,CAAC;QACX,aAAa,EAAE,CAAC;QAChB,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,KAAM,CAAC;QAC5C,GAAG,CAAC,SAAS,EAAE,CAAC;QAChB,SAAS,CACP,GAAG,EACH,IAAI,CAAC,EAAE,GAAG,CAAC,EACX,IAAI,CAAC,EAAE,GAAG,CAAC,EACX,KAAK,EACL,MAAM,EACN,IAAI,CAAC,QAAQ,CAAC,MAAO,CACtB,CAAC;QACF,GAAG,CAAC,SAAS,EAAE,CAAC;QAChB,GAAG,CAAC,SAAS,GAAG,OAAO,CAAC;QACxB,GAAG,CAAC,wBAAwB,GAAG,iBAAiB,CAAC;QACjD,GAAG,CAAC,IAAI,EAAE,CAAC;QACX,GAAG,CAAC,OAAO,EAAE,CAAC;IAChB,CAAC;CACF,CAAC"}

package/dist/src/core/shaders/canvas/LinearGradient.d.ts

@@ -0,0 +1,10 @@
+import type { CanvasShaderType } from '../../renderers/canvas/CanvasShaderNode.js';
+import { type LinearGradientProps } from '../templates/LinearGradientTemplate.js';
+export interface ComputedLinearGradientValues {
+    x0: number;
+    y0: number;
+    x1: number;
+    y1: number;
+    colors: string[];
+}
+export declare const LinearGradient: CanvasShaderType<LinearGradientProps, ComputedLinearGradientValues>;

package/dist/src/core/shaders/canvas/LinearGradient.js

@@ -0,0 +1,46 @@
+/*
+ * 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.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { LinearGradientTemplate, } from '../templates/LinearGradientTemplate.js';
+export const LinearGradient = {
+    props: LinearGradientTemplate.props,
+    update(node) {
+        const angle = this.props.angle - (Math.PI / 180) * 90;
+        const nWidth = node.width;
+        const nHeight = node.height;
+        const line = (Math.abs(nWidth * Math.sin(angle)) +
+            Math.abs(nHeight * Math.cos(angle))) *
+            0.5;
+        this.computed = {
+            x0: line * Math.cos(angle) + nWidth * 0.5,
+            y0: line * Math.sin(angle) + nHeight * 0.5,
+            x1: line * Math.cos(angle + Math.PI) + nWidth * 0.5,
+            y1: line * Math.sin(angle + Math.PI) + nHeight * 0.5,
+            colors: this.props.colors.map((value) => this.toColorString(value)),
+        };
+    },
+    render(ctx, quad, renderContext) {
+        renderContext();
+        const gradient = ctx.createLinearGradient(quad.tx + this.computed.x0, quad.ty + this.computed.y0, quad.tx + this.computed.x1, quad.ty + this.computed.y1);
+        const colors = this.computed.colors;
+        for (let i = 0; i < colors.length; i++) {
+            gradient.addColorStop(this.props['stops'][i], colors[i]);
+        }
+        ctx.fillStyle = gradient;
+        ctx.fillRect(quad.tx, quad.ty, quad.width, quad.height);
+    },
+};
+//# sourceMappingURL=LinearGradient.js.map

package/dist/src/core/shaders/canvas/LinearGradient.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinearGradient.js","sourceRoot":"","sources":["../../../../../src/core/shaders/canvas/LinearGradient.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAGH,OAAO,EACL,sBAAsB,GAEvB,MAAM,wCAAwC,CAAC;AAUhD,MAAM,CAAC,MAAM,cAAc,GAGvB;IACF,KAAK,EAAE,sBAAsB,CAAC,KAAK;IACnC,MAAM,CAAC,IAAI;QACT,MAAM,KAAK,GAAG,IAAI,CAAC,KAAM,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,EAAE,GAAG,GAAG,CAAC,GAAG,EAAE,CAAC;QACvD,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC;QAC1B,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC;QAC5B,MAAM,IAAI,GACR,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;YACjC,IAAI,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC;YACtC,GAAG,CAAC;QAEN,IAAI,CAAC,QAAQ,GAAG;YACd,EAAE,EAAE,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,MAAM,GAAG,GAAG;YACzC,EAAE,EAAE,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,OAAO,GAAG,GAAG;YAC1C,EAAE,EAAE,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,MAAM,GAAG,GAAG;YACnD,EAAE,EAAE,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,OAAO,GAAG,GAAG;YACpD,MAAM,EAAE,IAAI,CAAC,KAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;SACrE,CAAC;IACJ,CAAC;IACD,MAAM,CAAC,GAAG,EAAE,IAAI,EAAE,aAAa;QAC7B,aAAa,EAAE,CAAC;QAChB,MAAM,QAAQ,GAAG,GAAG,CAAC,oBAAoB,CACvC,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,EAAG,EAC3B,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,EAAG,EAC3B,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,EAAG,EAC3B,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,EAAG,CAC5B,CAAC;QACF,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAO,CAAC;QACrC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACvC,QAAQ,CAAC,YAAY,CAAC,IAAI,CAAC,KAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAE,EAAE,MAAM,CAAC,CAAC,CAAE,CAAC,CAAC;QAC9D,CAAC;QACD,GAAG,CAAC,SAAS,GAAG,QAAQ,CAAC;QACzB,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;IAC1D,CAAC;CACF,CAAC"}

package/dist/src/core/shaders/canvas/RadialGradient.d.ts

@@ -0,0 +1,11 @@
+import type { CanvasShaderType } from '../../renderers/canvas/CanvasShaderNode.js';
+import { type RadialGradientProps } from '../templates/RadialGradientTemplate.js';
+export interface ComputedRadialGradientValues {
+    pivotX: number;
+    pivotY: number;
+    scaleX: number;
+    scaleY: number;
+    size: number;
+    colors: string[];
+}
+export declare const RadialGradient: CanvasShaderType<RadialGradientProps, ComputedRadialGradientValues>;

package/dist/src/core/shaders/canvas/RadialGradient.js

@@ -0,0 +1,68 @@
+/*
+ * 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.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { RadialGradientTemplate, } from '../templates/RadialGradientTemplate.js';
+export const RadialGradient = {
+    props: RadialGradientTemplate.props,
+    update(node) {
+        let scaleX = 1;
+        let scaleY = 1;
+        const pWidth = this.props.width;
+        const pHeight = this.props.height;
+        if (pWidth > pHeight) {
+            scaleX = pWidth / pHeight;
+        }
+        else if (pHeight > pWidth) {
+            scaleY = pHeight / pWidth;
+        }
+        this.computed = {
+            pivotX: this.props.pivot[0] * node.width,
+            pivotY: this.props.pivot[1] * node.height,
+            scaleX,
+            scaleY,
+            size: Math.min(pWidth, pHeight) * 0.5,
+            colors: this.props.colors.map((value) => this.toColorString(value)),
+        };
+    },
+    render(ctx, quad, renderContext) {
+        renderContext();
+        const { scaleX, scaleY, pivotX, pivotY } = this.computed;
+        const colors = this.computed.colors;
+        let x = quad.tx + pivotX;
+        let y = quad.ty + pivotY;
+        if (scaleX === scaleY) {
+            const gradient = ctx.createRadialGradient(x, y, 0, x, y, this.computed.size);
+            for (let i = 0; i < colors.length; i++) {
+                gradient.addColorStop(this.props['stops'][i], colors[i]);
+            }
+            ctx.fillStyle = gradient;
+            ctx.fillRect(quad.tx, quad.ty, quad.width, quad.height);
+            return;
+        }
+        ctx.save();
+        ctx.scale(scaleX, scaleY);
+        x = x / scaleX;
+        y = y / scaleY;
+        const gradient = ctx.createRadialGradient(x, y, 0, x, y, this.computed.size);
+        for (let i = 0; i < colors.length; i++) {
+            gradient.addColorStop(this.props['stops'][i], colors[i]);
+        }
+        ctx.fillStyle = gradient;
+        ctx.fillRect(quad.tx / scaleX, quad.ty / scaleY, quad.width / scaleX, quad.height / scaleY);
+        ctx.restore();
+    },
+};
+//# sourceMappingURL=RadialGradient.js.map

package/dist/src/core/shaders/canvas/RadialGradient.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadialGradient.js","sourceRoot":"","sources":["../../../../../src/core/shaders/canvas/RadialGradient.ts"],"names":[],"mappings":"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"}

package/dist/src/core/shaders/canvas/Rounded.d.ts

@@ -0,0 +1,7 @@
+import type { CanvasShaderType } from '../../renderers/canvas/CanvasShaderNode.js';
+import type { Vec4 } from '../../renderers/webgl/internal/ShaderUtils.js';
+import { type RoundedProps } from '../templates/RoundedTemplate.js';
+export interface ComputedRoundedValues {
+    radius: Vec4;
+}
+export declare const Rounded: CanvasShaderType<RoundedProps, ComputedRoundedValues>;

package/dist/src/core/shaders/canvas/Rounded.js

@@ -0,0 +1,33 @@
+/*
+ * 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.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { calcFactoredRadiusArray } from '../../lib/utils.js';
+import { RoundedTemplate, } from '../templates/RoundedTemplate.js';
+import { roundRect } from './utils/render.js';
+export const Rounded = {
+    props: RoundedTemplate.props,
+    saveAndRestore: true,
+    update(node) {
+        this.computed.radius = calcFactoredRadiusArray(this.props.radius, node.width, node.height);
+    },
+    render(ctx, quad, renderContext) {
+        const path = new Path2D();
+        roundRect(path, quad.tx, quad.ty, quad.width, quad.height, this.computed.radius);
+        ctx.clip(path);
+        renderContext();
+    },
+};
+//# sourceMappingURL=Rounded.js.map

package/dist/src/core/shaders/canvas/Rounded.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Rounded.js","sourceRoot":"","sources":["../../../../../src/core/shaders/canvas/Rounded.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAG7D,OAAO,EACL,eAAe,GAEhB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAM9C,MAAM,CAAC,MAAM,OAAO,GAA0D;IAC5E,KAAK,EAAE,eAAe,CAAC,KAAK;IAC5B,cAAc,EAAE,IAAI;IACpB,MAAM,CAAC,IAAI;QACT,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,uBAAuB,CAC5C,IAAI,CAAC,KAAM,CAAC,MAAc,EAC1B,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,MAAM,CACZ,CAAC;IACJ,CAAC;IACD,MAAM,CAAC,GAAG,EAAE,IAAI,EAAE,aAAa;QAC7B,MAAM,IAAI,GAAG,IAAI,MAAM,EAAE,CAAC;QAC1B,SAAS,CACP,IAAI,EACJ,IAAI,CAAC,EAAE,EACP,IAAI,CAAC,EAAE,EACP,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,MAAM,EACX,IAAI,CAAC,QAAQ,CAAC,MAAO,CACtB,CAAC;QACF,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAEf,aAAa,EAAE,CAAC;IAClB,CAAC;CACF,CAAC"}

package/dist/src/core/shaders/canvas/RoundedWithBorder.d.ts

@@ -0,0 +1,7 @@
+import type { CanvasShaderType } from '../../renderers/canvas/CanvasShaderNode.js';
+import { type RoundedWithBorderProps } from '../templates/RoundedWithBorderTemplate.js';
+import type { ComputedBorderValues } from './Border.js';
+import type { ComputedRoundedValues } from './Rounded.js';
+type ComputedValues = ComputedRoundedValues & ComputedBorderValues;
+export declare const RoundedWithBorder: CanvasShaderType<RoundedWithBorderProps, ComputedValues>;
+export {};