@lightningjs/renderer 0.7.5 → 0.8.0

package/src/core/renderers/webgl/shaders/effects/RadialProgressEffect.ts

@@ -1,186 +1,186 @@
-/*
- * 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 {
-  ShaderEffect,
-  type DefaultEffectProps,
-  type ShaderEffectUniforms,
-} from './ShaderEffect.js';
-
-/**
- * Properties of the {@link RadialProgressEffect} effect
- */
-export interface RadialProgressEffectProps extends DefaultEffectProps {
-  /**
-   * Width of the border in pixels
-   *
-   * @default 10
-   */
-  width?: number;
-  /**
-   * progress from 0 to 1 in floats
-   *
-   * @default 0.5;
-   */
-  progress?: number;
-  /**
-   * offset where the radial progress starts drawing.
-   *
-   * @default 0;
-   */
-  offset?: number;
-  /**
-   * maximum range of the radial progress in radians
-   *
-   * @default Math.PI * 2
-   */
-  range?: number;
-  /**
-   * rounded ends of the progress bar;
-   *
-   * @default false
-   */
-  rounded?: boolean;
-  /**
-   * radius from center to outer edge from 0 to 1 in floats;
-   *
-   * @default 1
-   */
-  radius?: number;
-  /**
-   * Color of the border in 0xRRGGBBAA
-   *
-   * @default 0xffffffff
-   */
-  color?: number;
-}
-
-/**
- * The RadialProgressEffect renders a border along all edges of an element
- */
-export class RadialProgressEffect extends ShaderEffect {
-  static z$__type__Props: RadialProgressEffectProps;
-  override readonly name = 'radialProgress';
-
-  static override getEffectKey(): string {
-    return `radialProgress`;
-  }
-
-  static override resolveDefaults(
-    props: RadialProgressEffectProps,
-  ): Required<RadialProgressEffectProps> {
-    return {
-      width: props.width ?? 10,
-      progress: props.progress ?? 0.5,
-      offset: props.offset ?? 0,
-      range: props.range ?? Math.PI * 2,
-      rounded: props.rounded ?? false,
-      radius: props.radius ?? 1,
-      color: props.color ?? 0xffffffff,
-    };
-  }
-
-  static override uniforms: ShaderEffectUniforms = {
-    width: {
-      value: 0,
-      method: 'uniform1f',
-      type: 'float',
-    },
-    progress: {
-      value: 0.5,
-      method: 'uniform1f',
-      type: 'float',
-    },
-    offset: {
-      value: 0,
-      method: 'uniform1f',
-      type: 'float',
-    },
-    range: {
-      value: 0,
-      method: 'uniform1f',
-      type: 'float',
-    },
-    rounded: {
-      value: 0,
-      method: 'uniform1f',
-      type: 'float',
-      validator: (value: boolean): number => {
-        return value ? 1 : 0;
-      },
-    },
-    radius: {
-      value: 1,
-      method: 'uniform1f',
-      type: 'float',
-    },
-    color: {
-      value: 0xffffffff,
-      validator: (rgba): number[] => getNormalizedRgbaComponents(rgba),
-      method: 'uniform4fv',
-      type: 'vec4',
-    },
-  };
-
-  static override methods: Record<string, string> = {
-    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);
-    }
-    `,
-  };
-
-  static override 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 override onColorize = `
-    return color;
-  `;
-}
+/*
+ * 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 {
+  ShaderEffect,
+  type DefaultEffectProps,
+  type ShaderEffectUniforms,
+} from './ShaderEffect.js';
+
+/**
+ * Properties of the {@link RadialProgressEffect} effect
+ */
+export interface RadialProgressEffectProps extends DefaultEffectProps {
+  /**
+   * Width of the border in pixels
+   *
+   * @default 10
+   */
+  width?: number;
+  /**
+   * progress from 0 to 1 in floats
+   *
+   * @default 0.5;
+   */
+  progress?: number;
+  /**
+   * offset where the radial progress starts drawing.
+   *
+   * @default 0;
+   */
+  offset?: number;
+  /**
+   * maximum range of the radial progress in radians
+   *
+   * @default Math.PI * 2
+   */
+  range?: number;
+  /**
+   * rounded ends of the progress bar;
+   *
+   * @default false
+   */
+  rounded?: boolean;
+  /**
+   * radius from center to outer edge from 0 to 1 in floats;
+   *
+   * @default 1
+   */
+  radius?: number;
+  /**
+   * Color of the border in 0xRRGGBBAA
+   *
+   * @default 0xffffffff
+   */
+  color?: number;
+}
+
+/**
+ * The RadialProgressEffect renders a border along all edges of an element
+ */
+export class RadialProgressEffect extends ShaderEffect {
+  static z$__type__Props: RadialProgressEffectProps;
+  override readonly name = 'radialProgress';
+
+  static override getEffectKey(): string {
+    return `radialProgress`;
+  }
+
+  static override resolveDefaults(
+    props: RadialProgressEffectProps,
+  ): Required<RadialProgressEffectProps> {
+    return {
+      width: props.width ?? 10,
+      progress: props.progress ?? 0.5,
+      offset: props.offset ?? 0,
+      range: props.range ?? Math.PI * 2,
+      rounded: props.rounded ?? false,
+      radius: props.radius ?? 1,
+      color: props.color ?? 0xffffffff,
+    };
+  }
+
+  static override uniforms: ShaderEffectUniforms = {
+    width: {
+      value: 0,
+      method: 'uniform1f',
+      type: 'float',
+    },
+    progress: {
+      value: 0.5,
+      method: 'uniform1f',
+      type: 'float',
+    },
+    offset: {
+      value: 0,
+      method: 'uniform1f',
+      type: 'float',
+    },
+    range: {
+      value: 0,
+      method: 'uniform1f',
+      type: 'float',
+    },
+    rounded: {
+      value: 0,
+      method: 'uniform1f',
+      type: 'float',
+      validator: (value: boolean): number => {
+        return value ? 1 : 0;
+      },
+    },
+    radius: {
+      value: 1,
+      method: 'uniform1f',
+      type: 'float',
+    },
+    color: {
+      value: 0xffffffff,
+      validator: (rgba): number[] => getNormalizedRgbaComponents(rgba),
+      method: 'uniform4fv',
+      type: 'vec4',
+    },
+  };
+
+  static override methods: Record<string, string> = {
+    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);
+    }
+    `,
+  };
+
+  static override 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 override onColorize = `
+    return color;
+  `;
+}

package/src/core/renderers/webgl/shaders/effects/RadiusEffect.ts

@@ -1,121 +1,121 @@
-/*
- * 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 {
-  ShaderEffect,
-  type DefaultEffectProps,
-  type ShaderEffectUniforms,
-} from './ShaderEffect.js';
-
-/**
- * Properties of the {@link RadiusEffect} shader
- */
-export interface RadiusEffectProps extends DefaultEffectProps {
-  /**
-   * Corner radius, in pixels, to cut out of the corners
-   *
-   * @remarks
-   * You can input an array with a length of up to four or a number.
-   *
-   * array length 4:
-   * [topLeft, topRight, bottomRight, bottomLeft]
-   *
-   * array length 2:
-   * [20, 40] -> [20(topLeft), 40(topRight), 20(bottomRight), 40(bottomLeft)]
-   *
-   * array length 3:
-   * [20, 40, 60] -> [20(topLeft), 40(topRight), 60(bottomRight), 20(bottomLeft)]
-   *
-   * number:
-   * 30 -> [30, 30, 30, 30]
-   *
-   * @default 10
-   */
-  radius?: number | number[];
-}
-
-/**
- * Masks the current maskcolor with rounded corners similar to {@link RoundedRectangle}
- */
-export class RadiusEffect extends ShaderEffect {
-  static z$__type__Props: RadiusEffectProps;
-  override readonly name = 'radius';
-
-  static override getEffectKey(): string {
-    return `radius`;
-  }
-
-  static override uniforms: ShaderEffectUniforms = {
-    radius: {
-      value: 0,
-      method: 'uniform4fv',
-      type: 'vec4',
-      validator: (value: number | number[]) => {
-        let r = value;
-        if (Array.isArray(r)) {
-          if (r.length === 2) {
-            r = [r[0], r[1], r[0], r[1]] as number[];
-          } else if (r.length === 3) {
-            r = [r[0], r[1], r[2], r[0]] as number[];
-          } else if (r.length !== 4) {
-            r = [r[0], r[0], r[0], r[0]] as number[];
-          }
-        } else if (typeof r === 'number') {
-          r = [r, r, r, r];
-        }
-        return r;
-      },
-    },
-  };
-
-  static override methods: Record<string, string> = {
-    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;
-      }
-    `,
-  };
-
-  static override resolveDefaults(
-    props: RadiusEffectProps,
-  ): Required<RadiusEffectProps> {
-    return {
-      radius: props.radius ?? 10,
-    };
-  }
-
-  static override 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 override onEffectMask = `
-  return mix(vec4(0.0), maskColor, $fillMask(shaderMask));
-  `;
-}
+/*
+ * 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 {
+  ShaderEffect,
+  type DefaultEffectProps,
+  type ShaderEffectUniforms,
+} from './ShaderEffect.js';
+
+/**
+ * Properties of the {@link RadiusEffect} shader
+ */
+export interface RadiusEffectProps extends DefaultEffectProps {
+  /**
+   * Corner radius, in pixels, to cut out of the corners
+   *
+   * @remarks
+   * You can input an array with a length of up to four or a number.
+   *
+   * array length 4:
+   * [topLeft, topRight, bottomRight, bottomLeft]
+   *
+   * array length 2:
+   * [20, 40] -> [20(topLeft), 40(topRight), 20(bottomRight), 40(bottomLeft)]
+   *
+   * array length 3:
+   * [20, 40, 60] -> [20(topLeft), 40(topRight), 60(bottomRight), 20(bottomLeft)]
+   *
+   * number:
+   * 30 -> [30, 30, 30, 30]
+   *
+   * @default 10
+   */
+  radius?: number | number[];
+}
+
+/**
+ * Masks the current maskcolor with rounded corners similar to {@link RoundedRectangle}
+ */
+export class RadiusEffect extends ShaderEffect {
+  static z$__type__Props: RadiusEffectProps;
+  override readonly name = 'radius';
+
+  static override getEffectKey(): string {
+    return `radius`;
+  }
+
+  static override uniforms: ShaderEffectUniforms = {
+    radius: {
+      value: 0,
+      method: 'uniform4fv',
+      type: 'vec4',
+      validator: (value: number | number[]) => {
+        let r = value;
+        if (Array.isArray(r)) {
+          if (r.length === 2) {
+            r = [r[0], r[1], r[0], r[1]] as number[];
+          } else if (r.length === 3) {
+            r = [r[0], r[1], r[2], r[0]] as number[];
+          } else if (r.length !== 4) {
+            r = [r[0], r[0], r[0], r[0]] as number[];
+          }
+        } else if (typeof r === 'number') {
+          r = [r, r, r, r];
+        }
+        return r;
+      },
+    },
+  };
+
+  static override methods: Record<string, string> = {
+    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;
+      }
+    `,
+  };
+
+  static override resolveDefaults(
+    props: RadiusEffectProps,
+  ): Required<RadiusEffectProps> {
+    return {
+      radius: props.radius ?? 10,
+    };
+  }
+
+  static override 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 override onEffectMask = `
+  return mix(vec4(0.0), maskColor, $fillMask(shaderMask));
+  `;
+}