@lightningjs/renderer 0.0.1

package/dist/src/core/renderers/webgl/shaders/SdfShader.d.ts

@@ -0,0 +1,45 @@
+import type { WebGlCoreCtxTexture } from '../WebGlCoreCtxTexture.js';
+import type { WebGlCoreRenderer } from '../WebGlCoreRenderer.js';
+import { WebGlCoreShader } from '../WebGlCoreShader.js';
+import type { ShaderProgramSources } from '../internal/ShaderUtils.js';
+declare module '../../../CoreShaderManager.js' {
+    interface ShaderMap {
+        SdfShader: typeof SdfShader;
+    }
+}
+/**
+ * Properties of the {@link SdfShader}
+ */
+export interface SdfShaderProps {
+    offset?: [number, number];
+    /**
+     * Color in RGBA format
+     *
+     * @remarks
+     * Color channels must NOT be premultiplied by alpha for best blending results.
+     */
+    color?: number;
+    size?: number;
+    distanceRange?: number;
+    debug?: boolean;
+}
+/**
+ * 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 declare class SdfShader extends WebGlCoreShader {
+    constructor(renderer: WebGlCoreRenderer);
+    bindTextures(textures: WebGlCoreCtxTexture[]): void;
+    bindProps(props: SdfShaderProps): void;
+    static resolveDefaults(props?: SdfShaderProps): Required<SdfShaderProps>;
+    static shaderSources: ShaderProgramSources;
+}

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

@@ -0,0 +1,137 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2023 Comcast
+ *
+ * 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';
+/**
+ * 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,
+            attributes: ['a_position', 'a_textureCoordinate'],
+            uniforms: [
+                { name: 'u_resolution', uniform: 'uniform2fv' },
+                { name: 'u_pixelRatio', uniform: 'uniform1f' },
+                { name: 'u_texture', uniform: 'uniform2f' },
+                { name: 'u_offset', uniform: 'uniform2fv' },
+                { name: 'u_color', uniform: 'uniform4fv' },
+                { name: 'u_size', uniform: 'uniform1f' },
+                { name: 'u_distanceRange', uniform: 'uniform1f' },
+                { name: 'u_debug', uniform: 'uniform1i' },
+            ],
+        });
+    }
+    bindTextures(textures) {
+        const { gl } = this;
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, textures[0].ctxTexture);
+    }
+    bindProps(props) {
+        const resolvedProps = SdfShader.resolveDefaults(props);
+        for (const key in resolvedProps) {
+            if (key === 'offset') {
+                this.setUniform('u_offset', resolvedProps[key]);
+            }
+            else if (key === 'color') {
+                const components = getNormalizedRgbaComponents(resolvedProps.color);
+                this.setUniform('u_color', components);
+            }
+            else if (key === 'size') {
+                this.setUniform('u_size', resolvedProps[key]);
+            }
+            else if (key === 'distanceRange') {
+                this.setUniform('u_distanceRange', resolvedProps[key]);
+            }
+            else if (key === 'debug') {
+                this.setUniform('u_debug', resolvedProps[key] ? 1.0 : 0.0);
+            }
+        }
+    }
+    static resolveDefaults(props = {}) {
+        return {
+            offset: props.offset ?? [0.0, 0.0],
+            color: props.color ?? 0xffffffff,
+            size: props.size ?? 16,
+            distanceRange: props.distanceRange ?? 1.0,
+            debug: props.debug ?? false,
+        };
+    }
+    static shaderSources = {
+        vertex: `
+      // 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_offset;
+      uniform vec2 u_resolution;
+      uniform float u_pixelRatio;
+      uniform float u_size;
+
+      varying vec2 v_texcoord;
+
+      void main() {
+        gl_Position = vec4(((a_position * u_size + u_offset) * u_pixelRatio / u_resolution * 2.0 - 1.0) * vec2(1, -1), 0, 1);
+        v_texcoord = a_textureCoordinate;
+      }
+    `,
+        fragment: `
+      precision highp float;
+
+      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,15 @@
+import { ShaderEffect, type DefaultEffectProps, type ShaderEffectUniforms } from './ShaderEffect.js';
+export interface BorderBottomEffectProps extends DefaultEffectProps {
+    width?: number;
+    color?: number;
+}
+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,68 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2023 Comcast
+ *
+ * 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 { ShaderEffect, } from './ShaderEffect.js';
+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 ?? 10,
+        };
+    }
+    static uniforms = {
+        width: {
+            value: 0,
+            method: 'uniform1f',
+            type: 'float',
+        },
+        color: {
+            value: 0xffffffff,
+            validator: (rgba) => getNormalizedRgbaComponents(rgba),
+            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_textureCoordinate.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,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AACvE,OAAO,EACL,YAAY,GAGb,MAAM,mBAAmB,CAAC;AAO3B,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,EAAE;SACzB,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,SAAS,EAAE,CAAC,IAAI,EAAY,EAAE,CAAC,2BAA2B,CAAC,IAAI,CAAC;YAChE,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,14 @@
+import { ShaderEffect, type DefaultEffectProps, type ShaderEffectUniforms } from './ShaderEffect.js';
+export interface BorderEffectProps extends DefaultEffectProps {
+    width?: number;
+    color?: number;
+}
+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,54 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2023 Comcast
+ *
+ * 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 { ShaderEffect, } from './ShaderEffect.js';
+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 ?? 10,
+        };
+    }
+    static uniforms = {
+        width: {
+            value: 0,
+            method: 'uniform1f',
+            type: 'float',
+        },
+        color: {
+            value: 0xffffffff,
+            validator: (rgba) => getNormalizedRgbaComponents(rgba),
+            method: 'uniform4fv',
+            type: 'vec4',
+        },
+    };
+    static onEffectMask = `
+  float mask = clamp(shaderMask + width, 0.0, 1.0) - clamp(shaderMask, 0.0, 1.0);
+  return mix(shaderColor, maskColor, 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,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AACvE,OAAO,EACL,YAAY,GAGb,MAAM,mBAAmB,CAAC;AAO3B,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,EAAE;SACzB,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,SAAS,EAAE,CAAC,IAAI,EAAY,EAAE,CAAC,2BAA2B,CAAC,IAAI,CAAC;YAChE,MAAM,EAAE,YAAY;YACpB,IAAI,EAAE,MAAM;SACb;KACF,CAAC;IAEF,MAAM,CAAU,YAAY,GAAG;;;GAG9B,CAAC;IAEF,MAAM,CAAU,UAAU,GAAG;;GAE5B,CAAC"}

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

@@ -0,0 +1,15 @@
+import { ShaderEffect, type DefaultEffectProps, type ShaderEffectUniforms } from './ShaderEffect.js';
+export interface BorderLeftEffectProps extends DefaultEffectProps {
+    width?: number;
+    color?: number;
+}
+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,68 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2023 Comcast
+ *
+ * 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 { ShaderEffect, } from './ShaderEffect.js';
+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 ?? 10,
+        };
+    }
+    static uniforms = {
+        width: {
+            value: 0,
+            method: 'uniform1f',
+            type: 'float',
+        },
+        color: {
+            value: 0xffffffff,
+            validator: (rgba) => getNormalizedRgbaComponents(rgba),
+            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_textureCoordinate.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,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AACvE,OAAO,EACL,YAAY,GAGb,MAAM,mBAAmB,CAAC;AAO3B,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,EAAE;SACzB,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,SAAS,EAAE,CAAC,IAAI,EAAY,EAAE,CAAC,2BAA2B,CAAC,IAAI,CAAC;YAChE,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,15 @@
+import { ShaderEffect, type DefaultEffectProps, type ShaderEffectUniforms } from './ShaderEffect.js';
+export interface BorderRightEffectProps extends DefaultEffectProps {
+    width?: number;
+    color?: number;
+}
+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,68 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2023 Comcast
+ *
+ * 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 { ShaderEffect, } from './ShaderEffect.js';
+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 ?? 10,
+        };
+    }
+    static uniforms = {
+        width: {
+            value: 0,
+            method: 'uniform1f',
+            type: 'float',
+        },
+        color: {
+            value: 0xffffffff,
+            validator: (rgba) => getNormalizedRgbaComponents(rgba),
+            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_textureCoordinate.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,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AACvE,OAAO,EACL,YAAY,GAGb,MAAM,mBAAmB,CAAC;AAO3B,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,EAAE;SACzB,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,SAAS,EAAE,CAAC,IAAI,EAAY,EAAE,CAAC,2BAA2B,CAAC,IAAI,CAAC;YAChE,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,15 @@
+import { ShaderEffect, type DefaultEffectProps, type ShaderEffectUniforms } from './ShaderEffect.js';
+export interface BorderTopEffectProps extends DefaultEffectProps {
+    width?: number;
+    color?: number;
+}
+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,68 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2023 Comcast
+ *
+ * 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 { ShaderEffect, } from './ShaderEffect.js';
+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 ?? 10,
+        };
+    }
+    static uniforms = {
+        width: {
+            value: 0,
+            method: 'uniform1f',
+            type: 'float',
+        },
+        color: {
+            value: 0xffffffff,
+            validator: (rgba) => getNormalizedRgbaComponents(rgba),
+            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_textureCoordinate.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

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

@@ -0,0 +1 @@
+{"version":3,"file":"BorderTopEffect.js","sourceRoot":"","sources":["../../../../../../../src/core/renderers/webgl/shaders/effects/BorderTopEffect.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AACvE,OAAO,EACL,YAAY,GAGb,MAAM,mBAAmB,CAAC;AAO3B,MAAM,OAAO,eAAgB,SAAQ,YAAY;IAC/C,MAAM,CAAC,eAAe,CAAuB;IAC3B,IAAI,GAAG,WAAW,CAAC;IAErC,MAAM,CAAU,YAAY;QAC1B,OAAO,WAAW,CAAC;IACrB,CAAC;IAED,MAAM,CAAU,eAAe,CAC7B,KAA2B;QAE3B,OAAO;YACL,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,EAAE;YACxB,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,EAAE;SACzB,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,SAAS,EAAE,CAAC,IAAI,EAAY,EAAE,CAAC,2BAA2B,CAAC,IAAI,CAAC;YAChE,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/EffectUtils.d.ts

@@ -0,0 +1 @@
+export declare const colorToFloat32Array: (argb: number) => number[];

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

@@ -0,0 +1,33 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2023 Comcast
+ *
+ * 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 const colorToFloat32Array = (argb) => {
+    const col = getRgbaComponentsNormalized(argb);
+    col[0] *= col[3];
+    col[1] *= col[3];
+    col[2] *= col[3];
+    return col;
+};
+const getRgbaComponentsNormalized = (argb) => {
+    const r = ((argb / 65536) | 0) % 256;
+    const g = ((argb / 256) | 0) % 256;
+    const b = argb % 256;
+    const a = (argb / 16777216) | 0;
+    return [r / 255, g / 255, b / 255, a / 255];
+};
+//# sourceMappingURL=EffectUtils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EffectUtils.js","sourceRoot":"","sources":["../../../../../../../src/core/renderers/webgl/shaders/effects/EffectUtils.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,IAAY,EAAE,EAAE;IAClD,MAAM,GAAG,GAAG,2BAA2B,CAAC,IAAI,CAAC,CAAC;IAC9C,GAAG,CAAC,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,CAAE,CAAC;IAClB,GAAG,CAAC,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,CAAE,CAAC;IAClB,GAAG,CAAC,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,CAAE,CAAC;IAClB,OAAO,GAAG,CAAC;AACb,CAAC,CAAC;AAEF,MAAM,2BAA2B,GAAG,CAAC,IAAY,EAAY,EAAE;IAC7D,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC;IACrC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC;IACnC,MAAM,CAAC,GAAG,IAAI,GAAG,GAAG,CAAC;IACrB,MAAM,CAAC,GAAG,CAAC,IAAI,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;IAChC,OAAO,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,GAAG,CAAC,CAAC;AAC9C,CAAC,CAAC"}