@lightningjs/renderer 3.0.0-beta19 → 3.0.0-beta20

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

@@ -0,0 +1,127 @@
+/*
+ * 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 { updateShaderEffectColor } from './EffectUtils.js';
+import { ShaderEffect, } from './ShaderEffect.js';
+/**
+ * The RadialProgressEffect renders a border along all edges of an element
+ */
+export class RadialProgressEffect extends ShaderEffect {
+    static z$__type__Props;
+    name = 'radialProgress';
+    static getEffectKey() {
+        return `radialProgress`;
+    }
+    static resolveDefaults(props) {
+        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 uniforms = {
+        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) => {
+                return value ? 1 : 0;
+            },
+        },
+        radius: {
+            value: 1,
+            method: 'uniform1f',
+            type: 'float',
+        },
+        color: {
+            value: 0xffffffff,
+            updateProgramValue: updateShaderEffectColor,
+            method: 'uniform4fv',
+            type: 'vec4',
+        },
+    };
+    static methods = {
+        rotateUV: `
+    vec2 function(vec2 uv, float d) {
+      float s = sin(d);
+      float c = cos(d);
+      mat2 rotMatrix = mat2(c, -s, s, c);
+      return uv * rotMatrix;
+    }
+    `,
+        drawDot: `
+    float function(vec2 uv, vec2 p, float r) {
+      uv += p;
+      float circle = length(uv) - r;
+      return clamp(-circle, 0.0, 1.0);
+    }
+    `,
+    };
+    static onEffectMask = `
+    float outerRadius = radius * u_dimensions.y * 0.5;
+
+    float endAngle = range * progress - 0.0005;
+
+    vec2 uv = v_nodeCoordinate.xy * u_dimensions.xy - u_dimensions * 0.5;
+
+    uv = $rotateUV(uv, -(offset));
+    float linewidth = width * u_pixelRatio;
+    float circle = length(uv) - (outerRadius - linewidth) ;
+    circle = abs(circle) - linewidth;
+    circle = clamp(-circle, 0.0, 1.0);
+
+    float angle = (atan(uv.x, -uv.y) / 3.14159265359 * 0.5);
+    float p = endAngle / (PI * 2.);
+
+    circle *= step(fract(angle), fract(p));
+
+    circle = rounded < 1. ? circle : max(circle, $drawDot(uv, vec2(0, outerRadius - linewidth), linewidth));
+    circle = rounded < 1. ? circle : max(circle, $drawDot($rotateUV(uv, -(endAngle)), vec2(0, outerRadius - linewidth), linewidth));
+
+    return mix(shaderColor, maskColor, circle);
+  `;
+    static onColorize = `
+    return color;
+  `;
+}
+//# sourceMappingURL=RadialProgressEffect.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadialProgressEffect.js","sourceRoot":"","sources":["../../../../../../../src/core/renderers/webgl/shaders/effects/RadialProgressEffect.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AACvE,OAAO,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EACL,YAAY,GAGb,MAAM,mBAAmB,CAAC;AAkD3B;;GAEG;AACH,MAAM,OAAO,oBAAqB,SAAQ,YAAY;IACpD,MAAM,CAAC,eAAe,CAA4B;IAChC,IAAI,GAAG,gBAAgB,CAAC;IAE1C,MAAM,CAAU,YAAY;QAC1B,OAAO,gBAAgB,CAAC;IAC1B,CAAC;IAED,MAAM,CAAU,eAAe,CAC7B,KAAgC;QAEhC,OAAO;YACL,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,EAAE;YACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAI,GAAG;YAC/B,MAAM,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC;YACzB,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC,EAAE,GAAG,CAAC;YACjC,OAAO,EAAE,KAAK,CAAC,OAAO,IAAI,KAAK;YAC/B,MAAM,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC;YACzB,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,QAAQ,EAAE;YACR,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,WAAW;YACnB,IAAI,EAAE,OAAO;SACd;QACD,MAAM,EAAE;YACN,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,WAAW;YACnB,IAAI,EAAE,OAAO;SACd;QACD,KAAK,EAAE;YACL,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,WAAW;YACnB,IAAI,EAAE,OAAO;SACd;QACD,OAAO,EAAE;YACP,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,WAAW;YACnB,IAAI,EAAE,OAAO;YACb,SAAS,EAAE,CAAC,KAAc,EAAU,EAAE;gBACpC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACvB,CAAC;SACF;QACD,MAAM,EAAE;YACN,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;;;;;;;KAOT;QACD,OAAO,EAAE;;;;;;KAMR;KACF,CAAC;IAEF,MAAM,CAAU,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;GAsB9B,CAAC;IAEF,MAAM,CAAU,UAAU,GAAG;;GAE5B,CAAC"}

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

@@ -0,0 +1,40 @@
+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 declare class RadiusEffect extends ShaderEffect {
+    static z$__type__Props: RadiusEffectProps;
+    readonly name = "radius";
+    static getEffectKey(): string;
+    static uniforms: ShaderEffectUniforms;
+    static methods: Record<string, string>;
+    static resolveDefaults(props: RadiusEffectProps): Required<RadiusEffectProps>;
+    static onShaderMask: string;
+    static onEffectMask: string;
+}

package/dist/src/core/renderers/webgl/shaders/effects/RadiusEffect.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 { updateWebSafeRadius, validateArrayLength4 } from './EffectUtils.js';
+import { ShaderEffect, } from './ShaderEffect.js';
+/**
+ * Masks the current maskcolor with rounded corners similar to {@link RoundedRectangle}
+ */
+export class RadiusEffect extends ShaderEffect {
+    static z$__type__Props;
+    name = 'radius';
+    static getEffectKey() {
+        return `radius`;
+    }
+    static uniforms = {
+        radius: {
+            value: 0,
+            method: 'uniform4fv',
+            type: 'vec4',
+            updateOnBind: true,
+            validator: validateArrayLength4,
+            updateProgramValue: updateWebSafeRadius,
+        },
+    };
+    static methods = {
+        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 resolveDefaults(props) {
+        return {
+            radius: props.radius ?? 10,
+        };
+    }
+    static onShaderMask = `
+  vec2 halfDimensions = u_dimensions * 0.5;
+  vec2 p = v_nodeCoordinate.xy * u_dimensions - halfDimensions;
+  vec4 r = radius;
+  r.xy = (p.x > 0.0) ? r.yz : r.xw;
+  float cornerRadius = (p.y > 0.0) ? r.y : r.x;
+  return $boxDist(p, halfDimensions, cornerRadius);
+  `;
+    static onEffectMask = `
+  return mix(vec4(0.0), maskColor, $fillMask(shaderMask));
+  `;
+}
+//# sourceMappingURL=RadiusEffect.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadiusEffect.js","sourceRoot":"","sources":["../../../../../../../src/core/renderers/webgl/shaders/effects/RadiusEffect.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAC7E,OAAO,EACL,YAAY,GAGb,MAAM,mBAAmB,CAAC;AA6B3B;;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,QAAQ,GAAyB;QAC/C,MAAM,EAAE;YACN,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,YAAY;YACpB,IAAI,EAAE,MAAM;YACZ,YAAY,EAAE,IAAI;YAClB,SAAS,EAAE,oBAAoB;YAC/B,kBAAkB,EAAE,mBAAmB;SACxC;KACF,CAAC;IAEF,MAAM,CAAU,OAAO,GAA2B;QAChD,QAAQ,EAAE;;;;KAIT;QACD,OAAO,EAAE;;;;;;KAMR;KACF,CAAC;IAEF,MAAM,CAAU,eAAe,CAC7B,KAAwB;QAExB,OAAO;YACL,MAAM,EAAE,KAAK,CAAC,MAAM,IAAI,EAAE;SAC3B,CAAC;IACJ,CAAC;IAED,MAAM,CAAU,YAAY,GAAG;;;;;;;GAO9B,CAAC;IAEF,MAAM,CAAU,YAAY,GAAG;;GAE9B,CAAC"}

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

@@ -0,0 +1,115 @@
+import type { EffectMap } from '../../../../CoreShaderManager.js';
+import type { ExtractProps } from '../../../../CoreTextureManager.js';
+import type { AlphaShaderProp, DimensionsShaderProp } from '../../WebGlCoreShader.js';
+import type { UniformInfo, UniformMethodMap } from '../../internal/ShaderUtils.js';
+export interface BaseEffectDesc {
+    name?: string;
+    type: keyof EffectMap;
+    props: Record<string, any>;
+}
+export interface EffectDesc<T extends {
+    name?: string;
+    type: keyof EffectMap;
+} = {
+    name?: string;
+    type: keyof EffectMap;
+}> extends BaseEffectDesc {
+    name?: T['name'];
+    type: T['type'];
+    props: ExtractProps<EffectMap[T['type']]>;
+}
+/**
+ * Allows the `keyof EffectMap` to be mapped over and form an discriminated
+ * union of all the EffectDescs structures individually.
+ *
+ * @remarks
+ * When used like the following:
+ * ```
+ * MapEffectDescs<keyof EffectMap>[]
+ * ```
+ * The resultant type will be a discriminated union like so:
+ * ```
+ * (
+ *   {
+ *     name: 'effect1',
+ *     type: 'radius',
+ *     props?: {
+ *       radius?: number | number[];
+ *     }
+ *   } |
+ *   {
+ *     name: 'effect2',
+ *     type: 'border',
+ *     props?: {
+ *       width?: number;
+ *       color?: number;
+ *     }
+ *   } |
+ *   // ...
+ * )[]
+ * ```
+ * Which means TypeScript will now base its type checking on the `type` field
+ * and will know exactly what the `props` field should be based on the `type`
+ * field.
+ */
+type MapEffectDescs<T extends keyof EffectMap> = T extends keyof EffectMap ? EffectDesc<{
+    type: T;
+    name: string;
+}> : never;
+export type EffectDescUnion = MapEffectDescs<keyof EffectMap>;
+export interface ShaderEffectUniform {
+    value: number | number[] | boolean | string;
+    type: string;
+    method: keyof UniformMethodMap;
+    name?: string;
+    size?: (value: Record<string, unknown>) => number;
+    updateOnBind?: boolean;
+    updateProgramValue?: (programValues: ShaderEffectValueMap, shaderProps?: Record<string, unknown>) => void;
+    validator?: (value: any, props: Record<string, unknown>) => number | number[] | number[][];
+}
+export interface ShaderEffectValueMap extends DimensionsShaderProp, AlphaShaderProp {
+    value: ShaderEffectUniform['value'];
+    programValue: number | Float32Array | undefined;
+    method: keyof UniformMethodMap;
+    setUniformValue?: () => void | null;
+    hasValidator: boolean;
+    hasProgramValueUpdater: boolean;
+    updateOnBind: boolean;
+    validatedValue?: number | number[];
+}
+export interface ShaderEffectUniforms {
+    [key: string]: ShaderEffectUniform;
+}
+export interface DefaultEffectProps {
+    [key: string]: unknown;
+}
+export interface ShaderEffectOptions {
+    ref: string;
+    target: string;
+    props?: Record<string, unknown>;
+    uniforms?: ShaderEffectUniforms;
+    methods?: Record<string, string>;
+    onShaderMask?: ((value: Record<string, unknown>) => string) | string;
+    onColorize?: ((value: Record<string, unknown>) => string) | string;
+    onEffectMask?: ((value: Record<string, unknown>) => string) | string;
+}
+export declare abstract class ShaderEffect {
+    readonly priority = 1;
+    readonly name: string;
+    ref: string;
+    target: string;
+    passParameters: string;
+    declaredUniforms: string;
+    uniformInfo: Record<string, UniformInfo>;
+    static uniforms: ShaderEffectUniforms;
+    static methods?: Record<string, string>;
+    static onShaderMask?: ((value: Record<string, unknown>) => string) | string;
+    static onColorize?: ((value: Record<string, unknown>) => string) | string;
+    static onEffectMask?: ((value: Record<string, unknown>) => string) | string;
+    static getEffectKey(props: Record<string, unknown>): string;
+    static getMethodParameters(uniforms: ShaderEffectUniforms, props: Record<string, unknown>): string;
+    constructor(options: ShaderEffectOptions);
+    static resolveDefaults(props: Record<string, unknown>): Record<string, unknown>;
+    static makeEffectKey(props: Record<string, unknown>): string | false;
+}
+export {};

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

@@ -0,0 +1,61 @@
+export class ShaderEffect {
+    priority = 1;
+    name = '';
+    ref;
+    target;
+    passParameters = '';
+    declaredUniforms = '';
+    uniformInfo = {};
+    static uniforms = {};
+    static methods;
+    static onShaderMask;
+    static onColorize;
+    static onEffectMask;
+    static getEffectKey(props) {
+        return '';
+    }
+    static getMethodParameters(uniforms, props) {
+        const res = [];
+        for (const u in uniforms) {
+            const uni = uniforms[u];
+            let define = '';
+            if (uni.size) {
+                define = `[${uni.size(props)}]`;
+            }
+            res.push(`${uni.type} ${u}${define}`);
+        }
+        return res.join(',');
+    }
+    constructor(options) {
+        const { ref, target, props = {} } = options;
+        this.ref = ref;
+        this.target = target;
+        const uniformInfo = {};
+        const passParameters = [];
+        let declaredUniforms = '';
+        const uniforms = this.constructor.uniforms || {};
+        for (const u in uniforms) {
+            const unif = uniforms[u];
+            const uniType = unif.type;
+            //make unique uniform name
+            const uniformName = `${ref}_${u}`;
+            let define = '';
+            if (unif.size) {
+                define = `[${unif.size(props)}]`;
+            }
+            passParameters.push(uniformName);
+            declaredUniforms += `uniform ${uniType} ${uniformName}${define};`;
+            uniformInfo[u] = { name: uniformName, uniform: uniforms[u].method };
+        }
+        this.passParameters = passParameters.join(',');
+        this.declaredUniforms = declaredUniforms;
+        this.uniformInfo = uniformInfo;
+    }
+    static resolveDefaults(props) {
+        return {};
+    }
+    static makeEffectKey(props) {
+        return false;
+    }
+}
+//# sourceMappingURL=ShaderEffect.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ShaderEffect.js","sourceRoot":"","sources":["../../../../../../../src/core/renderers/webgl/shaders/effects/ShaderEffect.ts"],"names":[],"mappings":"AAsHA,MAAM,OAAgB,YAAY;IACvB,QAAQ,GAAG,CAAC,CAAC;IACb,IAAI,GAAW,EAAE,CAAC;IAE3B,GAAG,CAAS;IACZ,MAAM,CAAS;IAEf,cAAc,GAAG,EAAE,CAAC;IACpB,gBAAgB,GAAG,EAAE,CAAC;IACtB,WAAW,GAAgC,EAAE,CAAC;IAE9C,MAAM,CAAC,QAAQ,GAAyB,EAAE,CAAC;IAC3C,MAAM,CAAC,OAAO,CAA0B;IAExC,MAAM,CAAC,YAAY,CAAyD;IAE5E,MAAM,CAAC,UAAU,CAAyD;IAC1E,MAAM,CAAC,YAAY,CAAyD;IAE5E,MAAM,CAAC,YAAY,CAAC,KAA8B;QAChD,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,MAAM,CAAC,mBAAmB,CACxB,QAA8B,EAC9B,KAA8B;QAE9B,MAAM,GAAG,GAAa,EAAE,CAAC;QACzB,KAAK,MAAM,CAAC,IAAI,QAAQ,EAAE,CAAC;YACzB,MAAM,GAAG,GAAG,QAAQ,CAAC,CAAC,CAAE,CAAC;YACzB,IAAI,MAAM,GAAG,EAAE,CAAC;YAChB,IAAI,GAAG,CAAC,IAAI,EAAE,CAAC;gBACb,MAAM,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;YAClC,CAAC;YACD,GAAG,CAAC,IAAI,CAAC,GAAG,GAAG,CAAC,IAAI,IAAI,CAAC,GAAG,MAAM,EAAE,CAAC,CAAC;QACxC,CAAC;QACD,OAAO,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACvB,CAAC;IAED,YAAY,OAA4B;QACtC,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,GAAG,EAAE,EAAE,GAAG,OAAO,CAAC;QAC5C,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;QACf,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QAErB,MAAM,WAAW,GAAgC,EAAE,CAAC;QACpD,MAAM,cAAc,GAAa,EAAE,CAAC;QACpC,IAAI,gBAAgB,GAAG,EAAE,CAAC;QAC1B,MAAM,QAAQ,GAAI,IAAI,CAAC,WAAmC,CAAC,QAAQ,IAAI,EAAE,CAAC;QAE1E,KAAK,MAAM,CAAC,IAAI,QAAQ,EAAE,CAAC;YACzB,MAAM,IAAI,GAAG,QAAQ,CAAC,CAAC,CAAE,CAAC;YAC1B,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC;YAC1B,0BAA0B;YAC1B,MAAM,WAAW,GAAG,GAAG,GAAG,IAAI,CAAC,EAAE,CAAC;YAClC,IAAI,MAAM,GAAG,EAAE,CAAC;YAChB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;gBACd,MAAM,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;YACnC,CAAC;YACD,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YACjC,gBAAgB,IAAI,WAAW,OAAO,IAAI,WAAW,GAAG,MAAM,GAAG,CAAC;YAClE,WAAW,CAAC,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAE,CAAC,MAAM,EAAE,CAAC;QACvE,CAAC;QAED,IAAI,CAAC,cAAc,GAAG,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC/C,IAAI,CAAC,gBAAgB,GAAG,gBAAgB,CAAC;QACzC,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC;IACjC,CAAC;IAED,MAAM,CAAC,eAAe,CACpB,KAA8B;QAE9B,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,MAAM,CAAC,aAAa,CAAC,KAA8B;QACjD,OAAO,KAAK,CAAC;IACf,CAAC"}

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

@@ -53,15 +53,15 @@ export const Default = {
     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);
+      vec2 normalized = a_position * u_pixelRatio / u_resolution;
+      vec2 zero_two = normalized * 2.0;
+      vec2 clip_space = zero_two - 1.0;
 
       v_color = a_color;
-      v_nodeCoords = a_nodeCoords;
       v_textureCoords = a_textureCoords;
+      v_nodeCoords = a_nodeCoords;
 
-      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;
+      gl_Position = vec4(clip_space * vec2(1.0, -1.0), 0, 1);
     }
   `,
     fragment: `
@@ -78,8 +78,7 @@ export const Default = {
     varying vec2 v_textureCoords;
 
     void main() {
-      vec4 color = texture2D(u_texture, v_textureCoords);
-      gl_FragColor = vec4(v_color) * texture2D(u_texture, v_textureCoords);
+      gl_FragColor = v_color * texture2D(u_texture, v_textureCoords);
     }
   `,
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Default.js","sourceRoot":"","sources":["../../../../../src/core/shaders/webgl/Default.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAIH;;;;;;;;;;;;;;;;;GAiBG;AAEH,MAAM,CAAC,MAAM,OAAO,GAAoB;IACtC,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BP;IACD,QAAQ,EAAE;;;;;;;;;;;;;;;;;GAiBT;CACF,CAAC"}
+{"version":3,"file":"Default.js","sourceRoot":"","sources":["../../../../../src/core/shaders/webgl/Default.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAIH;;;;;;;;;;;;;;;;;GAiBG;AAEH,MAAM,CAAC,MAAM,OAAO,GAAoB;IACtC,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BP;IACD,QAAQ,EAAE;;;;;;;;;;;;;;;;GAgBT;CACF,CAAC"}

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

@@ -59,8 +59,10 @@ export const Sdf = {
     uniform mat3 u_transform;
     uniform float u_pixelRatio;
     uniform float u_size;
+    uniform float u_distanceRange;
 
     varying vec2 v_texcoord;
+    varying float v_scaledDistRange;
 
     void main() {
       vec2 scrolledPosition = a_position * u_size;
@@ -71,7 +73,7 @@ export const Sdf = {
 
       gl_Position = vec4(screenSpace, 0.0, 1.0);
       v_texcoord = a_textureCoords;
-
+      v_scaledDistRange = u_distanceRange * u_pixelRatio;
     }
   `,
     fragment: `
@@ -82,20 +84,17 @@ export const Sdf = {
     # 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;
+    varying float v_scaledDistRange;
 
     float median(float r, float g, float b) {
-        return max(min(r, g), min(max(r, g), b));
+        return clamp(b, min(r, g), max(r, g));
     }
 
     void main() {
         vec3 sample = texture2D(u_texture, v_texcoord).rgb;
-        float scaledDistRange = u_distanceRange * u_pixelRatio;
-        float sigDist = scaledDistRange * (median(sample.r, sample.g, sample.b) - 0.5);
+        float sigDist = v_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.

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

@@ -1 +1 @@
-{"version":3,"file":"SdfShader.js","sourceRoot":"","sources":["../../../../../src/core/shaders/webgl/SdfShader.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAAE,2BAA2B,EAAE,MAAM,oBAAoB,CAAC;AAGjE,MAAM,mBAAmB,GAAG,IAAI,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AAgB1E;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,GAAG,GAAoC;IAClD,KAAK,EAAE;QACL,SAAS,EAAE,mBAAmB;QAC9B,KAAK,EAAE,UAAU;QACjB,IAAI,EAAE,EAAE;QACR,aAAa,EAAE,GAAG;KACnB;IACD,SAAS,CAAC,KAAK;QACb,IAAI,CAAC,gBAAgB,CAAC,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;QACtD,IAAI,CAAC,UAAU,CAAC,SAAS,EAAE,2BAA2B,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;QACrE,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;QACrC,IAAI,CAAC,SAAS,CAAC,iBAAiB,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC;IACzD,CAAC;IACD,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BP;IACD,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BT;CACF,CAAC"}
+{"version":3,"file":"SdfShader.js","sourceRoot":"","sources":["../../../../../src/core/shaders/webgl/SdfShader.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAAE,2BAA2B,EAAE,MAAM,oBAAoB,CAAC;AAGjE,MAAM,mBAAmB,GAAG,IAAI,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AAgB1E;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,GAAG,GAAoC;IAClD,KAAK,EAAE;QACL,SAAS,EAAE,mBAAmB;QAC9B,KAAK,EAAE,UAAU;QACjB,IAAI,EAAE,EAAE;QACR,aAAa,EAAE,GAAG;KACnB;IACD,SAAS,CAAC,KAAK;QACb,IAAI,CAAC,gBAAgB,CAAC,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;QACtD,IAAI,CAAC,UAAU,CAAC,SAAS,EAAE,2BAA2B,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;QACrE,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;QACrC,IAAI,CAAC,SAAS,CAAC,iBAAiB,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC;IACzD,CAAC;IACD,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BP;IACD,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;GAyBT;CACF,CAAC"}

package/dist/src/core/text-rendering/TextRenderingUtils.d.ts

@@ -0,0 +1,12 @@
+import type { NormalizedFontMetrics } from './font-face-types/TrFontFace.js';
+/**
+ * Calculate the default line height given normalized font metrics
+ *
+ * @remarks
+ * This method may be used for both the WebTrFontFace and SdfTrFontFace font types.
+ *
+ * @param metrics
+ * @param fontSize
+ * @returns
+ */
+export declare function calcDefaultLineHeight(metrics: NormalizedFontMetrics, fontSize: number): number;

package/dist/src/core/text-rendering/TextRenderingUtils.js

@@ -0,0 +1,14 @@
+/**
+ * Calculate the default line height given normalized font metrics
+ *
+ * @remarks
+ * This method may be used for both the WebTrFontFace and SdfTrFontFace font types.
+ *
+ * @param metrics
+ * @param fontSize
+ * @returns
+ */
+export function calcDefaultLineHeight(metrics, fontSize) {
+    return fontSize * (metrics.ascender - metrics.descender + metrics.lineGap);
+}
+//# sourceMappingURL=TextRenderingUtils.js.map

package/dist/src/core/text-rendering/TextRenderingUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextRenderingUtils.js","sourceRoot":"","sources":["../../../../src/core/text-rendering/TextRenderingUtils.ts"],"names":[],"mappings":"AAoBA;;;;;;;;;GASG;AACH,MAAM,UAAU,qBAAqB,CACnC,OAA8B,EAC9B,QAAgB;IAEhB,OAAO,QAAQ,GAAG,CAAC,OAAO,CAAC,QAAQ,GAAG,OAAO,CAAC,SAAS,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;AAC7E,CAAC"}

package/dist/src/core/text-rendering/TextTextureRendererUtils.d.ts

@@ -0,0 +1,72 @@
+import type { NormalizedFontMetrics } from './font-face-types/TrFontFace.js';
+import type { WebTrFontFace } from './font-face-types/WebTrFontFace.js';
+/**
+ * Returns CSS font setting string for use in canvas context.
+ *
+ * @param fontFace
+ * @param fontStyle
+ * @param fontSize
+ * @param precision
+ * @param defaultFontFace
+ * @returns
+ */
+export declare function getFontSetting(fontFace: string | string[], fontStyle: string, fontSize: number, precision: number, defaultFontFace: string): string;
+/**
+ * Returns true if the given character is a zero-width space.
+ *
+ * @param space
+ */
+export declare function isZeroWidthSpace(space: string): boolean;
+/**
+ * Returns true if the given character is a zero-width space or a regular space.
+ *
+ * @param space
+ */
+export declare function isSpace(space: string): boolean;
+/**
+ * Converts a string into an array of tokens and the words between them.
+ *
+ * @param tokenRegex
+ * @param text
+ */
+export declare function tokenizeString(tokenRegex: RegExp, text: string): string[];
+/**
+ * Measure the width of a string accounting for letter spacing.
+ *
+ * @param context
+ * @param word
+ * @param space
+ */
+export declare function measureText(context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D, word: string, space?: number): number;
+/**
+ * Get the font metrics for a font face.
+ *
+ * @remarks
+ * This function will attempt to grab the explicitly defined metrics from the
+ * font face first. If the font face does not have metrics defined, it will
+ * attempt to calculate the metrics using the browser's measureText method.
+ *
+ * If the browser does not support the font metrics API, it will use some
+ * default values.
+ *
+ * @param context
+ * @param fontFace
+ * @param fontSize
+ * @returns
+ */
+export declare function getWebFontMetrics(context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D, fontFace: WebTrFontFace, fontSize: number): NormalizedFontMetrics;
+export interface WrapTextResult {
+    l: string[];
+    n: number[];
+}
+/**
+ * Applies newlines to a string to have it optimally fit into the horizontal
+ * bounds set by the Text object's wordWrapWidth property.
+ *
+ * @param context
+ * @param text
+ * @param wordWrapWidth
+ * @param letterSpacing
+ * @param indent
+ */
+export declare function wrapText(context: CanvasRenderingContext2D, text: string, wordWrapWidth: number, letterSpacing: number, indent: number): WrapTextResult;