Needle Engine

Changes between version 3.6.9 and 3.6.10
Files changed (1) hide show
  1. src/engine-components/ui/Text.ts +63 -69
src/engine-components/ui/Text.ts CHANGED
@@ -275,23 +275,42 @@
275
275
  if (!this._textMeshUi)
276
276
  this._textMeshUi = [];
277
277
 
278
- // this.uiObject.textContent = text;
279
- // return ;
278
+ // this doesnt work and produces errors when length is 0:
279
+ // this.uiObject.textContent = " ";
280
280
 
281
+ // reset the current text (e.g. when switching from "Hello" to "Hello <b>World</b>")
282
+ // @TODO swingingtom: this is a hack to reset the text content, not sure how to do that right
283
+ this.uiObject.children.length = 0;
284
+
281
285
  if (!richText || text.length === 0) {
282
286
  //@TODO: @swingingtom how would the text content be set?
283
287
  //@ts-ignore
284
288
  this.uiObject.textContent = text;
285
289
  } else {
286
-
287
-
288
- let currentTag: TagInfo | null = this.getNextTag(text);
290
+ let currentTag = this.getNextTag(text);
289
291
  if (!currentTag) {
290
292
  //@TODO: @swingingtom how would the text content be set?
291
293
  //@ts-ignore
292
294
  return this.uiObject.textContent = text;
293
295
  } else if (currentTag.startIndex > 0) {
294
- this.uiObject.add(new ThreeMeshUI.Inline({ textContent: text.substring(0, currentTag.startIndex), color: 'inherit' }))
296
+
297
+ // First segment should also clear children inlines
298
+ for ( let i = this.uiObject.children.length - 1 ; i >= 0; i-- ) {
299
+ const child = this.uiObject.children[ i ];
300
+
301
+ // @ts-ignore
302
+ if( child.isUI ) {
303
+
304
+ this.uiObject.remove( child );
305
+ child.clear();
306
+
307
+ }
308
+
309
+ }
310
+
311
+
312
+ const el = new ThreeMeshUI.Inline({ textContent: text.substring(0, currentTag.startIndex), color: 'inherit' });
313
+ this.uiObject.add(el);
295
314
  }
296
315
  const stackArray: Array<TagStackEntry> = [];
297
316
  while (currentTag) {
@@ -308,19 +327,23 @@
308
327
  opts.textContent = this.getText(text, currentTag, next);
309
328
 
310
329
  this.handleTag(currentTag, opts, stackArray);
311
- this.uiObject?.add(new ThreeMeshUI.Inline(opts))
330
+ const el = new ThreeMeshUI.Inline(opts);
331
+ this.uiObject?.add(el)
312
332
 
313
333
  } else {
314
334
 
315
335
  opts.textContent = text.substring(currentTag.endIndex);
316
336
 
317
337
  this.handleTag(currentTag, opts, stackArray);
318
- this.uiObject?.add(new ThreeMeshUI.Inline(opts))
338
+ const el = new ThreeMeshUI.Inline(opts);
339
+ this.uiObject?.add(el);
319
340
  }
320
341
  currentTag = next;
321
342
  }
322
343
  }
323
344
 
345
+ if(debug) console.log("feedText", this.uiObject);
346
+
324
347
  return null;
325
348
  }
326
349
 
@@ -393,17 +416,6 @@
393
416
  stackArray.push(stackEntry);
394
417
 
395
418
  }
396
- } else {
397
- if (stackArray.length > 0) {
398
- const last = stackArray.pop();
399
- if (last) {
400
- for (const key in last.previousValues) {
401
- const prevValue = last.previousValues[key];
402
- // console.log(key, val);
403
- opts[key] = prevValue;
404
- }
405
- }
406
- }
407
419
  }
408
420
  }
409
421
 
@@ -436,7 +448,7 @@
436
448
  // - Arial instead of assets/arial
437
449
  // - Arial should stay Arial instead of arial
438
450
  if (!this.font) return;
439
- let familyName = this.font;
451
+ let familyName = this.getFamilyNameWithCorrectSuffix(this.font, fontStyle);
440
452
 
441
453
  // ensure a font family is register under this name
442
454
  let fontFamily = ThreeMeshUI.FontLibrary.getFontFamily(familyName as string);
@@ -446,7 +458,6 @@
446
458
  // @TODO: @swingingtom how should the font be set?
447
459
  //@ts-ignore
448
460
  opts.fontFamily = fontFamily;
449
- const lowerFamilyName = familyName.toLowerCase();
450
461
 
451
462
  switch (fontStyle) {
452
463
  default:
@@ -458,24 +469,16 @@
458
469
  case FontStyle.Bold:
459
470
  opts.fontWeight = 700;
460
471
  opts.fontStyle = "normal";
461
- if (!lowerFamilyName.includes("-bold"))
462
- familyName += "-bold";
463
472
  break;
464
473
 
465
474
  case FontStyle.Italic:
466
475
  opts.fontWeight = 400;
467
476
  opts.fontStyle = "italic"
468
- if (!lowerFamilyName.includes("-italic"))
469
- familyName += "-italic";
470
477
  break;
471
478
 
472
479
  case FontStyle.BoldAndItalic:
473
480
  opts.fontStyle = 'italic';
474
481
  opts.fontWeight = 400;
475
- if (!lowerFamilyName.includes("-bold"))
476
- familyName += "-bold";
477
- if (!lowerFamilyName.includes("-italic"))
478
- familyName += "-italic";
479
482
  }
480
483
 
481
484
 
@@ -498,49 +501,35 @@
498
501
 
499
502
  }
500
503
 
501
- // private getFontStyleName(style: FontStyle): string | null {
502
- // if (!this.font) return null;
503
- // let fontName = this.font;
504
+ private getFamilyNameWithCorrectSuffix(familyName: string, style: FontStyle): string {
504
505
 
505
- // // if a font path has a known suffix we remove it
506
- // const fontNameLower = fontName.toLowerCase();
507
- // if (fontNameLower.endsWith("-regular")) {
508
- // if (style === FontStyle.Normal) return resolveUrl(this.sourceId, fontName);
509
- // fontName = fontName.substring(0, fontName.length - "-regular".length);
510
- // }
511
- // else if (fontNameLower.endsWith("-bold")) {
512
- // if (style === FontStyle.Bold) return resolveUrl(this.sourceId, fontName);
513
- // fontName = fontName.substring(0, fontName.length - "-bold".length);
514
- // }
515
- // else if (fontNameLower.endsWith("-italic")) {
516
- // if (style === FontStyle.Italic) return resolveUrl(this.sourceId, fontName);
517
- // fontName = fontName.substring(0, fontName.length - "-italic".length);
518
- // }
519
- // else if (fontNameLower.endsWith("-bolditalic")) {
520
- // if (style === FontStyle.BoldAndItalic) return resolveUrl(this.sourceId, fontName);
521
- // fontName = fontName.substring(0, fontName.length - "-bolditalic".length);
522
- // }
523
- // else
524
- // // If a font does not have a specific style suffic we dont support getting the correct font style
525
- // return resolveUrl(this.sourceId, fontName);
506
+ // we can only change the style for the family if the name has a suffix (e.g. Arial-Bold)
507
+ const styleSeparator = familyName.lastIndexOf('-');
508
+ if (styleSeparator < 0) return familyName;
526
509
 
527
- // switch (style) {
528
- // case FontStyle.Normal:
529
- // fontName += "-regular";
530
- // break;
531
- // case FontStyle.Bold:
532
- // fontName += "-bold";
533
- // break;
534
- // case FontStyle.Italic:
535
- // fontName += "-italic";
536
- // break;
537
- // case FontStyle.BoldAndItalic:
538
- // fontName += "-bolditalic";
539
- // break;
540
- // }
510
+ // Try find a suffix that matches the style
511
+ // We assume that if the font name is "Arial-Regular" then the bold version is "Arial-Bold"
512
+ // and if the font name is "arial-regular" then the bold version is "arial-bold"
513
+ let isUpperCase = familyName[0] === familyName[0].toUpperCase();
514
+ const fontNameWithoutSuffix = familyName.substring(0, styleSeparator);
541
515
 
542
- // return resolveUrl(this.sourceId, fontName);
543
- // }
516
+ switch (style) {
517
+ case FontStyle.Normal:
518
+ if (isUpperCase) return fontNameWithoutSuffix + "-Regular";
519
+ else return fontNameWithoutSuffix + "-regular";
520
+ case FontStyle.Bold:
521
+ if (isUpperCase) return fontNameWithoutSuffix + "-Bold";
522
+ else return fontNameWithoutSuffix + "-bold";
523
+ case FontStyle.Italic:
524
+ if (isUpperCase) return fontNameWithoutSuffix + "-Italic";
525
+ else return fontNameWithoutSuffix + "-italic";
526
+ case FontStyle.BoldAndItalic:
527
+ if (isUpperCase) return fontNameWithoutSuffix + "-BoldItalic";
528
+ else return fontNameWithoutSuffix + "-bolditalic";
529
+ default:
530
+ return familyName;
531
+ }
532
+ }
544
533
  }
545
534
 
546
535
  class TagStackEntry {
@@ -561,3 +550,8 @@
561
550
 
562
551
  // const anyTag = new RegExp('<.+?>', 'g');
563
552
  // const regex = new RegExp('<(?<type>.+?)>(?<text>.+?)<\/.+?>', 'g');
553
+
554
+
555
+ const upperCaseStyleSuffixOptions = [
556
+ "Regular", "Bold", "Italic", "BoldItalic", "Medium", "MediumItalic", "SemiBold", "SemiBoldItalic", "Thin", "ThinItalic", "ExtraLight", "ExtraLightItalic", "Light", "LightItalic", "Black", "BlackItalic"
557
+ ];