@lightningjs/renderer 3.0.0-beta14 → 3.0.0-beta16

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/canvas/RoundedWithBorder.js

@@ -37,7 +37,7 @@ export const RoundedWithBorder = {
     },
     render(ctx, quad, renderContext) {
         const computed = this.computed;
-        roundedRectWithBorder(ctx, quad.tx, quad.ty, quad.width, quad.height, computed.radius, this.props['border-width'], computed.borderRadius, computed.borderColor, computed.borderAsym, renderContext);
+        roundedRectWithBorder(ctx, quad.tx, quad.ty, quad.width, quad.height, computed.radius, this.props['border-w'], computed.borderRadius, computed.borderColor, computed.borderAsym, renderContext);
     },
 };
 //# sourceMappingURL=RoundedWithBorder.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RoundedWithBorder.js","sourceRoot":"","sources":["../../../../../src/core/shaders/canvas/RoundedWithBorder.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,uBAAuB,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAG7E,OAAO,EACL,yBAAyB,GAE1B,MAAM,2CAA2C,CAAC;AAGnD,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAI1D,MAAM,CAAC,MAAM,iBAAiB,GAG1B;IACF,KAAK,EAAE,yBAAyB,CAAC,KAAK;IACtC,cAAc,EAAE,IAAI;IACpB,MAAM,CAAC,IAAI;QACT,MAAM,KAAK,GAAG,IAAI,CAAC,KAAM,CAAC;QAC1B,MAAM,MAAM,GAAG,uBAAuB,CACpC,KAAK,CAAC,MAAc,EACpB,IAAI,CAAC,CAAC,EACN,IAAI,CAAC,CAAC,CACP,CAAC;QACF,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,MAAM,CAAC;QAC9B,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC;QACtE,IAAI,CAAC,QAAQ,CAAC,UAAU,GAAG,CAAC,cAAc,CAAC,KAAK,CAAC,UAAU,CAAa,CAAC,CAAC;QAC1E,qDAAqD;QACrD,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,KAAK,CAAC,UAAU,CAAS,CAAC;QAC/C,IAAI,CAAC,QAAQ,CAAC,YAAY,GAAG;YAC3B,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,GAAG,CAAC;YAC/C,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,GAAG,CAAC;YAC/C,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,GAAG,CAAC;YAC/C,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,GAAG,CAAC;SAChD,CAAC;IACJ,CAAC;IACD,MAAM,CAAC,GAAG,EAAE,IAAI,EAAE,aAAa;QAC7B,MAAM,QAAQ,GAAG,IAAI,CAAC,QAA0B,CAAC;QACjD,qBAAqB,CACnB,GAAG,EACH,IAAI,CAAC,EAAE,EACP,IAAI,CAAC,EAAE,EACP,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,MAAM,EACX,QAAQ,CAAC,MAAM,EACf,IAAI,CAAC,KAAM,CAAC,cAAc,CAAS,EACnC,QAAQ,CAAC,YAAY,EACrB,QAAQ,CAAC,WAAW,EACpB,QAAQ,CAAC,UAAU,EACnB,aAAa,CACd,CAAC;IACJ,CAAC;CACF,CAAC"}
+{"version":3,"file":"RoundedWithBorder.js","sourceRoot":"","sources":["../../../../../src/core/shaders/canvas/RoundedWithBorder.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,uBAAuB,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAG7E,OAAO,EACL,yBAAyB,GAE1B,MAAM,2CAA2C,CAAC;AAGnD,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAI1D,MAAM,CAAC,MAAM,iBAAiB,GAG1B;IACF,KAAK,EAAE,yBAAyB,CAAC,KAAK;IACtC,cAAc,EAAE,IAAI;IACpB,MAAM,CAAC,IAAI;QACT,MAAM,KAAK,GAAG,IAAI,CAAC,KAAM,CAAC;QAC1B,MAAM,MAAM,GAAG,uBAAuB,CACpC,KAAK,CAAC,MAAc,EACpB,IAAI,CAAC,CAAC,EACN,IAAI,CAAC,CAAC,CACP,CAAC;QACF,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,MAAM,CAAC;QAC9B,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC;QACtE,IAAI,CAAC,QAAQ,CAAC,UAAU,GAAG,CAAC,cAAc,CAAC,KAAK,CAAC,UAAU,CAAa,CAAC,CAAC;QAC1E,qDAAqD;QACrD,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,KAAK,CAAC,UAAU,CAAS,CAAC;QAC/C,IAAI,CAAC,QAAQ,CAAC,YAAY,GAAG;YAC3B,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,GAAG,CAAC;YAC/C,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,GAAG,CAAC;YAC/C,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,GAAG,CAAC;YAC/C,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,GAAG,CAAC;SAChD,CAAC;IACJ,CAAC;IACD,MAAM,CAAC,GAAG,EAAE,IAAI,EAAE,aAAa;QAC7B,MAAM,QAAQ,GAAG,IAAI,CAAC,QAA0B,CAAC;QACjD,qBAAqB,CACnB,GAAG,EACH,IAAI,CAAC,EAAE,EACP,IAAI,CAAC,EAAE,EACP,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,MAAM,EACX,QAAQ,CAAC,MAAM,EACf,IAAI,CAAC,KAAM,CAAC,UAAU,CAAS,EAC/B,QAAQ,CAAC,YAAY,EACrB,QAAQ,CAAC,WAAW,EACpB,QAAQ,CAAC,UAAU,EACnB,aAAa,CACd,CAAC;IACJ,CAAC;CACF,CAAC"}

package/dist/src/core/shaders/canvas/RoundedWithBorderAndShadow.js

@@ -35,7 +35,7 @@ export const RoundedWithBorderAndShadow = {
         const { tx, ty, width, height } = quad;
         const computed = this.computed;
         render.shadow(ctx, tx, ty, height, width, computed.shadowColor, this.props['shadow-projection'], computed.shadowRadius, this.stage.pixelRatio);
-        render.roundedRectWithBorder(ctx, quad.tx, quad.ty, quad.width, quad.height, computed.radius, this.props['border-width'], computed.borderRadius, computed.borderColor, computed.borderAsym, renderContext);
+        render.roundedRectWithBorder(ctx, quad.tx, quad.ty, quad.width, quad.height, computed.radius, this.props['border-w'], computed.borderRadius, computed.borderColor, computed.borderAsym, renderContext);
     },
 };
 //# sourceMappingURL=RoundedWithBorderAndShadow.js.map

package/dist/src/core/shaders/canvas/RoundedWithBorderAndShadow.js.map

@@ -1 +1 @@
-{"version":3,"file":"RoundedWithBorderAndShadow.js","sourceRoot":"","sources":["../../../../../src/core/shaders/canvas/RoundedWithBorderAndShadow.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,uBAAuB,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAG7E,OAAO,EACL,kCAAkC,GAEnC,MAAM,oDAAoD,CAAC;AAI5D,OAAO,KAAK,MAAM,MAAM,mBAAmB,CAAC;AAM5C,MAAM,CAAC,MAAM,0BAA0B,GAGnC;IACF,KAAK,EAAE,kCAAkC,CAAC,KAAK;IAC/C,cAAc,EAAE,IAAI;IACpB,MAAM,CAAC,IAAI;QACT,MAAM,KAAK,GAAG,IAAI,CAAC,KAAM,CAAC;QAC1B,MAAM,MAAM,GAAG,uBAAuB,CACpC,KAAK,CAAC,MAAc,EACpB,IAAI,CAAC,CAAC,EACN,IAAI,CAAC,CAAC,CACP,CAAC;QACF,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,MAAM,CAAC;QAC9B,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC;QACtE,IAAI,CAAC,QAAQ,CAAC,UAAU,GAAG,CAAC,cAAc,CAAC,KAAK,CAAC,UAAU,CAAa,CAAC,CAAC;QAC1E,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAS,CAAC;QAC9C,IAAI,CAAC,QAAQ,CAAC,YAAY,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CACvD,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,GAAG,WAAW,CAAC,KAAK,CAAE,GAAG,GAAG,CAAC,CACvC,CAAC;QAEV,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC;QACtE,IAAI,CAAC,QAAQ,CAAC,YAAY,GAAG,MAAM,CAAC,GAAG,CACrC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,GAAG,KAAK,CAAC,aAAa,CAAC,CAChC,CAAC;IACZ,CAAC;IACD,MAAM,CAAC,GAAG,EAAE,IAAI,EAAE,aAAa;QAC7B,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;QACvC,MAAM,QAAQ,GAAG,IAAI,CAAC,QAA0B,CAAC;QACjD,MAAM,CAAC,MAAM,CACX,GAAG,EACH,EAAE,EACF,EAAE,EACF,MAAM,EACN,KAAK,EACL,QAAQ,CAAC,WAAW,EACpB,IAAI,CAAC,KAAM,CAAC,mBAAmB,CAAC,EAChC,QAAQ,CAAC,YAAY,EACrB,IAAI,CAAC,KAAK,CAAC,UAAU,CACtB,CAAC;QACF,MAAM,CAAC,qBAAqB,CAC1B,GAAG,EACH,IAAI,CAAC,EAAE,EACP,IAAI,CAAC,EAAE,EACP,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,MAAM,EACX,QAAQ,CAAC,MAAM,EACf,IAAI,CAAC,KAAM,CAAC,cAAc,CAAS,EACnC,QAAQ,CAAC,YAAY,EACrB,QAAQ,CAAC,WAAW,EACpB,QAAQ,CAAC,UAAU,EACnB,aAAa,CACd,CAAC;IACJ,CAAC;CACF,CAAC"}
+{"version":3,"file":"RoundedWithBorderAndShadow.js","sourceRoot":"","sources":["../../../../../src/core/shaders/canvas/RoundedWithBorderAndShadow.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,uBAAuB,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAG7E,OAAO,EACL,kCAAkC,GAEnC,MAAM,oDAAoD,CAAC;AAI5D,OAAO,KAAK,MAAM,MAAM,mBAAmB,CAAC;AAM5C,MAAM,CAAC,MAAM,0BAA0B,GAGnC;IACF,KAAK,EAAE,kCAAkC,CAAC,KAAK;IAC/C,cAAc,EAAE,IAAI;IACpB,MAAM,CAAC,IAAI;QACT,MAAM,KAAK,GAAG,IAAI,CAAC,KAAM,CAAC;QAC1B,MAAM,MAAM,GAAG,uBAAuB,CACpC,KAAK,CAAC,MAAc,EACpB,IAAI,CAAC,CAAC,EACN,IAAI,CAAC,CAAC,CACP,CAAC;QACF,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,MAAM,CAAC;QAC9B,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC;QACtE,IAAI,CAAC,QAAQ,CAAC,UAAU,GAAG,CAAC,cAAc,CAAC,KAAK,CAAC,UAAU,CAAa,CAAC,CAAC;QAC1E,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAS,CAAC;QAC9C,IAAI,CAAC,QAAQ,CAAC,YAAY,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CACvD,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,GAAG,WAAW,CAAC,KAAK,CAAE,GAAG,GAAG,CAAC,CACvC,CAAC;QAEV,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC;QACtE,IAAI,CAAC,QAAQ,CAAC,YAAY,GAAG,MAAM,CAAC,GAAG,CACrC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,GAAG,KAAK,CAAC,aAAa,CAAC,CAChC,CAAC;IACZ,CAAC;IACD,MAAM,CAAC,GAAG,EAAE,IAAI,EAAE,aAAa;QAC7B,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;QACvC,MAAM,QAAQ,GAAG,IAAI,CAAC,QAA0B,CAAC;QACjD,MAAM,CAAC,MAAM,CACX,GAAG,EACH,EAAE,EACF,EAAE,EACF,MAAM,EACN,KAAK,EACL,QAAQ,CAAC,WAAW,EACpB,IAAI,CAAC,KAAM,CAAC,mBAAmB,CAAC,EAChC,QAAQ,CAAC,YAAY,EACrB,IAAI,CAAC,KAAK,CAAC,UAAU,CACtB,CAAC;QACF,MAAM,CAAC,qBAAqB,CAC1B,GAAG,EACH,IAAI,CAAC,EAAE,EACP,IAAI,CAAC,EAAE,EACP,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,MAAM,EACX,QAAQ,CAAC,MAAM,EACf,IAAI,CAAC,KAAM,CAAC,UAAU,CAAS,EAC/B,QAAQ,CAAC,YAAY,EACrB,QAAQ,CAAC,WAAW,EACpB,QAAQ,CAAC,UAAU,EACnB,aAAa,CACd,CAAC;IACJ,CAAC;CACF,CAAC"}

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

@@ -42,6 +42,8 @@ export const LinearGradient = {
     # endif
 
     #define PI 3.14159265359
+    #define MAX_STOPS ${props.colors.length}
+    #define LAST_STOP ${props.colors.length - 1}
 
     uniform float u_alpha;
     uniform vec2 u_dimensions;
@@ -49,8 +51,8 @@ export const LinearGradient = {
     uniform sampler2D u_texture;
 
     uniform float u_angle;
-    uniform float u_stops[${props.stops.length}];
-    uniform vec4 u_colors[${props.colors.length}];
+    uniform float u_stops[MAX_STOPS];
+    uniform vec4 u_colors[MAX_STOPS];
 
     varying vec4 v_color;
     varying vec2 v_textureCoords;
@@ -59,6 +61,27 @@ export const LinearGradient = {
       return d * vec2(cos(angle), sin(angle)) + (u_dimensions * 0.5);
     }
 
+    vec4 getGradientColor(float dist) {
+      dist = clamp(dist, 0.0, 1.0);
+
+      if(dist <= u_stops[0]) {
+        return u_colors[0];
+      }
+
+      if(dist >= u_stops[LAST_STOP]) {
+        return u_colors[LAST_STOP];
+      }
+
+      for(int i = 0; i < LAST_STOP; i++) {
+        float left = u_stops[i];
+        float right = u_stops[i + 1];
+        if(dist >= left && dist <= right) {
+          float lDist = smoothstep(left, right, dist);
+          return mix(u_colors[i], u_colors[i + 1], lDist);
+        }
+      }
+    }
+
     void main() {
       vec4 color = texture2D(u_texture, v_textureCoords) * v_color;
       float a = u_angle;
@@ -67,7 +90,7 @@ export const LinearGradient = {
       vec2 t = calcPoint(lineDist * 0.5, a + PI);
       vec2 gradVec = t - f;
       float dist = dot(v_textureCoords.xy * u_dimensions - f, gradVec) / dot(gradVec, gradVec);
-      ${genGradientColors(props.stops.length)}
+      vec4 colorOut = getGradientColor(dist);
       gl_FragColor = mix(color, colorOut, clamp(colorOut.a, 0.0, 1.0));
     }
   `;

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

@@ -1 +1 @@
-{"version":3,"file":"LinearGradient.js","sourceRoot":"","sources":["../../../../../src/core/shaders/webgl/LinearGradient.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,2BAA2B,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EACL,sBAAsB,GAEvB,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AAIlF,MAAM,CAAC,MAAM,cAAc,GAAyC;IAClE,KAAK,EAAE,sBAAsB,CAAC,KAAK;IACnC,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAM,CAAC;QAC1B,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,KAAK,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,EAAE,GAAG,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC;QAC9D,IAAI,CAAC,UAAU,CAAC,SAAS,EAAE,IAAI,YAAY,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;QAC1D,MAAM,MAAM,GAAa,EAAE,CAAC;QAC5B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YAC7C,MAAM,IAAI,GAAG,2BAA2B,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAE,CAAC,CAAC;YAC3D,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;QAClD,CAAC;QACD,IAAI,CAAC,UAAU,CAAC,UAAU,EAAE,IAAI,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC;IACxD,CAAC;IACD,eAAe,CAAC,KAA0B;QACxC,OAAO,UAAU,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;IACzC,CAAC;IACD,QAAQ,CAAC,QAAuB,EAAE,KAA0B;QAC1D,OAAO;;;;;;;;;;;;;;;4BAeiB,KAAK,CAAC,KAAK,CAAC,MAAM;4BAClB,KAAK,CAAC,MAAM,CAAC,MAAM;;;;;;;;;;;;;;;;;QAiBvC,iBAAiB,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC;;;GAG1C,CAAC;IACF,CAAC;CACF,CAAC"}
+{"version":3,"file":"LinearGradient.js","sourceRoot":"","sources":["../../../../../src/core/shaders/webgl/LinearGradient.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,2BAA2B,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EACL,sBAAsB,GAEvB,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AAIlF,MAAM,CAAC,MAAM,cAAc,GAAyC;IAClE,KAAK,EAAE,sBAAsB,CAAC,KAAK;IACnC,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAM,CAAC;QAC1B,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,KAAK,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,EAAE,GAAG,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC;QAC9D,IAAI,CAAC,UAAU,CAAC,SAAS,EAAE,IAAI,YAAY,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;QAC1D,MAAM,MAAM,GAAa,EAAE,CAAC;QAC5B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YAC7C,MAAM,IAAI,GAAG,2BAA2B,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAE,CAAC,CAAC;YAC3D,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;QAClD,CAAC;QACD,IAAI,CAAC,UAAU,CAAC,UAAU,EAAE,IAAI,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC;IACxD,CAAC;IACD,eAAe,CAAC,KAA0B;QACxC,OAAO,UAAU,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;IACzC,CAAC;IACD,QAAQ,CAAC,QAAuB,EAAE,KAA0B;QAC1D,OAAO;;;;;;;;wBAQa,KAAK,CAAC,MAAM,CAAC,MAAM;wBACnB,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkD5C,CAAC;IACF,CAAC;CACF,CAAC"}

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

@@ -16,7 +16,6 @@
  */
 import { getNormalizedRgbaComponents } from '../../lib/utils.js';
 import { RadialGradientTemplate, } from '../templates/RadialGradientTemplate.js';
-import { genGradientColors } from '../../renderers/webgl/internal/ShaderUtils.js';
 export const RadialGradient = {
     props: RadialGradientTemplate.props,
     update(node) {
@@ -36,39 +35,62 @@ export const RadialGradient = {
     },
     fragment(renderer, props) {
         return `
-    # ifdef GL_FRAGMENT_PRECISION_HIGH
-    precision highp float;
-    # else
-    precision mediump float;
-    # endif
+      # ifdef GL_FRAGMENT_PRECISION_HIGH
+      precision highp float;
+      # else
+      precision mediump float;
+      # endif
 
-    #define PI 3.14159265359
+      #define MAX_STOPS ${props.colors.length}
+      #define LAST_STOP ${props.colors.length - 1}
 
-    uniform float u_alpha;
-    uniform vec2 u_dimensions;
+      uniform float u_alpha;
+      uniform vec2 u_dimensions;
 
-    uniform sampler2D u_texture;
+      uniform sampler2D u_texture;
 
-    uniform vec2 u_projection;
-    uniform vec2 u_size;
-    uniform float u_stops[${props.stops.length}];
-    uniform vec4 u_colors[${props.colors.length}];
+      uniform vec2 u_projection;
+      uniform vec2 u_size;
+      uniform float u_stops[MAX_STOPS];
+      uniform vec4 u_colors[MAX_STOPS];
 
-    varying vec4 v_color;
-    varying vec2 v_textureCoords;
+      varying vec4 v_color;
+      varying vec2 v_textureCoords;
 
-    vec2 calcPoint(float d, float angle) {
-      return d * vec2(cos(angle), sin(angle)) + (u_dimensions * 0.5);
-    }
+      vec2 calcPoint(float d, float angle) {
+        return d * vec2(cos(angle), sin(angle)) + (u_dimensions * 0.5);
+      }
 
-    void main() {
-      vec4 color = texture2D(u_texture, v_textureCoords) * v_color;
-      vec2 point = v_textureCoords.xy * u_dimensions;
-      float dist = length((point - u_projection) / u_size);
-      ${genGradientColors(props.stops.length)}
-      gl_FragColor = mix(color, colorOut, clamp(colorOut.a, 0.0, 1.0));
-    }
-  `;
+      vec4 getGradientColor(float dist) {
+        dist = clamp(dist, 0.0, 1.0);
+
+        if(dist <= u_stops[0]) {
+          return u_colors[0];
+        }
+
+        if(dist >= u_stops[LAST_STOP]) {
+          return u_colors[LAST_STOP];
+        }
+
+        for(int i = 0; i < LAST_STOP; i++) {
+          float left = u_stops[i];
+          float right = u_stops[i + 1];
+          if(dist >= left && dist <= right) {
+            float lDist = smoothstep(left, right, dist);
+            return mix(u_colors[i], u_colors[i + 1], lDist);
+          }
+        }
+      }
+
+      void main() {
+        vec4 color = texture2D(u_texture, v_textureCoords) * v_color;
+        vec2 point = v_textureCoords.xy * u_dimensions;
+        float dist = length((point - u_projection) / u_size);
+
+        vec4 colorOut = getGradientColor(dist);
+        gl_FragColor = mix(color, colorOut, clamp(colorOut.a, 0.0, 1.0));
+      }
+    `;
     },
 };
 //# sourceMappingURL=RadialGradient.js.map

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

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

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

@@ -4,7 +4,6 @@ import type { WebGlShaderType } from '../../renderers/webgl/WebGlShaderNode.js';
  */
 export interface SdfShaderProps {
     transform: Float32Array;
-    scrollY: number;
     /**
      * Color in RGBA format
      *
@@ -14,7 +13,6 @@ export interface SdfShaderProps {
     color: number;
     size: number;
     distanceRange: number;
-    debug: boolean;
 }
 /**
  * SdfShader supports multi-channel and single-channel signed distance field textures.

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

@@ -34,19 +34,15 @@ const IDENTITY_MATRIX_3x3 = new Float32Array([1, 0, 0, 0, 1, 0, 0, 0, 1]);
 export const Sdf = {
     props: {
         transform: IDENTITY_MATRIX_3x3,
-        scrollY: 0,
         color: 0xffffffff,
         size: 16,
         distanceRange: 1.0,
-        debug: false,
     },
     onSdfBind(props) {
         this.uniformMatrix3fv('u_transform', props.transform);
-        this.uniform1f('u_scrollY', props.scrollY);
         this.uniform4fa('u_color', getNormalizedRgbaComponents(props.color));
         this.uniform1f('u_size', props.size);
         this.uniform1f('u_distanceRange', props.distanceRange);
-        this.uniform1i('u_debug', props.debug ? 1 : 0);
     },
     vertex: `
     # ifdef GL_FRAGMENT_PRECISION_HIGH
@@ -61,14 +57,13 @@ export const Sdf = {
 
     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 scrolledPosition = a_position * u_size;
       vec2 transformedPosition = (u_transform * vec3(scrolledPosition, 1)).xy;
 
       // Calculate screen space with pixel ratio
@@ -99,10 +94,6 @@ export const Sdf = {
 
     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;

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;AAkB1E;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,GAAG,GAAoC;IAClD,KAAK,EAAE;QACL,SAAS,EAAE,mBAAmB;QAC9B,OAAO,EAAE,CAAC;QACV,KAAK,EAAE,UAAU;QACjB,IAAI,EAAE,EAAE;QACR,aAAa,EAAE,GAAG;QAClB,KAAK,EAAE,KAAK;KACb;IACD,SAAS,CAAC,KAAK;QACb,IAAI,CAAC,gBAAgB,CAAC,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;QACtD,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;QAC3C,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;QACvD,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACjD,CAAC;IACD,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BP;IACD,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCT;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BP;IACD,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BT;CACF,CAAC"}

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

@@ -0,0 +1,14 @@
+import { CoreFont, type CoreFontProps } from './CoreFont.js';
+import type { NormalizedFontMetrics, TextRenderer } from './TextRenderer.js';
+export type CanvasFontProps = CoreFontProps & {
+    url: string;
+};
+export declare class CanvasFont extends CoreFont {
+    private measureContext;
+    type: string;
+    url: string;
+    constructor(textRenderer: TextRenderer, props: CanvasFontProps, measureContext: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D);
+    load(): void;
+    measureText(text: string, letterSpacing: number): number;
+    getMetrics(fontSize: number): NormalizedFontMetrics;
+}

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

@@ -0,0 +1,111 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2025 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 { CoreFont, FontState } from './CoreFont.js';
+import { normalizeFontMetrics } from './TextLayoutEngine.js';
+import { hasZeroWidthSpace } from './Utils.js';
+export class CanvasFont extends CoreFont {
+    measureContext;
+    type = 'canvas';
+    url;
+    constructor(textRenderer, props, measureContext) {
+        super(textRenderer, props);
+        this.measureContext = measureContext;
+        this.url = props.url;
+        this.metrics = props.metrics;
+    }
+    load() {
+        if (this.state !== FontState.Created) {
+            return;
+        }
+        this.state = FontState.Loading;
+        const waitingNodes = this.waitingNodes;
+        new FontFace(this.family, `url(${this.url})`)
+            .load()
+            .then((loadedFont) => {
+            document.fonts.add(loadedFont);
+            this.onLoaded();
+        })
+            .catch((error) => {
+            this.state = FontState.Failed;
+            console.error(`Failed to load font: ${this.family}`, error);
+            this.emit('failed');
+            throw error;
+        });
+    }
+    measureText(text, letterSpacing) {
+        if (letterSpacing === 0) {
+            return this.measureContext.measureText(text).width;
+        }
+        if (hasZeroWidthSpace(text) === false) {
+            return (this.measureContext.measureText(text).width +
+                letterSpacing * text.length);
+        }
+        return text.split('').reduce((acc, char) => {
+            if (hasZeroWidthSpace(char) === true) {
+                return acc;
+            }
+            return acc + this.measureContext.measureText(char).width + letterSpacing;
+        }, 0);
+    }
+    getMetrics(fontSize) {
+        let m = this.normalizedMetrics[fontSize];
+        if (m !== undefined) {
+            return m;
+        }
+        let metrics = this.metrics;
+        if (metrics === undefined) {
+            metrics = calculateCanvasMetrics(this.family, fontSize, this.measureContext);
+        }
+        m = this.normalizedMetrics[fontSize] = normalizeFontMetrics(metrics, fontSize);
+        return m;
+    }
+}
+function calculateCanvasMetrics(fontFamily, fontSize, measureContext) {
+    // If the font face doesn't have metrics defined, we fallback to using the
+    // browser's measureText method to calculate take a best guess at the font
+    // actual font's metrics.
+    // - fontBoundingBox[Ascent|Descent] is the best estimate but only supported
+    //   in Chrome 87+ (2020), Firefox 116+ (2023), and Safari 11.1+ (2018).
+    //   - It is an estimate as it can vary between browsers.
+    // - actualBoundingBox[Ascent|Descent] is less accurate and supported in
+    //   Chrome 77+ (2019), Firefox 74+ (2020), and Safari 11.1+ (2018).
+    // - If neither are supported, we'll use some default values which will
+    //   get text on the screen but likely not be great.
+    // NOTE: It's been decided not to rely on fontBoundingBox[Ascent|Descent]
+    // as it's browser support is limited and it also tends to produce higher than
+    // expected values. It is instead HIGHLY RECOMMENDED that developers provide
+    // explicit metrics in the font face definition.
+    measureContext.font = `normal ${fontSize}px Unknown, ${fontFamily}`;
+    const metrics = measureContext.measureText('ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz');
+    console.warn(`Font metrics not provided for Canvas Web font ${fontFamily}. ` +
+        'Using fallback values. It is HIGHLY recommended you use the latest ' +
+        'version of the Lightning 3 `msdf-generator` tool to extract the default ' +
+        'metrics for the font and provide them in the Canvas Web font definition.');
+    const ascender = metrics.fontBoundingBoxAscent ?? metrics.actualBoundingBoxAscent ?? 0;
+    const descender = metrics.fontBoundingBoxDescent ?? metrics.actualBoundingBoxDescent ?? 0;
+    return {
+        ascender,
+        descender: -descender,
+        lineGap: (metrics.emHeightAscent ?? 0) +
+            (metrics.emHeightDescent ?? 0) -
+            (ascender + descender),
+        unitsPerEm: (metrics.emHeightAscent ?? 0) + (metrics.emHeightDescent ?? 0),
+    };
+}
+//# sourceMappingURL=CanvasFont.js.map

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

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

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

@@ -1,4 +1,4 @@
-import type { FontFamilyMap, FontLoadOptions, NormalizedFontMetrics } from './TextRenderer.js';
+import type { FontFamilyMap, FontLoadOptions, FontMetrics, NormalizedFontMetrics } from './TextRenderer.js';
 import type { Stage } from '../Stage.js';
 import type { CoreTextNode } from '../CoreTextNode.js';
 /**
@@ -16,7 +16,7 @@ export declare const getFontFamilies: () => FontFamilyMap;
 /**
  * Initialize the global font handler
  */
-export declare const init: (c?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D) => void;
+export declare const init: (c: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D, mc: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D) => void;
 export declare const type = "canvas";
 /**
  * Check if a font is already loaded by font family
@@ -38,4 +38,22 @@ export declare const waitingForFont: (fontFamily: string, node: CoreTextNode) =>
  */
 export declare const stopWaitingForFont: (fontFamily: string, node: CoreTextNode) => void;
 export declare const getFontMetrics: (fontFamily: string, fontSize: number) => NormalizedFontMetrics;
-export declare const setFontMetrics: (fontFamily: string, metrics: NormalizedFontMetrics) => void;
+export declare const processFontMetrics: (fontFamily: string, fontSize: number, metrics: FontMetrics) => NormalizedFontMetrics;
+export declare const measureText: (text: string, fontFamily: string, letterSpacing: 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 calculateFontMetrics(fontFamily: string, fontSize: number): FontMetrics;