@mapwhit/tilerenderer 0.47.1 → 0.48.0

package/src/symbol/placement.js

@@ -398,11 +398,17 @@ class Placement {
 
     const layout = bucket.layers[0].layout;
     const duplicateOpacityState = new JointOpacityState(null, 0, false, false, true);
+    const textAllowOverlap = layout.get('text-allow-overlap');
+    const iconAllowOverlap = layout.get('icon-allow-overlap');
+    // If allow-overlap is true, we can show symbols before placement runs on them
+    // But we have to wait for placement if we potentially depend on a paired icon/text
+    // with allow-overlap: false.
+    // See https://github.com/mapbox/mapbox-gl-js/issues/7032
     const defaultOpacityState = new JointOpacityState(
       null,
       0,
-      layout.get('text-allow-overlap'),
-      layout.get('icon-allow-overlap'),
+      textAllowOverlap && (iconAllowOverlap || !bucket.hasIconData() || layout.get('icon-optional')),
+      iconAllowOverlap && (textAllowOverlap || !bucket.hasTextData() || layout.get('text-optional')),
       true
     );
 

package/src/symbol/quads.js

@@ -105,7 +105,8 @@ function getGlyphQuads(anchor, shaping, layer, alongLine, feature, positions) {
 
   for (let k = 0; k < positionedGlyphs.length; k++) {
     const positionedGlyph = positionedGlyphs[k];
-    const glyph = positions[positionedGlyph.glyph];
+    const glyphPositions = positions[positionedGlyph.fontStack];
+    const glyph = glyphPositions?.[positionedGlyph.glyph];
     if (!glyph) continue;
 
     const rect = glyph.rect;
@@ -115,7 +116,7 @@ function getGlyphQuads(anchor, shaping, layer, alongLine, feature, positions) {
     const glyphPadding = 1.0;
     const rectBuffer = GLYPH_PBF_BORDER + glyphPadding;
 
-    const halfAdvance = glyph.metrics.advance / 2;
+    const halfAdvance = (glyph.metrics.advance * positionedGlyph.scale) / 2;
 
     const glyphOffset = alongLine ? [positionedGlyph.x + halfAdvance, positionedGlyph.y] : [0, 0];
 
@@ -123,10 +124,10 @@ function getGlyphQuads(anchor, shaping, layer, alongLine, feature, positions) {
       ? [0, 0]
       : [positionedGlyph.x + halfAdvance + textOffset[0], positionedGlyph.y + textOffset[1]];
 
-    const x1 = glyph.metrics.left - rectBuffer - halfAdvance + builtInOffset[0];
-    const y1 = -glyph.metrics.top - rectBuffer + builtInOffset[1];
-    const x2 = x1 + rect.w;
-    const y2 = y1 + rect.h;
+    const x1 = (glyph.metrics.left - rectBuffer) * positionedGlyph.scale - halfAdvance + builtInOffset[0];
+    const y1 = (-glyph.metrics.top - rectBuffer) * positionedGlyph.scale + builtInOffset[1];
+    const x2 = x1 + rect.w * positionedGlyph.scale;
+    const y2 = y1 + rect.h * positionedGlyph.scale;
 
     const tl = new Point(x1, y1);
     const tr = new Point(x2, y1);

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);
 };