pixi-glyphs 4.0.3 → 4.1.0

package/README.md

@@ -93,6 +93,7 @@ The style objects are modified versions (supersets) of `PIXI.TextStyle` (referre
 - `lineThroughThickness` - Sets the thickness of the line-through. Default is `1`.
 - `lineThroughOffset` - Positions the line-through above or below the default location. Default is `0`.
 - `adjustBaseline` - Adjusts the position of the text above or below the baseline. Default is `0`. Also see the `adjustFontBaseline` property in the options.
+- `highlightColor` - Adds a background highlight color behind the text. Can be a hex number like `0xFFEB3B` or a hex string like `"#FFEB3B"`. The highlight appears as a continuous solid color box behind the text with no borders, spanning across spaces between words for a seamless highlight effect. When the same highlight color is applied to consecutive text segments, they will be rendered as a single continuous highlight box. Perfect for emphasizing important text, creating visual hierarchy, inline code blocks, or implementing syntax highlighting. Example: `<highlight>This entire phrase is highlighted</highlight>` will create one continuous highlight box.
 - `color` - An alias for `fill`. It's recommended you just use either `fill` or `color`, but if both are set, `fill` will be used. If tags are nested, `color` on an inner tag can override `fill` in an outer tag.
 
 Additionally, the following changes have been made to the default style values:

package/dist/Glyphs.d.ts

@@ -39,6 +39,8 @@ export default class Glyphs<TextType extends PixiTextTypes = PIXI.Text> extends
     private _debugGraphics;
     private _textContainer;
     get textContainer(): PIXI.Container;
+    private _highlightContainer;
+    get highlightContainer(): PIXI.Container;
     private _decorationContainer;
     get decorationContainer(): PIXI.Container;
     private _spriteContainer;
@@ -58,6 +60,7 @@ export default class Glyphs<TextType extends PixiTextTypes = PIXI.Text> extends
     draw(): void;
     protected createDrawingForTextDecoration(textDecoration: TextDecorationMetrics): PIXI.Graphics;
     protected createTextField(text: string, style: TextStyleExtended): TextType;
+    protected createHighlightBox(highlightColor: any, x: number, y: number, width: number, height: number): PIXI.Graphics | null;
     protected createTextFieldForToken(token: TextSegmentToken): TextType;
     toDebugString(): string;
     drawDebug(): void;

package/dist/pixi-glyphs.js

@@ -1492,6 +1492,9 @@ class Glyphs extends PIXI__namespace.Container {
   get textContainer() {
     return this._textContainer;
   }
+  get highlightContainer() {
+    return this._highlightContainer;
+  }
   get decorationContainer() {
     return this._decorationContainer;
   }
@@ -1515,12 +1518,14 @@ class Glyphs extends PIXI__namespace.Container {
     this._spriteTemplates = {};
     this._debugGraphics = void 0;
     this._textContainer = void 0;
+    this._highlightContainer = void 0;
     this._decorationContainer = void 0;
     this._spriteContainer = void 0;
     this._debugContainer = void 0;
     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();
+    this._highlightContainer = new PIXI__namespace.Container();
     this._decorationContainer = new PIXI__namespace.Container();
     this._debugContainer = new PIXI__namespace.Container();
     this._debugGraphics = new PIXI__namespace.Graphics();
@@ -1597,6 +1602,12 @@ class Glyphs extends PIXI__namespace.Container {
     this._options = {};
   }
   resetChildren() {
+    if (this._highlightContainer) {
+      this._highlightContainer.removeChildren();
+      this.removeChild(this._highlightContainer);
+    }
+    this._highlightContainer = new PIXI__namespace.Container();
+    this.addChild(this._highlightContainer);
     if (this._textContainer) {
       this._textContainer.removeChildren();
       this.removeChild(this._textContainer);
@@ -1712,16 +1723,47 @@ class Glyphs extends PIXI__namespace.Container {
   }
   draw() {
     this.resetChildren();
-    if (this.textContainer === null || this.spriteContainer === null) {
-      throw new Error("Somehow the textContainer or spriteContainer is null. This shouldn't be possible. Perhaps you've destroyed this object?");
+    if (this.textContainer === null || this.spriteContainer === null || this.highlightContainer === null) {
+      throw new Error("Somehow the textContainer, spriteContainer, or highlightContainer is null. This shouldn't be possible. Perhaps you've destroyed this object?");
     }
     const textContainer = this.textContainer;
     const spriteContainer = this.spriteContainer;
+    const highlightContainer = this.highlightContainer;
     const {
       drawWhitespace
     } = this.options;
     const tokensFlat = this.tokensFlat;
     const tokens = drawWhitespace ? tokensFlat : tokensFlat.filter(isNotWhitespaceToken);
+    let i = 0;
+    while (i < tokensFlat.length) {
+      const token = tokensFlat[i];
+      if (isTextToken(token) && token.style.highlightColor !== undefined) {
+        const highlightColor = token.style.highlightColor;
+        let startX = token.bounds.x;
+        let minY = token.bounds.y;
+        let maxY = token.bounds.y + token.bounds.height;
+        let endX = token.bounds.x + token.bounds.width;
+        let j = i + 1;
+        while (j < tokensFlat.length) {
+          const nextToken = tokensFlat[j];
+          if (isTextToken(nextToken) && nextToken.style.highlightColor === highlightColor && Math.abs(nextToken.bounds.y - token.bounds.y) < 5) {
+            endX = nextToken.bounds.x + nextToken.bounds.width;
+            minY = Math.min(minY, nextToken.bounds.y);
+            maxY = Math.max(maxY, nextToken.bounds.y + nextToken.bounds.height);
+            j++;
+          } else {
+            break;
+          }
+        }
+        const highlight = this.createHighlightBox(highlightColor, startX, minY, endX - startX, maxY - minY);
+        if (highlight) {
+          highlightContainer.addChild(highlight);
+        }
+        i = j;
+      } else {
+        i++;
+      }
+    }
     let drewDecorations = false;
     let displayObject;
     tokens.forEach((t, index) => {
@@ -1825,6 +1867,28 @@ class Glyphs extends PIXI__namespace.Container {
     });
     return textField;
   }
+  createHighlightBox(highlightColor, x, y, width, height) {
+    if (!highlightColor || width <= 0 || height <= 0) {
+      return null;
+    }
+    const highlight = new PIXI__namespace.Graphics();
+    let color = highlightColor;
+    if (typeof color === "string") {
+      if (color.indexOf("#") === 0) {
+        color = "0x" + color.substring(1);
+        color = parseInt(color, 16);
+      } else {
+        this.logWarning("invalid-highlight-color", "Sorry, at this point, only hex colors are supported for highlightColor. Please use either a hex number like 0x66FF33 or a string like '#66FF33'");
+        color = 0xFFFF00;
+      }
+    }
+    highlight.rect(0, 0, width, height).fill({
+      color: color
+    });
+    highlight.x = x;
+    highlight.y = y;
+    return highlight;
+  }
   createTextFieldForToken(token) {
     const {
       textTransform = ""