@lightningjs/renderer 3.0.0-beta2 → 3.0.0-beta21

package/dist/src/core/shaders/templates/BorderTemplate.js

@@ -14,12 +14,12 @@
  *
  * SPDX-License-Identifier: Apache-2.0
  */
-import { validateArrayLength4 } from './shaderUtils.js';
+import { validateArrayLength4 } from '../utils.js';
 export function getBorderProps(prefix) {
     const pf = prefix && prefix.length > 0 ? `${prefix}-` : '';
-    const width = pf + 'width';
+    const w = pf + 'w';
     return {
-        [width]: {
+        [w]: {
             default: [0, 0, 0, 0],
             resolve(value) {
                 if (value !== undefined) {
@@ -29,40 +29,60 @@ export function getBorderProps(prefix) {
             },
         },
         [pf + 'color']: 0xffffffff,
+        [pf + 'align']: {
+            default: 0, //inside,
+            resolve(value) {
+                if (!isNaN(value)) {
+                    return value;
+                }
+                if (typeof value === 'string') {
+                    switch (value) {
+                        case 'inside':
+                            return 0;
+                        case 'center':
+                            return 0.5;
+                        case 'outside':
+                            return 1;
+                    }
+                }
+                return this.default;
+            },
+        },
+        [pf + 'gap']: 0,
         [pf + 'top']: {
             default: 0,
             set(value, props) {
-                props[width][0] = value;
+                props[w][0] = value;
             },
             get(props) {
-                return props[width][0];
+                return props[w][0];
             },
         },
         [pf + 'right']: {
             default: 0,
             set(value, props) {
-                props[width][1] = value;
+                props[w][1] = value;
             },
             get(props) {
-                return props[width][1];
+                return props[w][1];
             },
         },
         [pf + 'bottom']: {
             default: 0,
             set(value, props) {
-                props[width][2] = value;
+                props[w][2] = value;
             },
             get(props) {
-                return props[width][2];
+                return props[w][2];
             },
         },
         [pf + 'left']: {
             default: 0,
             set(value, props) {
-                props[width][3] = value;
+                props[w][3] = value;
             },
             get(props) {
-                return props[width][3];
+                return props[w][3];
             },
         },
     };

package/dist/src/core/shaders/templates/BorderTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"BorderTemplate.js","sourceRoot":"","sources":["../../../../../src/core/shaders/templates/BorderTemplate.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAIH,OAAO,EAAE,oBAAoB,EAAqB,MAAM,kBAAkB,CAAC;AAoC3E,MAAM,UAAU,cAAc,CAC5B,MAAU;IAEV,MAAM,EAAE,GAAG,MAAM,IAAI,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3D,MAAM,KAAK,GAAG,EAAE,GAAG,OAAO,CAAC;IAC3B,OAAO;QACL,CAAC,KAAK,CAAC,EAAE;YACP,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;YACrB,OAAO,CAAC,KAAK;gBACX,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;oBACxB,OAAO,oBAAoB,CAAC,KAAK,CAAC,CAAC;gBACrC,CAAC;gBACD,OAAQ,EAAe,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YAC/C,CAAC;SACF;QACD,CAAC,EAAE,GAAG,OAAO,CAAC,EAAE,UAAU;QAC1B,CAAC,EAAE,GAAG,KAAK,CAAC,EAAE;YACZ,OAAO,EAAE,CAAC;YACV,GAAG,CAAC,KAAK,EAAE,KAAK;gBACb,KAAK,CAAC,KAAK,CAAU,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC;YACpC,CAAC;YACD,GAAG,CAAC,KAAK;gBACP,OAAQ,KAAK,CAAC,KAAK,CAAU,CAAC,CAAC,CAAC,CAAC;YACnC,CAAC;SACF;QACD,CAAC,EAAE,GAAG,OAAO,CAAC,EAAE;YACd,OAAO,EAAE,CAAC;YACV,GAAG,CAAC,KAAK,EAAE,KAAK;gBACb,KAAK,CAAC,KAAK,CAAU,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC;YACpC,CAAC;YACD,GAAG,CAAC,KAAK;gBACP,OAAQ,KAAK,CAAC,KAAK,CAAU,CAAC,CAAC,CAAC,CAAC;YACnC,CAAC;SACF;QACD,CAAC,EAAE,GAAG,QAAQ,CAAC,EAAE;YACf,OAAO,EAAE,CAAC;YACV,GAAG,CAAC,KAAK,EAAE,KAAK;gBACb,KAAK,CAAC,KAAK,CAAU,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC;YACpC,CAAC;YACD,GAAG,CAAC,KAAK;gBACP,OAAQ,KAAK,CAAC,KAAK,CAAU,CAAC,CAAC,CAAC,CAAC;YACnC,CAAC;SACF;QACD,CAAC,EAAE,GAAG,MAAM,CAAC,EAAE;YACb,OAAO,EAAE,CAAC;YACV,GAAG,CAAC,KAAK,EAAE,KAAK;gBACb,KAAK,CAAC,KAAK,CAAU,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC;YACpC,CAAC;YACD,GAAG,CAAC,KAAK;gBACP,OAAQ,KAAK,CAAC,KAAK,CAAU,CAAC,CAAC,CAAC,CAAC;YACnC,CAAC;SACF;KAC8B,CAAC;AACpC,CAAC;AAID,MAAM,CAAC,MAAM,cAAc,GAAgC;IACzD,KAAK,EAAE,cAAc,EAAsB;CAC5C,CAAC"}
+{"version":3,"file":"BorderTemplate.js","sourceRoot":"","sources":["../../../../../src/core/shaders/templates/BorderTemplate.ts"],"names":[],"mappings":"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"}

package/dist/src/core/shaders/templates/HolePunchTemplate.d.ts

@@ -14,13 +14,13 @@ export interface HolePunchProps {
     /**
      * Width of the hole punch
      */
-    width: number;
+    w: number;
     /**
      * height of the hole punch
      *
      * @remarks if not defined uses the width value
      */
-    height: number;
+    h: number;
     /**
      * Corner radius in pixels, to cut out of the corners of the hole punch
      *

package/dist/src/core/shaders/templates/HolePunchTemplate.js

@@ -14,13 +14,13 @@
  *
  * SPDX-License-Identifier: Apache-2.0
  */
-import { validateArrayLength4 } from './shaderUtils.js';
+import { validateArrayLength4 } from '../utils.js';
 export const HolePunchTemplate = {
     props: {
         x: 0,
         y: 0,
-        width: 50,
-        height: 50,
+        w: 50,
+        h: 50,
         radius: {
             default: [0, 0, 0, 0],
             resolve(value) {

package/dist/src/core/shaders/templates/HolePunchTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"HolePunchTemplate.js","sourceRoot":"","sources":["../../../../../src/core/shaders/templates/HolePunchTemplate.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAGH,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AA+CxD,MAAM,CAAC,MAAM,iBAAiB,GAAmC;IAC/D,KAAK,EAAE;QACL,CAAC,EAAE,CAAC;QACJ,CAAC,EAAE,CAAC;QACJ,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;QACV,MAAM,EAAE;YACN,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;YACrB,OAAO,CAAC,KAAK;gBACX,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;oBACxB,OAAO,oBAAoB,CAAC,KAAK,CAAC,CAAC;gBACrC,CAAC;gBACD,OAAQ,EAAe,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YAC/C,CAAC;SACF;KACF;CACF,CAAC"}
+{"version":3,"file":"HolePunchTemplate.js","sourceRoot":"","sources":["../../../../../src/core/shaders/templates/HolePunchTemplate.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAGH,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AA+CnD,MAAM,CAAC,MAAM,iBAAiB,GAAmC;IAC/D,KAAK,EAAE;QACL,CAAC,EAAE,CAAC;QACJ,CAAC,EAAE,CAAC;QACJ,CAAC,EAAE,EAAE;QACL,CAAC,EAAE,EAAE;QACL,MAAM,EAAE;YACN,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;YACrB,OAAO,CAAC,KAAK;gBACX,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;oBACxB,OAAO,oBAAoB,CAAC,KAAK,CAAC,CAAC;gBACrC,CAAC;gBACD,OAAQ,EAAe,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YAC/C,CAAC;SACF;KACF;CACF,CAAC"}

package/dist/src/core/shaders/templates/RadialGradientTemplate.d.ts

@@ -14,15 +14,17 @@ export interface RadialGradientProps {
      */
     stops: number[];
     /**
-     * Width of the RadialGradientEffect
+     * radial width of the RadialGradientEffect
+     *
+     * @remarks from the center to the outer edge of the gradient
      */
-    width: number;
+    w: number;
     /**
-     * height of the RadialGradientEffect
-     *
-     * @remarks if not defined uses the width value
+     * radial height of the RadialGradientEffect
+     * if not defined uses the width value
+     * @remarks from the center to the outer edge of the gradient
      */
-    height: number;
+    h: number;
     /**
      * center point of where the RadialGradientEffect is drawn
      */

package/dist/src/core/shaders/templates/RadialGradientTemplate.js

@@ -41,8 +41,8 @@ export const RadialGradientTemplate = {
                 return value;
             },
         },
-        width: 50,
-        height: 50,
+        w: 50,
+        h: 50,
         pivot: [0.5, 0.5],
     },
 };

package/dist/src/core/shaders/templates/RadialGradientTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadialGradientTemplate.js","sourceRoot":"","sources":["../../../../../src/core/shaders/templates/RadialGradientTemplate.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAkCH,MAAM,CAAC,MAAM,sBAAsB,GAAwC;IACzE,KAAK,EAAE;QACL,MAAM,EAAE;YACN,OAAO,EAAE,CAAC,UAAU,EAAE,UAAU,CAAC;YACjC,OAAO,CAAC,KAAK;gBACX,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;oBAC5C,OAAO,KAAK,CAAC;gBACf,CAAC;gBACD,OAAQ,EAAe,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YAC/C,CAAC;SACF;QACD,KAAK,EAAE;YACL,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;YACf,OAAO,CAAC,KAAK,EAAE,KAAK;gBAClB,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,CAAC,MAAM,KAAK,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;oBAChE,OAAO,KAAK,CAAC;gBACf,CAAC;gBACD,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;oBACxB,KAAK,GAAG,EAAE,CAAC;gBACb,CAAC;gBACD,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC;gBAChC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC;oBAC7B,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC;gBACjC,CAAC;gBACD,OAAO,KAAK,CAAC;YACf,CAAC;SACF;QACD,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;QACV,KAAK,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;KAClB;CACF,CAAC"}
+{"version":3,"file":"RadialGradientTemplate.js","sourceRoot":"","sources":["../../../../../src/core/shaders/templates/RadialGradientTemplate.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAoCH,MAAM,CAAC,MAAM,sBAAsB,GAAwC;IACzE,KAAK,EAAE;QACL,MAAM,EAAE;YACN,OAAO,EAAE,CAAC,UAAU,EAAE,UAAU,CAAC;YACjC,OAAO,CAAC,KAAK;gBACX,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;oBAC5C,OAAO,KAAK,CAAC;gBACf,CAAC;gBACD,OAAQ,EAAe,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YAC/C,CAAC;SACF;QACD,KAAK,EAAE;YACL,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;YACf,OAAO,CAAC,KAAK,EAAE,KAAK;gBAClB,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,CAAC,MAAM,KAAK,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;oBAChE,OAAO,KAAK,CAAC;gBACf,CAAC;gBACD,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;oBACxB,KAAK,GAAG,EAAE,CAAC;gBACb,CAAC;gBACD,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC;gBAChC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC;oBAC7B,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC;gBACjC,CAAC;gBACD,OAAO,KAAK,CAAC;YACf,CAAC;SACF;QACD,CAAC,EAAE,EAAE;QACL,CAAC,EAAE,EAAE;QACL,KAAK,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;KAClB;CACF,CAAC"}

package/dist/src/core/shaders/templates/RoundedTemplate.js

@@ -14,7 +14,7 @@
  *
  * SPDX-License-Identifier: Apache-2.0
  */
-import { validateArrayLength4 } from './shaderUtils.js';
+import { validateArrayLength4 } from '../utils.js';
 export const RoundedTemplate = {
     props: {
         radius: {

package/dist/src/core/shaders/templates/RoundedTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"RoundedTemplate.js","sourceRoot":"","sources":["../../../../../src/core/shaders/templates/RoundedTemplate.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAIH,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AA8BxD,MAAM,CAAC,MAAM,eAAe,GAAiC;IAC3D,KAAK,EAAE;QACL,MAAM,EAAE;YACN,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;YACrB,OAAO,CAAC,KAAK;gBACX,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;oBACxB,OAAO,oBAAoB,CAAC,KAAK,CAAC,CAAC;gBACrC,CAAC;gBACD,OAAQ,EAAe,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YAC/C,CAAC;SACF;QACD,UAAU,EAAE;YACV,OAAO,EAAE,CAAC;YACV,GAAG,CAAC,KAAK,EAAE,KAAK;gBACb,KAAK,CAAC,MAAe,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC;YACpC,CAAC;YACD,GAAG,CAAC,KAAK;gBACP,OAAQ,KAAK,CAAC,MAAe,CAAC,CAAC,CAAC,CAAC;YACnC,CAAC;SACF;QACD,WAAW,EAAE;YACX,OAAO,EAAE,CAAC;YACV,GAAG,CAAC,KAAK,EAAE,KAAK;gBACb,KAAK,CAAC,MAAe,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC;YACpC,CAAC;YACD,GAAG,CAAC,KAAK;gBACP,OAAQ,KAAK,CAAC,MAAe,CAAC,CAAC,CAAC,CAAC;YACnC,CAAC;SACF;QACD,cAAc,EAAE;YACd,OAAO,EAAE,CAAC;YACV,GAAG,CAAC,KAAK,EAAE,KAAK;gBACb,KAAK,CAAC,MAAe,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC;YACpC,CAAC;YACD,GAAG,CAAC,KAAK;gBACP,OAAQ,KAAK,CAAC,MAAe,CAAC,CAAC,CAAC,CAAC;YACnC,CAAC;SACF;QACD,aAAa,EAAE;YACb,OAAO,EAAE,CAAC;YACV,GAAG,CAAC,KAAK,EAAE,KAAK;gBACb,KAAK,CAAC,MAAe,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC;YACpC,CAAC;YACD,GAAG,CAAC,KAAK;gBACP,OAAQ,KAAK,CAAC,MAAe,CAAC,CAAC,CAAC,CAAC;YACnC,CAAC;SACF;KACF;CACF,CAAC"}
+{"version":3,"file":"RoundedTemplate.js","sourceRoot":"","sources":["../../../../../src/core/shaders/templates/RoundedTemplate.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAIH,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AA8BnD,MAAM,CAAC,MAAM,eAAe,GAAiC;IAC3D,KAAK,EAAE;QACL,MAAM,EAAE;YACN,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;YACrB,OAAO,CAAC,KAAK;gBACX,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;oBACxB,OAAO,oBAAoB,CAAC,KAAK,CAAC,CAAC;gBACrC,CAAC;gBACD,OAAQ,EAAe,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YAC/C,CAAC;SACF;QACD,UAAU,EAAE;YACV,OAAO,EAAE,CAAC;YACV,GAAG,CAAC,KAAK,EAAE,KAAK;gBACb,KAAK,CAAC,MAAe,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC;YACpC,CAAC;YACD,GAAG,CAAC,KAAK;gBACP,OAAQ,KAAK,CAAC,MAAe,CAAC,CAAC,CAAC,CAAC;YACnC,CAAC;SACF;QACD,WAAW,EAAE;YACX,OAAO,EAAE,CAAC;YACV,GAAG,CAAC,KAAK,EAAE,KAAK;gBACb,KAAK,CAAC,MAAe,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC;YACpC,CAAC;YACD,GAAG,CAAC,KAAK;gBACP,OAAQ,KAAK,CAAC,MAAe,CAAC,CAAC,CAAC,CAAC;YACnC,CAAC;SACF;QACD,cAAc,EAAE;YACd,OAAO,EAAE,CAAC;YACV,GAAG,CAAC,KAAK,EAAE,KAAK;gBACb,KAAK,CAAC,MAAe,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC;YACpC,CAAC;YACD,GAAG,CAAC,KAAK;gBACP,OAAQ,KAAK,CAAC,MAAe,CAAC,CAAC,CAAC,CAAC;YACnC,CAAC;SACF;QACD,aAAa,EAAE;YACb,OAAO,EAAE,CAAC;YACV,GAAG,CAAC,KAAK,EAAE,KAAK;gBACb,KAAK,CAAC,MAAe,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC;YACpC,CAAC;YACD,GAAG,CAAC,KAAK;gBACP,OAAQ,KAAK,CAAC,MAAe,CAAC,CAAC,CAAC,CAAC;YACnC,CAAC;SACF;KACF;CACF,CAAC"}

package/dist/src/core/shaders/templates/RoundedWithBorderAndShadowTemplate.d.ts

@@ -1,7 +1,7 @@
 import type { CoreShaderType } from '../../renderers/CoreShaderNode.js';
 import { type BorderProps } from './BorderTemplate.js';
 import { type RoundedProps } from './RoundedTemplate.js';
-import type { PrefixedType } from './shaderUtils.js';
+import type { PrefixedType } from '../utils.js';
 import { type ShadowProps } from './ShadowTemplate.js';
 export type RoundedWithBorderAndShadowProps = RoundedProps & PrefixedType<BorderProps, 'border'> & PrefixedType<ShadowProps, 'shadow'>;
 export declare const RoundedWithBorderAndShadowTemplate: CoreShaderType<RoundedWithBorderAndShadowProps>;

package/dist/src/core/shaders/templates/RoundedWithBorderTemplate.d.ts

@@ -1,6 +1,6 @@
 import type { CoreShaderType } from '../../renderers/CoreShaderNode.js';
 import { type BorderProps } from './BorderTemplate.js';
 import { type RoundedProps } from './RoundedTemplate.js';
-import type { PrefixedType } from './shaderUtils.js';
+import type { PrefixedType } from '../utils.js';
 export type RoundedWithBorderProps = RoundedProps & PrefixedType<BorderProps, 'border'>;
 export declare const RoundedWithBorderTemplate: CoreShaderType<RoundedWithBorderProps>;

package/dist/src/core/shaders/templates/RoundedWithShadowTemplate.d.ts

@@ -1,6 +1,6 @@
 import type { CoreShaderType } from '../../renderers/CoreShaderNode.js';
 import { type RoundedProps } from './RoundedTemplate.js';
-import type { PrefixedType } from './shaderUtils.js';
+import type { PrefixedType } from '../utils.js';
 import { type ShadowProps } from './ShadowTemplate.js';
 export type RoundedWithShadowProps = RoundedProps & PrefixedType<ShadowProps, 'shadow'>;
 export declare const RoundedWithShadowTemplate: CoreShaderType<RoundedWithShadowProps>;

package/dist/src/core/shaders/templates/ShadowTemplate.d.ts

@@ -1,5 +1,5 @@
 import type { CoreShaderType } from '../../renderers/CoreShaderNode.js';
-import type { PrefixedType } from './shaderUtils.js';
+import type { PrefixedType } from '../utils.js';
 export interface ShadowProps {
     /**
      * Shadow Color

package/dist/src/core/shaders/{templates/shaderUtils.d.ts → utils.d.ts}

@@ -1,4 +1,4 @@
-import type { Vec4 } from '../../renderers/webgl/internal/ShaderUtils.js';
+import type { Vec4 } from '../renderers/webgl/internal/ShaderUtils.js';
 export declare const validateArrayLength4: (value: number | number[]) => Vec4;
 export type PrefixedType<T, P extends string | undefined = undefined> = {
     [Key in keyof T as P extends string ? `${P}-${string & Key}` : Key]: T[Key];

package/dist/src/core/shaders/{templates/shaderUtils.js → utils.js}

@@ -14,7 +14,7 @@
  *
  * SPDX-License-Identifier: Apache-2.0
  */
-import { assertTruthy } from '../../../utils.js';
+import { assertTruthy } from '../../utils.js';
 export const validateArrayLength4 = (value) => {
     if (!Array.isArray(value)) {
         return [value, value, value, value];
@@ -38,4 +38,4 @@ export const validateArrayLength4 = (value) => {
     value[3] = value[0];
     return value;
 };
-//# sourceMappingURL=shaderUtils.js.map
+//# sourceMappingURL=utils.js.map

package/dist/src/core/shaders/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/core/shaders/utils.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAwB,EAAQ,EAAE;IACrE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;QAC1B,OAAO,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;IACtC,CAAC;IACD,YAAY,CAAC,KAAK,CAAC,CAAC;IACpB,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACvB,OAAO,KAAa,CAAC;IACvB,CAAC;IACD,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACvB,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAE,CAAC;QACrB,OAAO,KAAa,CAAC;IACvB,CAAC;IACD,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACvB,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAE,CAAC;QACrB,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAE,CAAC;QACrB,OAAO,KAAa,CAAC;IACvB,CAAC;IACD,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IACzB,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;IACpB,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;IACpB,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;IACpB,OAAO,KAAa,CAAC;AACvB,CAAC,CAAC"}

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

@@ -14,15 +14,96 @@
  *
  * SPDX-License-Identifier: Apache-2.0
  */
-import { valuesAreEqual } from '../../lib/utils.js';
 import { BorderTemplate, } from '../templates/BorderTemplate.js';
 export const Border = {
     props: BorderTemplate.props,
-    update() {
-        this.uniform4fa('u_width', this.props.width);
-        this.uniform1i('u_asymWidth', valuesAreEqual(this.props.width) ? 0 : 1);
-        this.uniformRGBA('u_color', this.props.color);
+    update(node) {
+        this.uniform4fa('u_borderWidth', this.props.w);
+        this.uniformRGBA('u_borderColor', this.props.color);
+        this.uniform1f('u_borderGap', this.props.gap);
+        this.uniform1f('u_borderAlign', this.props.align);
     },
+    vertex: `
+    # ifdef GL_FRAGMENT_PRECISION_HIGH
+    precision highp float;
+    # else
+    precision mediump float;
+    # endif
+
+    attribute vec2 a_position;
+    attribute vec2 a_textureCoords;
+    attribute vec4 a_color;
+    attribute vec2 a_nodeCoords;
+
+    uniform vec2 u_resolution;
+    uniform float u_pixelRatio;
+    uniform vec2 u_dimensions;
+
+    uniform vec4 u_radius;
+    uniform vec4 u_borderWidth;
+    uniform float u_borderGap;
+    uniform float u_borderAlign;
+
+    varying vec4 v_color;
+    varying vec2 v_textureCoords;
+    varying vec2 v_nodeCoords;
+
+    varying vec2 v_innerSize;
+    varying vec2 v_outerSize;
+    varying vec2 v_outerBorderUv;
+    varying vec2 v_innerBorderUv;
+    varying vec2 v_halfDimensions;
+    varying float v_edgeWidth;
+
+    void main() {
+      vec2 screenSpace = vec2(2.0 / u_resolution.x, -2.0 / u_resolution.y);
+      vec2 edge = clamp(a_nodeCoords * 2.0 - vec2(1.0), -1.0, 1.0);
+      v_edgeWidth = 1.0 / u_pixelRatio;
+
+      float borderTop = u_borderWidth.x;
+      float borderRight = u_borderWidth.y;
+      float borderBottom = u_borderWidth.z;
+      float borderLeft = u_borderWidth.w;
+
+      v_outerBorderUv = vec2(0.0);
+      v_innerBorderUv = vec2(0.0);
+
+      vec2 borderSize = vec2(borderRight + borderLeft, borderTop + borderBottom);
+      vec2 extraSize = borderSize * u_borderAlign;
+      float gapLeft = step(0.001, borderLeft) * u_borderGap;
+      float gapRight = step(0.001, borderRight) * u_borderGap;
+      float gapTop = step(0.001, borderTop) * u_borderGap;
+      float gapBottom = step(0.001, borderBottom) * u_borderGap;
+      vec2 gapSize = vec2(gapLeft + gapRight, gapTop + gapBottom);
+
+      v_outerSize = (u_dimensions + gapSize + extraSize) * 0.5;
+      v_innerSize = v_outerSize - borderSize * 0.5;
+
+      // Use sign() to avoid branching
+      vec2 borderDiff = vec2(borderRight - borderLeft, borderBottom - borderTop);
+      vec2 signDiff = sign(borderDiff);
+      borderDiff = abs(borderDiff);
+
+      vec2 gapDiff = vec2(gapRight - gapLeft, gapBottom - gapTop);
+      vec2 signGapDiff = sign(gapDiff);
+      gapDiff = abs(gapDiff);
+
+      v_outerBorderUv = -signDiff * borderDiff * u_borderAlign * 0.5 - signGapDiff * gapDiff * 0.5;
+      v_innerBorderUv = v_outerBorderUv + signDiff * borderDiff * 0.5;
+
+      vec2 edgeOffsetExtra = step(u_dimensions * 0.5, v_outerSize) * edge * (extraSize + u_borderGap);
+      vec2 borderEdge = edgeOffsetExtra;
+
+      vec2 vertexPos = (a_position + edge + borderEdge) * u_pixelRatio;
+      gl_Position = vec4(vertexPos.x * screenSpace.x - 1.0, -sign(screenSpace.y) * (vertexPos.y * -abs(screenSpace.y)) + 1.0, 0.0, 1.0);
+
+      v_color = a_color;
+      v_nodeCoords = a_nodeCoords + (screenSpace + borderEdge) / (u_dimensions);
+      v_textureCoords = a_textureCoords + (screenSpace + borderEdge) / (u_dimensions);
+
+      v_halfDimensions = u_dimensions * 0.5;
+    }
+  `,
     fragment: `
     # ifdef GL_FRAGMENT_PRECISION_HIGH
     precision highp float;
@@ -37,50 +118,50 @@ export const Border = {
     uniform vec2 u_dimensions;
     uniform sampler2D u_texture;
 
-    uniform vec4 u_width;
-    uniform vec4 u_color;
-
-    uniform int u_asymWidth;
+    uniform vec4 u_borderWidth;
+    uniform vec4 u_borderColor;
+    uniform float u_borderGap;
 
     varying vec4 v_color;
-    varying vec2 v_position;
+    varying vec2 v_nodeCoords;
     varying vec2 v_textureCoords;
 
+    varying vec2 v_innerSize;
+    varying vec2 v_outerSize;
+    varying vec2 v_outerBorderUv;
+    varying vec2 v_innerBorderUv;
+    varying vec2 v_halfDimensions;
+    varying float v_edgeWidth;
+
     float box(vec2 p, vec2 s) {
-      vec2 q = abs(p) - (s - (4.0 - u_pixelRatio));
+      vec2 q = abs(p) - s;
       return (min(max(q.x, q.y), 0.0) + length(max(q, 0.0)));
     }
 
-    float asymBorderWidth(vec2 p, float d, vec4 w) {
-      p.x += w.y > w.w ? (w.y - w.w) * 0.5 : -(w.w - w.y) * 0.5;
-      p.y += w.z > w.x ? (w.z - w.x) * 0.5 : -(w.x - w.z) * 0.5;
-
-      vec2 size = vec2(u_dimensions.x - (w[3] + w[1]), u_dimensions.y - (w[0] + w[2])) * 0.5;
-      float borderDist = box(p, size + 2.0);
-      return 1.0 - smoothstep(0.0, u_pixelRatio, max(-borderDist, d));
-    }
-
     void main() {
       vec4 color = texture2D(u_texture, v_textureCoords) * v_color;
-      vec2 halfDimensions = (u_dimensions * 0.5);
+      vec4 resultColor = vec4(0.0);
+      vec2 boxUv = v_nodeCoords.xy * u_dimensions - v_halfDimensions;
 
-      vec2 boxUv = v_textureCoords.xy * u_dimensions - halfDimensions;
-      float boxDist = box(boxUv, halfDimensions);
+      float outerDist = box(boxUv + v_outerBorderUv, v_outerSize - v_edgeWidth);
+      float innerDist = box(boxUv + v_innerBorderUv, v_innerSize - v_edgeWidth);
 
-      float boxAlpha = 1.0 - smoothstep(0.0, u_pixelRatio, boxDist);
-      float borderAlpha = 0.0;
-
-      if(u_asymWidth == 1) {
-        borderAlpha = asymBorderWidth(boxUv, boxDist, u_width);
-      }
-      else {
-        borderAlpha = 1.0 - smoothstep(u_width[0], u_width[0], abs(boxDist));
+      if(u_borderGap == 0.0) {
+        resultColor = mix(resultColor, u_borderColor, 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, outerDist));
+        resultColor = mix(resultColor, color, 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, innerDist));
+        gl_FragColor = resultColor * u_alpha;
+        return;
       }
 
-      vec4 resColor = vec4(0.0);
-      resColor = mix(resColor, color, min(color.a, boxAlpha));
-      resColor = mix(resColor, u_color, min(u_color.a, min(borderAlpha, boxAlpha)));
-      gl_FragColor = resColor * u_alpha;
+      float nodeDist = box(boxUv, v_halfDimensions - v_edgeWidth);
+      float nodeAlpha = 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, nodeDist);
+
+      float borderDist = max(-innerDist, outerDist);
+      float borderAlpha = 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, borderDist);
+      resultColor = mix(resultColor, color, nodeAlpha);
+      resultColor = mix(resultColor, u_borderColor, borderAlpha * u_borderColor.a);
+
+      gl_FragColor = resultColor * u_alpha;
     }
   `,
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Border.js","sourceRoot":"","sources":["../../../../../src/core/shaders/webgl/Border.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EACL,cAAc,GAEf,MAAM,gCAAgC,CAAC;AAIxC,MAAM,CAAC,MAAM,MAAM,GAAiC;IAClD,KAAK,EAAE,cAAc,CAAC,KAAK;IAC3B,MAAM;QACJ,IAAI,CAAC,UAAU,CAAC,SAAS,EAAE,IAAI,CAAC,KAAM,CAAC,KAAa,CAAC,CAAC;QACtD,IAAI,CAAC,SAAS,CACZ,aAAa,EACb,cAAc,CAAC,IAAI,CAAC,KAAM,CAAC,KAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CACtD,CAAC;QACF,IAAI,CAAC,WAAW,CAAC,SAAS,EAAE,IAAI,CAAC,KAAM,CAAC,KAAK,CAAC,CAAC;IACjD,CAAC;IACD,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DT;CACF,CAAC"}
+{"version":3,"file":"Border.js","sourceRoot":"","sources":["../../../../../src/core/shaders/webgl/Border.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,EACL,cAAc,GAEf,MAAM,gCAAgC,CAAC;AAIxC,MAAM,CAAC,MAAM,MAAM,GAAiC;IAClD,KAAK,EAAE,cAAc,CAAC,KAAK;IAC3B,MAAM,CAAC,IAAI;QACT,IAAI,CAAC,UAAU,CAAC,eAAe,EAAE,IAAI,CAAC,KAAM,CAAC,CAAS,CAAC,CAAC;QACxD,IAAI,CAAC,WAAW,CAAC,eAAe,EAAE,IAAI,CAAC,KAAM,CAAC,KAAK,CAAC,CAAC;QACrD,IAAI,CAAC,SAAS,CAAC,aAAa,EAAE,IAAI,CAAC,KAAM,CAAC,GAAa,CAAC,CAAC;QACzD,IAAI,CAAC,SAAS,CAAC,eAAe,EAAE,IAAI,CAAC,KAAM,CAAC,KAAe,CAAC,CAAC;IAC/D,CAAC;IACD,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgFP;IACD,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DT;CACF,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/HolePunch.js

@@ -19,10 +19,11 @@ import { HolePunchTemplate, } from '../templates/HolePunchTemplate.js';
 export const HolePunch = {
     props: HolePunchTemplate.props,
     update() {
-        this.uniform2f('u_pos', this.props.x, this.props.y);
+        const props = this.props;
+        this.uniform2f('u_pos', props.x, props.y);
         //precalculate to halfSize once instead of for every pixel
-        this.uniform2f('u_size', this.props.width * 0.5, this.props.height * 0.5);
-        this.uniform4fa('u_radius', calcFactoredRadiusArray(this.props.radius, this.props.width, this.props.height));
+        this.uniform2f('u_size', props.w * 0.5, props.h * 0.5);
+        this.uniform4fa('u_radius', calcFactoredRadiusArray(props.radius, props.w, props.h));
     },
     getCacheMarkers(props) {
         return `radiusArray:${Array.isArray(props.radius)}`;

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

@@ -1 +1 @@
-{"version":3,"file":"HolePunch.js","sourceRoot":"","sources":["../../../../../src/core/shaders/webgl/HolePunch.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,EACL,iBAAiB,GAElB,MAAM,mCAAmC,CAAC;AAI3C,MAAM,CAAC,MAAM,SAAS,GAAoC;IACxD,KAAK,EAAE,iBAAiB,CAAC,KAAK;IAC9B,MAAM;QACJ,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,IAAI,CAAC,KAAM,CAAC,CAAC,EAAE,IAAI,CAAC,KAAM,CAAC,CAAC,CAAC,CAAC;QACtD,0DAA0D;QAC1D,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAM,CAAC,KAAK,GAAG,GAAG,EAAE,IAAI,CAAC,KAAM,CAAC,MAAM,GAAG,GAAG,CAAC,CAAC;QAE5E,IAAI,CAAC,UAAU,CACb,UAAU,EACV,uBAAuB,CACrB,IAAI,CAAC,KAAM,CAAC,MAAc,EAC1B,IAAI,CAAC,KAAM,CAAC,KAAK,EACjB,IAAI,CAAC,KAAM,CAAC,MAAM,CACnB,CACF,CAAC;IACJ,CAAC;IACD,eAAe,CAAC,KAAqB;QACnC,OAAO,eAAe,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC;IACtD,CAAC;IACD,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCT;CACF,CAAC"}
+{"version":3,"file":"HolePunch.js","sourceRoot":"","sources":["../../../../../src/core/shaders/webgl/HolePunch.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,EACL,iBAAiB,GAElB,MAAM,mCAAmC,CAAC;AAI3C,MAAM,CAAC,MAAM,SAAS,GAAoC;IACxD,KAAK,EAAE,iBAAiB,CAAC,KAAK;IAC9B,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAM,CAAC;QAC1B,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;QAC1C,0DAA0D;QAC1D,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,GAAG,GAAG,EAAE,KAAK,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC;QAEvD,IAAI,CAAC,UAAU,CACb,UAAU,EACV,uBAAuB,CAAC,KAAK,CAAC,MAAc,EAAE,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAChE,CAAC;IACJ,CAAC;IACD,eAAe,CAAC,KAAqB;QACnC,OAAO,eAAe,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC;IACtD,CAAC;IACD,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCT;CACF,CAAC"}

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

@@ -20,11 +20,12 @@ import { genGradientColors } from '../../renderers/webgl/internal/ShaderUtils.js
 export const LinearGradient = {
     props: LinearGradientTemplate.props,
     update() {
-        this.uniform1f('u_angle', this.props.angle - (Math.PI / 180) * 90);
-        this.uniform1fv('u_stops', new Float32Array(this.props.stops));
+        const props = this.props;
+        this.uniform1f('u_angle', props.angle - (Math.PI / 180) * 90);
+        this.uniform1fv('u_stops', new Float32Array(props.stops));
         const colors = [];
-        for (let i = 0; i < this.props.colors.length; i++) {
-            const norm = getNormalizedRgbaComponents(this.props.colors[i]);
+        for (let i = 0; i < props.colors.length; i++) {
+            const norm = getNormalizedRgbaComponents(props.colors[i]);
             colors.push(norm[0], norm[1], norm[2], norm[3]);
         }
         this.uniform4fv('u_colors', new Float32Array(colors));
@@ -41,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;
@@ -48,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;
@@ -58,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;
@@ -66,8 +90,9 @@ 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)}
-      gl_FragColor = mix(color, colorOut, clamp(colorOut.a, 0.0, 1.0));
+      vec4 colorOut = getGradientColor(dist);
+      vec3 blendedRGB = mix(color.rgb, colorOut.rgb, clamp(colorOut.a, 0.0, 1.0));
+      gl_FragColor = vec4(blendedRGB, color.a);
     }
   `;
     },

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,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,IAAI,CAAC,KAAM,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,EAAE,GAAG,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC;QACpE,IAAI,CAAC,UAAU,CAAC,SAAS,EAAE,IAAI,YAAY,CAAC,IAAI,CAAC,KAAM,CAAC,KAAK,CAAC,CAAC,CAAC;QAChE,MAAM,MAAM,GAAa,EAAE,CAAC;QAC5B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,KAAM,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACnD,MAAM,IAAI,GAAG,2BAA2B,CAAC,IAAI,CAAC,KAAM,CAAC,MAAM,CAAC,CAAC,CAAE,CAAC,CAAC;YACjE,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmD5C,CAAC;IACF,CAAC;CACF,CAAC"}