@lightningjs/renderer 2.20.4 → 2.22.0
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.
- package/dist/src/core/Autosizer.js +1 -3
- package/dist/src/core/Autosizer.js.map +1 -1
- package/dist/src/core/animations/CoreAnimationController.d.ts +1 -1
- package/dist/src/core/animations/CoreAnimationController.js +4 -2
- package/dist/src/core/animations/CoreAnimationController.js.map +1 -1
- package/dist/src/core/renderers/CoreShaderNode.d.ts +4 -0
- package/dist/src/core/renderers/CoreShaderNode.js +15 -0
- package/dist/src/core/renderers/CoreShaderNode.js.map +1 -1
- package/dist/src/core/renderers/canvas/CanvasRenderer.d.ts +3 -3
- package/dist/src/core/renderers/canvas/CanvasRenderer.js +38 -33
- package/dist/src/core/renderers/canvas/CanvasRenderer.js.map +1 -1
- package/dist/src/core/renderers/canvas/CanvasShaderNode.d.ts +1 -2
- package/dist/src/core/renderers/canvas/CanvasShaderNode.js.map +1 -1
- package/dist/src/core/renderers/webgl/SdfRenderOp.d.ts +33 -0
- package/dist/src/core/renderers/webgl/SdfRenderOp.js +97 -0
- package/dist/src/core/renderers/webgl/SdfRenderOp.js.map +1 -0
- package/dist/src/core/renderers/webgl/WebGlCtxTexture.js +11 -7
- package/dist/src/core/renderers/webgl/WebGlCtxTexture.js.map +1 -1
- package/dist/src/core/renderers/webgl/WebGlRenderer.d.ts +6 -18
- package/dist/src/core/renderers/webgl/WebGlRenderer.js +48 -61
- package/dist/src/core/renderers/webgl/WebGlRenderer.js.map +1 -1
- package/dist/src/core/renderers/webgl/WebGlShaderNode.d.ts +2 -4
- package/dist/src/core/renderers/webgl/WebGlShaderNode.js.map +1 -1
- package/dist/src/core/renderers/webgl/WebGlShaderProgram.d.ts +3 -4
- package/dist/src/core/renderers/webgl/WebGlShaderProgram.js +40 -29
- package/dist/src/core/renderers/webgl/WebGlShaderProgram.js.map +1 -1
- package/dist/src/core/renderers/webgl/shaders/effects/LinearGradientEffect.js +8 -24
- package/dist/src/core/renderers/webgl/shaders/effects/LinearGradientEffect.js.map +1 -1
- package/dist/src/core/renderers/webgl/shaders/effects/RadialGradientEffect.js +8 -25
- package/dist/src/core/renderers/webgl/shaders/effects/RadialGradientEffect.js.map +1 -1
- package/dist/src/core/shaders/canvas/Border.d.ts +8 -2
- package/dist/src/core/shaders/canvas/Border.js +62 -23
- package/dist/src/core/shaders/canvas/Border.js.map +1 -1
- package/dist/src/core/shaders/canvas/HolePunch.js +2 -1
- package/dist/src/core/shaders/canvas/HolePunch.js.map +1 -1
- package/dist/src/core/shaders/canvas/LinearGradient.js +5 -3
- package/dist/src/core/shaders/canvas/LinearGradient.js.map +1 -1
- package/dist/src/core/shaders/canvas/RadialGradient.js +7 -5
- package/dist/src/core/shaders/canvas/RadialGradient.js.map +1 -1
- package/dist/src/core/shaders/canvas/Rounded.js +2 -2
- package/dist/src/core/shaders/canvas/Rounded.js.map +1 -1
- package/dist/src/core/shaders/canvas/RoundedWithBorder.d.ts +6 -3
- package/dist/src/core/shaders/canvas/RoundedWithBorder.js +39 -9
- package/dist/src/core/shaders/canvas/RoundedWithBorder.js.map +1 -1
- package/dist/src/core/shaders/canvas/RoundedWithBorderAndShadow.d.ts +2 -3
- package/dist/src/core/shaders/canvas/RoundedWithBorderAndShadow.js +44 -7
- package/dist/src/core/shaders/canvas/RoundedWithBorderAndShadow.js.map +1 -1
- package/dist/src/core/shaders/canvas/RoundedWithShadow.js +5 -4
- package/dist/src/core/shaders/canvas/RoundedWithShadow.js.map +1 -1
- package/dist/src/core/shaders/canvas/Shadow.js +4 -2
- package/dist/src/core/shaders/canvas/Shadow.js.map +1 -1
- package/dist/src/core/shaders/canvas/utils/render.d.ts +1 -1
- package/dist/src/core/shaders/canvas/utils/render.js +31 -18
- package/dist/src/core/shaders/canvas/utils/render.js.map +1 -1
- package/dist/src/core/shaders/templates/BorderTemplate.d.ts +10 -0
- package/dist/src/core/shaders/templates/BorderTemplate.js +20 -0
- package/dist/src/core/shaders/templates/BorderTemplate.js.map +1 -1
- package/dist/src/core/shaders/webgl/Border.js +66 -14
- package/dist/src/core/shaders/webgl/Border.js.map +1 -1
- package/dist/src/core/shaders/webgl/RoundedWithBorder.js +90 -31
- package/dist/src/core/shaders/webgl/RoundedWithBorder.js.map +1 -1
- package/dist/src/core/shaders/webgl/RoundedWithBorderAndShadow.js +98 -38
- package/dist/src/core/shaders/webgl/RoundedWithBorderAndShadow.js.map +1 -1
- package/dist/src/core/shaders/webgl/RoundedWithShadow.js +5 -4
- package/dist/src/core/shaders/webgl/RoundedWithShadow.js.map +1 -1
- package/dist/src/core/shaders/webgl/Shadow.js +12 -6
- package/dist/src/core/shaders/webgl/Shadow.js.map +1 -1
- package/dist/src/core/text-rendering/CanvasFont.d.ts +14 -0
- package/dist/src/core/text-rendering/CanvasFont.js +115 -0
- package/dist/src/core/text-rendering/CanvasFont.js.map +1 -0
- package/dist/src/core/text-rendering/CoreFont.d.ts +33 -0
- package/dist/src/core/text-rendering/CoreFont.js +48 -0
- package/dist/src/core/text-rendering/CoreFont.js.map +1 -0
- package/dist/src/core/text-rendering/FontManager.d.ts +11 -0
- package/dist/src/core/text-rendering/FontManager.js +41 -0
- package/dist/src/core/text-rendering/FontManager.js.map +1 -0
- package/dist/src/core/text-rendering/SdfFont.d.ts +29 -0
- package/dist/src/core/text-rendering/SdfFont.js +142 -0
- package/dist/src/core/text-rendering/SdfFont.js.map +1 -0
- package/dist/src/core/text-rendering/SdfTextRenderer.js +12 -20
- package/dist/src/core/text-rendering/SdfTextRenderer.js.map +1 -1
- package/dist/tsconfig.dist.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/core/animations/CoreAnimationController.ts +4 -2
- package/src/core/renderers/webgl/shaders/effects/LinearGradientEffect.ts +8 -26
- package/src/core/renderers/webgl/shaders/effects/RadialGradientEffect.ts +8 -27
|
@@ -22,6 +22,8 @@ export const RoundedWithBorderAndShadow = {
|
|
|
22
22
|
const props = this.props;
|
|
23
23
|
this.uniformRGBA('u_borderColor', props['border-color']);
|
|
24
24
|
this.uniform4fa('u_borderWidth', props['border-w']);
|
|
25
|
+
this.uniform1f('u_borderGap', this.props['border-gap']);
|
|
26
|
+
this.uniform1f('u_borderAlign', this.props['border-align']);
|
|
25
27
|
this.uniformRGBA('u_shadowColor', props['shadow-color']);
|
|
26
28
|
this.uniform4fa('u_shadow', props['shadow-projection']);
|
|
27
29
|
this.uniform4fa('u_radius', calcFactoredRadiusArray(props.radius, node.w, node.h));
|
|
@@ -46,45 +48,94 @@ export const RoundedWithBorderAndShadow = {
|
|
|
46
48
|
uniform vec4 u_shadow;
|
|
47
49
|
uniform vec4 u_radius;
|
|
48
50
|
uniform vec4 u_borderWidth;
|
|
51
|
+
uniform float u_borderGap;
|
|
52
|
+
uniform float u_borderAlign;
|
|
49
53
|
|
|
50
54
|
varying vec4 v_color;
|
|
51
55
|
varying vec2 v_textureCoords;
|
|
52
56
|
varying vec2 v_nodeCoords;
|
|
53
57
|
|
|
54
|
-
varying vec4 v_innerRadius;
|
|
55
58
|
varying vec2 v_innerSize;
|
|
59
|
+
varying vec2 v_outerSize;
|
|
60
|
+
varying vec2 v_outerBorderUv;
|
|
61
|
+
varying vec2 v_innerBorderUv;
|
|
62
|
+
varying vec4 v_innerBorderRadius;
|
|
63
|
+
varying vec4 v_outerBorderRadius;
|
|
56
64
|
varying vec2 v_halfDimensions;
|
|
65
|
+
varying float v_edgeWidth;
|
|
57
66
|
varying float v_borderZero;
|
|
58
67
|
|
|
59
68
|
void main() {
|
|
60
69
|
vec2 screenSpace = vec2(2.0 / u_resolution.x, -2.0 / u_resolution.y);
|
|
61
|
-
vec2
|
|
70
|
+
vec2 edge = clamp(a_nodeCoords * 2.0 - vec2(1.0), -1.0, 1.0);
|
|
62
71
|
|
|
63
|
-
vec2
|
|
64
|
-
vec2
|
|
65
|
-
|
|
66
|
-
vec2 vertexPos = (a_position + outerEdge + shadowEdge) * u_pixelRatio;
|
|
67
|
-
gl_Position = vec4(vertexPos.x * screenSpace.x - 1.0, -sign(screenSpace.y) * (vertexPos.y * -abs(screenSpace.y)) + 1.0, 0.0, 1.0);
|
|
68
|
-
|
|
69
|
-
v_halfDimensions = u_dimensions * 0.5;
|
|
70
|
-
|
|
71
|
-
v_color = a_color;
|
|
72
|
-
v_nodeCoords = a_nodeCoords + (screenSpace + shadowEdge) / (u_dimensions);
|
|
73
|
-
v_textureCoords = a_textureCoords + (screenSpace + shadowEdge) / (u_dimensions);
|
|
72
|
+
vec2 edgeOffset = edge * ((u_shadow.w * 2.0)+ u_shadow.z) + u_shadow.xy;
|
|
73
|
+
vec2 vertexPos = (a_position + edge + edgeOffset) * u_pixelRatio;
|
|
74
74
|
|
|
75
75
|
v_borderZero = u_borderWidth == vec4(0.0) ? 1.0 : 0.0;
|
|
76
76
|
|
|
77
|
+
v_innerSize = vec2(0.0);
|
|
78
|
+
v_outerSize = vec2(0.0);
|
|
77
79
|
|
|
78
80
|
if(v_borderZero == 0.0) {
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
81
|
+
float borderTop = u_borderWidth.x;
|
|
82
|
+
float borderRight = u_borderWidth.y;
|
|
83
|
+
float borderBottom = u_borderWidth.z;
|
|
84
|
+
float borderLeft = u_borderWidth.w;
|
|
85
|
+
|
|
86
|
+
v_outerBorderUv = vec2(0.0);
|
|
87
|
+
v_innerBorderUv = vec2(0.0);
|
|
88
|
+
|
|
89
|
+
vec2 borderSize = vec2(borderRight + borderLeft, borderTop + borderBottom);
|
|
90
|
+
vec2 extraSize = borderSize * u_borderAlign;
|
|
91
|
+
float gapLeft = step(0.001, borderLeft) * u_borderGap;
|
|
92
|
+
float gapRight = step(0.001, borderRight) * u_borderGap;
|
|
93
|
+
float gapTop = step(0.001, borderTop) * u_borderGap;
|
|
94
|
+
float gapBottom = step(0.001, borderBottom) * u_borderGap;
|
|
95
|
+
vec2 gapSize = vec2(gapLeft + gapRight, gapTop + gapBottom);
|
|
96
|
+
|
|
97
|
+
v_outerSize = (u_dimensions + gapSize + extraSize) * 0.5;
|
|
98
|
+
v_innerSize = v_outerSize - borderSize * 0.5;
|
|
99
|
+
|
|
100
|
+
// Use sign() to avoid branching
|
|
101
|
+
vec2 borderDiff = vec2(borderRight - borderLeft, borderBottom - borderTop);
|
|
102
|
+
vec2 signDiff = sign(borderDiff);
|
|
103
|
+
borderDiff = abs(borderDiff);
|
|
104
|
+
|
|
105
|
+
vec2 gapDiff = vec2(gapRight - gapLeft, gapBottom - gapTop);
|
|
106
|
+
vec2 signGapDiff = sign(gapDiff);
|
|
107
|
+
gapDiff = abs(gapDiff);
|
|
108
|
+
|
|
109
|
+
v_outerBorderUv = -signDiff * borderDiff * u_borderAlign * 0.5 - signGapDiff * gapDiff * 0.5;
|
|
110
|
+
v_innerBorderUv = v_outerBorderUv + signDiff * borderDiff * 0.5;
|
|
111
|
+
|
|
112
|
+
v_outerBorderRadius = vec4(
|
|
113
|
+
max(0.0, u_radius.x + max(borderTop * u_borderAlign + u_borderGap, borderLeft * u_borderAlign + u_borderGap)),
|
|
114
|
+
max(0.0, u_radius.y + max(borderTop * u_borderAlign + u_borderGap, borderRight * u_borderAlign + u_borderGap)),
|
|
115
|
+
max(0.0, u_radius.z + max(borderBottom * u_borderAlign + u_borderGap, borderRight * u_borderAlign + u_borderGap)),
|
|
116
|
+
max(0.0, u_radius.w + max(borderBottom * u_borderAlign + u_borderGap, borderLeft * u_borderAlign + u_borderGap))
|
|
84
117
|
);
|
|
85
118
|
|
|
86
|
-
|
|
119
|
+
v_innerBorderRadius = vec4(
|
|
120
|
+
max(0.0, v_outerBorderRadius.x - max(borderTop, borderLeft)),
|
|
121
|
+
max(0.0, v_outerBorderRadius.y - max(borderTop, borderRight)),
|
|
122
|
+
max(0.0, v_outerBorderRadius.z - max(borderBottom, borderRight)),
|
|
123
|
+
max(0.0, v_outerBorderRadius.w - max(borderBottom, borderLeft))
|
|
124
|
+
);
|
|
125
|
+
|
|
126
|
+
vec2 edgeOffsetExtra = step(u_dimensions * 0.5, v_outerSize) * edge * (extraSize + u_borderGap);
|
|
127
|
+
edgeOffset += edgeOffsetExtra;
|
|
128
|
+
|
|
129
|
+
vertexPos = (a_position + edge + edgeOffset) * u_pixelRatio;
|
|
87
130
|
}
|
|
131
|
+
|
|
132
|
+
gl_Position = vec4(vertexPos.x * screenSpace.x - 1.0, -sign(screenSpace.y) * (vertexPos.y * -abs(screenSpace.y)) + 1.0, 0.0, 1.0);
|
|
133
|
+
|
|
134
|
+
v_halfDimensions = u_dimensions * 0.5;
|
|
135
|
+
v_edgeWidth = 1.0 / u_pixelRatio;
|
|
136
|
+
v_color = a_color;
|
|
137
|
+
v_nodeCoords = a_nodeCoords + (screenSpace + edgeOffset) / (u_dimensions);
|
|
138
|
+
v_textureCoords = a_textureCoords + (screenSpace + edgeOffset) / (u_dimensions);
|
|
88
139
|
}
|
|
89
140
|
`,
|
|
90
141
|
fragment: `
|
|
@@ -111,9 +162,14 @@ export const RoundedWithBorderAndShadow = {
|
|
|
111
162
|
varying vec2 v_textureCoords;
|
|
112
163
|
varying vec2 v_nodeCoords;
|
|
113
164
|
|
|
114
|
-
varying vec2 v_halfDimensions;
|
|
115
|
-
varying vec4 v_innerRadius;
|
|
116
165
|
varying vec2 v_innerSize;
|
|
166
|
+
varying vec2 v_outerSize;
|
|
167
|
+
varying vec2 v_outerBorderUv;
|
|
168
|
+
varying vec2 v_innerBorderUv;
|
|
169
|
+
varying vec4 v_innerBorderRadius;
|
|
170
|
+
varying vec4 v_outerBorderRadius;
|
|
171
|
+
varying vec2 v_halfDimensions;
|
|
172
|
+
varying float v_edgeWidth;
|
|
117
173
|
varying float v_borderZero;
|
|
118
174
|
|
|
119
175
|
float roundedBox(vec2 p, vec2 s, vec4 r) {
|
|
@@ -133,30 +189,34 @@ export const RoundedWithBorderAndShadow = {
|
|
|
133
189
|
|
|
134
190
|
void main() {
|
|
135
191
|
vec4 color = texture2D(u_texture, v_textureCoords) * v_color;
|
|
136
|
-
|
|
192
|
+
vec4 resultColor = vec4(0.0);
|
|
137
193
|
vec2 boxUv = v_nodeCoords.xy * u_dimensions - v_halfDimensions;
|
|
138
|
-
float
|
|
139
|
-
|
|
140
|
-
float
|
|
141
|
-
float outerAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, outerDist);
|
|
142
|
-
|
|
143
|
-
float shadowAlpha = shadowBox(boxUv - u_shadow.xy, v_halfDimensions + u_shadow.w, u_radius + u_shadow.z);
|
|
144
|
-
vec4 shadow = mix(vec4(0.0), u_shadowColor, shadowAlpha);
|
|
194
|
+
float nodeDist = roundedBox(boxUv, v_halfDimensions - v_edgeWidth, u_radius);
|
|
195
|
+
float nodeAlpha = 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, nodeDist);
|
|
196
|
+
float shadowAlpha;
|
|
145
197
|
|
|
146
198
|
if(v_borderZero == 1.0) {
|
|
147
|
-
|
|
199
|
+
shadowAlpha = shadowBox(boxUv - u_shadow.xy, v_halfDimensions + u_shadow.w - v_edgeWidth, u_radius + u_shadow.z);
|
|
200
|
+
resultColor = mix(resultColor, u_shadowColor, shadowAlpha);
|
|
201
|
+
gl_FragColor = mix(resultColor, color, nodeAlpha) * u_alpha;
|
|
148
202
|
return;
|
|
149
203
|
}
|
|
150
204
|
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
205
|
+
if(v_outerSize.x > v_halfDimensions.x || v_outerSize.y > v_halfDimensions.y) {
|
|
206
|
+
shadowAlpha = shadowBox(boxUv + v_outerBorderUv - u_shadow.xy, v_outerSize + u_shadow.w - v_edgeWidth, v_outerBorderRadius + u_shadow.z);
|
|
207
|
+
}
|
|
208
|
+
else {
|
|
209
|
+
shadowAlpha = shadowBox(boxUv - u_shadow.xy, v_halfDimensions + u_shadow.w - v_edgeWidth, u_radius + u_shadow.z);
|
|
210
|
+
}
|
|
156
211
|
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
212
|
+
float outerDist = roundedBox(boxUv + v_outerBorderUv, v_outerSize - v_edgeWidth, v_outerBorderRadius);
|
|
213
|
+
float innerDist = roundedBox(boxUv + v_innerBorderUv, v_innerSize - v_edgeWidth, v_innerBorderRadius);
|
|
214
|
+
float borderDist = max(-innerDist, outerDist);
|
|
215
|
+
float borderAlpha = (1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, borderDist)) * u_borderColor.a;
|
|
216
|
+
resultColor = mix(resultColor, u_shadowColor, shadowAlpha);
|
|
217
|
+
resultColor = mix(resultColor, color, nodeAlpha);
|
|
218
|
+
resultColor = mix(resultColor, vec4(u_borderColor.rgb, 1.0), borderAlpha);
|
|
219
|
+
gl_FragColor = resultColor * u_alpha;
|
|
160
220
|
}
|
|
161
221
|
`,
|
|
162
222
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RoundedWithBorderAndShadow.js","sourceRoot":"","sources":["../../../../../src/core/shaders/webgl/RoundedWithBorderAndShadow.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAGH,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAG7D,OAAO,EACL,kCAAkC,GAEnC,MAAM,oDAAoD,CAAC;AAE5D,MAAM,CAAC,MAAM,0BAA0B,GACrC;IACE,KAAK,EAAE,kCAAkC,CAAC,KAAK;IAC/C,MAAM,CAAC,IAAc;QACnB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAM,CAAC;QAC1B,IAAI,CAAC,WAAW,CAAC,eAAe,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC;QACzD,IAAI,CAAC,UAAU,CAAC,eAAe,EAAE,KAAK,CAAC,UAAU,CAAS,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"RoundedWithBorderAndShadow.js","sourceRoot":"","sources":["../../../../../src/core/shaders/webgl/RoundedWithBorderAndShadow.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAGH,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAG7D,OAAO,EACL,kCAAkC,GAEnC,MAAM,oDAAoD,CAAC;AAE5D,MAAM,CAAC,MAAM,0BAA0B,GACrC;IACE,KAAK,EAAE,kCAAkC,CAAC,KAAK;IAC/C,MAAM,CAAC,IAAc;QACnB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAM,CAAC;QAC1B,IAAI,CAAC,WAAW,CAAC,eAAe,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC;QACzD,IAAI,CAAC,UAAU,CAAC,eAAe,EAAE,KAAK,CAAC,UAAU,CAAS,CAAC,CAAC;QAC5D,IAAI,CAAC,SAAS,CAAC,aAAa,EAAE,IAAI,CAAC,KAAM,CAAC,YAAY,CAAW,CAAC,CAAC;QACnE,IAAI,CAAC,SAAS,CAAC,eAAe,EAAE,IAAI,CAAC,KAAM,CAAC,cAAc,CAAW,CAAC,CAAC;QAEvE,IAAI,CAAC,WAAW,CAAC,eAAe,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC;QACzD,IAAI,CAAC,UAAU,CAAC,UAAU,EAAE,KAAK,CAAC,mBAAmB,CAAC,CAAC,CAAC;QAExD,IAAI,CAAC,UAAU,CACb,UAAU,EACV,uBAAuB,CAAC,KAAK,CAAC,MAAc,EAAE,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CAC9D,CAAC;IACJ,CAAC;IACD,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6GT;IACC,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgFX;CACA,CAAC"}
|
|
@@ -48,6 +48,8 @@ export const RoundedWithShadow = {
|
|
|
48
48
|
varying vec2 v_textureCoords;
|
|
49
49
|
varying vec2 v_nodeCoords;
|
|
50
50
|
|
|
51
|
+
varying float v_edgeWidth;
|
|
52
|
+
|
|
51
53
|
float roundedBox(vec2 p, vec2 s, vec4 r) {
|
|
52
54
|
r.xy = (p.x > 0.0) ? r.yz : r.xw;
|
|
53
55
|
r.x = (p.y > 0.0) ? r.y : r.x;
|
|
@@ -68,12 +70,11 @@ export const RoundedWithShadow = {
|
|
|
68
70
|
vec2 halfDimensions = (u_dimensions * 0.5);
|
|
69
71
|
|
|
70
72
|
vec2 boxUv = v_nodeCoords.xy * u_dimensions - halfDimensions;
|
|
71
|
-
float boxDist = roundedBox(boxUv, halfDimensions, u_radius);
|
|
73
|
+
float boxDist = roundedBox(boxUv, halfDimensions - v_edgeWidth, u_radius);
|
|
72
74
|
|
|
73
|
-
float
|
|
74
|
-
float roundedAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, boxDist);
|
|
75
|
+
float roundedAlpha = 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, boxDist);
|
|
75
76
|
|
|
76
|
-
float shadowAlpha = shadowBox(boxUv - u_shadow.xy, halfDimensions + u_shadow.w, u_radius + u_shadow.z);
|
|
77
|
+
float shadowAlpha = shadowBox(boxUv - u_shadow.xy, halfDimensions + u_shadow.w - v_edgeWidth, u_radius + u_shadow.z);
|
|
77
78
|
|
|
78
79
|
vec4 resColor = vec4(0.0);
|
|
79
80
|
resColor = mix(resColor, u_shadow_color, shadowAlpha);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RoundedWithShadow.js","sourceRoot":"","sources":["../../../../../src/core/shaders/webgl/RoundedWithShadow.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAGH,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAG7D,OAAO,EACL,yBAAyB,GAE1B,MAAM,2CAA2C,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,MAAM,CAAC,MAAM,iBAAiB,GAA4C;IACxE,KAAK,EAAE,yBAAyB,CAAC,KAAK;IACtC,MAAM,CAAC,IAAc;QACnB,IAAI,CAAC,WAAW,CAAC,gBAAgB,EAAE,IAAI,CAAC,KAAM,CAAC,cAAc,CAAE,CAAC,CAAC;QACjE,IAAI,CAAC,UAAU,CAAC,UAAU,EAAE,IAAI,CAAC,KAAM,CAAC,mBAAmB,CAAE,CAAC,CAAC;QAC/D,IAAI,CAAC,UAAU,CACb,UAAU,EACV,uBAAuB,CAAC,IAAI,CAAC,KAAM,CAAC,MAAc,EAAE,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CACpE,CAAC;IACJ,CAAC;IACD,MAAM,EAAE,MAAM,CAAC,MAAgB;IAC/B,QAAQ,EAAE
|
|
1
|
+
{"version":3,"file":"RoundedWithShadow.js","sourceRoot":"","sources":["../../../../../src/core/shaders/webgl/RoundedWithShadow.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAGH,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAG7D,OAAO,EACL,yBAAyB,GAE1B,MAAM,2CAA2C,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,MAAM,CAAC,MAAM,iBAAiB,GAA4C;IACxE,KAAK,EAAE,yBAAyB,CAAC,KAAK;IACtC,MAAM,CAAC,IAAc;QACnB,IAAI,CAAC,WAAW,CAAC,gBAAgB,EAAE,IAAI,CAAC,KAAM,CAAC,cAAc,CAAE,CAAC,CAAC;QACjE,IAAI,CAAC,UAAU,CAAC,UAAU,EAAE,IAAI,CAAC,KAAM,CAAC,mBAAmB,CAAE,CAAC,CAAC;QAC/D,IAAI,CAAC,UAAU,CACb,UAAU,EACV,uBAAuB,CAAC,IAAI,CAAC,KAAM,CAAC,MAAc,EAAE,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CACpE,CAAC;IACJ,CAAC;IACD,MAAM,EAAE,MAAM,CAAC,MAAgB;IAC/B,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDT;CACF,CAAC"}
|
|
@@ -44,12 +44,14 @@ export const Shadow = {
|
|
|
44
44
|
varying vec2 v_textureCoords;
|
|
45
45
|
varying vec2 v_nodeCoords;
|
|
46
46
|
|
|
47
|
+
varying float v_edgeWidth;
|
|
48
|
+
varying vec2 v_halfDimensions;
|
|
49
|
+
|
|
47
50
|
void main() {
|
|
48
51
|
vec2 screenSpace = vec2(2.0 / u_resolution.x, -2.0 / u_resolution.y);
|
|
49
52
|
vec2 outerEdge = clamp(a_nodeCoords * 2.0 - vec2(1.0), -1.0, 1.0);
|
|
50
53
|
|
|
51
54
|
vec2 shadowEdge = outerEdge * ((u_shadow.w * 2.0)+ u_shadow.z) + u_shadow.xy;
|
|
52
|
-
vec2 normVertexPos = a_position * u_pixelRatio;
|
|
53
55
|
|
|
54
56
|
vec2 vertexPos = (a_position + outerEdge + shadowEdge) * u_pixelRatio;
|
|
55
57
|
gl_Position = vec4(vertexPos.x * screenSpace.x - 1.0, -sign(screenSpace.y) * (vertexPos.y * -abs(screenSpace.y)) + 1.0, 0.0, 1.0);
|
|
@@ -57,6 +59,9 @@ export const Shadow = {
|
|
|
57
59
|
v_color = a_color;
|
|
58
60
|
v_nodeCoords = a_nodeCoords + (screenSpace + shadowEdge) / (u_dimensions);
|
|
59
61
|
v_textureCoords = a_textureCoords + (screenSpace + shadowEdge) / (u_dimensions);
|
|
62
|
+
|
|
63
|
+
v_halfDimensions = u_dimensions * 0.5;
|
|
64
|
+
v_edgeWidth = 1.0 / u_pixelRatio;
|
|
60
65
|
}
|
|
61
66
|
`,
|
|
62
67
|
fragment: `
|
|
@@ -79,6 +84,9 @@ export const Shadow = {
|
|
|
79
84
|
varying vec2 v_textureCoords;
|
|
80
85
|
varying vec2 v_nodeCoords;
|
|
81
86
|
|
|
87
|
+
varying vec2 v_halfDimensions;
|
|
88
|
+
varying float v_edgeWidth;
|
|
89
|
+
|
|
82
90
|
float box(vec2 p, vec2 s) {
|
|
83
91
|
vec2 q = abs(p) - s;
|
|
84
92
|
return (min(max(q.x, q.y), 0.0) + length(max(q, 0.0))) + 2.0;
|
|
@@ -92,13 +100,11 @@ export const Shadow = {
|
|
|
92
100
|
|
|
93
101
|
void main() {
|
|
94
102
|
vec4 color = texture2D(u_texture, v_textureCoords) * v_color;
|
|
95
|
-
vec2
|
|
96
|
-
|
|
97
|
-
vec2 boxUv = v_nodeCoords.xy * u_dimensions - halfDimensions;
|
|
98
|
-
float boxDist = box(boxUv, halfDimensions);
|
|
103
|
+
vec2 boxUv = v_nodeCoords.xy * u_dimensions - v_halfDimensions;
|
|
104
|
+
float boxDist = box(boxUv, v_halfDimensions - v_edgeWidth);
|
|
99
105
|
|
|
100
106
|
float boxAlpha = 1.0 - smoothstep(0.0, u_pixelRatio, boxDist);
|
|
101
|
-
float shadowDist = shadowBox(boxUv - u_shadow.xy,
|
|
107
|
+
float shadowDist = shadowBox(boxUv - u_shadow.xy, v_halfDimensions + u_shadow.w - v_edgeWidth, u_shadow.z);
|
|
102
108
|
|
|
103
109
|
vec4 resColor = vec4(0.0);
|
|
104
110
|
resColor = mix(resColor, u_color, shadowDist);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Shadow.js","sourceRoot":"","sources":["../../../../../src/core/shaders/webgl/Shadow.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAGH,OAAO,EACL,cAAc,GAEf,MAAM,gCAAgC,CAAC;AAExC,MAAM,CAAC,MAAM,MAAM,GAAiC;IAClD,KAAK,EAAE,cAAc,CAAC,KAAK;IAC3B,MAAM;QACJ,IAAI,CAAC,WAAW,CAAC,SAAS,EAAE,IAAI,CAAC,KAAM,CAAC,KAAK,CAAC,CAAC;QAC/C,IAAI,CAAC,UAAU,CAAC,UAAU,EAAE,IAAI,CAAC,KAAM,CAAC,UAAU,CAAC,CAAC;IACtD,CAAC;IACD,MAAM,EAAE
|
|
1
|
+
{"version":3,"file":"Shadow.js","sourceRoot":"","sources":["../../../../../src/core/shaders/webgl/Shadow.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAGH,OAAO,EACL,cAAc,GAEf,MAAM,gCAAgC,CAAC;AAExC,MAAM,CAAC,MAAM,MAAM,GAAiC;IAClD,KAAK,EAAE,cAAc,CAAC,KAAK;IAC3B,MAAM;QACJ,IAAI,CAAC,WAAW,CAAC,SAAS,EAAE,IAAI,CAAC,KAAM,CAAC,KAAK,CAAC,CAAC;QAC/C,IAAI,CAAC,UAAU,CAAC,UAAU,EAAE,IAAI,CAAC,KAAM,CAAC,UAAU,CAAC,CAAC;IACtD,CAAC;IACD,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CP;IACD,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CT;CACF,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { CoreFont, type CoreFontProps } from './CoreFont.js';
|
|
2
|
+
import type { NormalizedFontMetrics, TextRenderer } from './TextRenderer.js';
|
|
3
|
+
export type CanvasFontProps = CoreFontProps & {
|
|
4
|
+
fontUrl: string;
|
|
5
|
+
};
|
|
6
|
+
export declare class CanvasFont extends CoreFont {
|
|
7
|
+
private measureContext;
|
|
8
|
+
type: string;
|
|
9
|
+
url: string;
|
|
10
|
+
constructor(textRenderer: TextRenderer, props: CanvasFontProps, measureContext: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D);
|
|
11
|
+
load(): void;
|
|
12
|
+
measureText(text: string, letterSpacing: number): number;
|
|
13
|
+
getMetrics(fontSize: number): NormalizedFontMetrics;
|
|
14
|
+
}
|
|
@@ -0,0 +1,115 @@
|
|
|
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 2025 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
|
+
import { CoreFont, FontState } from './CoreFont.js';
|
|
20
|
+
import { normalizeFontMetrics } from './TextLayoutEngine.js';
|
|
21
|
+
import { hasZeroWidthSpace } from './Utils.js';
|
|
22
|
+
export class CanvasFont extends CoreFont {
|
|
23
|
+
measureContext;
|
|
24
|
+
type = 'canvas';
|
|
25
|
+
url;
|
|
26
|
+
constructor(textRenderer, props, measureContext) {
|
|
27
|
+
super(textRenderer, props);
|
|
28
|
+
this.measureContext = measureContext;
|
|
29
|
+
this.url = props.fontUrl;
|
|
30
|
+
this.metrics = props.metrics;
|
|
31
|
+
}
|
|
32
|
+
load() {
|
|
33
|
+
if (this.state !== FontState.Created) {
|
|
34
|
+
return;
|
|
35
|
+
}
|
|
36
|
+
if (this.family === 'sans-serif') {
|
|
37
|
+
// Default font, skip loading
|
|
38
|
+
this.onLoaded();
|
|
39
|
+
return;
|
|
40
|
+
}
|
|
41
|
+
this.state = FontState.Loading;
|
|
42
|
+
new FontFace(this.family, `url(${this.url})`)
|
|
43
|
+
.load()
|
|
44
|
+
.then((loadedFont) => {
|
|
45
|
+
document.fonts.add(loadedFont);
|
|
46
|
+
this.onLoaded();
|
|
47
|
+
})
|
|
48
|
+
.catch((error) => {
|
|
49
|
+
this.state = FontState.Failed;
|
|
50
|
+
console.error(`Failed to load font: ${this.family}`, error);
|
|
51
|
+
this.emit('failed');
|
|
52
|
+
throw error;
|
|
53
|
+
});
|
|
54
|
+
}
|
|
55
|
+
measureText(text, letterSpacing) {
|
|
56
|
+
if (letterSpacing === 0) {
|
|
57
|
+
return this.measureContext.measureText(text).width;
|
|
58
|
+
}
|
|
59
|
+
if (hasZeroWidthSpace(text) === false) {
|
|
60
|
+
return (this.measureContext.measureText(text).width +
|
|
61
|
+
letterSpacing * text.length);
|
|
62
|
+
}
|
|
63
|
+
return text.split('').reduce((acc, char) => {
|
|
64
|
+
if (hasZeroWidthSpace(char) === true) {
|
|
65
|
+
return acc;
|
|
66
|
+
}
|
|
67
|
+
return acc + this.measureContext.measureText(char).width + letterSpacing;
|
|
68
|
+
}, 0);
|
|
69
|
+
}
|
|
70
|
+
getMetrics(fontSize) {
|
|
71
|
+
let m = this.normalizedMetrics[fontSize];
|
|
72
|
+
if (m !== undefined) {
|
|
73
|
+
return m;
|
|
74
|
+
}
|
|
75
|
+
let metrics = this.metrics;
|
|
76
|
+
if (metrics === undefined) {
|
|
77
|
+
metrics = calculateCanvasMetrics(this.family, fontSize, this.measureContext);
|
|
78
|
+
}
|
|
79
|
+
m = this.normalizedMetrics[fontSize] = normalizeFontMetrics(metrics, fontSize);
|
|
80
|
+
return m;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
function calculateCanvasMetrics(fontFamily, fontSize, measureContext) {
|
|
84
|
+
// If the font face doesn't have metrics defined, we fallback to using the
|
|
85
|
+
// browser's measureText method to calculate take a best guess at the font
|
|
86
|
+
// actual font's metrics.
|
|
87
|
+
// - fontBoundingBox[Ascent|Descent] is the best estimate but only supported
|
|
88
|
+
// in Chrome 87+ (2020), Firefox 116+ (2023), and Safari 11.1+ (2018).
|
|
89
|
+
// - It is an estimate as it can vary between browsers.
|
|
90
|
+
// - actualBoundingBox[Ascent|Descent] is less accurate and supported in
|
|
91
|
+
// Chrome 77+ (2019), Firefox 74+ (2020), and Safari 11.1+ (2018).
|
|
92
|
+
// - If neither are supported, we'll use some default values which will
|
|
93
|
+
// get text on the screen but likely not be great.
|
|
94
|
+
// NOTE: It's been decided not to rely on fontBoundingBox[Ascent|Descent]
|
|
95
|
+
// as it's browser support is limited and it also tends to produce higher than
|
|
96
|
+
// expected values. It is instead HIGHLY RECOMMENDED that developers provide
|
|
97
|
+
// explicit metrics in the font face definition.
|
|
98
|
+
measureContext.font = `normal ${fontSize}px Unknown, ${fontFamily}`;
|
|
99
|
+
const metrics = measureContext.measureText('ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz');
|
|
100
|
+
console.warn(`Font metrics not provided for Canvas Web font ${fontFamily}. ` +
|
|
101
|
+
'Using fallback values. It is HIGHLY recommended you use the latest ' +
|
|
102
|
+
'version of the Lightning 3 `msdf-generator` tool to extract the default ' +
|
|
103
|
+
'metrics for the font and provide them in the Canvas Web font definition.');
|
|
104
|
+
const ascender = metrics.fontBoundingBoxAscent ?? metrics.actualBoundingBoxAscent ?? 0;
|
|
105
|
+
const descender = metrics.fontBoundingBoxDescent ?? metrics.actualBoundingBoxDescent ?? 0;
|
|
106
|
+
return {
|
|
107
|
+
ascender,
|
|
108
|
+
descender: -descender,
|
|
109
|
+
lineGap: (metrics.emHeightAscent ?? 0) +
|
|
110
|
+
(metrics.emHeightDescent ?? 0) -
|
|
111
|
+
(ascender + descender),
|
|
112
|
+
unitsPerEm: (metrics.emHeightAscent ?? 0) + (metrics.emHeightDescent ?? 0),
|
|
113
|
+
};
|
|
114
|
+
}
|
|
115
|
+
//# sourceMappingURL=CanvasFont.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CanvasFont.js","sourceRoot":"","sources":["../../../../src/core/text-rendering/CanvasFont.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import type { CoreTextNode } from '../CoreTextNode.js';
|
|
2
|
+
import type { FontMetrics, NormalizedFontMetrics, TextRenderer } from './TextRenderer.js';
|
|
3
|
+
import { EventEmitter } from '../../common/EventEmitter.js';
|
|
4
|
+
export declare enum FontState {
|
|
5
|
+
Created = 0,
|
|
6
|
+
Loading = 1,
|
|
7
|
+
Loaded = 2,
|
|
8
|
+
Failed = 3
|
|
9
|
+
}
|
|
10
|
+
export interface CoreFontProps {
|
|
11
|
+
fontFamily: string;
|
|
12
|
+
metrics?: FontMetrics;
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* EventEmiter only intended to communicated with FontManager
|
|
16
|
+
*/
|
|
17
|
+
export declare abstract class CoreFont extends EventEmitter {
|
|
18
|
+
protected waitingNodes?: Record<number, CoreTextNode>;
|
|
19
|
+
protected normalizedMetrics?: Record<number, NormalizedFontMetrics>;
|
|
20
|
+
textRenderer: TextRenderer;
|
|
21
|
+
state: FontState;
|
|
22
|
+
family: string;
|
|
23
|
+
metrics?: FontMetrics;
|
|
24
|
+
constructor(textRenderer: TextRenderer, props: CoreFontProps);
|
|
25
|
+
protected onLoaded(): void;
|
|
26
|
+
waiting(node: CoreTextNode): void;
|
|
27
|
+
stopWaiting(node: CoreTextNode): void;
|
|
28
|
+
destroy(): void;
|
|
29
|
+
abstract type: string;
|
|
30
|
+
abstract load(): void;
|
|
31
|
+
abstract measureText(text: string, letterSpacing: number): number;
|
|
32
|
+
abstract getMetrics(fontSize: number): NormalizedFontMetrics;
|
|
33
|
+
}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { UpdateType } from '../CoreNode.js';
|
|
2
|
+
import { EventEmitter } from '../../common/EventEmitter.js';
|
|
3
|
+
export var FontState;
|
|
4
|
+
(function (FontState) {
|
|
5
|
+
FontState[FontState["Created"] = 0] = "Created";
|
|
6
|
+
FontState[FontState["Loading"] = 1] = "Loading";
|
|
7
|
+
FontState[FontState["Loaded"] = 2] = "Loaded";
|
|
8
|
+
FontState[FontState["Failed"] = 3] = "Failed";
|
|
9
|
+
})(FontState || (FontState = {}));
|
|
10
|
+
/**
|
|
11
|
+
* EventEmiter only intended to communicated with FontManager
|
|
12
|
+
*/
|
|
13
|
+
export class CoreFont extends EventEmitter {
|
|
14
|
+
waitingNodes = Object.create(null);
|
|
15
|
+
normalizedMetrics = Object.create(null);
|
|
16
|
+
textRenderer;
|
|
17
|
+
state;
|
|
18
|
+
family;
|
|
19
|
+
metrics;
|
|
20
|
+
constructor(textRenderer, props) {
|
|
21
|
+
super();
|
|
22
|
+
this.family = props.fontFamily;
|
|
23
|
+
this.state = FontState.Created;
|
|
24
|
+
this.textRenderer = textRenderer;
|
|
25
|
+
}
|
|
26
|
+
onLoaded() {
|
|
27
|
+
const waitingNodes = this.waitingNodes;
|
|
28
|
+
for (let key in waitingNodes) {
|
|
29
|
+
waitingNodes[key].setUpdateType(UpdateType.Local);
|
|
30
|
+
delete waitingNodes[key];
|
|
31
|
+
}
|
|
32
|
+
this.state = FontState.Loaded;
|
|
33
|
+
}
|
|
34
|
+
waiting(node) {
|
|
35
|
+
this.waitingNodes[node.id] = node;
|
|
36
|
+
}
|
|
37
|
+
stopWaiting(node) {
|
|
38
|
+
if (this.waitingNodes[node.id]) {
|
|
39
|
+
delete this.waitingNodes[node.id];
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
destroy() {
|
|
43
|
+
delete this.waitingNodes;
|
|
44
|
+
delete this.normalizedMetrics;
|
|
45
|
+
delete this.metrics;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
//# sourceMappingURL=CoreFont.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CoreFont.js","sourceRoot":"","sources":["../../../../src/core/text-rendering/CoreFont.ts"],"names":[],"mappings":"AAwBA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAE5D,MAAM,CAAN,IAAY,SAKX;AALD,WAAY,SAAS;IACnB,+CAAO,CAAA;IACP,+CAAO,CAAA;IACP,6CAAM,CAAA;IACN,6CAAM,CAAA;AACR,CAAC,EALW,SAAS,KAAT,SAAS,QAKpB;AAOD;;GAEG;AACH,MAAM,OAAgB,QAAS,SAAQ,YAAY;IACvC,YAAY,GAAkC,MAAM,CAAC,MAAM,CACnE,IAAI,CAC2B,CAAC;IACxB,iBAAiB,GACzB,MAAM,CAAC,MAAM,CAAC,IAAI,CAA0C,CAAC;IAExD,YAAY,CAAe;IAC3B,KAAK,CAAY;IACjB,MAAM,CAAS;IACf,OAAO,CAAe;IAE7B,YAAY,YAA0B,EAAE,KAAoB;QAC1D,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,UAAU,CAAC;QAC/B,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,OAAO,CAAC;QAC/B,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;IACnC,CAAC;IAES,QAAQ;QAChB,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC;QACvC,KAAK,IAAI,GAAG,IAAI,YAAY,EAAE,CAAC;YAC7B,YAAY,CAAC,GAAG,CAAE,CAAC,aAAa,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;YACnD,OAAO,YAAY,CAAC,GAAG,CAAC,CAAC;QAC3B,CAAC;QACD,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,MAAM,CAAC;IAChC,CAAC;IAEM,OAAO,CAAC,IAAkB;QAC/B,IAAI,CAAC,YAAa,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;IACrC,CAAC;IAEM,WAAW,CAAC,IAAkB;QACnC,IAAI,IAAI,CAAC,YAAa,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;YAChC,OAAO,IAAI,CAAC,YAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACrC,CAAC;IACH,CAAC;IAEM,OAAO;QACZ,OAAO,IAAI,CAAC,YAAY,CAAC;QACzB,OAAO,IAAI,CAAC,iBAAiB,CAAC;QAC9B,OAAO,IAAI,CAAC,OAAO,CAAC;IACtB,CAAC;CAMF"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Stage } from '../Stage.js';
|
|
2
|
+
import type { CoreFont } from './CoreFont.js';
|
|
3
|
+
import type { FontLoadOptions, TextRenderer, TextRenderers } from './TextRenderer.js';
|
|
4
|
+
export declare class CoreFontManager {
|
|
5
|
+
private fonts;
|
|
6
|
+
private renderers;
|
|
7
|
+
constructor(stage: Stage, textRenderers: TextRenderer[]);
|
|
8
|
+
loadFont(type: TextRenderers, options: FontLoadOptions): void;
|
|
9
|
+
unloadFont(fontFamily: string): void;
|
|
10
|
+
getFont(fontFamily: string): CoreFont | undefined;
|
|
11
|
+
}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
export class CoreFontManager {
|
|
2
|
+
fonts = Object.create(null);
|
|
3
|
+
renderers = Object.create(null);
|
|
4
|
+
constructor(stage, textRenderers) {
|
|
5
|
+
for (let i = 0; i < textRenderers.length; i++) {
|
|
6
|
+
const renderer = textRenderers[i];
|
|
7
|
+
this.renderers[renderer.type] = renderer;
|
|
8
|
+
renderer.init(stage, this);
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
loadFont(type, options) {
|
|
12
|
+
const targetRenderer = this.renderers[type];
|
|
13
|
+
if (targetRenderer === undefined) {
|
|
14
|
+
console.error('renderer type for this font does not exist');
|
|
15
|
+
return;
|
|
16
|
+
}
|
|
17
|
+
const font = targetRenderer.createFont(options);
|
|
18
|
+
if (font === undefined) {
|
|
19
|
+
return;
|
|
20
|
+
}
|
|
21
|
+
font.load();
|
|
22
|
+
this.fonts[options.fontFamily] = font;
|
|
23
|
+
}
|
|
24
|
+
unloadFont(fontFamily) {
|
|
25
|
+
const targetFont = this.fonts[fontFamily];
|
|
26
|
+
if (targetFont === undefined) {
|
|
27
|
+
return;
|
|
28
|
+
}
|
|
29
|
+
targetFont.destroy();
|
|
30
|
+
delete this.fonts[fontFamily];
|
|
31
|
+
}
|
|
32
|
+
getFont(fontFamily) {
|
|
33
|
+
const font = this.fonts[fontFamily];
|
|
34
|
+
if (font === undefined) {
|
|
35
|
+
console.warn('fontFamily not registered');
|
|
36
|
+
return;
|
|
37
|
+
}
|
|
38
|
+
return font;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
//# sourceMappingURL=FontManager.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FontManager.js","sourceRoot":"","sources":["../../../../src/core/text-rendering/FontManager.ts"],"names":[],"mappings":"AAQA,MAAM,OAAO,eAAe;IAClB,KAAK,GAA6B,MAAM,CAAC,MAAM,CAAC,IAAI,CAG3D,CAAC;IACM,SAAS,GAAiC,MAAM,CAAC,MAAM,CAC7D,IAAI,CAC2B,CAAC;IAElC,YAAY,KAAY,EAAE,aAA6B;QACrD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YAC9C,MAAM,QAAQ,GAAG,aAAa,CAAC,CAAC,CAAE,CAAC;YACnC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC;YACzC,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;QAC7B,CAAC;IACH,CAAC;IAED,QAAQ,CAAC,IAAmB,EAAE,OAAwB;QACpD,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;QAC5C,IAAI,cAAc,KAAK,SAAS,EAAE,CAAC;YACjC,OAAO,CAAC,KAAK,CAAC,4CAA4C,CAAC,CAAC;YAC5D,OAAO;QACT,CAAC;QACD,MAAM,IAAI,GAAG,cAAc,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QAChD,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;YACvB,OAAO;QACT,CAAC;QACD,IAAI,CAAC,IAAI,EAAE,CAAC;QACZ,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC;IACxC,CAAC;IAED,UAAU,CAAC,UAAkB;QAC3B,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;QAC1C,IAAI,UAAU,KAAK,SAAS,EAAE,CAAC;YAC7B,OAAO;QACT,CAAC;QACD,UAAU,CAAC,OAAO,EAAE,CAAC;QACrB,OAAO,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;IAChC,CAAC;IAED,OAAO,CAAC,UAAkB;QACxB,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;QACpC,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;YACvB,OAAO,CAAC,IAAI,CAAC,2BAA2B,CAAC,CAAC;YAC1C,OAAO;QACT,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC;CACF"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import type { Stage } from '../Stage.js';
|
|
2
|
+
import type { ImageTexture } from '../textures/ImageTexture.js';
|
|
3
|
+
import { CoreFont, type CoreFontProps } from './CoreFont.js';
|
|
4
|
+
import { type SdfFontData } from './SdfFontHandler.js';
|
|
5
|
+
import type { NormalizedFontMetrics, TextRenderer } from './TextRenderer.js';
|
|
6
|
+
export type SdfFontProps = CoreFontProps & {
|
|
7
|
+
atlasUrl: string;
|
|
8
|
+
atlasDataUrl: string;
|
|
9
|
+
};
|
|
10
|
+
export declare class SdfFont extends CoreFont {
|
|
11
|
+
private stage;
|
|
12
|
+
type: string;
|
|
13
|
+
atlasUrl: string;
|
|
14
|
+
atlasDataUrl: string;
|
|
15
|
+
atlasTexture?: ImageTexture;
|
|
16
|
+
private glyphMap?;
|
|
17
|
+
private kerningTable?;
|
|
18
|
+
private data?;
|
|
19
|
+
constructor(textRenderer: TextRenderer, props: SdfFontProps, stage: Stage);
|
|
20
|
+
load(): void;
|
|
21
|
+
private hardFail;
|
|
22
|
+
private processFontData;
|
|
23
|
+
measureText(text: string, letterSpacing: number): number;
|
|
24
|
+
getMetrics(fontSize: number): NormalizedFontMetrics;
|
|
25
|
+
getGlyph(codepoint: number): import("./SdfFontHandler.js").SdfGlyph | null;
|
|
26
|
+
getKerning(firstGlyph: number, secondGlyph: number): number;
|
|
27
|
+
getAtlas(): ImageTexture;
|
|
28
|
+
getData(): SdfFontData;
|
|
29
|
+
}
|