@eva/plugin-renderer-text 2.0.1-beta.9 → 2.0.2-beta.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.
@@ -2,25 +2,25 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var pixi_js = require('pixi.js');
6
5
  var eva_js = require('@eva/eva.js');
7
6
  var inspectorDecorator = require('@eva/inspector-decorator');
7
+ var pixi_js = require('pixi.js');
8
8
  var pluginRenderer = require('@eva/plugin-renderer');
9
9
  var rendererAdapter = require('@eva/renderer-adapter');
10
10
 
11
- /*! *****************************************************************************
12
- Copyright (c) Microsoft Corporation. All rights reserved.
13
- Licensed under the Apache License, Version 2.0 (the "License"); you may not use
14
- this file except in compliance with the License. You may obtain a copy of the
15
- License at http://www.apache.org/licenses/LICENSE-2.0
11
+ /******************************************************************************
12
+ Copyright (c) Microsoft Corporation.
16
13
 
17
- THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
18
- KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
19
- WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
20
- MERCHANTABLITY OR NON-INFRINGEMENT.
14
+ Permission to use, copy, modify, and/or distribute this software for any
15
+ purpose with or without fee is hereby granted.
21
16
 
22
- See the Apache Version 2.0 License for specific language governing permissions
23
- and limitations under the License.
17
+ THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
18
+ REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
19
+ AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
20
+ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
21
+ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
22
+ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
23
+ PERFORMANCE OF THIS SOFTWARE.
24
24
  ***************************************************************************** */
25
25
 
26
26
  function __decorate(decorators, target, key, desc) {
@@ -31,20 +31,118 @@ function __decorate(decorators, target, key, desc) {
31
31
  }
32
32
 
33
33
  function __awaiter(thisArg, _arguments, P, generator) {
34
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
34
35
  return new (P || (P = Promise))(function (resolve, reject) {
35
36
  function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
36
37
  function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
37
- function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
38
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
38
39
  step((generator = generator.apply(thisArg, _arguments || [])).next());
39
40
  });
40
- }
41
+ }
42
+
43
+ typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
44
+ var e = new Error(message);
45
+ return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
46
+ };
41
47
 
48
+ /**
49
+ * 位图文本组件
50
+ *
51
+ * BitmapText 组件使用位图字体渲染文本,性能优于 Canvas 文本渲染。
52
+ * 适用于频繁更新的文本场景,如计分板、倒计时等。
53
+ *
54
+ * 支持两种字体模式:
55
+ * - 动态生成:指定 TextStyle,PixiJS 自动生成 bitmap font
56
+ * - 预加载字体:通过 BitmapFont.install() 预安装或从 .fnt 文件加载
57
+ *
58
+ * @example
59
+ * ```typescript
60
+ * const score = new GameObject('score');
61
+ * score.addComponent(new BitmapText({
62
+ * text: 'Score: 0',
63
+ * style: {
64
+ * fontSize: 32,
65
+ * fill: '#ffffff',
66
+ * fontFamily: 'Arial'
67
+ * }
68
+ * }));
69
+ * ```
70
+ */
71
+ class BitmapText extends eva_js.Component {
72
+ constructor() {
73
+ super(...arguments);
74
+ this.text = '';
75
+ this.style = {};
76
+ }
77
+ init(obj) {
78
+ this.style = Object.assign({ fontSize: 24, fill: '#000000', fontFamily: 'Arial' }, obj === null || obj === void 0 ? void 0 : obj.style);
79
+ if (obj) {
80
+ this.text = obj.text;
81
+ }
82
+ }
83
+ }
84
+ BitmapText.componentName = 'BitmapText';
85
+ __decorate([
86
+ inspectorDecorator.type('string')
87
+ ], BitmapText.prototype, "text", void 0);
88
+
89
+ /**
90
+ * 文本组件(基于 PixiJS Text)
91
+ *
92
+ * Text 组件用于渲染文本内容,支持丰富的文本样式配置。
93
+ * 它基于 PixiJS 的 Text 实现,支持字体、颜色、描边、阴影、对齐等多种样式。
94
+ *
95
+ * 主要特性:
96
+ * - 支持多种字体和字号
97
+ * - 支持文本颜色、渐变填充
98
+ * - 支持描边和投影效果
99
+ * - 支持文本对齐和换行
100
+ *
101
+ * @example
102
+ * ```typescript
103
+ * // 基础文本
104
+ * const label = new GameObject('label');
105
+ * label.addComponent(new Text({
106
+ * text: 'Hello EVA!',
107
+ * style: {
108
+ * fontSize: 32,
109
+ * fill: 0xffffff
110
+ * }
111
+ * }));
112
+ *
113
+ * // 带样式的文本
114
+ * label.addComponent(new Text({
115
+ * text: '得分: 9999',
116
+ * style: {
117
+ * fontFamily: 'Arial',
118
+ * fontSize: 48,
119
+ * fontWeight: 'bold',
120
+ * fill: ['#ff0000', '#ffff00'], // 渐变色
121
+ * stroke: '#000000',
122
+ * strokeThickness: 4,
123
+ * dropShadow: true,
124
+ * dropShadowDistance: 3
125
+ * }
126
+ * }));
127
+ * // 如需高清渲染,使用 Render 组件的 resolution 属性
128
+ * label.addComponent(new Render({ resolution: 2 }));
129
+ * ```
130
+ */
42
131
  class Text$2 extends eva_js.Component {
43
132
  constructor() {
44
133
  super(...arguments);
134
+ /** 文本内容 */
45
135
  this.text = '';
136
+ /** 文本样式配置 */
137
+ // @decorators.IDEProp 复杂编辑后续添加
46
138
  this.style = {};
47
139
  }
140
+ /**
141
+ * 初始化组件
142
+ * @param obj - 初始化参数
143
+ * @param obj.text - 文本内容
144
+ * @param obj.style - 文本样式
145
+ */
48
146
  init(obj) {
49
147
  const style = new pixi_js.TextStyle({
50
148
  fontSize: 20,
@@ -63,11 +161,104 @@ class Text$2 extends eva_js.Component {
63
161
  }
64
162
  }
65
163
  }
164
+ /** 组件名称 */
66
165
  Text$2.componentName = 'Text';
67
166
  __decorate([
68
167
  inspectorDecorator.type('string')
69
168
  ], Text$2.prototype, "text", void 0);
70
169
 
170
+ /**
171
+ * HTML 富文本组件
172
+ *
173
+ * HTMLText 组件支持渲染带有 HTML 标签的富文本内容。
174
+ * 可以在文本中使用 HTML 标签(如 `<b>`, `<i>`, `<span>` 等)来实现丰富的文本样式,
175
+ * 适用于聊天对话、新闻内容、富文本显示等需要多样式文本的场景。
176
+ *
177
+ * 支持的 HTML 标签:
178
+ * - `<b>` - 粗体
179
+ * - `<i>` - 斜体
180
+ * - `<span style="color:#ff0000">` - 自定义样式
181
+ * - `<br>` - 换行
182
+ * 以及更多标准 HTML 文本标签
183
+ *
184
+ * @example
185
+ * ```typescript
186
+ * // 基础富文本
187
+ * const label = new GameObject('label');
188
+ * label.addComponent(new HTMLText({
189
+ * text: '这是<b>粗体</b>和<i>斜体</i>文本',
190
+ * style: {
191
+ * fontSize: 24,
192
+ * fill: '#000000',
193
+ * fontFamily: 'Arial'
194
+ * }
195
+ * }));
196
+ *
197
+ * // 带颜色的富文本
198
+ * label.addComponent(new HTMLText({
199
+ * text: '欢迎 <span style="color:#ff0000">玩家123</span> 加入游戏!',
200
+ * style: {
201
+ * fontSize: 20,
202
+ * wordWrap: true,
203
+ * wordWrapWidth: 300
204
+ * }
205
+ * }));
206
+ *
207
+ * // 自定义标签样式
208
+ * label.addComponent(new HTMLText({
209
+ * text: '获得 <gold>100</gold> 金币',
210
+ * style: {
211
+ * fontSize: 18,
212
+ * tagStyles: {
213
+ * gold: {
214
+ * fill: '#ffd700',
215
+ * fontWeight: 'bold'
216
+ * }
217
+ * }
218
+ * }
219
+ * }));
220
+ *
221
+ * // 高分辨率渲染(推荐使用 Render 组件的 resolution 属性)
222
+ * label.addComponent(new HTMLText({
223
+ * text: '高清文本',
224
+ * textureStyle: {
225
+ * scaleMode: 'linear'
226
+ * }
227
+ * }));
228
+ * label.addComponent(new Render({ resolution: 2 }));
229
+ * ```
230
+ */
231
+ class HTMLText extends eva_js.Component {
232
+ constructor() {
233
+ super(...arguments);
234
+ /** 富文本内容(支持 HTML 标签) */
235
+ this.text = '';
236
+ /** 文本样式配置 */
237
+ this.style = {};
238
+ /** 纹理渲染配置 */
239
+ this.textureStyle = {};
240
+ }
241
+ /**
242
+ * 初始化组件
243
+ * @param obj - 初始化参数
244
+ * @param obj.text - 富文本内容
245
+ * @param obj.style - 文本样式
246
+ * @param obj.textureStyle - 纹理配置
247
+ */
248
+ init(obj) {
249
+ this.style = Object.assign({ fontSize: 24, fill: '#000000', fontFamily: 'Arial' }, obj === null || obj === void 0 ? void 0 : obj.style);
250
+ this.textureStyle = Object.assign({ scaleMode: 'linear', resolution: window.devicePixelRatio || 1 }, obj === null || obj === void 0 ? void 0 : obj.textureStyle);
251
+ if (obj) {
252
+ this.text = obj.text;
253
+ }
254
+ }
255
+ }
256
+ /** 组件名称 */
257
+ HTMLText.componentName = 'HTMLText';
258
+ __decorate([
259
+ inspectorDecorator.type('string')
260
+ ], HTMLText.prototype, "text", void 0);
261
+
71
262
  let Text = class Text extends pluginRenderer.Renderer {
72
263
  constructor() {
73
264
  super(...arguments);
@@ -80,16 +271,21 @@ let Text = class Text extends pluginRenderer.Renderer {
80
271
  }
81
272
  componentChanged(changed) {
82
273
  return __awaiter(this, void 0, void 0, function* () {
83
- if (changed.componentName !== 'Text')
274
+ const isText = changed.componentName === 'Text';
275
+ const isHTMLText = changed.componentName === 'HTMLText';
276
+ const isBitmapText = changed.componentName === 'BitmapText';
277
+ if (!isText && !isHTMLText && !isBitmapText)
84
278
  return;
85
279
  if (changed.type === eva_js.OBSERVER_TYPE.ADD) {
86
- const component = changed.component;
87
- const text = new rendererAdapter.Text(component.text, component.style);
88
- this.containerManager.getContainer(changed.gameObject.id).addChildAt(text, 0);
89
- this.texts[changed.gameObject.id] = {
90
- text,
91
- component: changed.component,
92
- };
280
+ if (isText) {
281
+ yield this.addTextComponent(changed);
282
+ }
283
+ else if (isHTMLText) {
284
+ yield this.addHTMLTextComponent(changed);
285
+ }
286
+ else {
287
+ yield this.addBitmapTextComponent(changed);
288
+ }
93
289
  this.setSize(changed);
94
290
  }
95
291
  else if (changed.type === eva_js.OBSERVER_TYPE.REMOVE) {
@@ -99,56 +295,216 @@ let Text = class Text extends pluginRenderer.Renderer {
99
295
  }
100
296
  else {
101
297
  this.change(changed);
298
+ // 如果样式改变且涉及字体,也需要等待字体资源加载
299
+ const component = changed.component;
300
+ if (changed.prop.prop[0] === 'style' && component.style && component.style.fontFamily) {
301
+ const { text } = this.texts[changed.gameObject.id];
302
+ yield this.waitForFontResource(text, changed, component.style.fontFamily);
303
+ }
102
304
  this.setSize(changed);
103
305
  }
104
306
  });
105
307
  }
308
+ addTextComponent(changed) {
309
+ return __awaiter(this, void 0, void 0, function* () {
310
+ const component = changed.component;
311
+ // 创建文本样式副本,先不设置 fontFamily
312
+ const styleWithoutFont = Object.assign({}, component.style);
313
+ const fontFamily = styleWithoutFont.fontFamily;
314
+ delete styleWithoutFont.fontFamily;
315
+ const initialText = fontFamily ? '' : component.text;
316
+ const text = new rendererAdapter.Text(initialText, styleWithoutFont);
317
+ this.containerManager.getContainer(changed.gameObject.id).addChildAt(text, 0);
318
+ this.texts[changed.gameObject.id] = {
319
+ text,
320
+ component,
321
+ };
322
+ // 如果指定了字体资源,等待资源加载完成后设置 fontFamily
323
+ if (fontFamily) {
324
+ yield this.waitForFontResource(text, changed, fontFamily);
325
+ }
326
+ });
327
+ }
328
+ addHTMLTextComponent(changed) {
329
+ return __awaiter(this, void 0, void 0, function* () {
330
+ const component = changed.component;
331
+ // 创建样式副本,先不设置 fontFamily
332
+ const styleWithoutFont = Object.assign({}, component.style);
333
+ const fontFamily = styleWithoutFont.fontFamily;
334
+ delete styleWithoutFont.fontFamily;
335
+ const initialText = fontFamily ? '' : component.text;
336
+ const htmlText = new rendererAdapter.HTMLText(Object.assign({ text: initialText, style: styleWithoutFont }, (component.textureStyle && { textureStyle: component.textureStyle })));
337
+ this.containerManager.getContainer(changed.gameObject.id).addChildAt(htmlText, 0);
338
+ this.texts[changed.gameObject.id] = {
339
+ text: htmlText,
340
+ component,
341
+ };
342
+ // 如果指定了字体资源,等待资源加载完成后设置 fontFamily
343
+ if (fontFamily) {
344
+ yield this.waitForFontResource(htmlText, changed, fontFamily);
345
+ }
346
+ });
347
+ }
348
+ addBitmapTextComponent(changed) {
349
+ return __awaiter(this, void 0, void 0, function* () {
350
+ const component = changed.component;
351
+ // 创建样式副本,先不设置 fontFamily
352
+ const styleWithoutFont = Object.assign({}, component.style);
353
+ const fontFamily = styleWithoutFont.fontFamily;
354
+ delete styleWithoutFont.fontFamily;
355
+ const initialText = fontFamily ? '' : component.text;
356
+ const bitmapText = new rendererAdapter.BitmapText(initialText, styleWithoutFont);
357
+ this.containerManager.getContainer(changed.gameObject.id).addChildAt(bitmapText, 0);
358
+ this.texts[changed.gameObject.id] = {
359
+ text: bitmapText,
360
+ component,
361
+ };
362
+ // 如果指定了字体资源,等待资源加载完成后设置 fontFamily
363
+ if (fontFamily) {
364
+ yield this.waitForFontResource(bitmapText, changed, fontFamily);
365
+ }
366
+ });
367
+ }
368
+ /**
369
+ * 等待字体资源加载完成并更新文本
370
+ */
371
+ waitForFontResource(text, changed, fontFamily) {
372
+ return __awaiter(this, void 0, void 0, function* () {
373
+ if (!fontFamily) {
374
+ return;
375
+ }
376
+ try {
377
+ const fontName = Array.isArray(fontFamily) ? fontFamily[0] : fontFamily;
378
+ // 通过 resource 系统获取字体资源
379
+ const asyncId = this.increaseAsyncId(changed.gameObject.id);
380
+ yield eva_js.resource.getResource(fontName);
381
+ // 验证异步操作是否仍然有效(防止组件已被移除)
382
+ if (!this.validateAsyncId(changed.gameObject.id, asyncId))
383
+ return;
384
+ // 字体资源加载成功后,设置 fontFamily 并重新设置文本内容以触发重新渲染
385
+ const component = this.texts[changed.gameObject.id].component;
386
+ text.style.fontFamily = fontFamily;
387
+ text.text = component.text;
388
+ // 更新尺寸
389
+ }
390
+ catch (error) {
391
+ console.warn(`字体资源 ${fontFamily} 加载失败:`, error);
392
+ }
393
+ });
394
+ }
395
+ /**
396
+ * 将 Eva.js 的样式格式转换为 PixiJS v8 格式
397
+ */
398
+ processStyle(style) {
399
+ const processed = Object.assign({}, style);
400
+ // stroke + strokeThickness -> stroke: { color, width }
401
+ if (processed.strokeThickness) {
402
+ const color = processed.stroke;
403
+ processed.stroke = {
404
+ color,
405
+ width: processed.strokeThickness,
406
+ };
407
+ delete processed.strokeThickness;
408
+ }
409
+ // dropShadow* -> dropShadow: { color, distance, angle, alpha, blur }
410
+ if (processed.dropShadow) {
411
+ const dropShadowConfig = {};
412
+ if (processed.dropShadowColor != null) {
413
+ dropShadowConfig.color = processed.dropShadowColor;
414
+ }
415
+ if (processed.dropShadowDistance != null) {
416
+ dropShadowConfig.distance = processed.dropShadowDistance;
417
+ }
418
+ if (processed.dropShadowAngle != null) {
419
+ dropShadowConfig.angle = processed.dropShadowAngle;
420
+ }
421
+ if (processed.dropShadowAlpha != null) {
422
+ dropShadowConfig.alpha = processed.dropShadowAlpha;
423
+ }
424
+ if (processed.dropShadowBlur != null) {
425
+ dropShadowConfig.blur = processed.dropShadowBlur;
426
+ }
427
+ processed.dropShadow = dropShadowConfig;
428
+ delete processed.dropShadowColor;
429
+ delete processed.dropShadowDistance;
430
+ delete processed.dropShadowAngle;
431
+ delete processed.dropShadowAlpha;
432
+ delete processed.dropShadowBlur;
433
+ }
434
+ // fill 数组 -> 取第一个值 (deprecated)
435
+ if (Array.isArray(processed.fill)) {
436
+ processed.fill = processed.fill[0];
437
+ }
438
+ // fillGradientStops -> FillGradient 对象
439
+ if (Array.isArray(processed.fillGradientStops)) {
440
+ let fontSize;
441
+ if (processed.fontSize == null) {
442
+ fontSize = pixi_js.TextStyle.defaultTextStyle.fontSize;
443
+ }
444
+ else if (typeof processed.fontSize === 'string') {
445
+ fontSize = parseInt(processed.fontSize, 10);
446
+ }
447
+ else {
448
+ fontSize = processed.fontSize;
449
+ }
450
+ const gradientFill = new pixi_js.FillGradient(0, 0, 0, fontSize * 1.7);
451
+ const fills = processed.fillGradientStops.map((color) => pixi_js.Color.shared.setValue(color).toNumber());
452
+ fills.forEach((number, index) => {
453
+ const ratio = index / (fills.length - 1);
454
+ gradientFill.addColorStop(ratio, number);
455
+ });
456
+ processed.fill = { fill: gradientFill };
457
+ delete processed.fillGradientStops;
458
+ }
459
+ return processed;
460
+ }
106
461
  change(changed) {
107
462
  const { text, component } = this.texts[changed.gameObject.id];
463
+ const isHTMLText = changed.componentName === 'HTMLText';
108
464
  if (changed.prop.prop[0] === 'text') {
109
465
  text.text = component.text;
110
466
  }
111
467
  else if (changed.prop.prop[0] === 'style') {
112
- Object.assign(text.style, changed.component.style);
113
- }
114
- }
115
- asyncChangeTextStyle(text, textStyle) {
116
- if (textStyle.fontFamily) {
117
- const fontFamily = textStyle.fontFamily;
118
- textStyle.fontFamily = '';
119
- this.asyncUpdateFontFamily(text, fontFamily);
468
+ const processedStyle = this.processStyle(component.style);
469
+ Object.assign(text.style, processedStyle);
120
470
  }
121
- Object.assign(text.style, textStyle);
122
- }
123
- asyncUpdateFontFamily(text, fontFamily) {
124
- if (fontFamily) {
125
- if (Array.isArray(fontFamily)) {
126
- Promise.all(fontFamily.map(font => eva_js.resource.getResource(font))).finally(() => {
127
- text.style.fontFamily = fontFamily;
128
- });
129
- }
130
- else {
131
- eva_js.resource.getResource(fontFamily).finally(() => {
132
- text.style.fontFamily = fontFamily;
133
- });
134
- }
471
+ else if (changed.prop.prop[0] === 'textureStyle' && isHTMLText) {
472
+ // HTMLText 纹理样式变化需要重新创建
473
+ const htmlComponent = component;
474
+ const container = this.containerManager.getContainer(changed.gameObject.id);
475
+ const index = container.getChildIndex(text);
476
+ container.removeChild(text);
477
+ text.destroy({ children: true });
478
+ const newText = new rendererAdapter.HTMLText({
479
+ text: htmlComponent.text,
480
+ style: htmlComponent.style,
481
+ textureStyle: htmlComponent.textureStyle
482
+ });
483
+ container.addChildAt(newText, index);
484
+ this.texts[changed.gameObject.id].text = newText;
135
485
  }
136
486
  }
137
487
  setSize(changed) {
138
488
  const { transform } = changed.gameObject;
139
489
  if (!transform)
140
490
  return;
141
- transform.size.width = this.texts[changed.gameObject.id].text.width;
142
- transform.size.height = this.texts[changed.gameObject.id].text.height;
491
+ const { text } = this.texts[changed.gameObject.id];
492
+ const size = text.getSize();
493
+ transform.size.width = size.width;
494
+ transform.size.height = size.height;
143
495
  }
144
496
  };
145
497
  Text.systemName = 'Text';
146
498
  Text = __decorate([
147
499
  eva_js.decorators.componentObserver({
148
500
  Text: ['text', { prop: ['style'], deep: true }],
501
+ HTMLText: ['text', { prop: ['style'], deep: true }, { prop: ['textureStyle'], deep: true }],
502
+ BitmapText: ['text', { prop: ['style'], deep: true }],
149
503
  })
150
504
  ], Text);
151
505
  var Text$1 = Text;
152
506
 
507
+ exports.BitmapText = BitmapText;
508
+ exports.HTMLText = HTMLText;
153
509
  exports.Text = Text$2;
154
510
  exports.TextSystem = Text$1;
@@ -1,16 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("pixi.js"),t=require("@eva/eva.js"),n=require("@eva/inspector-decorator"),s=require("@eva/plugin-renderer"),i=require("@eva/renderer-adapter");
2
- /*! *****************************************************************************
3
- Copyright (c) Microsoft Corporation. All rights reserved.
4
- Licensed under the Apache License, Version 2.0 (the "License"); you may not use
5
- this file except in compliance with the License. You may obtain a copy of the
6
- License at http://www.apache.org/licenses/LICENSE-2.0
7
-
8
- THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
9
- KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
10
- WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
11
- MERCHANTABLITY OR NON-INFRINGEMENT.
12
-
13
- See the Apache Version 2.0 License for specific language governing permissions
14
- and limitations under the License.
15
- ***************************************************************************** */
16
- function r(e,t,n,s){var i,r=arguments.length,o=r<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,n):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(e,t,n,s);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(o=(r<3?i(o):r>3?i(t,n,o):i(t,n))||o);return r>3&&o&&Object.defineProperty(t,n,o),o}class o extends t.Component{constructor(){super(...arguments),this.text="",this.style={}}init(t){const n=new e.TextStyle({fontSize:20}),s={};for(const e in n)0===e.indexOf("_")&&(s[e.substring(1)]=n[e]);delete s.styleKey,this.style=s,t&&(this.text=t.text,Object.assign(this.style,t.style))}}o.componentName="Text",r([n.type("string")],o.prototype,"text",void 0);let a=class extends s.Renderer{constructor(){super(...arguments),this.name="Text",this.texts={}}init(){this.renderSystem=this.game.getSystem(s.RendererSystem),this.renderSystem.rendererManager.register(this)}componentChanged(e){return n=this,s=void 0,o=function*(){if("Text"===e.componentName)if(e.type===t.OBSERVER_TYPE.ADD){const t=e.component,n=new i.Text(t.text,t.style);this.containerManager.getContainer(e.gameObject.id).addChildAt(n,0),this.texts[e.gameObject.id]={text:n,component:e.component},this.setSize(e)}else e.type===t.OBSERVER_TYPE.REMOVE?(this.containerManager.getContainer(e.gameObject.id).removeChild(this.texts[e.gameObject.id].text),this.texts[e.gameObject.id].text.destroy({children:!0}),delete this.texts[e.gameObject.id]):(this.change(e),this.setSize(e))},new((r=void 0)||(r=Promise))((function(e,t){function i(e){try{c(o.next(e))}catch(e){t(e)}}function a(e){try{c(o.throw(e))}catch(e){t(e)}}function c(t){t.done?e(t.value):new r((function(e){e(t.value)})).then(i,a)}c((o=o.apply(n,s||[])).next())}));var n,s,r,o}change(e){const{text:t,component:n}=this.texts[e.gameObject.id];"text"===e.prop.prop[0]?t.text=n.text:"style"===e.prop.prop[0]&&Object.assign(t.style,e.component.style)}asyncChangeTextStyle(e,t){if(t.fontFamily){const n=t.fontFamily;t.fontFamily="",this.asyncUpdateFontFamily(e,n)}Object.assign(e.style,t)}asyncUpdateFontFamily(e,n){n&&(Array.isArray(n)?Promise.all(n.map((e=>t.resource.getResource(e)))).finally((()=>{e.style.fontFamily=n})):t.resource.getResource(n).finally((()=>{e.style.fontFamily=n})))}setSize(e){const{transform:t}=e.gameObject;t&&(t.size.width=this.texts[e.gameObject.id].text.width,t.size.height=this.texts[e.gameObject.id].text.height)}};a.systemName="Text",a=r([t.decorators.componentObserver({Text:["text",{prop:["style"],deep:!0}]})],a);var c=a;exports.Text=o,exports.TextSystem=c;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@eva/eva.js"),t=require("@eva/inspector-decorator"),o=require("pixi.js"),n=require("@eva/plugin-renderer"),i=require("@eva/renderer-adapter");function s(e,t,o,n){var i,s=arguments.length,r=s<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,o):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,o,n);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(r=(s<3?i(r):s>3?i(t,o,r):i(t,o))||r);return s>3&&r&&Object.defineProperty(t,o,r),r}function r(e,t,o,n){return new(o||(o=Promise))(function(i,s){function r(e){try{l(n.next(e))}catch(e){s(e)}}function a(e){try{l(n.throw(e))}catch(e){s(e)}}function l(e){var t;e.done?i(e.value):(t=e.value,t instanceof o?t:new o(function(e){e(t)})).then(r,a)}l((n=n.apply(e,t||[])).next())})}"function"==typeof SuppressedError&&SuppressedError;class a extends e.Component{constructor(){super(...arguments),this.text="",this.style={}}init(e){this.style=Object.assign({fontSize:24,fill:"#000000",fontFamily:"Arial"},null==e?void 0:e.style),e&&(this.text=e.text)}}a.componentName="BitmapText",s([t.type("string")],a.prototype,"text",void 0);class l extends e.Component{constructor(){super(...arguments),this.text="",this.style={}}init(e){const t=new o.TextStyle({fontSize:20}),n={};for(const e in t)0===e.indexOf("_")&&(n[e.substring(1)]=t[e]);delete n.styleKey,this.style=n,e&&(this.text=e.text,Object.assign(this.style,e.style))}}l.componentName="Text",s([t.type("string")],l.prototype,"text",void 0);class d extends e.Component{constructor(){super(...arguments),this.text="",this.style={},this.textureStyle={}}init(e){this.style=Object.assign({fontSize:24,fill:"#000000",fontFamily:"Arial"},null==e?void 0:e.style),this.textureStyle=Object.assign({scaleMode:"linear",resolution:window.devicePixelRatio||1},null==e?void 0:e.textureStyle),e&&(this.text=e.text)}}d.componentName="HTMLText",s([t.type("string")],d.prototype,"text",void 0);let c=class extends n.Renderer{constructor(){super(...arguments),this.name="Text",this.texts={}}init(){this.renderSystem=this.game.getSystem(n.RendererSystem),this.renderSystem.rendererManager.register(this)}componentChanged(t){return r(this,void 0,void 0,function*(){const o="Text"===t.componentName,n="HTMLText"===t.componentName,i="BitmapText"===t.componentName;if(o||n||i)if(t.type===e.OBSERVER_TYPE.ADD)o?yield this.addTextComponent(t):n?yield this.addHTMLTextComponent(t):yield this.addBitmapTextComponent(t),this.setSize(t);else if(t.type===e.OBSERVER_TYPE.REMOVE)this.containerManager.getContainer(t.gameObject.id).removeChild(this.texts[t.gameObject.id].text),this.texts[t.gameObject.id].text.destroy({children:!0}),delete this.texts[t.gameObject.id];else{this.change(t);const e=t.component;if("style"===t.prop.prop[0]&&e.style&&e.style.fontFamily){const{text:o}=this.texts[t.gameObject.id];yield this.waitForFontResource(o,t,e.style.fontFamily)}this.setSize(t)}})}addTextComponent(e){return r(this,void 0,void 0,function*(){const t=e.component,o=Object.assign({},t.style),n=o.fontFamily;delete o.fontFamily;const s=n?"":t.text,r=new i.Text(s,o);this.containerManager.getContainer(e.gameObject.id).addChildAt(r,0),this.texts[e.gameObject.id]={text:r,component:t},n&&(yield this.waitForFontResource(r,e,n))})}addHTMLTextComponent(e){return r(this,void 0,void 0,function*(){const t=e.component,o=Object.assign({},t.style),n=o.fontFamily;delete o.fontFamily;const s=n?"":t.text,r=new i.HTMLText(Object.assign({text:s,style:o},t.textureStyle&&{textureStyle:t.textureStyle}));this.containerManager.getContainer(e.gameObject.id).addChildAt(r,0),this.texts[e.gameObject.id]={text:r,component:t},n&&(yield this.waitForFontResource(r,e,n))})}addBitmapTextComponent(e){return r(this,void 0,void 0,function*(){const t=e.component,o=Object.assign({},t.style),n=o.fontFamily;delete o.fontFamily;const s=n?"":t.text,r=new i.BitmapText(s,o);this.containerManager.getContainer(e.gameObject.id).addChildAt(r,0),this.texts[e.gameObject.id]={text:r,component:t},n&&(yield this.waitForFontResource(r,e,n))})}waitForFontResource(t,o,n){return r(this,void 0,void 0,function*(){if(n)try{const i=Array.isArray(n)?n[0]:n,s=this.increaseAsyncId(o.gameObject.id);if(yield e.resource.getResource(i),!this.validateAsyncId(o.gameObject.id,s))return;const r=this.texts[o.gameObject.id].component;t.style.fontFamily=n,t.text=r.text}catch(e){console.warn(`字体资源 ${n} 加载失败:`,e)}})}processStyle(e){const t=Object.assign({},e);if(t.strokeThickness){const e=t.stroke;t.stroke={color:e,width:t.strokeThickness},delete t.strokeThickness}if(t.dropShadow){const e={};null!=t.dropShadowColor&&(e.color=t.dropShadowColor),null!=t.dropShadowDistance&&(e.distance=t.dropShadowDistance),null!=t.dropShadowAngle&&(e.angle=t.dropShadowAngle),null!=t.dropShadowAlpha&&(e.alpha=t.dropShadowAlpha),null!=t.dropShadowBlur&&(e.blur=t.dropShadowBlur),t.dropShadow=e,delete t.dropShadowColor,delete t.dropShadowDistance,delete t.dropShadowAngle,delete t.dropShadowAlpha,delete t.dropShadowBlur}if(Array.isArray(t.fill)&&(t.fill=t.fill[0]),Array.isArray(t.fillGradientStops)){let e;e=null==t.fontSize?o.TextStyle.defaultTextStyle.fontSize:"string"==typeof t.fontSize?parseInt(t.fontSize,10):t.fontSize;const n=new o.FillGradient(0,0,0,1.7*e),i=t.fillGradientStops.map(e=>o.Color.shared.setValue(e).toNumber());i.forEach((e,t)=>{const o=t/(i.length-1);n.addColorStop(o,e)}),t.fill={fill:n},delete t.fillGradientStops}return t}change(e){const{text:t,component:o}=this.texts[e.gameObject.id],n="HTMLText"===e.componentName;if("text"===e.prop.prop[0])t.text=o.text;else if("style"===e.prop.prop[0]){const e=this.processStyle(o.style);Object.assign(t.style,e)}else if("textureStyle"===e.prop.prop[0]&&n){const n=o,s=this.containerManager.getContainer(e.gameObject.id),r=s.getChildIndex(t);s.removeChild(t),t.destroy({children:!0});const a=new i.HTMLText({text:n.text,style:n.style,textureStyle:n.textureStyle});s.addChildAt(a,r),this.texts[e.gameObject.id].text=a}}setSize(e){const{transform:t}=e.gameObject;if(!t)return;const{text:o}=this.texts[e.gameObject.id],n=o.getSize();t.size.width=n.width,t.size.height=n.height}};c.systemName="Text",c=s([e.decorators.componentObserver({Text:["text",{prop:["style"],deep:!0}],HTMLText:["text",{prop:["style"],deep:!0},{prop:["textureStyle"],deep:!0}],BitmapText:["text",{prop:["style"],deep:!0}]})],c);var p=c;exports.BitmapText=a,exports.HTMLText=d,exports.Text=l,exports.TextSystem=p;