@lightningtv/renderer 2.16.1

package/dist/src/core/shaders/webgl/Magnifier.js

@@ -0,0 +1,107 @@
+/*
+ * 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 { validateArrayLength4 } from '../utils.js';
+export const MagnifierTemplate = {
+    props: {
+        x: 0,
+        y: 0,
+        width: 50,
+        height: 50,
+        radius: {
+            default: [0, 0, 0, 0],
+            resolve(value) {
+                if (value !== undefined) {
+                    return validateArrayLength4(value);
+                }
+                return [].concat(this.default);
+            },
+        },
+        magnification: 0.6,
+    },
+};
+export const Magnifier = {
+    props: MagnifierTemplate.props,
+    fragment: `
+    #ifdef GL_FRAGMENT_PRECISION_HIGH
+    precision highp float;
+    #else
+    precision mediump float;
+    #endif
+
+    varying vec2 v_textureCoords; // Renamed from vTextureCoord for consistency
+    varying vec4 v_color;         // Renamed from vColor for consistency
+    uniform sampler2D u_texture;   // Renamed from uSampler for consistency
+    uniform float u_alpha; // Added for consistency, though not used by magnifier effect itself
+
+    uniform vec2 u_size;
+    uniform vec2 u_pos;
+    uniform vec2 u_resolution; // Resolution of the element being magnified
+    uniform float u_radius;
+    uniform float u_magnification;
+
+    float roundBox(vec2 p, vec2 b, float r) {
+        // Adjusted to prevent issues with r=0 if b is also small.
+        // The 0.1 in original might have been to prevent division by zero or sqrt of negative.
+        // Using max(abs(p)-b+r, 0.0) is more standard for SDFs.
+        // Smoothstep is used for anti-aliasing the edge.
+        float d = length(max(abs(p)-b+r, 0.0))-r;
+        return smoothstep(1.0, 0.0, d); // 1 inside, 0 outside, smoothed edge
+    }
+
+    // Check if a point is within the 0-1 texture coordinate range
+    float inside(vec2 v) {
+      vec2 s = step(vec2(0.0, 0.0), v) - step(vec2(1.0, 1.0), v);
+      return s.x * s.y; // 1 if inside, 0 if outside
+    }
+
+    void main(void) {
+      vec4 originalColor = texture2D(u_texture, v_textureCoords);
+      // If w or h is zero, magnification effectively does nothing or is ill-defined.
+      // In this case, just return the original color.
+      if (u_w == 0.0 || u_h == 0.0) {
+        gl_FragColor = originalColor * v_color * u_alpha;
+        return;
+      }
+
+      // Position relative to the center of the magnification area
+      vec2 pos = v_textureCoords.xy * u_resolution - vec2(u_x, u_y) - vec2(u_w, u_h) / 2.0;
+      vec2 size = vec2(u_w, u_h) / 2.0;
+      float b = roundBox(pos, size, u_radius); // Mask for the magnification area
+
+      // Calculate texture coordinates for the magnified content
+      // Center the magnification effect around u_x, u_y
+      vec2 centerOffset = vec2(u_x, u_y) + vec2(u_w, u_h) / 2.0;
+      vec2 magnifiedTexCoords = (v_textureCoords * u_resolution - centerOffset) / u_magnification + centerOffset;
+      magnifiedTexCoords /= u_resolution;
+
+      vec4 magnifiedColor = texture2D(u_texture, magnifiedTexCoords);
+
+      // Mix original and magnified color based on the mask and whether magnified coords are valid
+      gl_FragColor = mix(originalColor, magnifiedColor * inside(magnifiedTexCoords), b) * v_color * u_alpha;
+    }
+  `,
+    update() {
+        const props = this.props;
+        this.uniform2f('u_pos', props.x, props.y);
+        //precalculate to halfSize once instead of for every pixel
+        this.uniform2f('u_size', props.width * 0.5, props.height * 0.5);
+        this.uniform1f('u_magnification', props.magnification || 0.6);
+        this.uniform4fa('u_radius', calcFactoredRadiusArray(props.radius, props.width, props.height));
+    },
+};
+//# sourceMappingURL=Magnifier.js.map

package/dist/src/core/shaders/webgl/Magnifier.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Magnifier.js","sourceRoot":"","sources":["../../../../../src/core/shaders/webgl/Magnifier.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAG7D,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AA+CnD,MAAM,CAAC,MAAM,iBAAiB,GAAmC;IAC/D,KAAK,EAAE;QACL,CAAC,EAAE,CAAC;QACJ,CAAC,EAAE,CAAC;QACJ,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;QACV,MAAM,EAAE;YACN,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;YACrB,OAAO,CAAC,KAAK;gBACX,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;oBACxB,OAAO,oBAAoB,CAAC,KAAK,CAAC,CAAC;gBACrC,CAAC;gBACD,OAAQ,EAAe,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YAC/C,CAAC;SACF;QACD,aAAa,EAAE,GAAG;KACnB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAoC;IACxD,KAAK,EAAE,iBAAiB,CAAC,KAAK;IAC9B,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DT;IACD,MAAM;QACF,MAAM,KAAK,GAAG,IAAI,CAAC,KAAM,CAAC;QAC1B,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;QAC1C,0DAA0D;QAC1D,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,KAAK,CAAC,KAAK,GAAG,GAAG,EAAE,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC,CAAC;QAChE,IAAI,CAAC,SAAS,CAAC,iBAAiB,EAAE,KAAK,CAAC,aAAa,IAAI,GAAG,CAAC,CAAC;QAE9D,IAAI,CAAC,UAAU,CACb,UAAU,EACV,uBAAuB,CAAC,KAAK,CAAC,MAAc,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CACzE,CAAC;IACJ,CAAC;CACJ,CAAC"}

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

@@ -0,0 +1,3 @@
+import { type RadialGradientProps } from '../templates/RadialGradientTemplate.js';
+import type { WebGlShaderType } from '../../renderers/webgl/WebGlShaderNode.js';
+export declare const RadialGradient: WebGlShaderType<RadialGradientProps>;

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

@@ -0,0 +1,74 @@
+/*
+ * 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 { getNormalizedRgbaComponents } from '../../lib/utils.js';
+import { RadialGradientTemplate, } from '../templates/RadialGradientTemplate.js';
+import { genGradientColors } from '../../renderers/webgl/internal/ShaderUtils.js';
+export const RadialGradient = {
+    props: RadialGradientTemplate.props,
+    update(node) {
+        const props = this.props;
+        this.uniform2f('u_projection', props.pivot[0] * node.width, props.pivot[1] * node.height);
+        this.uniform2f('u_size', props.width * 0.5, props.height * 0.5);
+        this.uniform1fv('u_stops', new Float32Array(props.stops));
+        const colors = [];
+        for (let i = 0; i < props.colors.length; i++) {
+            const norm = getNormalizedRgbaComponents(props.colors[i]);
+            colors.push(norm[0], norm[1], norm[2], norm[3]);
+        }
+        this.uniform4fv('u_colors', new Float32Array(colors));
+    },
+    getCacheMarkers(props) {
+        return `colors:${props.colors.length}`;
+    },
+    fragment(renderer, props) {
+        return `
+    # ifdef GL_FRAGMENT_PRECISION_HIGH
+    precision highp float;
+    # else
+    precision mediump float;
+    # endif
+
+    #define PI 3.14159265359
+
+    uniform float u_alpha;
+    uniform vec2 u_dimensions;
+
+    uniform sampler2D u_texture;
+
+    uniform vec2 u_projection;
+    uniform vec2 u_size;
+    uniform float u_stops[${props.stops.length}];
+    uniform vec4 u_colors[${props.colors.length}];
+
+    varying vec4 v_color;
+    varying vec2 v_textureCoords;
+
+    vec2 calcPoint(float d, float angle) {
+      return d * vec2(cos(angle), sin(angle)) + (u_dimensions * 0.5);
+    }
+
+    void main() {
+      vec4 color = texture2D(u_texture, v_textureCoords) * v_color;
+      vec2 point = v_textureCoords.xy * u_dimensions;
+      float dist = length((point - u_projection) / u_size);
+      ${genGradientColors(props.stops.length)}
+      gl_FragColor = mix(color, colorOut, clamp(colorOut.a, 0.0, 1.0));
+    }
+  `;
+    },
+};
+//# sourceMappingURL=RadialGradient.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadialGradient.js","sourceRoot":"","sources":["../../../../../src/core/shaders/webgl/RadialGradient.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAGH,OAAO,EAAE,2BAA2B,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EACL,sBAAsB,GAEvB,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AAIlF,MAAM,CAAC,MAAM,cAAc,GAAyC;IAClE,KAAK,EAAE,sBAAsB,CAAC,KAAK;IACnC,MAAM,CAAC,IAAc;QACnB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAM,CAAC;QAC1B,IAAI,CAAC,SAAS,CACZ,cAAc,EACd,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,EAC3B,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,MAAM,CAC7B,CAAC;QACF,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,KAAK,CAAC,KAAK,GAAG,GAAG,EAAE,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC,CAAC;QAChE,IAAI,CAAC,UAAU,CAAC,SAAS,EAAE,IAAI,YAAY,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;QAC1D,MAAM,MAAM,GAAa,EAAE,CAAC;QAC5B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YAC7C,MAAM,IAAI,GAAG,2BAA2B,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAE,CAAC,CAAC;YAC3D,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;QAClD,CAAC;QACD,IAAI,CAAC,UAAU,CAAC,UAAU,EAAE,IAAI,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC;IACxD,CAAC;IACD,eAAe,CAAC,KAA0B;QACxC,OAAO,UAAU,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;IACzC,CAAC;IACD,QAAQ,CAAC,QAAuB,EAAE,KAA0B;QAC1D,OAAO;;;;;;;;;;;;;;;;4BAgBiB,KAAK,CAAC,KAAK,CAAC,MAAM;4BAClB,KAAK,CAAC,MAAM,CAAC,MAAM;;;;;;;;;;;;;QAavC,iBAAiB,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC;;;GAG1C,CAAC;IACF,CAAC;CACF,CAAC"}

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

@@ -0,0 +1,7 @@
+import type { WebGlShaderType } from '../../renderers/webgl/WebGlShaderNode.js';
+import { type RoundedProps } from '../templates/RoundedTemplate.js';
+/**
+ * Similar to the {@link DefaultShader} but cuts out 4 rounded rectangle corners
+ * as defined by the specified corner {@link RoundedProps.radius}
+ */
+export declare const Rounded: WebGlShaderType<RoundedProps>;

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

@@ -0,0 +1,86 @@
+import { calcFactoredRadiusArray } from '../../lib/utils.js';
+import { RoundedTemplate, } from '../templates/RoundedTemplate.js';
+/**
+ * Similar to the {@link DefaultShader} but cuts out 4 rounded rectangle corners
+ * as defined by the specified corner {@link RoundedProps.radius}
+ */
+export const Rounded = {
+    props: RoundedTemplate.props,
+    update(node) {
+        this.uniform4fa('u_radius', calcFactoredRadiusArray(this.props.radius, node.width, node.height));
+    },
+    vertex: `
+  # ifdef GL_FRAGMENT_PRECISION_HIGH
+  precision highp float;
+  # else
+  precision mediump float;
+  # endif
+
+  attribute vec2 a_position;
+  attribute vec2 a_textureCoords;
+  attribute vec4 a_color;
+  attribute vec2 a_nodeCoords;
+
+  uniform vec2 u_resolution;
+  uniform float u_pixelRatio;
+  uniform vec2 u_dimensions;
+
+  varying vec4 v_color;
+  varying vec2 v_textureCoords;
+  varying vec2 v_nodeCoords;
+
+  void main() {
+    vec2 normalized = a_position * u_pixelRatio;
+    vec2 screenSpace = vec2(2.0 / u_resolution.x, -2.0 / u_resolution.y);
+
+    v_color = a_color;
+    v_nodeCoords = a_nodeCoords;
+    v_textureCoords = a_textureCoords;
+
+    gl_Position = vec4(normalized.x * screenSpace.x - 1.0, normalized.y * -abs(screenSpace.y) + 1.0, 0.0, 1.0);
+    gl_Position.y = -sign(screenSpace.y) * gl_Position.y;
+  }
+`,
+    fragment: `
+    # ifdef GL_FRAGMENT_PRECISION_HIGH
+    precision highp float;
+    # else
+    precision mediump float;
+    # endif
+
+    //renderer applies these uniforms automatically
+    uniform vec2 u_resolution;
+    uniform vec2 u_dimensions;
+    uniform float u_alpha;
+    uniform sampler2D u_texture;
+
+    //custom uniforms
+    uniform vec4 u_radius;
+
+    varying vec4 v_color;
+    varying vec2 v_textureCoords;
+    varying vec2 v_nodeCoords;
+
+    float roundedBox(vec2 p, vec2 s, vec4 r) {
+      r.xy = (p.x > 0.0) ? r.yz : r.xw;
+      r.x = (p.y > 0.0) ? r.y : r.x;
+      vec2 q = abs(p) - s + r.x;
+      return (min(max(q.x, q.y), 0.0) + length(max(q, 0.0))) - r.x;
+    }
+
+    void main() {
+      vec4 color = texture2D(u_texture, v_textureCoords) * v_color;
+      vec2 halfDimensions = (u_dimensions * 0.5);
+
+      vec2 boxUv = v_nodeCoords.xy * u_dimensions - halfDimensions;
+      float boxDist = roundedBox(boxUv, halfDimensions, u_radius);
+
+      float roundedAlpha = 1.0 - smoothstep(0.0, 1.0, boxDist);
+
+      vec4 resColor = vec4(0.0);
+      resColor = mix(resColor, color, roundedAlpha);
+      gl_FragColor = resColor * u_alpha;
+    }
+  `,
+};
+//# sourceMappingURL=Rounded.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Rounded.js","sourceRoot":"","sources":["../../../../../src/core/shaders/webgl/Rounded.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,EACL,eAAe,GAEhB,MAAM,iCAAiC,CAAC;AAIzC;;;GAGG;AACH,MAAM,CAAC,MAAM,OAAO,GAAkC;IACpD,KAAK,EAAE,eAAe,CAAC,KAAK;IAC5B,MAAM,CAAC,IAAc;QACnB,IAAI,CAAC,UAAU,CACb,UAAU,EACV,uBAAuB,CACrB,IAAI,CAAC,KAAM,CAAC,MAAc,EAC1B,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,MAAM,CACZ,CACF,CAAC;IACJ,CAAC;IACD,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BT;IACC,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCT;CACF,CAAC"}

package/dist/src/core/shaders/webgl/RoundedWithBorder copy.d.ts

@@ -0,0 +1,3 @@
+import type { WebGlShaderType } from '../../renderers/webgl/WebGlShaderNode.js';
+import { type RoundedWithBorderProps } from '../templates/RoundedWithBorderTemplate.js';
+export declare const RoundedWithBorder: WebGlShaderType<RoundedWithBorderProps>;

package/dist/src/core/shaders/webgl/RoundedWithBorder copy.js

@@ -0,0 +1,218 @@
+/*
+ * 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 { RoundedWithBorderTemplate, } from '../templates/RoundedWithBorderTemplate.js';
+export const RoundedWithBorder = {
+    props: RoundedWithBorderTemplate.props,
+    update(node) {
+        const props = this.props;
+        const borderWidth = props['border-width'];
+        const borderGap = props['border-gap'] || 0;
+        this.uniformRGBA('u_borderColor', props['border-color']);
+        this.uniform4fa('u_borderWidth', borderWidth);
+        this.uniform1f('u_borderGap', borderGap);
+        this.uniformRGBA('u_borderGapColor', props['border-gap-color']);
+        const origWidth = node.width;
+        const origHeight = node.height;
+        this.uniform2f('u_dimensions_orig', origWidth, origHeight);
+        const expandedWidth = origWidth + borderWidth[3] + borderWidth[1] + borderGap * 2; // original + left + right + 2*gap
+        const expandedHeight = origHeight + borderWidth[0] + borderWidth[2] + borderGap * 2; // original + top + bottom + 2*gap
+        // u_dimensions for the shader's SDF functions should be the expanded size
+        this.uniform2f('u_dimensions', expandedWidth, expandedHeight);
+        this.uniform4fa('u_radius', calcFactoredRadiusArray(this.props.radius, expandedWidth, expandedHeight));
+    },
+    vertex: `
+    # ifdef GL_FRAGMENT_PRECISION_HIGH
+    precision highp float;
+    # else
+    precision mediump float;
+    # endif
+
+    attribute vec2 a_position;
+    attribute vec2 a_textureCoords;
+    attribute vec4 a_color;
+    attribute vec2 a_nodeCoords;
+
+    uniform vec2 u_resolution;
+    uniform float u_pixelRatio;
+    uniform vec2 u_dimensions;
+    uniform vec2 u_dimensions_orig;
+
+    uniform vec4 u_radius;
+    uniform vec4 u_borderWidth;
+    uniform float u_borderGap;
+
+    varying vec4 v_color;
+    varying vec2 v_textureCoords;
+    varying vec2 v_nodeCoords;
+    varying vec4 v_borderEndRadius;
+    varying vec2 v_borderEndSize;
+
+    varying vec4 v_innerRadius;
+    varying vec2 v_innerSize;
+    varying vec2 v_halfDimensions;
+    varying float v_borderZero;
+
+    void main() {
+      vec2 screenSpace = vec2(2.0 / u_resolution.x, -2.0 / u_resolution.y);
+
+      v_color = a_color;
+      v_nodeCoords = a_nodeCoords;
+
+      float bTop = u_borderWidth.x;
+      float bRight = u_borderWidth.y;
+      float bBottom = u_borderWidth.z;
+      float bLeft = u_borderWidth.w;
+      float gap = u_borderGap;
+
+      // Calculate the offset to expand the quad for border and gap
+      vec2 expansionOffset = vec2(0.0);
+      if (a_nodeCoords.x == 0.0) { // Left edge vertex
+          expansionOffset.x = -(bLeft + gap);
+      } else { // Right edge vertex (a_nodeCoords.x == 1.0)
+          expansionOffset.x = (bRight + gap);
+      }
+      if (a_nodeCoords.y == 0.0) { // Top edge vertex
+          expansionOffset.y = -(bTop + gap);
+      } else { // Bottom edge vertex (a_nodeCoords.y == 1.0)
+          expansionOffset.y = (bBottom + gap);
+      }
+
+      vec2 expanded_a_position = a_position + expansionOffset;
+      vec2 normalized = expanded_a_position * u_pixelRatio;
+
+      // u_dimensions is expanded, u_dimensions_orig is original content size
+      v_textureCoords.x = (a_textureCoords.x * u_dimensions.x - (bLeft + gap)) / u_dimensions_orig.x;
+      v_textureCoords.y = (a_textureCoords.y * u_dimensions.y - (bTop + gap)) / u_dimensions_orig.y;
+
+      v_borderZero = u_borderWidth == vec4(0.0) ? 1.0 : 0.0;
+      // If there's no border, there's no gap from the border logic perspective
+      // The Rounded shader itself would handle radius if borderZero is true.
+      // However, RoundedWithBorder implies border capabilities.
+      // If border width is 0 but gap is > 0, it should effectively be a rounded rect with padding.
+      // For now, if border is zero, gap is also considered zero for this specific border logic.
+      // A separate "PaddingShader" or "InsetShader" might be more appropriate for gap without border.
+
+      v_halfDimensions = u_dimensions * 0.5; // u_dimensions is now expanded_dimensions
+      if(v_borderZero == 0.0) {
+        // Calculate radius and size for the inner edge of the border (where the gap begins)
+        v_borderEndRadius = vec4(
+          max(0.0, u_radius.x - max(bTop, bLeft) - 0.5),
+          max(0.0, u_radius.y - max(bTop, bRight) - 0.5),
+          max(0.0, u_radius.z - max(bBottom, bRight) - 0.5),
+          max(0.0, u_radius.w - max(bBottom, bLeft) - 0.5)
+        );
+        v_borderEndSize = vec2(
+            (u_dimensions.x - (bLeft + bRight) - 1.0),
+            (u_dimensions.y - (bTop + bBottom) - 2.0)
+        ) * 0.5;
+
+        // Calculate radius and size for the content area (after the gap)
+        v_innerRadius = vec4(
+          max(0.0, u_radius.x - max(bTop, bLeft) - u_borderGap - 0.5),
+          max(0.0, u_radius.y - max(bTop, bRight) - u_borderGap - 0.5),
+          max(0.0, u_radius.z - max(bBottom, bRight) - u_borderGap - 0.5),
+          max(0.0, u_radius.w - max(bBottom, bLeft) - u_borderGap - 0.5)
+        );
+        v_innerSize = vec2(
+            (u_dimensions.x - (bLeft + bRight) - (u_borderGap * 2.0) - 1.0),
+            (u_dimensions.y - (bTop + bBottom) - (u_borderGap * 2.0) - 2.0)
+        ) * 0.5;
+      }
+
+      gl_Position = vec4(normalized.x * screenSpace.x - 1.0, normalized.y * -abs(screenSpace.y) + 1.0, 0.0, 1.0);
+      gl_Position.y = -sign(screenSpace.y) * gl_Position.y;
+    }
+  `,
+    fragment: `
+    # ifdef GL_FRAGMENT_PRECISION_HIGH
+    precision highp float;
+    # else
+    precision mediump float;
+    # endif
+
+    uniform vec2 u_resolution;
+    uniform float u_pixelRatio;
+    uniform float u_alpha;
+    uniform vec2 u_dimensions;
+    uniform sampler2D u_texture;
+
+    uniform vec4 u_radius;
+
+    uniform vec4 u_borderWidth;
+    uniform vec4 u_borderColor;
+    uniform vec4 u_borderGapColor;
+
+    varying vec4 v_borderEndRadius;
+    varying vec2 v_borderEndSize;
+
+    varying vec4 v_color;
+    varying vec2 v_textureCoords;
+    varying vec2 v_nodeCoords;
+
+    varying vec2 v_halfDimensions;
+    varying vec4 v_innerRadius;
+    varying vec2 v_innerSize;
+    varying float v_borderZero;
+
+    float roundedBox(vec2 p, vec2 s, vec4 r) {
+      r.xy = (p.x > 0.0) ? r.yz : r.xw;
+      r.x = (p.y > 0.0) ? r.y : r.x;
+      vec2 q = abs(p) - s + r.x;
+      return (min(max(q.x, q.y), 0.0) + length(max(q, 0.0))) - r.x;
+    }
+
+    void main() {
+      vec4 contentTexColor = texture2D(u_texture, v_textureCoords) * v_color;
+
+      vec2 boxUv = v_nodeCoords.xy * u_dimensions - v_halfDimensions;
+      float outerShapeDist = roundedBox(boxUv, v_halfDimensions, u_radius);
+      float outerShapeAlpha = 1.0 - smoothstep(0.0, 1.0, outerShapeDist); // 1 inside, 0 outside
+
+      if(v_borderZero == 1.0) { // No border, effectively no gap from border logic
+        gl_FragColor = mix(vec4(0.0), contentTexColor, outerShapeAlpha) * u_alpha;
+        return;
+      }
+
+      // Adjust boxUv for non-uniform borders (consistent with original shader)
+      // This adjusted UV is used for calculating distances to border-end and content shapes
+      vec2 adjustedBoxUv = boxUv;
+      adjustedBoxUv.x += u_borderWidth.y > u_borderWidth.w ? (u_borderWidth.y - u_borderWidth.w) * 0.5 : -(u_borderWidth.w - u_borderWidth.y) * 0.5;
+      adjustedBoxUv.y += u_borderWidth.z > u_borderWidth.x ? ((u_borderWidth.z - u_borderWidth.x) * 0.5 + 0.5) : -(u_borderWidth.x - u_borderWidth.z) * 0.5;
+
+      // Distance to the inner edge of the border (where the gap begins)
+      float borderEndDist = roundedBox(adjustedBoxUv, v_borderEndSize, v_borderEndRadius);
+      float borderEndAlpha = 1.0 - smoothstep(0.0, 1.0, borderEndDist); // 1 if inside gap or content, 0 if in border or outside
+
+      // Distance to the content area (after the gap)
+      float contentDist = roundedBox(adjustedBoxUv, v_innerSize, v_innerRadius);
+      float contentAlpha = 1.0 - smoothstep(0.0, 1.0, contentDist); // 1 if inside content, 0 if in gap, border or outside
+
+      vec4 finalColor;
+      if (contentAlpha > 0.0) { // Pixel is inside the content area
+        finalColor = contentTexColor;
+      } else if (borderEndAlpha > 0.0) { // Pixel is inside the gap area
+        finalColor = u_borderGapColor; // Use the specified gap color
+      } else { // Pixel is inside the border area
+        finalColor = u_borderColor;
+      }
+
+      gl_FragColor = mix(vec4(0.0), finalColor, outerShapeAlpha) * u_alpha;
+    }
+  `,
+};
+//# sourceMappingURL=RoundedWithBorder%20copy.js.map

package/dist/src/core/shaders/webgl/RoundedWithBorder copy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RoundedWithBorder copy.js","sourceRoot":"","sources":["../../../../../src/core/shaders/webgl/RoundedWithBorder copy.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAGH,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAG7D,OAAO,EACL,yBAAyB,GAE1B,MAAM,2CAA2C,CAAC;AAEnD,MAAM,CAAC,MAAM,iBAAiB,GAA4C;IACxE,KAAK,EAAE,yBAAyB,CAAC,KAAK;IACtC,MAAM,CAAC,IAAc;QACnB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAM,CAAC;QAC1B,MAAM,WAAW,GAAG,KAAK,CAAC,cAAc,CAAS,CAAC;QAClD,MAAM,SAAS,GAAG,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;QAE3C,IAAI,CAAC,WAAW,CAAC,eAAe,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC;QACzD,IAAI,CAAC,UAAU,CAAC,eAAe,EAAE,WAAW,CAAC,CAAC;QAC9C,IAAI,CAAC,SAAS,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC;QACzC,IAAI,CAAC,WAAW,CAAC,kBAAkB,EAAE,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC;QAEhE,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC;QAC7B,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC;QAC/B,IAAI,CAAC,SAAS,CAAC,mBAAmB,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC;QAE3D,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,SAAS,GAAG,CAAC,CAAC,CAAC,kCAAkC;QACrH,MAAM,cAAc,GAAG,UAAU,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,SAAS,GAAG,CAAC,CAAC,CAAC,kCAAkC;QAEvH,0EAA0E;QAC1E,IAAI,CAAC,SAAS,CAAC,cAAc,EAAE,aAAa,EAAE,cAAc,CAAC,CAAC;QAE9D,IAAI,CAAC,UAAU,CACb,UAAU,EACV,uBAAuB,CACrB,IAAI,CAAC,KAAM,CAAC,MAAc,EAC1B,aAAa,EACb,cAAc,CACf,CACF,CAAC;IACJ,CAAC;IACD,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsGP;IACD,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2ET;CACF,CAAC"}

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

@@ -0,0 +1,3 @@
+import type { WebGlShaderType } from '../../renderers/webgl/WebGlShaderNode.js';
+import { type RoundedWithBorderProps } from '../templates/RoundedWithBorderTemplate.js';
+export declare const RoundedWithBorder: WebGlShaderType<RoundedWithBorderProps>;

package/dist/src/core/shaders/webgl/RoundedWithBorder.js

@@ -0,0 +1,140 @@
+/*
+ * 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 { RoundedWithBorderTemplate, } from '../templates/RoundedWithBorderTemplate.js';
+export const RoundedWithBorder = {
+    props: RoundedWithBorderTemplate.props,
+    update(node) {
+        this.uniformRGBA('u_borderColor', this.props['border-color']);
+        this.uniform4fa('u_borderWidth', this.props['border-width']);
+        this.uniform4fa('u_radius', calcFactoredRadiusArray(this.props.radius, node.width, node.height));
+    },
+    vertex: `
+    # ifdef GL_FRAGMENT_PRECISION_HIGH
+    precision highp float;
+    # else
+    precision mediump float;
+    # endif
+
+    attribute vec2 a_position;
+    attribute vec2 a_textureCoords;
+    attribute vec4 a_color;
+    attribute vec2 a_nodeCoords;
+
+    uniform vec2 u_resolution;
+    uniform float u_pixelRatio;
+    uniform vec2 u_dimensions;
+
+    uniform vec4 u_radius;
+    uniform vec4 u_borderWidth;
+
+    varying vec4 v_color;
+    varying vec2 v_textureCoords;
+    varying vec2 v_nodeCoords;
+
+    varying vec4 v_innerRadius;
+    varying vec2 v_innerSize;
+    varying vec2 v_halfDimensions;
+    varying float v_borderZero;
+
+    void main() {
+      vec2 normalized = a_position * u_pixelRatio;
+      vec2 screenSpace = vec2(2.0 / u_resolution.x, -2.0 / u_resolution.y);
+
+      v_color = a_color;
+      v_nodeCoords = a_nodeCoords;
+      v_textureCoords = a_textureCoords;
+
+      v_halfDimensions = u_dimensions * 0.5;
+
+      v_borderZero = u_borderWidth == vec4(0.0) ? 1.0 : 0.0;
+
+      if(v_borderZero == 0.0) {
+        v_innerRadius = vec4(
+          max(0.0, u_radius.x - max(u_borderWidth.x, u_borderWidth.w) - 0.5),
+          max(0.0, u_radius.y - max(u_borderWidth.x, u_borderWidth.y) - 0.5),
+          max(0.0, u_radius.z - max(u_borderWidth.z, u_borderWidth.y) - 0.5),
+          max(0.0, u_radius.w - max(u_borderWidth.z, u_borderWidth.w) - 0.5)
+        );
+
+        v_innerSize = (vec2(u_dimensions.x - (u_borderWidth[3] + u_borderWidth[1]) + 1.0, u_dimensions.y - (u_borderWidth[0] + u_borderWidth[2])) - 2.0) * 0.5;
+      }
+
+      gl_Position = vec4(normalized.x * screenSpace.x - 1.0, normalized.y * -abs(screenSpace.y) + 1.0, 0.0, 1.0);
+      gl_Position.y = -sign(screenSpace.y) * gl_Position.y;
+    }
+  `,
+    fragment: `
+    # ifdef GL_FRAGMENT_PRECISION_HIGH
+    precision highp float;
+    # else
+    precision mediump float;
+    # endif
+
+    uniform vec2 u_resolution;
+    uniform float u_pixelRatio;
+    uniform float u_alpha;
+    uniform vec2 u_dimensions;
+    uniform sampler2D u_texture;
+
+    uniform vec4 u_radius;
+
+    uniform vec4 u_borderWidth;
+    uniform vec4 u_borderColor;
+
+    varying vec4 v_color;
+    varying vec2 v_textureCoords;
+    varying vec2 v_nodeCoords;
+
+    varying vec2 v_halfDimensions;
+    varying vec4 v_innerRadius;
+    varying vec2 v_innerSize;
+    varying float v_borderZero;
+
+    float roundedBox(vec2 p, vec2 s, vec4 r) {
+      r.xy = (p.x > 0.0) ? r.yz : r.xw;
+      r.x = (p.y > 0.0) ? r.y : r.x;
+      vec2 q = abs(p) - s + r.x;
+      return (min(max(q.x, q.y), 0.0) + length(max(q, 0.0))) - r.x;
+    }
+
+    void main() {
+      vec4 color = texture2D(u_texture, v_textureCoords) * v_color;
+
+      vec2 boxUv = v_nodeCoords.xy * u_dimensions - v_halfDimensions;
+      float outerDist = roundedBox(boxUv, v_halfDimensions, u_radius);
+
+      float outerAlpha = 1.0 - smoothstep(0.0, 1.0, outerDist);
+
+      if(v_borderZero == 1.0) {
+        gl_FragColor = mix(vec4(0.0), color, outerAlpha) * u_alpha;
+        return;
+      }
+
+      boxUv.x += u_borderWidth.y > u_borderWidth.w ? (u_borderWidth.y - u_borderWidth.w) * 0.5 : -(u_borderWidth.w - u_borderWidth.y) * 0.5;
+      boxUv.y += u_borderWidth.z > u_borderWidth.x ? ((u_borderWidth.z - u_borderWidth.x) * 0.5 + 0.5) : -(u_borderWidth.x - u_borderWidth.z) * 0.5;
+
+      float innerDist = roundedBox(boxUv, v_innerSize, v_innerRadius);
+      float innerAlpha = 1.0 - smoothstep(0.0, 1.0, innerDist);
+
+      vec4 resColor = mix(u_borderColor, color, innerAlpha);
+      resColor = mix(vec4(0.0), resColor, outerAlpha);
+      gl_FragColor = resColor * u_alpha;
+    }
+  `,
+};
+//# sourceMappingURL=RoundedWithBorder.js.map

package/dist/src/core/shaders/webgl/RoundedWithBorder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RoundedWithBorder.js","sourceRoot":"","sources":["../../../../../src/core/shaders/webgl/RoundedWithBorder.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAGH,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAG7D,OAAO,EACL,yBAAyB,GAE1B,MAAM,2CAA2C,CAAC;AAEnD,MAAM,CAAC,MAAM,iBAAiB,GAA4C;IACxE,KAAK,EAAE,yBAAyB,CAAC,KAAK;IACtC,MAAM,CAAC,IAAc;QACnB,IAAI,CAAC,WAAW,CAAC,eAAe,EAAE,IAAI,CAAC,KAAM,CAAC,cAAc,CAAC,CAAC,CAAC;QAC/D,IAAI,CAAC,UAAU,CAAC,eAAe,EAAE,IAAI,CAAC,KAAM,CAAC,cAAc,CAAS,CAAC,CAAC;QAEtE,IAAI,CAAC,UAAU,CACb,UAAU,EACV,uBAAuB,CACrB,IAAI,CAAC,KAAM,CAAC,MAAc,EAC1B,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,MAAM,CACZ,CACF,CAAC;IACJ,CAAC;IACD,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDP;IACD,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDT;CACF,CAAC"}