pixi-glyphs 4.2.0 → 4.3.0

package/README.md

@@ -83,6 +83,7 @@ The style objects are modified versions (supersets) of `PIXI.TextStyle` (referre
 - `fontScaleWidth` - Percentage to scale the font e.g. `0.5` = 50%
 - `fontScaleHeight` - Percentage to scale the font e.g. `1.25` = 125%
 - `letterSpacing` - Additional horizontal spacing between each character in pixels. Can be positive to spread letters apart or negative to bring them closer together. Default is `0`.
+- `wordSpacing` - Additional horizontal spacing for word separators (spaces) in pixels. Adjusts the width of spaces between words. Can be positive to increase spacing or negative to decrease spacing. Default is `0`.
 - `lineSpacing` - Additional vertical spacing between lines of text in pixels. This spacing is added between all lines within a paragraph. Default is `0`.
 - `paragraphSpacing` - Additional spacing between paragraphs that is added when you use an explicit carriage return rather than letting the text wrap at the end of a line. Default is `0`. Can also be negative.
 - `breakLines` - When `breakLines` is `false`, the text in the tag will ignore the `wordWrapWidth` property and never wrap to the next line unless you explicitly include a newline character. It essentially treats the whole tag as a single word. If a nested tag overrides this, only the text inside the nested tag will wrap. Default is `true`.

package/dist/Glyphs.d.ts

@@ -47,6 +47,7 @@ export default class Glyphs<TextType extends PixiTextTypes = PIXI.Text> extends
     get spriteContainer(): PIXI.Container;
     private _debugContainer;
     get debugContainer(): PIXI.Container;
+    private _maskGraphics;
     private logWarning;
     constructor(text?: string, tagStyles?: TextStyleSet, options?: TaggedTextOptions);
     destroyImgMap(): void;

package/dist/pixi-glyphs.js

@@ -889,10 +889,20 @@ const verticalAlignInLines = (lines, lineSpacing, overrideValign) => {
     let tallestToken = getTallestToken(line);
     let baseHeight = tallestToken.bounds?.height ?? 0;
     let baseTallestAscent = 0;
+    let baseTallestDescent = 0;
+    let tallestSpriteHeight = 0;
     const hasRealContent = line.flat(2).some(seg => !isWhitespaceToken(seg) && !isNewlineToken(seg));
     for (const word of line) {
       for (const segment of word) {
+        if (isSpriteToken(segment)) {
+          const spriteHeight = segment.bounds?.height ?? 0;
+          if (spriteHeight > tallestSpriteHeight) {
+            tallestSpriteHeight = spriteHeight;
+          }
+          continue;
+        }
         let segAscent = segment.fontProperties?.ascent ?? 0;
+        const segDescent = segment.fontProperties?.descent ?? 0;
         const style = segment.style;
         const strokeWidth = typeof style?.stroke === 'object' ? style.stroke.width : 0;
         const legacyStrokeThickness = style.strokeThickness || 0;
@@ -914,9 +924,12 @@ const verticalAlignInLines = (lines, lineSpacing, overrideValign) => {
         }
         if (segAscent > baseTallestAscent) {
           baseTallestAscent = segAscent;
+          baseTallestDescent = segDescent;
         }
       }
     }
+    const textBasedHeight = baseTallestAscent + baseTallestDescent;
+    baseHeight = Math.max(textBasedHeight, tallestSpriteHeight);
     if (baseHeight === 0 && baseTallestAscent === 0) {
       baseHeight = lastNonEmptyTallestToken.bounds?.height ?? 0;
       baseTallestAscent = lastNonEmptyTallestToken.fontProperties?.ascent ?? 0;
@@ -1263,7 +1276,8 @@ const calculateTokens = (styledTokens, splitStyle = "words", scaleIcons = true,
         const baselineAdjustment = getBaselineAdjustment(style, adjustFontBaseline, fontProperties.ascent);
         fontProperties.ascent += baselineAdjustment;
         const {
-          letterSpacing
+          letterSpacing,
+          wordSpacing
         } = style;
         if (letterSpacing) {
           bounds.width += letterSpacing;
@@ -1276,6 +1290,9 @@ const calculateTokens = (styledTokens, splitStyle = "words", scaleIcons = true,
           fontProperties,
           textDecorations
         };
+        if (wordSpacing && isOnlyWhitespace(str)) {
+          convertedToken.bounds.width += wordSpacing;
+        }
         return convertedToken;
       });
       output = output.concat(textTokens);
@@ -1552,6 +1569,7 @@ class Glyphs extends PIXI__namespace.Container {
     this._decorationContainer = void 0;
     this._spriteContainer = void 0;
     this._debugContainer = void 0;
+    this._maskGraphics = null;
     this.logWarning = (code, message) => logWarning(this.options.errorHandler, this.options.supressConsole, this)(code, message);
     this._textContainer = new PIXI__namespace.Container();
     this._spriteContainer = new PIXI__namespace.Container();
@@ -1632,6 +1650,9 @@ class Glyphs extends PIXI__namespace.Container {
     this._options = {};
   }
   resetChildren() {
+    if (this._maskGraphics && this._maskGraphics.parent === this) {
+      this.removeChild(this._maskGraphics);
+    }
     if (this._highlightContainer) {
       this._highlightContainer.removeChildren().forEach(child => child.destroy());
       const removed = this.removeChild(this._highlightContainer);
@@ -1849,6 +1870,18 @@ class Glyphs extends PIXI__namespace.Container {
     if (drawWhitespace === false && drewDecorations) {
       this.logWarning("text-decoration-and-whitespace", "Text decorations, such as underlines, will not appear under whitespace unless the `drawWhitespace` option is set to `true`.");
     }
+    if (!this._maskGraphics) {
+      this._maskGraphics = new PIXI__namespace.Graphics();
+    } else {
+      this._maskGraphics.clear();
+    }
+    this._maskGraphics.rect(0, 0, 10000, 10000);
+    this._maskGraphics.fill({
+      color: 0xffffff
+    });
+    this._maskGraphics.alpha = 0;
+    this.addChildAt(this._maskGraphics, 0);
+    this.mask = this._maskGraphics;
     if (this.options.debug) {
       this.drawDebug();
     }