pixi-glyphs 4.1.8 → 4.2.0

package/README.md

@@ -107,6 +107,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.
+- `topTrim` - Adjusts the line height of text by trimming (or expanding) from the top of the text. Positive values reduce the line height by trimming from the top (useful for reducing gaps above large text), while negative values increase the line height. This property only affects the segments that have it set, and the overall line height is determined by the tallest effective segment after all individual `topTrim` adjustments. Default is `0`. Example: `<big topTrim="50">Big Text</big>` reduces the line height of "Big Text" by 50 pixels from the top.
 - `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.
 

package/dist/pixi-glyphs.js

@@ -38,24 +38,19 @@ const assoc = key => value => object => ({
 const flatReduce = (f, acc) => nested => [nested].flat(255).reduce(f, acc);
 const flatEvery = p => flatReduce((acc, t) => acc && p(t), true);
 
-const log = type => function (handler, supressConsole, target) {
-  if (supressConsole === void 0) {
-    supressConsole = false;
-  }
-  return (code, message) => {
-    if (supressConsole !== true) {
-      const method = type === "warning" ? console.warn : console.error;
-      method(`[${code}] ${message}`);
-    }
-    if (handler) {
-      handler({
-        target,
-        code,
-        message,
-        type
-      });
-    }
-  };
+const log = type => (handler, supressConsole = false, target) => (code, message) => {
+  if (supressConsole !== true) {
+    const method = type === "warning" ? console.warn : console.error;
+    method(`[${code}] ${message}`);
+  }
+  if (handler) {
+    handler({
+      target,
+      code,
+      message,
+      type
+    });
+  }
 };
 const logWarning = log("warning");
 
@@ -147,10 +142,7 @@ var RGI_Emoji = () => {
 };
 
 const defaultLogWarning = logWarning();
-const getTagRegex = function (tagNamesToMatch) {
-  if (tagNamesToMatch === void 0) {
-    tagNamesToMatch = ["\\w+"];
-  }
+const getTagRegex = (tagNamesToMatch = ["\\w+"]) => {
   const matchingTagNames = tagNamesToMatch.join("|");
   const captureGroup = a => `(${a})`;
   const noCaptureGroup = a => `(?:${a})`;
@@ -166,10 +158,7 @@ const getTagRegex = function (tagNamesToMatch) {
   return new RegExp(pattern, "g");
 };
 const EMOJI_TAG = "__EMOJI__";
-const parseAttributes = function (attributesString) {
-  if (attributesString === void 0) {
-    attributesString = "";
-  }
+const parseAttributes = (attributesString = "") => {
   if (attributesString === "") {
     return {};
   }
@@ -249,10 +238,7 @@ const wrapEmoji = input => {
     return `<${EMOJI_TAG}>${match}</${EMOJI_TAG}>`;
   });
 };
-const replaceSelfClosingTags = input => input.replace(selfClosingTagSearch, function (_, tag, attributes) {
-  if (attributes === void 0) {
-    attributes = "";
-  }
+const replaceSelfClosingTags = input => input.replace(selfClosingTagSearch, (_, tag, attributes = "") => {
   let output = `<${tag}${attributes}></${tag}>`;
   output = output.replace(/\s+/g, " ");
   output = output.replace(/\s>/g, ">");
@@ -268,10 +254,7 @@ const tagMatchToTagToken = tag => {
     })
   };
 };
-const createTokensNew = function (segments, tags, logWarningFunction) {
-  if (logWarningFunction === void 0) {
-    logWarningFunction = defaultLogWarning;
-  }
+const createTokensNew = (segments, tags, logWarningFunction = defaultLogWarning) => {
   const rootTokens = {
     children: []
   };
@@ -305,16 +288,7 @@ const createTokensNew = function (segments, tags, logWarningFunction) {
   return rootTokens.children;
 };
 const containsEmoji = input => RGI_Emoji().test(input);
-const parseTagsNew = function (input, tagNamesToMatch, shouldWrapEmoji, logWarningFunction) {
-  if (tagNamesToMatch === void 0) {
-    tagNamesToMatch = [];
-  }
-  if (shouldWrapEmoji === void 0) {
-    shouldWrapEmoji = false;
-  }
-  if (logWarningFunction === void 0) {
-    logWarningFunction = defaultLogWarning;
-  }
+const parseTagsNew = (input, tagNamesToMatch = [], shouldWrapEmoji = false, logWarningFunction = defaultLogWarning) => {
   if (shouldWrapEmoji && containsEmoji(input)) {
     input = wrapEmoji(input);
   }
@@ -347,7 +321,7 @@ const isOnlyWhitespace = s => s.search(/^\s+$/) === 0;
 const PX_PER_EM = 16;
 const PX_PER_PERCENT = 16 / 100;
 const PX_PER_PT = 1.3281472327365;
-const getFontPropertiesOfText = function (textField, forceUpdate) {
+const getFontPropertiesOfText = (textField, forceUpdate = false) => {
   const text = textField.text;
   const style = textField.style;
   const measureText = text && text.trim().length > 0 ? text : 'M';
@@ -410,31 +384,19 @@ const convertAttributeValues = attributes => {
   }
   return convertedAttributes;
 };
-const injectAttributes = function (attributes, style) {
-  if (attributes === void 0) {
-    attributes = {};
-  }
-  if (style === void 0) {
-    style = {};
-  }
+const injectAttributes = (attributes = {}, style = {}) => {
   if (isEmptyObject(style) && isEmptyObject(attributes)) return undefined;
   return combineRecords(style, convertAttributeValues(attributes));
 };
-const getStyleForTag = function (tagName, tagStyles, attributes) {
-  if (attributes === void 0) {
-    attributes = {};
-  }
+const getStyleForTag = (tagName, tagStyles, attributes = {}) => {
   const style = injectAttributes(attributes, tagStyles[tagName]) ?? {};
   if (Object.values(style).length === 0) return undefined;
   return style;
 };
-const tagWithAttributesToStyle = (_ref, tagStyles) => {
-  let {
-    tagName,
-    attributes
-  } = _ref;
-  return getStyleForTag(tagName, tagStyles, attributes);
-};
+const tagWithAttributesToStyle = ({
+  tagName,
+  attributes
+}, tagStyles) => getStyleForTag(tagName, tagStyles, attributes);
 const getStyleForTags = (tags, tagStyles, styleCache) => {
   const tagHash = JSON.stringify(tags);
   if (styleCache[tagHash] === undefined) {
@@ -538,10 +500,7 @@ const convertDecorationToLineProps = style => {
   const defaultColor = decorationColor || style.fill || DEFAULT_STYLE.fill;
   const defaultThickness = decorationThickness || 1;
   const defaultOffset = 0;
-  function mergeDecoration(decorationLineType, decorationLineTypeCamelCase) {
-    if (decorationLineTypeCamelCase === void 0) {
-      decorationLineTypeCamelCase = decorationLineType;
-    }
+  function mergeDecoration(decorationLineType, decorationLineTypeCamelCase = decorationLineType) {
     if (style.textDecoration?.includes(decorationLineType)) {
       return {
         [`${decorationLineTypeCamelCase}Color`]: style[`${decorationLineTypeCamelCase}Color`] ?? defaultColor,
@@ -621,13 +580,10 @@ const ICON_SCALE_BASE = 0.8;
 new PIXI__namespace.Text({
   text: ""
 });
-const rectFromContainer = function (container, offset) {
-  if (offset === void 0) {
-    offset = {
-      x: 0,
-      y: 0
-    };
-  }
+const rectFromContainer = (container, offset = {
+  x: 0,
+  y: 0
+}) => {
   const w = container.width;
   const h = container.height;
   const x = offset.x + container.x;
@@ -696,23 +652,17 @@ const positionWordX = x => word => {
   };
   return positionRecursive(word);
 };
-const concatBounds = function (originalBounds, bounds) {
-  if (originalBounds === void 0) {
-    originalBounds = {
-      x: NaN,
-      y: NaN,
-      width: NaN,
-      height: NaN
-    };
-  }
-  if (bounds === void 0) {
-    bounds = {
-      x: NaN,
-      y: NaN,
-      width: NaN,
-      height: NaN
-    };
-  }
+const concatBounds = (originalBounds = {
+  x: NaN,
+  y: NaN,
+  width: NaN,
+  height: NaN
+}, bounds = {
+  x: NaN,
+  y: NaN,
+  width: NaN,
+  height: NaN
+}) => {
   if (isNaN(originalBounds.x)) {
     return bounds;
   }
@@ -789,12 +739,9 @@ const alignJustify = maxLineWidth => line => {
   if (count === 0) {
     return [];
   }
-  const nonZeroWidthWords = line.filter(_ref => {
-    let {
-      width
-    } = _ref;
-    return width > 0;
-  });
+  const nonZeroWidthWords = line.filter(({
+    width
+  }) => width > 0);
   const countNonZeroWidthWords = nonZeroWidthWords.length;
   if (countNonZeroWidthWords === 1) {
     const [first, ...rest] = line;
@@ -953,6 +900,10 @@ const verticalAlignInLines = (lines, lineSpacing, overrideValign) => {
         if (strokeThickness && strokeThickness > 0) {
           segAscent += strokeThickness / 2;
         }
+        const topTrim = segment.style.topTrim ?? 0;
+        if (topTrim !== 0) {
+          segAscent = Math.max(0, segAscent - topTrim);
+        }
         const isNewline = isNewlineToken(segment);
         isWhitespaceToken(segment);
         const skipNewline = isNewlineToken(segment) && hasRealContent;
@@ -1222,13 +1173,7 @@ const splitText = (s, splitStyle) => {
     throw new Error(`Unsupported split style "${splitStyle}". ${suggestion}`);
   }
 };
-const calculateTokens = function (styledTokens, splitStyle, scaleIcons, adjustFontBaseline) {
-  if (splitStyle === void 0) {
-    splitStyle = "words";
-  }
-  if (scaleIcons === void 0) {
-    scaleIcons = true;
-  }
+const calculateTokens = (styledTokens, splitStyle = "words", scaleIcons = true, adjustFontBaseline) => {
   const defaultStyle = styledTokens.style;
   let fontProperties;
   const generateTokensFormStyledToken = (style, tags) => token => {
@@ -1273,7 +1218,7 @@ const calculateTokens = function (styledTokens, splitStyle, scaleIcons, adjustFo
             localSizer.text = str;
         }
         fontProperties = {
-          ...getFontPropertiesOfText(localSizer)
+          ...getFontPropertiesOfText(localSizer, true)
         };
         const sw = style.fontScaleWidth ?? 1.0;
         const sh = style.fontScaleHeight ?? 1.0;
@@ -1342,7 +1287,7 @@ const calculateTokens = function (styledTokens, splitStyle, scaleIcons, adjustFo
         localSizer.text = "Mg";
       }
       fontProperties = {
-        ...getFontPropertiesOfText(localSizer)
+        ...getFontPropertiesOfText(localSizer, true)
       };
       if (isIcon) {
         const h = Math.max(sprite.height, 1);
@@ -1406,10 +1351,7 @@ const calculateTokens = function (styledTokens, splitStyle, scaleIcons, adjustFo
   const lines = layout(finalTokens, maxWidth, lineSpacing, align);
   return lines;
 };
-const getBaselineAdjustment = function (style, fontBaselineMap, ascent) {
-  if (fontBaselineMap === void 0) {
-    fontBaselineMap = {};
-  }
+const getBaselineAdjustment = (style, fontBaselineMap = {}, ascent) => {
   const fontFamily = style.fontFamily?.toString() ?? "";
   const adjustBaseline = style.adjustBaseline ?? 0;
   const adjustFontBaseline = fontBaselineMap[fontFamily] ?? null;
@@ -1523,27 +1465,18 @@ class Glyphs extends PIXI__namespace.Container {
     this.setTagStyles(styles);
   }
   setTagStyles(styles, skipUpdate) {
-    Object.entries(styles).forEach(_ref => {
-      let [tag, style] = _ref;
-      return this.setStyleForTag(tag, style, true);
-    });
+    Object.entries(styles).forEach(([tag, style]) => this.setStyleForTag(tag, style, true));
     this._needsUpdate = true;
     this.updateIfShould(skipUpdate);
   }
-  getStyleForTag(tag, attributes) {
-    if (attributes === void 0) {
-      attributes = {};
-    }
+  getStyleForTag(tag, attributes = {}) {
     return getStyleForTag(tag, this.tagStyles, attributes);
   }
   getStyleForTags(tags) {
-    const styles = tags.map(_ref2 => {
-      let {
-        tagName,
-        attributes
-      } = _ref2;
-      return this.getStyleForTag(tagName, attributes);
-    });
+    const styles = tags.map(({
+      tagName,
+      attributes
+    }) => this.getStyleForTag(tagName, attributes));
     return combineAllStyles(styles);
   }
   setStyleForTag(tag, styles, skipUpdate) {
@@ -1601,16 +1534,7 @@ class Glyphs extends PIXI__namespace.Container {
   get debugContainer() {
     return this._debugContainer;
   }
-  constructor(text, tagStyles, options) {
-    if (text === void 0) {
-      text = "";
-    }
-    if (tagStyles === void 0) {
-      tagStyles = {};
-    }
-    if (options === void 0) {
-      options = {};
-    }
+  constructor(text = "", tagStyles = {}, options = {}) {
     super();
     this._options = void 0;
     this._needsUpdate = true;
@@ -1749,8 +1673,7 @@ class Glyphs extends PIXI__namespace.Container {
   }
   createSpriteTemplatesFromSourceMap(imgMap) {
     this._spriteTemplates = {};
-    Object.entries(imgMap).forEach(_ref3 => {
-      let [key, spriteSource] = _ref3;
+    Object.entries(imgMap).forEach(([key, spriteSource]) => {
       const wrongFormatError = new TypeError(`The spriteSource provided for key ${key} was not in a valid format. Please use a Sprite, Texture, BaseTexture, string, HTMLImageElement, HTMLVideoElement, HTMLCanvasElement, or SVGElement`);
       const destroyedError = new Error(`The spriteSource provided for key ${key} appears to be a Sprite or Texture that has been destroyed or removed from PIXI.TextureCache probably using \`destroy()\` with aggressive options or \`destroyImgMap()\`.`);
       let error = null;
@@ -2118,9 +2041,31 @@ class Glyphs extends PIXI__namespace.Container {
     }
     for (let lineNumber = 0; lineNumber < paragraph.length; lineNumber++) {
       const line = paragraph[lineNumber];
-      const lineBounds = getBoundsNested(line);
-      let lineBoxY = lineBounds.y + 2;
-      let lineBoxHeight = lineBounds.height;
+      getBoundsNested(line);
+      for (const word of line) {
+        for (const segment of word) {
+        }
+      }
+      let tallestEffectiveHeight = 0;
+      let tallestEffectiveY = Number.POSITIVE_INFINITY;
+      for (const word of line) {
+        for (const segment of word) {
+          const topTrim = segment.style.topTrim ?? 0;
+          let segmentAscent = segment.fontProperties.ascent;
+          const segmentDescent = segment.fontProperties.descent;
+          if (topTrim !== 0) {
+            segmentAscent = Math.max(0, segmentAscent - topTrim);
+          }
+          const effectiveHeight = segmentAscent + segmentDescent;
+          const effectiveY = segment.bounds.y + segment.fontProperties.ascent - segmentAscent;
+          if (effectiveHeight > tallestEffectiveHeight) {
+            tallestEffectiveHeight = effectiveHeight;
+            tallestEffectiveY = effectiveY;
+          }
+        }
+      }
+      let lineBoxY = tallestEffectiveY;
+      let lineBoxHeight = tallestEffectiveHeight;
       if (this.defaultStyle.wordWrap) {
         const w = this.defaultStyle.wordWrapWidth ?? this.width;
         g.rect(0, lineBoxY, w, lineBoxHeight).stroke({
@@ -2153,8 +2098,12 @@ class Glyphs extends PIXI__namespace.Container {
           let boxY = y;
           let boxHeight = segmentToken.bounds.height;
           if (!isSprite) {
-            const ascent = segmentToken.fontProperties.ascent;
+            let ascent = segmentToken.fontProperties.ascent;
             const descent = segmentToken.fontProperties.descent;
+            const segmentTopTrim = segmentToken.style.topTrim ?? 0;
+            if (segmentTopTrim !== 0) {
+              ascent = Math.max(0, ascent - segmentTopTrim);
+            }
             boxY = baseline - ascent;
             boxHeight = ascent + descent;
           } else {