@lightningjs/renderer 3.0.0-beta5 → 3.0.0-beta6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/dist/src/core/CoreNode.d.ts +6 -16
  2. package/dist/src/core/CoreNode.js +24 -37
  3. package/dist/src/core/CoreNode.js.map +1 -1
  4. package/dist/src/core/CoreTextNode.js +0 -1
  5. package/dist/src/core/CoreTextNode.js.map +1 -1
  6. package/dist/src/core/CoreTextureManager.js +4 -5
  7. package/dist/src/core/CoreTextureManager.js.map +1 -1
  8. package/dist/src/core/Stage.js +0 -3
  9. package/dist/src/core/Stage.js.map +1 -1
  10. package/dist/src/core/TextureMemoryManager.js +3 -4
  11. package/dist/src/core/TextureMemoryManager.js.map +1 -1
  12. package/dist/src/core/renderers/CoreRenderer.d.ts +1 -1
  13. package/dist/src/core/renderers/webgl/WebGlRenderOp.d.ts +1 -1
  14. package/dist/src/core/renderers/webgl/WebGlRenderOp.js.map +1 -1
  15. package/dist/src/core/shaders/canvas/RoundedWithBorder.js +8 -2
  16. package/dist/src/core/shaders/canvas/RoundedWithBorder.js.map +1 -1
  17. package/dist/src/core/shaders/webgl/Border.js +57 -34
  18. package/dist/src/core/shaders/webgl/Border.js.map +1 -1
  19. package/dist/src/core/shaders/webgl/RoundedWithBorder.js +69 -37
  20. package/dist/src/core/shaders/webgl/RoundedWithBorder.js.map +1 -1
  21. package/dist/src/core/shaders/webgl/RoundedWithBorderAndShadow.js +78 -41
  22. package/dist/src/core/shaders/webgl/RoundedWithBorderAndShadow.js.map +1 -1
  23. package/dist/src/core/text-rendering/renderers/SdfTextRenderer/SdfTextRenderer.js +3 -1
  24. package/dist/src/core/text-rendering/renderers/SdfTextRenderer/SdfTextRenderer.js.map +1 -1
  25. package/dist/src/main-api/Inspector.js +1 -1
  26. package/dist/src/main-api/Inspector.js.map +1 -1
  27. package/dist/src/main-api/Renderer.js +2 -3
  28. package/dist/src/main-api/Renderer.js.map +1 -1
  29. package/dist/src/utils.d.ts +1 -6
  30. package/dist/src/utils.js +2 -9
  31. package/dist/src/utils.js.map +1 -1
  32. package/dist/tsconfig.dist.tsbuildinfo +1 -1
  33. package/package.json +1 -2
  34. package/src/core/CoreNode.test.ts +0 -1
  35. package/src/core/CoreNode.ts +34 -59
  36. package/src/core/CoreTextNode.ts +0 -1
  37. package/src/core/CoreTextureManager.ts +4 -5
  38. package/src/core/Stage.ts +0 -3
  39. package/src/core/TextureMemoryManager.ts +3 -4
  40. package/src/core/renderers/CoreRenderer.ts +1 -1
  41. package/src/core/renderers/webgl/WebGlRenderOp.ts +1 -1
  42. package/src/core/shaders/canvas/RoundedWithBorder.ts +8 -4
  43. package/src/core/shaders/webgl/Border.ts +57 -37
  44. package/src/core/shaders/webgl/RoundedWithBorder.ts +70 -40
  45. package/src/core/shaders/webgl/RoundedWithBorderAndShadow.ts +78 -45
  46. package/src/core/text-rendering/renderers/SdfTextRenderer/SdfTextRenderer.ts +4 -1
  47. package/src/main-api/Inspector.ts +1 -1
  48. package/src/main-api/Renderer.ts +2 -4
  49. package/src/utils.ts +10 -10
  50. package/scripts/please-use-pnpm.js +0 -13
  51. package/src/core/platform.ts +0 -64
@@ -25,14 +25,51 @@ import type { WebGlShaderType } from '../../renderers/webgl/WebGlShaderNode.js';
25
25
 
26
26
  export const Border: WebGlShaderType<BorderProps> = {
27
27
  props: BorderTemplate.props,
28
- update() {
29
- this.uniform4fa('u_width', this.props!.width as Vec4);
30
- this.uniform1i(
31
- 'u_asymWidth',
32
- valuesAreEqual(this.props!.width as number[]) ? 0 : 1,
33
- );
34
- this.uniformRGBA('u_color', this.props!.color);
28
+ update(node) {
29
+ this.uniform4fa('u_borderWidth', this.props!.width as Vec4);
30
+ this.uniformRGBA('u_borderColor', this.props!.color);
35
31
  },
32
+ vertex: `
33
+ # ifdef GL_FRAGMENT_PRECISION_HIGH
34
+ precision highp float;
35
+ # else
36
+ precision mediump float;
37
+ # endif
38
+
39
+ attribute vec2 a_position;
40
+ attribute vec2 a_textureCoords;
41
+ attribute vec4 a_color;
42
+ attribute vec2 a_nodeCoords;
43
+
44
+ uniform vec2 u_resolution;
45
+ uniform float u_pixelRatio;
46
+ uniform vec2 u_dimensions;
47
+
48
+ uniform vec4 u_radius;
49
+ uniform vec4 u_borderWidth;
50
+
51
+ varying vec4 v_color;
52
+ varying vec2 v_textureCoords;
53
+ varying vec2 v_nodeCoords;
54
+
55
+ varying vec2 v_innerSize;
56
+ varying vec2 v_halfDimensions;
57
+
58
+ void main() {
59
+ vec2 normalized = a_position * u_pixelRatio;
60
+ vec2 screenSpace = vec2(2.0 / u_resolution.x, -2.0 / u_resolution.y);
61
+
62
+ v_color = a_color;
63
+ v_nodeCoords = a_nodeCoords;
64
+ v_textureCoords = a_textureCoords;
65
+
66
+ v_halfDimensions = u_dimensions * 0.5;
67
+ v_innerSize = vec2(u_dimensions.x - (u_borderWidth[3] + u_borderWidth[1]), u_dimensions.y - (u_borderWidth[0] + u_borderWidth[2])) * 0.5 - 0.5;
68
+
69
+ gl_Position = vec4(normalized.x * screenSpace.x - 1.0, normalized.y * -abs(screenSpace.y) + 1.0, 0.0, 1.0);
70
+ gl_Position.y = -sign(screenSpace.y) * gl_Position.y;
71
+ }
72
+ `,
36
73
  fragment: `
37
74
  # ifdef GL_FRAGMENT_PRECISION_HIGH
38
75
  precision highp float;
@@ -47,49 +84,32 @@ export const Border: WebGlShaderType<BorderProps> = {
47
84
  uniform vec2 u_dimensions;
48
85
  uniform sampler2D u_texture;
49
86
 
50
- uniform vec4 u_width;
51
- uniform vec4 u_color;
52
-
53
- uniform int u_asymWidth;
87
+ uniform vec4 u_borderWidth;
88
+ uniform vec4 u_borderColor;
54
89
 
55
90
  varying vec4 v_color;
56
- varying vec2 v_position;
91
+ varying vec2 v_nodeCoords;
57
92
  varying vec2 v_textureCoords;
58
93
 
94
+ varying vec2 v_innerSize;
95
+ varying vec2 v_halfDimensions;
96
+
59
97
  float box(vec2 p, vec2 s) {
60
- vec2 q = abs(p) - (s - (4.0 - u_pixelRatio));
98
+ vec2 q = abs(p) - s;
61
99
  return (min(max(q.x, q.y), 0.0) + length(max(q, 0.0)));
62
100
  }
63
101
 
64
- float asymBorderWidth(vec2 p, float d, vec4 w) {
65
- p.x += w.y > w.w ? (w.y - w.w) * 0.5 : -(w.w - w.y) * 0.5;
66
- p.y += w.z > w.x ? (w.z - w.x) * 0.5 : -(w.x - w.z) * 0.5;
67
-
68
- vec2 size = vec2(u_dimensions.x - (w[3] + w[1]), u_dimensions.y - (w[0] + w[2])) * 0.5;
69
- float borderDist = box(p, size + 2.0);
70
- return 1.0 - smoothstep(0.0, u_pixelRatio, max(-borderDist, d));
71
- }
72
-
73
102
  void main() {
74
103
  vec4 color = texture2D(u_texture, v_textureCoords) * v_color;
75
- vec2 halfDimensions = (u_dimensions * 0.5);
76
-
77
- vec2 boxUv = v_textureCoords.xy * u_dimensions - halfDimensions;
78
- float boxDist = box(boxUv, halfDimensions);
104
+ vec2 boxUv = v_nodeCoords.xy * u_dimensions - v_halfDimensions;
79
105
 
80
- float boxAlpha = 1.0 - smoothstep(0.0, u_pixelRatio, boxDist);
81
- float borderAlpha = 0.0;
106
+ boxUv.x += u_borderWidth.y > u_borderWidth.w ? (u_borderWidth.y - u_borderWidth.w) * 0.5 : -(u_borderWidth.w - u_borderWidth.y) * 0.5;
107
+ boxUv.y += u_borderWidth.z > u_borderWidth.x ? (u_borderWidth.z - u_borderWidth.x) * 0.5 : -(u_borderWidth.x - u_borderWidth.z) * 0.5;
82
108
 
83
- if(u_asymWidth == 1) {
84
- borderAlpha = asymBorderWidth(boxUv, boxDist, u_width);
85
- }
86
- else {
87
- borderAlpha = 1.0 - smoothstep(u_width[0], u_width[0], abs(boxDist));
88
- }
109
+ float innerDist = box(boxUv, v_innerSize);
110
+ float innerAlpha = 1.0 - smoothstep(0.0, 1.0, innerDist);
89
111
 
90
- vec4 resColor = vec4(0.0);
91
- resColor = mix(resColor, color, min(color.a, boxAlpha));
92
- resColor = mix(resColor, u_color, min(u_color.a, min(borderAlpha, boxAlpha)));
112
+ vec4 resColor = mix(u_borderColor, color, innerAlpha);
93
113
  gl_FragColor = resColor * u_alpha;
94
114
  }
95
115
  `,
@@ -16,24 +16,20 @@
16
16
  */
17
17
 
18
18
  import type { CoreNode } from '../../CoreNode.js';
19
- import { calcFactoredRadiusArray, valuesAreEqual } from '../../lib/utils.js';
19
+ import { calcFactoredRadiusArray } from '../../lib/utils.js';
20
20
  import type { Vec4 } from '../../renderers/webgl/internal/ShaderUtils.js';
21
21
  import type { WebGlShaderType } from '../../renderers/webgl/WebGlShaderNode.js';
22
22
  import {
23
23
  RoundedWithBorderTemplate,
24
24
  type RoundedWithBorderProps,
25
25
  } from '../templates/RoundedWithBorderTemplate.js';
26
- import { Rounded } from './Rounded.js';
27
26
 
28
27
  export const RoundedWithBorder: WebGlShaderType<RoundedWithBorderProps> = {
29
28
  props: RoundedWithBorderTemplate.props,
30
29
  update(node: CoreNode) {
31
- this.uniformRGBA('u_border_color', this.props!['border-color']);
32
- this.uniform4fa('u_border_width', this.props!['border-width'] as Vec4);
33
- this.uniform1i(
34
- 'u_border_asym',
35
- valuesAreEqual(this.props!['border-width'] as number[]) ? 0 : 1,
36
- );
30
+ this.uniformRGBA('u_borderColor', this.props!['border-color']);
31
+ this.uniform4fa('u_borderWidth', this.props!['border-width'] as Vec4);
32
+
37
33
  this.uniform4fa(
38
34
  'u_radius',
39
35
  calcFactoredRadiusArray(
@@ -43,7 +39,56 @@ export const RoundedWithBorder: WebGlShaderType<RoundedWithBorderProps> = {
43
39
  ),
44
40
  );
45
41
  },
46
- vertex: Rounded.vertex,
42
+ vertex: `
43
+ # ifdef GL_FRAGMENT_PRECISION_HIGH
44
+ precision highp float;
45
+ # else
46
+ precision mediump float;
47
+ # endif
48
+
49
+ attribute vec2 a_position;
50
+ attribute vec2 a_textureCoords;
51
+ attribute vec4 a_color;
52
+ attribute vec2 a_nodeCoords;
53
+
54
+ uniform vec2 u_resolution;
55
+ uniform float u_pixelRatio;
56
+ uniform vec2 u_dimensions;
57
+
58
+ uniform vec4 u_radius;
59
+ uniform vec4 u_borderWidth;
60
+
61
+ varying vec4 v_color;
62
+ varying vec2 v_textureCoords;
63
+ varying vec2 v_nodeCoords;
64
+
65
+ varying vec4 v_innerRadius;
66
+ varying vec2 v_innerSize;
67
+ varying vec2 v_halfDimensions;
68
+
69
+ void main() {
70
+ vec2 normalized = a_position * u_pixelRatio;
71
+ vec2 screenSpace = vec2(2.0 / u_resolution.x, -2.0 / u_resolution.y);
72
+
73
+ v_color = a_color;
74
+ v_nodeCoords = a_nodeCoords;
75
+ v_textureCoords = a_textureCoords;
76
+
77
+ v_halfDimensions = u_dimensions * 0.5;
78
+
79
+ v_innerRadius = vec4(
80
+ max(0.0, u_radius.x - max(u_borderWidth.x, u_borderWidth.w) - 0.5),
81
+ max(0.0, u_radius.y - max(u_borderWidth.x, u_borderWidth.y) - 0.5),
82
+ max(0.0, u_radius.z - max(u_borderWidth.z, u_borderWidth.y) - 0.5),
83
+ max(0.0, u_radius.w - max(u_borderWidth.z, u_borderWidth.w) - 0.5)
84
+ );
85
+
86
+ v_innerSize = (vec2(u_dimensions.x - (u_borderWidth[3] + u_borderWidth[1]) + 1.0, u_dimensions.y - (u_borderWidth[0] + u_borderWidth[2])) - 2.0) * 0.5;
87
+
88
+ gl_Position = vec4(normalized.x * screenSpace.x - 1.0, normalized.y * -abs(screenSpace.y) + 1.0, 0.0, 1.0);
89
+ gl_Position.y = -sign(screenSpace.y) * gl_Position.y;
90
+ }
91
+ `,
47
92
  fragment: `
48
93
  # ifdef GL_FRAGMENT_PRECISION_HIGH
49
94
  precision highp float;
@@ -59,14 +104,17 @@ export const RoundedWithBorder: WebGlShaderType<RoundedWithBorderProps> = {
59
104
 
60
105
  uniform vec4 u_radius;
61
106
 
62
- uniform vec4 u_border_width;
63
- uniform vec4 u_border_color;
64
- uniform int u_border_asym;
107
+ uniform vec4 u_borderWidth;
108
+ uniform vec4 u_borderColor;
65
109
 
66
110
  varying vec4 v_color;
67
111
  varying vec2 v_textureCoords;
68
112
  varying vec2 v_nodeCoords;
69
113
 
114
+ varying vec2 v_halfDimensions;
115
+ varying vec4 v_innerRadius;
116
+ varying vec2 v_innerSize;
117
+
70
118
  float roundedBox(vec2 p, vec2 s, vec4 r) {
71
119
  r.xy = (p.x > 0.0) ? r.yz : r.xw;
72
120
  r.x = (p.y > 0.0) ? r.y : r.x;
@@ -74,40 +122,22 @@ export const RoundedWithBorder: WebGlShaderType<RoundedWithBorderProps> = {
74
122
  return (min(max(q.x, q.y), 0.0) + length(max(q, 0.0))) - r.x;
75
123
  }
76
124
 
77
- float asymBorderWidth(vec2 p, float d, vec4 r, vec4 w) {
78
- r.x = (r.x - (max(w.w, w.x) - min(w.w, w.x))) * 0.5;
79
- r.y = (r.y - (max(w.y, w.x) - min(w.y, w.x))) * 0.5;
80
- r.z = (r.z - (max(w.y, w.z) - min(w.y, w.z))) * 0.5;
81
- r.w = (r.w - (max(w.w, w.z) - min(w.w, w.z))) * 0.5;
82
-
83
- p.x += w.y > w.w ? (w.y - w.w) * 0.5 : -(w.w - w.y) * 0.5;
84
- p.y += w.z > w.x ? (w.z - w.x) * 0.5 : -(w.x - w.z) * 0.5;
85
-
86
- vec2 size = vec2(u_dimensions.x - (w[3] + w[1]), u_dimensions.y - (w[0] + w[2])) * 0.5;
87
- float borderDist = roundedBox(p, size + u_pixelRatio, r);
88
- return 1.0 - smoothstep(0.0, u_pixelRatio, max(-borderDist, d));
89
- }
90
-
91
125
  void main() {
92
126
  vec4 color = texture2D(u_texture, v_textureCoords) * v_color;
93
- vec2 halfDimensions = (u_dimensions * 0.5);
94
127
 
95
- vec2 boxUv = v_nodeCoords.xy * u_dimensions - halfDimensions;
96
- float boxDist = roundedBox(boxUv, halfDimensions, u_radius);
128
+ vec2 boxUv = v_nodeCoords.xy * u_dimensions - v_halfDimensions;
129
+ float outerDist = roundedBox(boxUv, v_halfDimensions, u_radius);
130
+
131
+ float outerAlpha = 1.0 - smoothstep(0.0, 1.0, outerDist);
97
132
 
98
- float roundedAlpha = 1.0 - smoothstep(0.0, u_pixelRatio, boxDist);
99
- float borderAlpha = 0.0;
133
+ boxUv.x += u_borderWidth.y > u_borderWidth.w ? (u_borderWidth.y - u_borderWidth.w) * 0.5 : -(u_borderWidth.w - u_borderWidth.y) * 0.5;
134
+ boxUv.y += u_borderWidth.z > u_borderWidth.x ? ((u_borderWidth.z - u_borderWidth.x) * 0.5 + 0.5) : -(u_borderWidth.x - u_borderWidth.z) * 0.5;
100
135
 
101
- if(u_border_asym == 1) {
102
- borderAlpha = asymBorderWidth(boxUv, boxDist, u_radius, u_border_width);
103
- }
104
- else {
105
- borderAlpha = 1.0 - smoothstep(u_border_width[0] - u_pixelRatio, u_border_width[0], abs(boxDist));
106
- }
136
+ float innerDist = roundedBox(boxUv, v_innerSize, v_innerRadius);
137
+ float innerAlpha = 1.0 - smoothstep(0.0, 1.0, innerDist);
107
138
 
108
- vec4 resColor = vec4(0.0);
109
- resColor = mix(resColor, color, min(color.a, roundedAlpha));
110
- resColor = mix(resColor, u_border_color, min(u_border_color.a, min(borderAlpha, roundedAlpha)));
139
+ vec4 resColor = mix(u_borderColor, color, innerAlpha);
140
+ resColor = mix(vec4(0.0), resColor, outerAlpha);
111
141
  gl_FragColor = resColor * u_alpha;
112
142
  }
113
143
  `,
@@ -16,28 +16,22 @@
16
16
  */
17
17
 
18
18
  import type { CoreNode } from '../../CoreNode.js';
19
- import { calcFactoredRadiusArray, valuesAreEqual } from '../../lib/utils.js';
19
+ import { calcFactoredRadiusArray } from '../../lib/utils.js';
20
20
  import type { Vec4 } from '../../renderers/webgl/internal/ShaderUtils.js';
21
21
  import type { WebGlShaderType } from '../../renderers/webgl/WebGlShaderNode.js';
22
22
  import {
23
23
  RoundedWithBorderAndShadowTemplate,
24
24
  type RoundedWithBorderAndShadowProps,
25
25
  } from '../templates/RoundedWithBorderAndShadowTemplate.js';
26
- import { Shadow } from './Shadow.js';
27
26
 
28
27
  export const RoundedWithBorderAndShadow: WebGlShaderType<RoundedWithBorderAndShadowProps> =
29
28
  {
30
29
  props: RoundedWithBorderAndShadowTemplate.props,
31
30
  update(node: CoreNode) {
32
- this.uniformRGBA('u_border_color', this.props!['border-color']);
33
- this.uniform4fa('u_border_width', this.props!['border-width'] as Vec4);
31
+ this.uniformRGBA('u_borderColor', this.props!['border-color']);
32
+ this.uniform4fa('u_borderWidth', this.props!['border-width'] as Vec4);
34
33
 
35
- this.uniform1i(
36
- 'u_border_asym',
37
- valuesAreEqual(this.props!['border-width'] as number[]) ? 0 : 1,
38
- );
39
-
40
- this.uniformRGBA('u_shadow_color', this.props!['shadow-color']);
34
+ this.uniformRGBA('u_shadowColor', this.props!['shadow-color']);
41
35
  this.uniform4fa('u_shadow', this.props!['shadow-projection']);
42
36
 
43
37
  this.uniform4fa(
@@ -49,7 +43,61 @@ export const RoundedWithBorderAndShadow: WebGlShaderType<RoundedWithBorderAndSha
49
43
  ),
50
44
  );
51
45
  },
52
- vertex: Shadow.vertex as string,
46
+ vertex: `
47
+ # ifdef GL_FRAGMENT_PRECISION_HIGH
48
+ precision highp float;
49
+ # else
50
+ precision mediump float;
51
+ # endif
52
+
53
+ attribute vec2 a_position;
54
+ attribute vec2 a_textureCoords;
55
+ attribute vec4 a_color;
56
+ attribute vec2 a_nodeCoords;
57
+
58
+ uniform vec2 u_resolution;
59
+ uniform float u_pixelRatio;
60
+ uniform float u_rtt;
61
+ uniform vec2 u_dimensions;
62
+
63
+ uniform vec4 u_shadow;
64
+ uniform vec4 u_radius;
65
+ uniform vec4 u_borderWidth;
66
+
67
+ varying vec4 v_color;
68
+ varying vec2 v_textureCoords;
69
+ varying vec2 v_nodeCoords;
70
+
71
+ varying vec4 v_innerRadius;
72
+ varying vec2 v_innerSize;
73
+ varying vec2 v_halfDimensions;
74
+
75
+ void main() {
76
+ vec2 screenSpace = vec2(2.0 / u_resolution.x, -2.0 / u_resolution.y);
77
+ vec2 outerEdge = clamp(a_nodeCoords * 2.0 - vec2(1.0), -1.0, 1.0);
78
+
79
+ vec2 shadowEdge = outerEdge * ((u_shadow.w * 2.0)+ u_shadow.z) + u_shadow.xy;
80
+ vec2 normVertexPos = a_position * u_pixelRatio;
81
+
82
+ vec2 vertexPos = (a_position + outerEdge + shadowEdge) * u_pixelRatio;
83
+ gl_Position = vec4(vertexPos.x * screenSpace.x - 1.0, -sign(screenSpace.y) * (vertexPos.y * -abs(screenSpace.y)) + 1.0, 0.0, 1.0);
84
+
85
+ v_halfDimensions = u_dimensions * 0.5;
86
+
87
+ v_innerRadius = vec4(
88
+ max(0.0, u_radius.x - max(u_borderWidth.x, u_borderWidth.w) - 0.5),
89
+ max(0.0, u_radius.y - max(u_borderWidth.x, u_borderWidth.y) - 0.5),
90
+ max(0.0, u_radius.z - max(u_borderWidth.z, u_borderWidth.y) - 0.5),
91
+ max(0.0, u_radius.w - max(u_borderWidth.z, u_borderWidth.w) - 0.5)
92
+ );
93
+
94
+ v_innerSize = (vec2(u_dimensions.x - (u_borderWidth[3] + u_borderWidth[1]) - 1.0, u_dimensions.y - (u_borderWidth[0] + u_borderWidth[2])) - 2.0) * 0.5;
95
+
96
+ v_color = a_color;
97
+ v_nodeCoords = a_nodeCoords + (screenSpace + shadowEdge) / (u_dimensions);
98
+ v_textureCoords = a_textureCoords + (screenSpace + shadowEdge) / (u_dimensions);
99
+ }
100
+ `,
53
101
  fragment: `
54
102
  # ifdef GL_FRAGMENT_PRECISION_HIGH
55
103
  precision highp float;
@@ -65,16 +113,19 @@ export const RoundedWithBorderAndShadow: WebGlShaderType<RoundedWithBorderAndSha
65
113
  uniform float u_rtt;
66
114
 
67
115
  uniform vec4 u_radius;
68
- uniform vec4 u_border_width;
69
- uniform vec4 u_border_color;
70
- uniform int u_border_asym;
71
- uniform vec4 u_shadow_color;
116
+ uniform vec4 u_borderWidth;
117
+ uniform vec4 u_borderColor;
118
+ uniform vec4 u_shadowColor;
72
119
  uniform vec4 u_shadow;
73
120
 
74
121
  varying vec4 v_color;
75
122
  varying vec2 v_textureCoords;
76
123
  varying vec2 v_nodeCoords;
77
124
 
125
+ varying vec2 v_halfDimensions;
126
+ varying vec4 v_innerRadius;
127
+ varying vec2 v_innerSize;
128
+
78
129
  float roundedBox(vec2 p, vec2 s, vec4 r) {
79
130
  r.xy = (p.x > 0.0) ? r.yz : r.xw;
80
131
  r.x = (p.y > 0.0) ? r.y : r.x;
@@ -82,20 +133,6 @@ export const RoundedWithBorderAndShadow: WebGlShaderType<RoundedWithBorderAndSha
82
133
  return (min(max(q.x, q.y), 0.0) + length(max(q, 0.0))) - r.x;
83
134
  }
84
135
 
85
- float asymBorderWidth(vec2 p, float d, vec4 r, vec4 w) {
86
- r.x = (r.x - (max(w.w, w.x) - min(w.w, w.x))) * 0.5;
87
- r.y = (r.y - (max(w.y, w.x) - min(w.y, w.x))) * 0.5;
88
- r.z = (r.z - (max(w.y, w.z) - min(w.y, w.z))) * 0.5;
89
- r.w = (r.w - (max(w.w, w.z) - min(w.w, w.z))) * 0.5;
90
-
91
- p.x += w.y > w.w ? (w.y - w.w) * 0.5 : -(w.w - w.y) * 0.5;
92
- p.y += w.z > w.x ? (w.z - w.x) * 0.5 : -(w.x - w.z) * 0.5;
93
-
94
- vec2 size = vec2(u_dimensions.x - (w[3] + w[1]), u_dimensions.y - (w[0] + w[2])) * 0.5;
95
- float borderDist = roundedBox(p, size, r);
96
- return 1.0 - smoothstep(0.0, u_pixelRatio, max(-borderDist, d));
97
- }
98
-
99
136
  float shadowBox(vec2 p, vec2 s, vec4 r) {
100
137
  r.xy = (p.x > 0.0) ? r.yz : r.xw;
101
138
  r.x = (p.y > 0.0) ? r.y : r.x;
@@ -106,27 +143,23 @@ export const RoundedWithBorderAndShadow: WebGlShaderType<RoundedWithBorderAndSha
106
143
 
107
144
  void main() {
108
145
  vec4 color = texture2D(u_texture, v_textureCoords) * v_color;
109
- vec2 halfDimensions = (u_dimensions * 0.5);
110
146
 
111
- vec2 boxUv = v_nodeCoords.xy * u_dimensions - halfDimensions;
112
- float outerBoxDist = roundedBox(boxUv, halfDimensions, u_radius);
147
+ vec2 boxUv = v_nodeCoords.xy * u_dimensions - v_halfDimensions;
148
+ float outerDist = roundedBox(boxUv, v_halfDimensions - 1.0, u_radius);
149
+
150
+ float outerAlpha = 1.0 - smoothstep(0.0, 1.0, outerDist);
113
151
 
114
- float roundedAlpha = 1.0 - smoothstep(0.0, u_pixelRatio, outerBoxDist);
115
- float borderAlpha = 0.0;
152
+ boxUv.x += u_borderWidth.y > u_borderWidth.w ? (u_borderWidth.y - u_borderWidth.w) * 0.5 : -(u_borderWidth.w - u_borderWidth.y) * 0.5;
153
+ boxUv.y += u_borderWidth.z > u_borderWidth.x ? ((u_borderWidth.z - u_borderWidth.x) * 0.5 + 0.5) : -(u_borderWidth.x - u_borderWidth.z) * 0.5;
116
154
 
117
- if(u_border_asym == 1) {
118
- borderAlpha = asymBorderWidth(boxUv, outerBoxDist, u_radius, u_border_width);
119
- }
120
- else {
121
- borderAlpha = 1.0 - smoothstep(u_border_width[0], u_border_width[0], abs(outerBoxDist));
122
- }
155
+ float innerDist = roundedBox(boxUv, v_innerSize, v_innerRadius);
156
+ float innerAlpha = 1.0 - smoothstep(0.0, 1.0, innerDist);
123
157
 
124
- float shadowAlpha = shadowBox(boxUv - u_shadow.xy, halfDimensions + u_shadow.w, u_radius + u_shadow.z);
158
+ float shadowAlpha = shadowBox(boxUv - u_shadow.xy, v_halfDimensions + u_shadow.w, u_radius + u_shadow.z);
125
159
 
126
- vec4 resColor = vec4(0.0);
127
- resColor = mix(resColor, u_shadow_color, shadowAlpha);
128
- resColor = mix(resColor, color, min(color.a, roundedAlpha));
129
- resColor = mix(resColor, u_border_color, min(u_border_color.a, min(borderAlpha, roundedAlpha)));
160
+ vec4 shadow = mix(vec4(0.0), u_shadowColor, shadowAlpha);
161
+ vec4 resColor = mix(u_borderColor, color, innerAlpha);
162
+ resColor = mix(shadow, resColor, outerAlpha);
130
163
  gl_FragColor = resColor * u_alpha;
131
164
  }
132
165
  `,
@@ -708,7 +708,10 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
708
708
  width: textW,
709
709
  rtt: false,
710
710
  parentHasRenderTexture: node.parentHasRenderTexture,
711
- framebufferDimensions: node.framebufferDimensions,
711
+ framebufferDimensions:
712
+ node.parentHasRenderTexture === true
713
+ ? node.parentFramebufferDimensions
714
+ : null,
712
715
  },
713
716
  0,
714
717
  );
@@ -172,7 +172,7 @@ export class Inspector {
172
172
  private scaleY = 1;
173
173
 
174
174
  constructor(canvas: HTMLCanvasElement, settings: RendererMainSettings) {
175
- if (isProductionEnvironment()) return;
175
+ if (isProductionEnvironment === true) return;
176
176
 
177
177
  if (!settings) {
178
178
  throw new Error('settings is required');
@@ -19,7 +19,7 @@
19
19
 
20
20
  import type { ExtractProps, TextureMap } from '../core/CoreTextureManager.js';
21
21
  import { EventEmitter } from '../common/EventEmitter.js';
22
- import { assertTruthy, isProductionEnvironment } from '../utils.js';
22
+ import { isProductionEnvironment } from '../utils.js';
23
23
  import { Stage } from '../core/Stage.js';
24
24
  import { CoreNode, type CoreNodeProps } from '../core/CoreNode.js';
25
25
  import { type CoreTextNodeProps } from '../core/CoreTextNode.js';
@@ -466,7 +466,7 @@ export class RendererMain extends EventEmitter {
466
466
  targetEl.appendChild(canvas);
467
467
 
468
468
  // Initialize inspector (if enabled)
469
- if (inspector && !isProductionEnvironment()) {
469
+ if (inspector && isProductionEnvironment === false) {
470
470
  this.inspector = new inspector(canvas, resolvedSettings);
471
471
  }
472
472
  }
@@ -489,8 +489,6 @@ export class RendererMain extends EventEmitter {
489
489
  createNode<ShNode extends CoreShaderNode<any>>(
490
490
  props: Partial<INodeProps<ShNode>>,
491
491
  ): INode<ShNode> {
492
- assertTruthy(this.stage, 'Stage is not initialized');
493
-
494
492
  const node = this.stage.createNode(props as Partial<CoreNodeProps>);
495
493
 
496
494
  if (this.inspector) {
package/src/utils.ts CHANGED
@@ -64,6 +64,15 @@ export function createWebGLContext(
64
64
  return gl;
65
65
  }
66
66
 
67
+ /**
68
+ * Checks if we're in a development environment or not.
69
+ *
70
+ * @returns
71
+ */
72
+ declare const __DEV__: boolean;
73
+ export const isProductionEnvironment =
74
+ typeof __DEV__ !== 'undefined' ? !__DEV__ : true;
75
+
67
76
  /**
68
77
  * Asserts a condition is truthy, otherwise throws an error
69
78
  *
@@ -80,7 +89,7 @@ export function assertTruthy(
80
89
  condition: unknown,
81
90
  message?: string,
82
91
  ): asserts condition {
83
- if (isProductionEnvironment() === true) return;
92
+ if (isProductionEnvironment === true) return;
84
93
  if (!condition) {
85
94
  throw new Error(message || 'Assertion failed');
86
95
  }
@@ -230,15 +239,6 @@ export function getImageAspectRatio(width: number, height: number): number {
230
239
  return width / height;
231
240
  }
232
241
 
233
- /**
234
- * Checks import.meta if env is production
235
- *
236
- * @returns
237
- */
238
- export function isProductionEnvironment(): boolean {
239
- return import.meta.env && import.meta.env.PROD;
240
- }
241
-
242
242
  /**
243
243
  * Returns a new unique ID
244
244
  */
@@ -1,13 +0,0 @@
1
- if (
2
- process.cwd() === process.env.INIT_CWD &&
3
- !process.env.npm_execpath.includes('pnpm')
4
- ) {
5
- console.log('\x1b[31m');
6
- console.log('=============================================\n');
7
- console.log(' Please use PNPM as a package manager');
8
- console.log(' See: https://pnpm.io/ for more info');
9
- console.log('\n=============================================');
10
- console.log('\x1b[0m');
11
-
12
- process.exit(1);
13
- }
@@ -1,64 +0,0 @@
1
- /*
2
- * If not stated otherwise in this file or this component's LICENSE file the
3
- * following copyright and licenses apply:
4
- *
5
- * Copyright 2023 Comcast Cable Communications Management, LLC.
6
- *
7
- * Licensed under the Apache License, Version 2.0 (the License);
8
- * you may not use this file except in compliance with the License.
9
- * You may obtain a copy of the License at
10
- *
11
- * http://www.apache.org/licenses/LICENSE-2.0
12
- *
13
- * Unless required by applicable law or agreed to in writing, software
14
- * distributed under the License is distributed on an "AS IS" BASIS,
15
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
16
- * See the License for the specific language governing permissions and
17
- * limitations under the License.
18
- */
19
-
20
- import type { Stage } from './Stage.js';
21
-
22
- /**
23
- * Platform render loop initiator
24
- */
25
- export const startLoop = (stage: Stage) => {
26
- let isIdle = false;
27
- const runLoop = () => {
28
- stage.updateFrameTime();
29
- stage.updateAnimations();
30
-
31
- if (!stage.hasSceneUpdates()) {
32
- // We still need to calculate the fps else it looks like the app is frozen
33
- stage.calculateFps();
34
- setTimeout(runLoop, 16.666666666666668);
35
-
36
- if (!isIdle) {
37
- stage.shManager.cleanup();
38
- stage.eventBus.emit('idle');
39
- isIdle = true;
40
- }
41
-
42
- if (stage.txMemManager.checkCleanup() === true) {
43
- stage.txMemManager.cleanup(false);
44
- }
45
-
46
- stage.flushFrameEvents();
47
- return;
48
- }
49
-
50
- isIdle = false;
51
- stage.drawFrame();
52
- stage.flushFrameEvents();
53
- requestAnimationFrame(runLoop);
54
- };
55
- requestAnimationFrame(runLoop);
56
- };
57
-
58
- /**
59
- * Return unix timestamp
60
- * @return {number}
61
- */
62
- export const getTimeStamp = () => {
63
- return performance ? performance.now() : Date.now();
64
- };