@mapwhit/tilerenderer 0.47.2 → 0.48.0

package/src/symbol/shaping.js

@@ -1,6 +1,7 @@
 const { charHasUprightVerticalOrientation, charAllowsIdeographicBreaking } = require('../util/script_detection');
 const verticalizePunctuation = require('../util/verticalize_punctuation');
 const { plugin: rtlTextPlugin } = require('../source/rtl_text_plugin');
+const { Formatted } = require('../style-spec/expression/definitions/formatted');
 
 const WritingMode = {
   horizontal: 1,
@@ -14,20 +15,94 @@ module.exports = {
   WritingMode
 };
 
-// The position of a glyph relative to the text's anchor point.
+class TaggedString {
+  constructor() {
+    this.text = '';
+    this.sectionIndex = []; // maps each character in 'text' to its corresponding entry in 'sections'
+    this.sections = [];
+  }
 
-// A collection of positioned glyphs and some metadata
+  static fromFeature(text, defaultFontStack) {
+    const result = new TaggedString();
+    if (text instanceof Formatted) {
+      for (let i = 0; i < text.sections.length; i++) {
+        const section = text.sections[i];
+        result.sections.push({
+          scale: section.scale || 1,
+          fontStack: section.fontStack || defaultFontStack
+        });
+        result.text += section.text;
+        for (let j = 0; j < section.text.length; j++) {
+          result.sectionIndex.push(i);
+        }
+      }
+    } else {
+      result.text = text;
+      result.sections.push({ scale: 1, fontStack: defaultFontStack });
+      for (let i = 0; i < text.length; i++) {
+        result.sectionIndex.push(0);
+      }
+    }
+    return result;
+  }
+
+  length() {
+    return this.text.length;
+  }
+
+  getSection(index) {
+    return this.sections[this.sectionIndex[index]];
+  }
+
+  getCharCode(index) {
+    return this.text.charCodeAt(index);
+  }
+
+  verticalizePunctuation() {
+    this.text = verticalizePunctuation(this.text);
+  }
+
+  trim() {
+    let beginningWhitespace = 0;
+    for (let i = 0; i < this.text.length && whitespace[this.text.charCodeAt(i)]; i++) {
+      beginningWhitespace++;
+    }
+    let trailingWhitespace = this.text.length;
+    for (let i = this.text.length - 1; i >= 0 && i >= beginningWhitespace && whitespace[this.text.charCodeAt(i)]; i--) {
+      trailingWhitespace--;
+    }
+    this.text = this.text.substring(beginningWhitespace, trailingWhitespace);
+    this.sectionIndex = this.sectionIndex.slice(beginningWhitespace, trailingWhitespace);
+  }
 
-function breakLines(text, lineBreakPoints) {
+  substring(start, end) {
+    const substring = new TaggedString();
+    substring.text = this.text.substring(start, end);
+    substring.sectionIndex = this.sectionIndex.slice(start, end);
+    substring.sections = this.sections;
+    return substring;
+  }
+
+  toString() {
+    return this.text;
+  }
+
+  getMaxScale() {
+    return this.sectionIndex.reduce((max, index) => Math.max(max, this.sections[index].scale), 0);
+  }
+}
+
+function breakLines(input, lineBreakPoints) {
   const lines = [];
+  const text = input.text;
   let start = 0;
   for (const lineBreak of lineBreakPoints) {
-    lines.push(text.substring(start, lineBreak));
+    lines.push(input.substring(start, lineBreak));
     start = lineBreak;
   }
 
   if (start < text.length) {
-    lines.push(text.substring(start, text.length));
+    lines.push(input.substring(start, text.length));
   }
   return lines;
 }
@@ -35,6 +110,7 @@ function breakLines(text, lineBreakPoints) {
 function shapeText(
   text,
   glyphs,
+  defaultFontStack,
   maxWidth,
   lineHeight,
   textAnchor,
@@ -44,9 +120,9 @@ function shapeText(
   verticalHeight,
   writingMode
 ) {
-  let logicalInput = text.trim();
+  const logicalInput = TaggedString.fromFeature(text, defaultFontStack);
   if (writingMode === WritingMode.vertical) {
-    logicalInput = verticalizePunctuation(logicalInput);
+    logicalInput.verticalizePunctuation();
   }
 
   const positionedGlyphs = [];
@@ -62,9 +138,39 @@ function shapeText(
 
   let lines;
 
-  const { processBidirectionalText } = rtlTextPlugin;
-  if (processBidirectionalText) {
-    lines = processBidirectionalText(logicalInput, determineLineBreaks(logicalInput, spacing, maxWidth, glyphs));
+  const { processBidirectionalText, processStyledBidirectionalText } = rtlTextPlugin;
+  if (processBidirectionalText && logicalInput.sections.length === 1) {
+    // Bidi doesn't have to be style-aware
+    lines = [];
+    const untaggedLines = processBidirectionalText(
+      logicalInput.toString(),
+      determineLineBreaks(logicalInput, spacing, maxWidth, glyphs)
+    );
+    for (const line of untaggedLines) {
+      const taggedLine = new TaggedString();
+      taggedLine.text = line;
+      taggedLine.sections = logicalInput.sections;
+      for (let i = 0; i < line.length; i++) {
+        taggedLine.sectionIndex.push(0);
+      }
+      lines.push(taggedLine);
+    }
+  } else if (processStyledBidirectionalText) {
+    // Need version of mapbox-gl-rtl-text with style support for combining RTL text
+    // with formatting
+    lines = [];
+    const processedLines = processStyledBidirectionalText(
+      logicalInput.text,
+      logicalInput.sectionIndex,
+      determineLineBreaks(logicalInput, spacing, maxWidth, glyphs)
+    );
+    for (const line of processedLines) {
+      const taggedLine = new TaggedString();
+      taggedLine.text = line[0];
+      taggedLine.sectionIndex = line[1];
+      taggedLine.sections = logicalInput.sections;
+      lines.push(taggedLine);
+    }
   } else {
     lines = breakLines(logicalInput, determineLineBreaks(logicalInput, spacing, maxWidth, glyphs));
   }
@@ -73,6 +179,7 @@ function shapeText(
 
   if (!positionedGlyphs.length) return false;
 
+  shaping.text = shaping.text.toString();
   return shaping;
 }
 
@@ -105,13 +212,15 @@ const breakable = {
   // See https://github.com/mapbox/mapbox-gl-js/issues/3658
 };
 
-function determineAverageLineWidth(logicalInput, spacing, maxWidth, glyphs) {
+function determineAverageLineWidth(logicalInput, spacing, maxWidth, glyphMap) {
   let totalWidth = 0;
 
-  for (let index = 0; index < logicalInput.length; index++) {
-    const glyph = glyphs[logicalInput.charCodeAt(index)];
+  for (let index = 0; index < logicalInput.length(); index++) {
+    const section = logicalInput.getSection(index);
+    const positions = glyphMap[section.fontStack];
+    const glyph = positions?.[logicalInput.getCharCode(index)];
     if (!glyph) continue;
-    totalWidth += glyph.metrics.advance + spacing;
+    totalWidth += glyph.metrics.advance * section.scale + spacing;
   }
 
   const lineCount = Math.max(1, Math.ceil(totalWidth / maxWidth));
@@ -182,39 +291,41 @@ function leastBadBreaks(lastLineBreak) {
   return leastBadBreaks(lastLineBreak.priorBreak).concat(lastLineBreak.index);
 }
 
-function determineLineBreaks(logicalInput, spacing, maxWidth, glyphs) {
+function determineLineBreaks(logicalInput, spacing, maxWidth, glyphMap) {
   if (!maxWidth) return [];
 
   if (!logicalInput) return [];
 
   const potentialLineBreaks = [];
-  const targetWidth = determineAverageLineWidth(logicalInput, spacing, maxWidth, glyphs);
+  const targetWidth = determineAverageLineWidth(logicalInput, spacing, maxWidth, glyphMap);
 
   let currentX = 0;
 
-  for (let i = 0; i < logicalInput.length; i++) {
-    const codePoint = logicalInput.charCodeAt(i);
-    const glyph = glyphs[codePoint];
+  for (let i = 0; i < logicalInput.length(); i++) {
+    const section = logicalInput.getSection(i);
+    const codePoint = logicalInput.getCharCode(i);
+    const positions = glyphMap[section.fontStack];
+    const glyph = positions?.[codePoint];
 
-    if (glyph && !whitespace[codePoint]) currentX += glyph.metrics.advance + spacing;
+    if (glyph && !whitespace[codePoint]) currentX += glyph.metrics.advance * section.scale + spacing;
 
     // Ideographic characters, spaces, and word-breaking punctuation that often appear without
     // surrounding spaces.
-    if (i < logicalInput.length - 1 && (breakable[codePoint] || charAllowsIdeographicBreaking(codePoint))) {
+    if (i < logicalInput.length() - 1 && (breakable[codePoint] || charAllowsIdeographicBreaking(codePoint))) {
       potentialLineBreaks.push(
         evaluateBreak(
           i + 1,
           currentX,
           targetWidth,
           potentialLineBreaks,
-          calculatePenalty(codePoint, logicalInput.charCodeAt(i + 1)),
+          calculatePenalty(codePoint, logicalInput.getCharCode(i + 1)),
           false
         )
       );
     }
   }
 
-  return leastBadBreaks(evaluateBreak(logicalInput.length, currentX, targetWidth, potentialLineBreaks, 0, true));
+  return leastBadBreaks(evaluateBreak(logicalInput.length(), currentX, targetWidth, potentialLineBreaks, 0, true));
 }
 
 function getAnchorAlignment(anchor) {
@@ -250,7 +361,17 @@ function getAnchorAlignment(anchor) {
   return { horizontalAlign, verticalAlign };
 }
 
-function shapeLines(shaping, glyphs, lines, lineHeight, textAnchor, textJustify, writingMode, spacing, verticalHeight) {
+function shapeLines(
+  shaping,
+  glyphMap,
+  lines,
+  lineHeight,
+  textAnchor,
+  textJustify,
+  writingMode,
+  spacing,
+  verticalHeight
+) {
   // the y offset *should* be part of the font metadata
   const yOffset = -17;
 
@@ -262,27 +383,49 @@ function shapeLines(shaping, glyphs, lines, lineHeight, textAnchor, textJustify,
 
   const justify = textJustify === 'right' ? 1 : textJustify === 'left' ? 0 : 0.5;
 
-  for (let line of lines) {
-    line = line.trim();
+  for (const line of lines) {
+    line.trim();
+
+    const lineMaxScale = line.getMaxScale();
 
-    if (!line.length) {
+    if (!line.length()) {
       y += lineHeight; // Still need a line feed after empty line
       continue;
     }
 
     const lineStartIndex = positionedGlyphs.length;
-    for (let i = 0; i < line.length; i++) {
-      const codePoint = line.charCodeAt(i);
-      const glyph = glyphs[codePoint];
+    for (let i = 0; i < line.length(); i++) {
+      const section = line.getSection(i);
+      const codePoint = line.getCharCode(i);
+      // We don't know the baseline, but since we're laying out
+      // at 24 points, we can calculate how much it will move when
+      // we scale up or down.
+      const baselineOffset = (lineMaxScale - section.scale) * 24;
+      const positions = glyphMap[section.fontStack];
+      const glyph = positions?.[codePoint];
 
       if (!glyph) continue;
 
       if (!charHasUprightVerticalOrientation(codePoint) || writingMode === WritingMode.horizontal) {
-        positionedGlyphs.push({ glyph: codePoint, x, y, vertical: false });
-        x += glyph.metrics.advance + spacing;
+        positionedGlyphs.push({
+          glyph: codePoint,
+          x,
+          y: y + baselineOffset,
+          vertical: false,
+          scale: section.scale,
+          fontStack: section.fontStack
+        });
+        x += glyph.metrics.advance * section.scale + spacing;
       } else {
-        positionedGlyphs.push({ glyph: codePoint, x, y: 0, vertical: true });
-        x += verticalHeight + spacing;
+        positionedGlyphs.push({
+          glyph: codePoint,
+          x,
+          y: baselineOffset,
+          vertical: true,
+          scale: section.scale,
+          fontStack: section.fontStack
+        });
+        x += verticalHeight * section.scale + spacing;
       }
     }
 
@@ -291,18 +434,18 @@ function shapeLines(shaping, glyphs, lines, lineHeight, textAnchor, textJustify,
       const lineLength = x - spacing;
       maxLineLength = Math.max(lineLength, maxLineLength);
 
-      justifyLine(positionedGlyphs, glyphs, lineStartIndex, positionedGlyphs.length - 1, justify);
+      justifyLine(positionedGlyphs, glyphMap, lineStartIndex, positionedGlyphs.length - 1, justify);
     }
 
     x = 0;
-    y += lineHeight;
+    y += lineHeight * lineMaxScale;
   }
 
   const { horizontalAlign, verticalAlign } = getAnchorAlignment(textAnchor);
   align(positionedGlyphs, justify, horizontalAlign, verticalAlign, maxLineLength, lineHeight, lines.length);
 
   // Calculate the bounding box
-  const height = lines.length * lineHeight;
+  const height = y - yOffset;
 
   shaping.top += -verticalAlign * height;
   shaping.bottom = shaping.top + height;
@@ -311,12 +454,14 @@ function shapeLines(shaping, glyphs, lines, lineHeight, textAnchor, textJustify,
 }
 
 // justify right = 1, left = 0, center = 0.5
-function justifyLine(positionedGlyphs, glyphs, start, end, justify) {
+function justifyLine(positionedGlyphs, glyphMap, start, end, justify) {
   if (!justify) return;
 
-  const glyph = glyphs[positionedGlyphs[end].glyph];
+  const lastPositionedGlyph = positionedGlyphs[end];
+  const positions = glyphMap[lastPositionedGlyph.fontStack];
+  const glyph = positions?.[lastPositionedGlyph.glyph];
   if (glyph) {
-    const lastAdvance = glyph.metrics.advance;
+    const lastAdvance = glyph.metrics.advance * lastPositionedGlyph.scale;
     const lineIndent = (positionedGlyphs[end].x + lastAdvance) * justify;
 
     for (let j = start; j <= end; j++) {

package/src/symbol/symbol_layout.js

@@ -12,6 +12,7 @@ const classifyRings = require('../util/classify_rings');
 const EXTENT = require('../data/extent');
 const SymbolBucket = require('../data/bucket/symbol_bucket');
 const EvaluationParameters = require('../style/evaluation_parameters');
+const { Formatted } = require('../style-spec/expression/definitions/formatted');
 
 // The symbol layout process needs `text-size` evaluated at up to five different zoom levels, and
 // `icon-size` at up to three:
@@ -73,18 +74,18 @@ function performSymbolLayout(bucket, glyphMap, glyphPositions, imageMap, imagePo
 
   for (const feature of bucket.features) {
     const fontstack = layout.get('text-font').evaluate(feature, {}).join(',');
-    const glyphs = glyphMap[fontstack] || {};
-    const glyphPositionMap = glyphPositions[fontstack] || {};
+    const glyphPositionMap = glyphPositions;
 
     const shapedTextOrientations = {};
     const text = feature.text;
     if (text) {
+      const unformattedText = text instanceof Formatted ? text.toString() : text;
       const textOffset = layout
         .get('text-offset')
         .evaluate(feature, {})
         .map(t => t * oneEm);
       const spacing = layout.get('text-letter-spacing').evaluate(feature, {}) * oneEm;
-      const spacingIfAllowed = allowsLetterSpacing(text) ? spacing : 0;
+      const spacingIfAllowed = allowsLetterSpacing(unformattedText) ? spacing : 0;
       const textAnchor = layout.get('text-anchor').evaluate(feature, {});
       const textJustify = layout.get('text-justify').evaluate(feature, {});
       const maxWidth =
@@ -92,7 +93,8 @@ function performSymbolLayout(bucket, glyphMap, glyphPositions, imageMap, imagePo
 
       shapedTextOrientations.horizontal = shapeText(
         text,
-        glyphs,
+        glyphMap,
+        fontstack,
         maxWidth,
         lineHeight,
         textAnchor,
@@ -102,10 +104,11 @@ function performSymbolLayout(bucket, glyphMap, glyphPositions, imageMap, imagePo
         oneEm,
         WritingMode.horizontal
       );
-      if (allowsVerticalWritingMode(text) && textAlongLine && keepUpright) {
+      if (allowsVerticalWritingMode(unformattedText) && textAlongLine && keepUpright) {
         shapedTextOrientations.vertical = shapeText(
           text,
-          glyphs,
+          glyphMap,
+          fontstack,
           maxWidth,
           lineHeight,
           textAnchor,

package/src/symbol/transform_text.js

@@ -1,6 +1,7 @@
 const { plugin: rtlTextPlugin } = require('../source/rtl_text_plugin');
+const { Formatted } = require('../style-spec/expression/definitions/formatted');
 
-module.exports = function (text, layer, feature) {
+function transformText(text, layer, feature) {
   const transform = layer.layout.get('text-transform').evaluate(feature, {});
   if (transform === 'uppercase') {
     text = text.toLocaleUpperCase();
@@ -13,4 +14,14 @@ module.exports = function (text, layer, feature) {
   }
 
   return text;
+}
+
+module.exports = function (text, layer, feature) {
+  if (text instanceof Formatted) {
+    text.sections.forEach(section => {
+      section.text = transformText(section.text, layer, feature);
+    });
+    return text;
+  }
+  return transformText(text, layer, feature);
 };

package/src/ui/map.js

@@ -289,22 +289,17 @@ class Map extends Camera {
   }
 
   /**
-   * Returns the map's geographical bounds.
+   * Returns the map's geographical bounds. When the bearing or pitch is non-zero, the visible region is not
+   * an axis-aligned rectangle, and the result is the smallest bounds that encompasses the visible region.
    *
-   * @returns {LngLatBounds} The map's geographical bounds.
+   * @returns {LngLatBounds}
    */
   getBounds() {
-    const bounds = new LngLatBounds(
-      this.transform.pointLocation(new Point(0, this.transform.height)),
-      this.transform.pointLocation(new Point(this.transform.width, 0))
-    );
-
-    if (this.transform.angle || this.transform.pitch) {
-      bounds.extend(this.transform.pointLocation(new Point(this.transform.size.x, 0)));
-      bounds.extend(this.transform.pointLocation(new Point(0, this.transform.size.y)));
-    }
-
-    return bounds;
+    return new LngLatBounds()
+      .extend(this.transform.pointLocation(new Point(0, 0)))
+      .extend(this.transform.pointLocation(new Point(this.transform.width, 0)))
+      .extend(this.transform.pointLocation(new Point(this.transform.width, this.transform.height)))
+      .extend(this.transform.pointLocation(new Point(0, this.transform.height)));
   }
 
   /**
@@ -772,18 +767,6 @@ class Map extends Camera {
     return true;
   }
 
-  /**
-   * Adds a [custom source type](#Custom Sources), making it available for use with
-   * {@link Map#addSource}.
-   * @private
-   * @param {string} name The name of the source type; source definition objects use this name in the `{type: ...}` field.
-   * @param {Function} SourceType A {@link Source} constructor.
-   * @param {Function} callback Called when the source type is ready or with an error argument if there is an error.
-   */
-  addSourceType(name, SourceType, callback) {
-    return this.style.addSourceType(name, SourceType, callback);
-  }
-
   /**
    * Removes a source from the map's style.
    *

package/src/style-spec/expression/definitions/equals.js

@@ -1,93 +0,0 @@
-const { toString, ValueType, BooleanType, CollatorType } = require('../types');
-
-function isComparableType(type) {
-  return type.kind === 'string' || type.kind === 'number' || type.kind === 'boolean' || type.kind === 'null';
-}
-
-/**
- * Special form for ==, !=, implementing the following signatures:
- * - (T1: Comparable, T2: Comparable) => boolean { T1 == T2 }
- * - (Comparable, value) => boolean
- * - (value, Comparable) => boolean
- *
- * Where Comparable = string | number | boolean | null.
- *
- * Evaluation semantics for the value cases are equivalent to Javascript's
- * strict equality (===/!==) -- i.e., when the value argument's type doesn't
- * match that of the Comparable argument, == evaluates to false, != to true.
- *
- * @private
- */
-function makeComparison(op, negate) {
-  return class Comparison {
-    constructor(lhs, rhs, collator) {
-      this.type = BooleanType;
-      this.lhs = lhs;
-      this.rhs = rhs;
-      this.collator = collator;
-    }
-
-    static parse(args, context) {
-      if (args.length !== 3 && args.length !== 4) return context.error('Expected two or three arguments.');
-
-      const lhs = context.parse(args[1], 1, ValueType);
-      if (!lhs) return null;
-      const rhs = context.parse(args[2], 2, ValueType);
-      if (!rhs) return null;
-
-      if (!isComparableType(lhs.type) && !isComparableType(rhs.type)) {
-        return context.error(
-          `Expected at least one argument to be a string, number, boolean, or null, but found (${toString(lhs.type)}, ${toString(rhs.type)}) instead.`
-        );
-      }
-
-      if (lhs.type.kind !== rhs.type.kind && lhs.type.kind !== 'value' && rhs.type.kind !== 'value') {
-        return context.error(`Cannot compare ${toString(lhs.type)} and ${toString(rhs.type)}.`);
-      }
-
-      let collator = null;
-      if (args.length === 4) {
-        if (lhs.type.kind !== 'string' && rhs.type.kind !== 'string') {
-          return context.error('Cannot use collator to compare non-string types.');
-        }
-        collator = context.parse(args[3], 3, CollatorType);
-        if (!collator) return null;
-      }
-
-      return new Comparison(lhs, rhs, collator);
-    }
-
-    evaluate(ctx) {
-      const equal = this.collator
-        ? this.collator.evaluate(ctx).compare(this.lhs.evaluate(ctx), this.rhs.evaluate(ctx)) === 0
-        : this.lhs.evaluate(ctx) === this.rhs.evaluate(ctx);
-
-      return negate ? !equal : equal;
-    }
-
-    eachChild(fn) {
-      fn(this.lhs);
-      fn(this.rhs);
-      if (this.collator) {
-        fn(this.collator);
-      }
-    }
-
-    possibleOutputs() {
-      return [true, false];
-    }
-
-    serialize() {
-      const serialized = [op];
-      this.eachChild(child => {
-        serialized.push(child.serialize());
-      });
-      return serialized;
-    }
-  };
-}
-
-module.exports = {
-  Equals: makeComparison('==', false),
-  NotEquals: makeComparison('!=', true)
-};