@lightningjs/renderer 3.0.0-beta9 → 3.0.0

package/dist/src/core/renderers/webgl/shaders/SdfShader.js

@@ -0,0 +1,148 @@
+/*
+ * 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.
+ */
+import { getNormalizedRgbaComponents } from '../../../lib/utils.js';
+import { WebGlCoreShader } from '../WebGlCoreShader.js';
+const IDENTITY_MATRIX_3x3 = new Float32Array([1, 0, 0, 0, 1, 0, 0, 0, 1]);
+/**
+ * SdfShader supports multi-channel and single-channel signed distance field textures.
+ *
+ * @remarks
+ * This Shader is used by the {@link SdfTextRenderer}. Do not use thie Shader
+ * directly. Instead create a Text Node and assign a SDF font family to it.
+ *
+ * @internalRemarks
+ * The only thing this shader does to support multi-channel SDFs is to
+ * add a median function to the fragment shader. If this one function call
+ * ends up being a performance bottleneck we can always look at ways to
+ * remove it.
+ */
+export class SdfShader extends WebGlCoreShader {
+    constructor(renderer) {
+        super({
+            renderer,
+        });
+    }
+    static z$__type__Props;
+    bindTextures(textures) {
+        const { glw } = this;
+        glw.activeTexture(0);
+        glw.bindTexture(textures[0].ctxTexture);
+    }
+    bindProps(props) {
+        const resolvedProps = SdfShader.resolveDefaults(props);
+        for (const key in resolvedProps) {
+            if (key === 'transform') {
+                this.glw.uniformMatrix3fv(this.getUniformLocation('u_transform'), resolvedProps[key]);
+            }
+            else if (key === 'scrollY') {
+                this.glw.uniform1f(this.getUniformLocation('u_scrollY'), resolvedProps[key]);
+            }
+            else if (key === 'color') {
+                const components = getNormalizedRgbaComponents(resolvedProps.color);
+                this.glw.uniform4fv(this.getUniformLocation('u_color'), components);
+            }
+            else if (key === 'size') {
+                this.glw.uniform1f(this.getUniformLocation('u_size'), resolvedProps[key]);
+            }
+            else if (key === 'distanceRange') {
+                this.glw.uniform1f(this.getUniformLocation('u_distanceRange'), resolvedProps[key]);
+            }
+            else if (key === 'debug') {
+                this.glw.uniform1i(this.getUniformLocation('u_debug'), resolvedProps[key] ? 1 : 0);
+            }
+        }
+    }
+    static resolveDefaults(props = {}) {
+        return {
+            transform: props.transform ?? IDENTITY_MATRIX_3x3,
+            scrollY: props.scrollY ?? 0,
+            color: props.color ?? 0xffffffff,
+            size: props.size ?? 16,
+            distanceRange: props.distanceRange ?? 1.0,
+            debug: props.debug ?? false,
+        };
+    }
+    static shaderSources = {
+        vertex: `
+      # ifdef GL_FRAGMENT_PRECISION_HIGH
+      precision highp float;
+      # else
+      precision mediump float;
+      # endif
+      // an attribute is an input (in) to a vertex shader.
+      // It will receive data from a buffer
+      attribute vec2 a_position;
+      attribute vec2 a_textureCoordinate;
+
+      uniform vec2 u_resolution;
+      uniform mat3 u_transform;
+      uniform float u_scrollY;
+      uniform float u_pixelRatio;
+      uniform float u_size;
+
+      varying vec2 v_texcoord;
+
+      void main() {
+        vec2 scrolledPosition = a_position * u_size - vec2(0, u_scrollY);
+        vec2 transformedPosition = (u_transform * vec3(scrolledPosition, 1)).xy;
+
+        // Calculate screen space with pixel ratio
+        vec2 screenSpace = (transformedPosition * u_pixelRatio / u_resolution * 2.0 - 1.0) * vec2(1, -1);
+
+        gl_Position = vec4(screenSpace, 0.0, 1.0);
+        v_texcoord = a_textureCoordinate;
+
+      }
+    `,
+        fragment: `
+      # ifdef GL_FRAGMENT_PRECISION_HIGH
+      precision highp float;
+      # else
+      precision mediump float;
+      # endif
+      uniform vec4 u_color;
+      uniform sampler2D u_texture;
+      uniform float u_distanceRange;
+      uniform float u_pixelRatio;
+      uniform int u_debug;
+
+      varying vec2 v_texcoord;
+
+      float median(float r, float g, float b) {
+          return max(min(r, g), min(max(r, g), b));
+      }
+
+      void main() {
+          vec3 sample = texture2D(u_texture, v_texcoord).rgb;
+          if (u_debug == 1) {
+            gl_FragColor = vec4(sample.r, sample.g, sample.b, 1.0);
+            return;
+          }
+          float scaledDistRange = u_distanceRange * u_pixelRatio;
+          float sigDist = scaledDistRange * (median(sample.r, sample.g, sample.b) - 0.5);
+          float opacity = clamp(sigDist + 0.5, 0.0, 1.0) * u_color.a;
+
+          // Build the final color.
+          // IMPORTANT: We must premultiply the color by the alpha value before returning it.
+          gl_FragColor = vec4(u_color.r * opacity, u_color.g * opacity, u_color.b * opacity, opacity);
+      }
+    `,
+    };
+}
+//# sourceMappingURL=SdfShader.js.map

package/dist/src/core/renderers/webgl/shaders/SdfShader.js.map

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

package/dist/src/core/renderers/webgl/shaders/effects/BorderBottomEffect.d.ts

@@ -0,0 +1,31 @@
+import { ShaderEffect, type DefaultEffectProps, type ShaderEffectUniforms } from './ShaderEffect.js';
+/**
+ * Properties of the {@link BorderBottomEffect} effect
+ */
+export interface BorderBottomEffectProps extends DefaultEffectProps {
+    /**
+     * Width of the border in pixels
+     *
+     * @default 10
+     */
+    width?: number;
+    /**
+     * Color of the border in 0xRRGGBBAA
+     *
+     * @default 0xffffffff
+     */
+    color?: number;
+}
+/**
+ * The BorderBottomEffect renders a border on the bottom side of an element
+ */
+export declare class BorderBottomEffect extends ShaderEffect {
+    static z$__type__Props: BorderBottomEffectProps;
+    readonly name = "borderBottom";
+    static getEffectKey(): string;
+    static resolveDefaults(props: BorderBottomEffectProps): Required<BorderBottomEffectProps>;
+    static uniforms: ShaderEffectUniforms;
+    static methods: Record<string, string>;
+    static onEffectMask: string;
+    static onColorize: string;
+}

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

@@ -0,0 +1,71 @@
+/*
+ * 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.
+ */
+import { updateShaderEffectColor } from './EffectUtils.js';
+import { ShaderEffect, } from './ShaderEffect.js';
+/**
+ * The BorderBottomEffect renders a border on the bottom side of an element
+ */
+export class BorderBottomEffect extends ShaderEffect {
+    static z$__type__Props;
+    name = 'borderBottom';
+    static getEffectKey() {
+        return `borderBottom`;
+    }
+    static resolveDefaults(props) {
+        return {
+            width: props.width ?? 10,
+            color: props.color ?? 0xffffffff,
+        };
+    }
+    static uniforms = {
+        width: {
+            value: 0,
+            method: 'uniform1f',
+            type: 'float',
+        },
+        color: {
+            value: 0xffffffff,
+            updateProgramValue: updateShaderEffectColor,
+            method: 'uniform4fv',
+            type: 'vec4',
+        },
+    };
+    static methods = {
+        fillMask: `
+      float function(float dist) {
+        return clamp(-dist, 0.0, 1.0);
+      }
+    `,
+        rectDist: `
+      float function(vec2 p, vec2 size) {
+        vec2 d = abs(p) - size;
+        return min(max(d.x, d.y), 0.0) + length(max(d, 0.0));
+      }
+    `,
+    };
+    static onEffectMask = `
+  vec2 pos = vec2(0.0, u_dimensions.y - width * 0.5);
+  float mask = $rectDist(v_nodeCoordinate.xy * u_dimensions - pos, vec2(u_dimensions.x, width*0.5));
+  return mix(shaderColor, maskColor, $fillMask(mask));
+  `;
+    static onColorize = `
+    return color;
+  `;
+}
+//# sourceMappingURL=BorderBottomEffect.js.map

package/dist/src/core/renderers/webgl/shaders/effects/BorderBottomEffect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BorderBottomEffect.js","sourceRoot":"","sources":["../../../../../../../src/core/renderers/webgl/shaders/effects/BorderBottomEffect.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EACL,YAAY,GAGb,MAAM,mBAAmB,CAAC;AAoB3B;;GAEG;AACH,MAAM,OAAO,kBAAmB,SAAQ,YAAY;IAClD,MAAM,CAAC,eAAe,CAA0B;IAC9B,IAAI,GAAG,cAAc,CAAC;IAExC,MAAM,CAAU,YAAY;QAC1B,OAAO,cAAc,CAAC;IACxB,CAAC;IAED,MAAM,CAAU,eAAe,CAC7B,KAA8B;QAE9B,OAAO;YACL,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,EAAE;YACxB,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,UAAU;SACjC,CAAC;IACJ,CAAC;IAED,MAAM,CAAU,QAAQ,GAAyB;QAC/C,KAAK,EAAE;YACL,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,WAAW;YACnB,IAAI,EAAE,OAAO;SACd;QACD,KAAK,EAAE;YACL,KAAK,EAAE,UAAU;YACjB,kBAAkB,EAAE,uBAAuB;YAC3C,MAAM,EAAE,YAAY;YACpB,IAAI,EAAE,MAAM;SACb;KACF,CAAC;IAEF,MAAM,CAAU,OAAO,GAA2B;QAChD,QAAQ,EAAE;;;;KAIT;QACD,QAAQ,EAAE;;;;;KAKT;KACF,CAAC;IAEF,MAAM,CAAU,YAAY,GAAG;;;;GAI9B,CAAC;IAEF,MAAM,CAAU,UAAU,GAAG;;GAE5B,CAAC"}

package/dist/src/core/renderers/webgl/shaders/effects/BorderEffect.d.ts

@@ -0,0 +1,30 @@
+import { ShaderEffect, type DefaultEffectProps, type ShaderEffectUniforms } from './ShaderEffect.js';
+/**
+ * Properties of the {@link BorderEffect} effect
+ */
+export interface BorderEffectProps extends DefaultEffectProps {
+    /**
+     * Width of the border in pixels
+     *
+     * @default 10
+     */
+    width?: number;
+    /**
+     * Color of the border in 0xRRGGBBAA
+     *
+     * @default 0xffffffff
+     */
+    color?: number;
+}
+/**
+ * The BorderEffect renders a border along all edges of an element
+ */
+export declare class BorderEffect extends ShaderEffect {
+    static z$__type__Props: BorderEffectProps;
+    readonly name = "border";
+    static getEffectKey(): string;
+    static resolveDefaults(props: BorderEffectProps): Required<BorderEffectProps>;
+    static uniforms: ShaderEffectUniforms;
+    static onEffectMask: string;
+    static onColorize: string;
+}

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

@@ -0,0 +1,58 @@
+/*
+ * 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.
+ */
+import { updateShaderEffectColor } from './EffectUtils.js';
+import { ShaderEffect, } from './ShaderEffect.js';
+/**
+ * The BorderEffect renders a border along all edges of an element
+ */
+export class BorderEffect extends ShaderEffect {
+    static z$__type__Props;
+    name = 'border';
+    static getEffectKey() {
+        return `border`;
+    }
+    static resolveDefaults(props) {
+        return {
+            width: props.width ?? 10,
+            color: props.color ?? 0xffffffff,
+        };
+    }
+    static uniforms = {
+        width: {
+            value: 0,
+            method: 'uniform1f',
+            type: 'float',
+        },
+        color: {
+            value: 0xffffffff,
+            updateProgramValue: updateShaderEffectColor,
+            method: 'uniform4fv',
+            type: 'vec4',
+        },
+    };
+    static onEffectMask = `
+  float intR = shaderMask + 1.0;
+  float mask = clamp(intR + width, 0.0, 1.0) - clamp(intR, 0.0, 1.0);
+  return mix(shaderColor, mix(shaderColor, maskColor, maskColor.a), mask);
+  `;
+    static onColorize = `
+    return color;
+  `;
+}
+//# sourceMappingURL=BorderEffect.js.map

package/dist/src/core/renderers/webgl/shaders/effects/BorderEffect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BorderEffect.js","sourceRoot":"","sources":["../../../../../../../src/core/renderers/webgl/shaders/effects/BorderEffect.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EACL,YAAY,GAGb,MAAM,mBAAmB,CAAC;AAoB3B;;GAEG;AACH,MAAM,OAAO,YAAa,SAAQ,YAAY;IAC5C,MAAM,CAAC,eAAe,CAAoB;IACxB,IAAI,GAAG,QAAQ,CAAC;IAElC,MAAM,CAAU,YAAY;QAC1B,OAAO,QAAQ,CAAC;IAClB,CAAC;IAED,MAAM,CAAU,eAAe,CAC7B,KAAwB;QAExB,OAAO;YACL,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,EAAE;YACxB,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,UAAU;SACjC,CAAC;IACJ,CAAC;IAED,MAAM,CAAU,QAAQ,GAAyB;QAC/C,KAAK,EAAE;YACL,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,WAAW;YACnB,IAAI,EAAE,OAAO;SACd;QACD,KAAK,EAAE;YACL,KAAK,EAAE,UAAU;YACjB,kBAAkB,EAAE,uBAAuB;YAC3C,MAAM,EAAE,YAAY;YACpB,IAAI,EAAE,MAAM;SACb;KACF,CAAC;IAEF,MAAM,CAAU,YAAY,GAAG;;;;GAI9B,CAAC;IAEF,MAAM,CAAU,UAAU,GAAG;;GAE5B,CAAC"}

package/dist/src/core/renderers/webgl/shaders/effects/BorderLeftEffect.d.ts

@@ -0,0 +1,31 @@
+import { ShaderEffect, type DefaultEffectProps, type ShaderEffectUniforms } from './ShaderEffect.js';
+/**
+ * Properties of the {@link BorderLeftEffect} effect
+ */
+export interface BorderLeftEffectProps extends DefaultEffectProps {
+    /**
+     * Width of the border in pixels
+     *
+     * @default 10
+     */
+    width?: number;
+    /**
+     * Color of the border in 0xRRGGBBAA
+     *
+     * @default 0xffffffff
+     */
+    color?: number;
+}
+/**
+ * The BorderBottomEffect renders a border on the left of an element
+ */
+export declare class BorderLeftEffect extends ShaderEffect {
+    static z$__type__Props: BorderLeftEffectProps;
+    readonly name = "borderLeft";
+    static getEffectKey(): string;
+    static resolveDefaults(props: BorderLeftEffectProps): Required<BorderLeftEffectProps>;
+    static uniforms: ShaderEffectUniforms;
+    static methods: Record<string, string>;
+    static onEffectMask: string;
+    static onColorize: string;
+}

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

@@ -0,0 +1,71 @@
+/*
+ * 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.
+ */
+import { updateShaderEffectColor } from './EffectUtils.js';
+import { ShaderEffect, } from './ShaderEffect.js';
+/**
+ * The BorderBottomEffect renders a border on the left of an element
+ */
+export class BorderLeftEffect extends ShaderEffect {
+    static z$__type__Props;
+    name = 'borderLeft';
+    static getEffectKey() {
+        return `borderLeft`;
+    }
+    static resolveDefaults(props) {
+        return {
+            width: props.width ?? 10,
+            color: props.color ?? 0xffffffff,
+        };
+    }
+    static uniforms = {
+        width: {
+            value: 0,
+            method: 'uniform1f',
+            type: 'float',
+        },
+        color: {
+            value: 0xffffffff,
+            updateProgramValue: updateShaderEffectColor,
+            method: 'uniform4fv',
+            type: 'vec4',
+        },
+    };
+    static methods = {
+        fillMask: `
+      float function(float dist) {
+        return clamp(-dist, 0.0, 1.0);
+      }
+    `,
+        rectDist: `
+      float function(vec2 p, vec2 size) {
+        vec2 d = abs(p) - size;
+        return min(max(d.x, d.y), 0.0) + length(max(d, 0.0));
+      }
+    `,
+    };
+    static onEffectMask = `
+  vec2 pos = vec2(width * 0.5, 0.0);
+  float mask = $rectDist(v_nodeCoordinate.xy * u_dimensions - pos, vec2(width*0.5, u_dimensions.y));
+  return mix(shaderColor, maskColor, $fillMask(mask));
+  `;
+    static onColorize = `
+    return color;
+  `;
+}
+//# sourceMappingURL=BorderLeftEffect.js.map

package/dist/src/core/renderers/webgl/shaders/effects/BorderLeftEffect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BorderLeftEffect.js","sourceRoot":"","sources":["../../../../../../../src/core/renderers/webgl/shaders/effects/BorderLeftEffect.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EACL,YAAY,GAGb,MAAM,mBAAmB,CAAC;AAoB3B;;GAEG;AACH,MAAM,OAAO,gBAAiB,SAAQ,YAAY;IAChD,MAAM,CAAC,eAAe,CAAwB;IAC5B,IAAI,GAAG,YAAY,CAAC;IAEtC,MAAM,CAAU,YAAY;QAC1B,OAAO,YAAY,CAAC;IACtB,CAAC;IAED,MAAM,CAAU,eAAe,CAC7B,KAA4B;QAE5B,OAAO;YACL,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,EAAE;YACxB,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,UAAU;SACjC,CAAC;IACJ,CAAC;IAED,MAAM,CAAU,QAAQ,GAAyB;QAC/C,KAAK,EAAE;YACL,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,WAAW;YACnB,IAAI,EAAE,OAAO;SACd;QACD,KAAK,EAAE;YACL,KAAK,EAAE,UAAU;YACjB,kBAAkB,EAAE,uBAAuB;YAC3C,MAAM,EAAE,YAAY;YACpB,IAAI,EAAE,MAAM;SACb;KACF,CAAC;IAEF,MAAM,CAAU,OAAO,GAA2B;QAChD,QAAQ,EAAE;;;;KAIT;QACD,QAAQ,EAAE;;;;;KAKT;KACF,CAAC;IAEF,MAAM,CAAU,YAAY,GAAG;;;;GAI9B,CAAC;IAEF,MAAM,CAAU,UAAU,GAAG;;GAE5B,CAAC"}

package/dist/src/core/renderers/webgl/shaders/effects/BorderRightEffect.d.ts

@@ -0,0 +1,31 @@
+import { ShaderEffect, type DefaultEffectProps, type ShaderEffectUniforms } from './ShaderEffect.js';
+/**
+ * Properties of the {@link BorderRightEffect} effect
+ */
+export interface BorderRightEffectProps extends DefaultEffectProps {
+    /**
+     * Width of the border in pixels
+     *
+     * @default 10
+     */
+    width?: number;
+    /**
+     * Color of the border in 0xRRGGBBAA
+     *
+     * @default 0xffffffff
+     */
+    color?: number;
+}
+/**
+ * The BorderBottomEffect renders a border on the right side of an element
+ */
+export declare class BorderRightEffect extends ShaderEffect {
+    static z$__type__Props: BorderRightEffectProps;
+    readonly name = "borderRight";
+    static getEffectKey(): string;
+    static resolveDefaults(props: BorderRightEffectProps): Required<BorderRightEffectProps>;
+    static uniforms: ShaderEffectUniforms;
+    static methods: Record<string, string>;
+    static onEffectMask: string;
+    static onColorize: string;
+}

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

@@ -0,0 +1,71 @@
+/*
+ * 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.
+ */
+import { updateShaderEffectColor } from './EffectUtils.js';
+import { ShaderEffect, } from './ShaderEffect.js';
+/**
+ * The BorderBottomEffect renders a border on the right side of an element
+ */
+export class BorderRightEffect extends ShaderEffect {
+    static z$__type__Props;
+    name = 'borderRight';
+    static getEffectKey() {
+        return `borderRight`;
+    }
+    static resolveDefaults(props) {
+        return {
+            width: props.width ?? 10,
+            color: props.color ?? 0xffffffff,
+        };
+    }
+    static uniforms = {
+        width: {
+            value: 0,
+            method: 'uniform1f',
+            type: 'float',
+        },
+        color: {
+            value: 0xffffffff,
+            updateProgramValue: updateShaderEffectColor,
+            method: 'uniform4fv',
+            type: 'vec4',
+        },
+    };
+    static methods = {
+        fillMask: `
+      float function(float dist) {
+        return clamp(-dist, 0.0, 1.0);
+      }
+    `,
+        rectDist: `
+      float function(vec2 p, vec2 size) {
+        vec2 d = abs(p) - size;
+        return min(max(d.x, d.y), 0.0) + length(max(d, 0.0));
+      }
+    `,
+    };
+    static onEffectMask = `
+  vec2 pos = vec2(u_dimensions.x - width * 0.5, 0.0);
+  float mask = $rectDist(v_nodeCoordinate.xy * u_dimensions - pos, vec2(width*0.5, u_dimensions.y));
+  return mix(shaderColor, maskColor, $fillMask(mask));
+  `;
+    static onColorize = `
+    return color;
+  `;
+}
+//# sourceMappingURL=BorderRightEffect.js.map

package/dist/src/core/renderers/webgl/shaders/effects/BorderRightEffect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BorderRightEffect.js","sourceRoot":"","sources":["../../../../../../../src/core/renderers/webgl/shaders/effects/BorderRightEffect.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EACL,YAAY,GAGb,MAAM,mBAAmB,CAAC;AAoB3B;;GAEG;AACH,MAAM,OAAO,iBAAkB,SAAQ,YAAY;IACjD,MAAM,CAAC,eAAe,CAAyB;IAC7B,IAAI,GAAG,aAAa,CAAC;IAEvC,MAAM,CAAU,YAAY;QAC1B,OAAO,aAAa,CAAC;IACvB,CAAC;IAED,MAAM,CAAU,eAAe,CAC7B,KAA6B;QAE7B,OAAO;YACL,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,EAAE;YACxB,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,UAAU;SACjC,CAAC;IACJ,CAAC;IAED,MAAM,CAAU,QAAQ,GAAyB;QAC/C,KAAK,EAAE;YACL,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,WAAW;YACnB,IAAI,EAAE,OAAO;SACd;QACD,KAAK,EAAE;YACL,KAAK,EAAE,UAAU;YACjB,kBAAkB,EAAE,uBAAuB;YAC3C,MAAM,EAAE,YAAY;YACpB,IAAI,EAAE,MAAM;SACb;KACF,CAAC;IAEF,MAAM,CAAU,OAAO,GAA2B;QAChD,QAAQ,EAAE;;;;KAIT;QACD,QAAQ,EAAE;;;;;KAKT;KACF,CAAC;IAEF,MAAM,CAAU,YAAY,GAAG;;;;GAI9B,CAAC;IAEF,MAAM,CAAU,UAAU,GAAG;;GAE5B,CAAC"}

package/dist/src/core/renderers/webgl/shaders/effects/BorderTopEffect.d.ts

@@ -0,0 +1,31 @@
+import { ShaderEffect, type DefaultEffectProps, type ShaderEffectUniforms } from './ShaderEffect.js';
+/**
+ * Properties of the {@link BorderTopEffect} effect
+ */
+export interface BorderTopEffectProps extends DefaultEffectProps {
+    /**
+     * Width of the border in pixels
+     *
+     * @default 10
+     */
+    width?: number;
+    /**
+     * Color of the border in 0xRRGGBBAA
+     *
+     * @default 0xffffffff
+     */
+    color?: number;
+}
+/**
+ * The BorderBottomEffect renders a border on the top side of an element
+ */
+export declare class BorderTopEffect extends ShaderEffect {
+    static z$__type__Props: BorderTopEffectProps;
+    readonly name = "borderTop";
+    static getEffectKey(): string;
+    static resolveDefaults(props: BorderTopEffectProps): Required<BorderTopEffectProps>;
+    static uniforms: ShaderEffectUniforms;
+    static methods: Record<string, string>;
+    static onEffectMask: string;
+    static onColorize: string;
+}

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

@@ -0,0 +1,71 @@
+/*
+ * 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.
+ */
+import { updateShaderEffectColor } from './EffectUtils.js';
+import { ShaderEffect, } from './ShaderEffect.js';
+/**
+ * The BorderBottomEffect renders a border on the top side of an element
+ */
+export class BorderTopEffect extends ShaderEffect {
+    static z$__type__Props;
+    name = 'borderTop';
+    static getEffectKey() {
+        return `borderTop`;
+    }
+    static resolveDefaults(props) {
+        return {
+            width: props.width ?? 10,
+            color: props.color ?? 0xffffffff,
+        };
+    }
+    static uniforms = {
+        width: {
+            value: 0,
+            method: 'uniform1f',
+            type: 'float',
+        },
+        color: {
+            value: 0xffffffff,
+            updateProgramValue: updateShaderEffectColor,
+            method: 'uniform4fv',
+            type: 'vec4',
+        },
+    };
+    static methods = {
+        fillMask: `
+      float function(float dist) {
+        return clamp(-dist, 0.0, 1.0);
+      }
+    `,
+        rectDist: `
+      float function(vec2 p, vec2 size) {
+        vec2 d = abs(p) - size;
+        return min(max(d.x, d.y), 0.0) + length(max(d, 0.0));
+      }
+    `,
+    };
+    static onEffectMask = `
+  vec2 pos = vec2(0.0, width * 0.5);
+  float mask = $rectDist(v_nodeCoordinate.xy * u_dimensions - pos, vec2(u_dimensions.x, width*0.5));
+  return mix(shaderColor, maskColor, $fillMask(mask));
+  `;
+    static onColorize = `
+    return color;
+  `;
+}
+//# sourceMappingURL=BorderTopEffect.js.map