@mapwhit/tilerenderer 0.47.1

package/src/symbol/quads.js

@@ -0,0 +1,173 @@
+const Point = require('@mapbox/point-geometry');
+
+const { GLYPH_PBF_BORDER } = require('../style/parse_glyph_pbf');
+
+/**
+ * A textured quad for rendering a single icon or glyph.
+ *
+ * The zoom range the glyph can be shown is defined by minScale and maxScale.
+ *
+ * @param tl The offset of the top left corner from the anchor.
+ * @param tr The offset of the top right corner from the anchor.
+ * @param bl The offset of the bottom left corner from the anchor.
+ * @param br The offset of the bottom right corner from the anchor.
+ * @param tex The texture coordinates.
+ *
+ * @private
+ */
+
+/**
+ * Create the quads used for rendering an icon.
+ * @private
+ */
+function getIconQuads(anchor, shapedIcon, layer, alongLine, shapedText, feature) {
+  const image = shapedIcon.image;
+  const layout = layer.layout;
+
+  // If you have a 10px icon that isn't perfectly aligned to the pixel grid it will cover 11 actual
+  // pixels. The quad needs to be padded to account for this, otherwise they'll look slightly clipped
+  // on one edge in some cases.
+  const border = 1;
+
+  const top = shapedIcon.top - border / image.pixelRatio;
+  const left = shapedIcon.left - border / image.pixelRatio;
+  const bottom = shapedIcon.bottom + border / image.pixelRatio;
+  const right = shapedIcon.right + border / image.pixelRatio;
+  let tl;
+  let tr;
+  let br;
+  let bl;
+
+  // text-fit mode
+  if (layout.get('icon-text-fit') !== 'none' && shapedText) {
+    const iconWidth = right - left;
+    const iconHeight = bottom - top;
+    const size = layout.get('text-size').evaluate(feature, {}) / 24;
+    const textLeft = shapedText.left * size;
+    const textRight = shapedText.right * size;
+    const textTop = shapedText.top * size;
+    const textBottom = shapedText.bottom * size;
+    const textWidth = textRight - textLeft;
+    const textHeight = textBottom - textTop;
+    const padT = layout.get('icon-text-fit-padding')[0];
+    const padR = layout.get('icon-text-fit-padding')[1];
+    const padB = layout.get('icon-text-fit-padding')[2];
+    const padL = layout.get('icon-text-fit-padding')[3];
+    const offsetY = layout.get('icon-text-fit') === 'width' ? (textHeight - iconHeight) * 0.5 : 0;
+    const offsetX = layout.get('icon-text-fit') === 'height' ? (textWidth - iconWidth) * 0.5 : 0;
+    const width =
+      layout.get('icon-text-fit') === 'width' || layout.get('icon-text-fit') === 'both' ? textWidth : iconWidth;
+    const height =
+      layout.get('icon-text-fit') === 'height' || layout.get('icon-text-fit') === 'both' ? textHeight : iconHeight;
+    tl = new Point(textLeft + offsetX - padL, textTop + offsetY - padT);
+    tr = new Point(textLeft + offsetX + padR + width, textTop + offsetY - padT);
+    br = new Point(textLeft + offsetX + padR + width, textTop + offsetY + padB + height);
+    bl = new Point(textLeft + offsetX - padL, textTop + offsetY + padB + height);
+    // Normal icon size mode
+  } else {
+    tl = new Point(left, top);
+    tr = new Point(right, top);
+    br = new Point(right, bottom);
+    bl = new Point(left, bottom);
+  }
+
+  const angle = (layer.layout.get('icon-rotate').evaluate(feature, {}) * Math.PI) / 180;
+
+  if (angle) {
+    const sin = Math.sin(angle);
+    const cos = Math.cos(angle);
+    const matrix = [cos, -sin, sin, cos];
+
+    tl._matMult(matrix);
+    tr._matMult(matrix);
+    bl._matMult(matrix);
+    br._matMult(matrix);
+  }
+
+  // Icon quad is padded, so texture coordinates also need to be padded.
+  return [{ tl, tr, bl, br, tex: image.paddedRect, writingMode: undefined, glyphOffset: [0, 0] }];
+}
+
+/**
+ * Create the quads used for rendering a text label.
+ * @private
+ */
+function getGlyphQuads(anchor, shaping, layer, alongLine, feature, positions) {
+  const oneEm = 24;
+  const textRotate = (layer.layout.get('text-rotate').evaluate(feature, {}) * Math.PI) / 180;
+  const textOffset = layer.layout
+    .get('text-offset')
+    .evaluate(feature, {})
+    .map(t => t * oneEm);
+
+  const positionedGlyphs = shaping.positionedGlyphs;
+  const quads = [];
+
+  for (let k = 0; k < positionedGlyphs.length; k++) {
+    const positionedGlyph = positionedGlyphs[k];
+    const glyph = positions[positionedGlyph.glyph];
+    if (!glyph) continue;
+
+    const rect = glyph.rect;
+    if (!rect) continue;
+
+    // The rects have an addditional buffer that is not included in their size.
+    const glyphPadding = 1.0;
+    const rectBuffer = GLYPH_PBF_BORDER + glyphPadding;
+
+    const halfAdvance = glyph.metrics.advance / 2;
+
+    const glyphOffset = alongLine ? [positionedGlyph.x + halfAdvance, positionedGlyph.y] : [0, 0];
+
+    const builtInOffset = alongLine
+      ? [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 tl = new Point(x1, y1);
+    const tr = new Point(x2, y1);
+    const bl = new Point(x1, y2);
+    const br = new Point(x2, y2);
+
+    if (alongLine && positionedGlyph.vertical) {
+      // Vertical-supporting glyphs are laid out in 24x24 point boxes (1 square em)
+      // In horizontal orientation, the y values for glyphs are below the midline
+      // and we use a "yOffset" of -17 to pull them up to the middle.
+      // By rotating counter-clockwise around the point at the center of the left
+      // edge of a 24x24 layout box centered below the midline, we align the center
+      // of the glyphs with the horizontal midline, so the yOffset is no longer
+      // necessary, but we also pull the glyph to the left along the x axis
+      const center = new Point(-halfAdvance, halfAdvance);
+      const verticalRotation = -Math.PI / 2;
+      const xOffsetCorrection = new Point(5, 0);
+      tl._rotateAround(verticalRotation, center)._add(xOffsetCorrection);
+      tr._rotateAround(verticalRotation, center)._add(xOffsetCorrection);
+      bl._rotateAround(verticalRotation, center)._add(xOffsetCorrection);
+      br._rotateAround(verticalRotation, center)._add(xOffsetCorrection);
+    }
+
+    if (textRotate) {
+      const sin = Math.sin(textRotate);
+      const cos = Math.cos(textRotate);
+      const matrix = [cos, -sin, sin, cos];
+
+      tl._matMult(matrix);
+      tr._matMult(matrix);
+      bl._matMult(matrix);
+      br._matMult(matrix);
+    }
+
+    quads.push({ tl, tr, bl, br, tex: rect, writingMode: shaping.writingMode, glyphOffset });
+  }
+
+  return quads;
+}
+
+module.exports = {
+  getIconQuads,
+  getGlyphQuads
+};

package/src/symbol/shaping.js

@@ -0,0 +1,347 @@
+const { charHasUprightVerticalOrientation, charAllowsIdeographicBreaking } = require('../util/script_detection');
+const verticalizePunctuation = require('../util/verticalize_punctuation');
+const { plugin: rtlTextPlugin } = require('../source/rtl_text_plugin');
+
+const WritingMode = {
+  horizontal: 1,
+  vertical: 2,
+  horizontalOnly: 3
+};
+
+module.exports = {
+  shapeText,
+  shapeIcon,
+  WritingMode
+};
+
+// The position of a glyph relative to the text's anchor point.
+
+// A collection of positioned glyphs and some metadata
+
+function breakLines(text, lineBreakPoints) {
+  const lines = [];
+  let start = 0;
+  for (const lineBreak of lineBreakPoints) {
+    lines.push(text.substring(start, lineBreak));
+    start = lineBreak;
+  }
+
+  if (start < text.length) {
+    lines.push(text.substring(start, text.length));
+  }
+  return lines;
+}
+
+function shapeText(
+  text,
+  glyphs,
+  maxWidth,
+  lineHeight,
+  textAnchor,
+  textJustify,
+  spacing,
+  translate,
+  verticalHeight,
+  writingMode
+) {
+  let logicalInput = text.trim();
+  if (writingMode === WritingMode.vertical) {
+    logicalInput = verticalizePunctuation(logicalInput);
+  }
+
+  const positionedGlyphs = [];
+  const shaping = {
+    positionedGlyphs,
+    text: logicalInput,
+    top: translate[1],
+    bottom: translate[1],
+    left: translate[0],
+    right: translate[0],
+    writingMode
+  };
+
+  let lines;
+
+  const { processBidirectionalText } = rtlTextPlugin;
+  if (processBidirectionalText) {
+    lines = processBidirectionalText(logicalInput, determineLineBreaks(logicalInput, spacing, maxWidth, glyphs));
+  } else {
+    lines = breakLines(logicalInput, determineLineBreaks(logicalInput, spacing, maxWidth, glyphs));
+  }
+
+  shapeLines(shaping, glyphs, lines, lineHeight, textAnchor, textJustify, writingMode, spacing, verticalHeight);
+
+  if (!positionedGlyphs.length) return false;
+
+  return shaping;
+}
+
+const whitespace = {
+  [0x09]: true, // tab
+  [0x0a]: true, // newline
+  [0x0b]: true, // vertical tab
+  [0x0c]: true, // form feed
+  [0x0d]: true, // carriage return
+  [0x20]: true // space
+};
+
+const breakable = {
+  [0x0a]: true, // newline
+  [0x20]: true, // space
+  [0x26]: true, // ampersand
+  [0x28]: true, // left parenthesis
+  [0x29]: true, // right parenthesis
+  [0x2b]: true, // plus sign
+  [0x2d]: true, // hyphen-minus
+  [0x2f]: true, // solidus
+  [0xad]: true, // soft hyphen
+  [0xb7]: true, // middle dot
+  [0x200b]: true, // zero-width space
+  [0x2010]: true, // hyphen
+  [0x2013]: true, // en dash
+  [0x2027]: true // interpunct
+  // Many other characters may be reasonable breakpoints
+  // Consider "neutral orientation" characters at scriptDetection.charHasNeutralVerticalOrientation
+  // See https://github.com/mapbox/mapbox-gl-js/issues/3658
+};
+
+function determineAverageLineWidth(logicalInput, spacing, maxWidth, glyphs) {
+  let totalWidth = 0;
+
+  for (let index = 0; index < logicalInput.length; index++) {
+    const glyph = glyphs[logicalInput.charCodeAt(index)];
+    if (!glyph) continue;
+    totalWidth += glyph.metrics.advance + spacing;
+  }
+
+  const lineCount = Math.max(1, Math.ceil(totalWidth / maxWidth));
+  return totalWidth / lineCount;
+}
+
+function calculateBadness(lineWidth, targetWidth, penalty, isLastBreak) {
+  const raggedness = (lineWidth - targetWidth) ** 2;
+  if (isLastBreak) {
+    // Favor finals lines shorter than average over longer than average
+    if (lineWidth < targetWidth) {
+      return raggedness / 2;
+    }
+    return raggedness * 2;
+  }
+
+  return raggedness + Math.abs(penalty) * penalty;
+}
+
+function calculatePenalty(codePoint, nextCodePoint) {
+  let penalty = 0;
+  // Force break on newline
+  if (codePoint === 0x0a) {
+    penalty -= 10000;
+  }
+  // Penalize open parenthesis at end of line
+  if (codePoint === 0x28 || codePoint === 0xff08) {
+    penalty += 50;
+  }
+
+  // Penalize close parenthesis at beginning of line
+  if (nextCodePoint === 0x29 || nextCodePoint === 0xff09) {
+    penalty += 50;
+  }
+  return penalty;
+}
+
+function evaluateBreak(breakIndex, breakX, targetWidth, potentialBreaks, penalty, isLastBreak) {
+  // We could skip evaluating breaks where the line length (breakX - priorBreak.x) > maxWidth
+  //  ...but in fact we allow lines longer than maxWidth (if there's no break points)
+  //  ...and when targetWidth and maxWidth are close, strictly enforcing maxWidth can give
+  //     more lopsided results.
+
+  let bestPriorBreak = null;
+  let bestBreakBadness = calculateBadness(breakX, targetWidth, penalty, isLastBreak);
+
+  for (const potentialBreak of potentialBreaks) {
+    const lineWidth = breakX - potentialBreak.x;
+    const breakBadness = calculateBadness(lineWidth, targetWidth, penalty, isLastBreak) + potentialBreak.badness;
+    if (breakBadness <= bestBreakBadness) {
+      bestPriorBreak = potentialBreak;
+      bestBreakBadness = breakBadness;
+    }
+  }
+
+  return {
+    index: breakIndex,
+    x: breakX,
+    priorBreak: bestPriorBreak,
+    badness: bestBreakBadness
+  };
+}
+
+function leastBadBreaks(lastLineBreak) {
+  if (!lastLineBreak) {
+    return [];
+  }
+  return leastBadBreaks(lastLineBreak.priorBreak).concat(lastLineBreak.index);
+}
+
+function determineLineBreaks(logicalInput, spacing, maxWidth, glyphs) {
+  if (!maxWidth) return [];
+
+  if (!logicalInput) return [];
+
+  const potentialLineBreaks = [];
+  const targetWidth = determineAverageLineWidth(logicalInput, spacing, maxWidth, glyphs);
+
+  let currentX = 0;
+
+  for (let i = 0; i < logicalInput.length; i++) {
+    const codePoint = logicalInput.charCodeAt(i);
+    const glyph = glyphs[codePoint];
+
+    if (glyph && !whitespace[codePoint]) currentX += glyph.metrics.advance + spacing;
+
+    // Ideographic characters, spaces, and word-breaking punctuation that often appear without
+    // surrounding spaces.
+    if (i < logicalInput.length - 1 && (breakable[codePoint] || charAllowsIdeographicBreaking(codePoint))) {
+      potentialLineBreaks.push(
+        evaluateBreak(
+          i + 1,
+          currentX,
+          targetWidth,
+          potentialLineBreaks,
+          calculatePenalty(codePoint, logicalInput.charCodeAt(i + 1)),
+          false
+        )
+      );
+    }
+  }
+
+  return leastBadBreaks(evaluateBreak(logicalInput.length, currentX, targetWidth, potentialLineBreaks, 0, true));
+}
+
+function getAnchorAlignment(anchor) {
+  let horizontalAlign = 0.5;
+  let verticalAlign = 0.5;
+
+  switch (anchor) {
+    case 'right':
+    case 'top-right':
+    case 'bottom-right':
+      horizontalAlign = 1;
+      break;
+    case 'left':
+    case 'top-left':
+    case 'bottom-left':
+      horizontalAlign = 0;
+      break;
+  }
+
+  switch (anchor) {
+    case 'bottom':
+    case 'bottom-right':
+    case 'bottom-left':
+      verticalAlign = 1;
+      break;
+    case 'top':
+    case 'top-right':
+    case 'top-left':
+      verticalAlign = 0;
+      break;
+  }
+
+  return { horizontalAlign, verticalAlign };
+}
+
+function shapeLines(shaping, glyphs, lines, lineHeight, textAnchor, textJustify, writingMode, spacing, verticalHeight) {
+  // the y offset *should* be part of the font metadata
+  const yOffset = -17;
+
+  let x = 0;
+  let y = yOffset;
+
+  let maxLineLength = 0;
+  const positionedGlyphs = shaping.positionedGlyphs;
+
+  const justify = textJustify === 'right' ? 1 : textJustify === 'left' ? 0 : 0.5;
+
+  for (let line of lines) {
+    line = line.trim();
+
+    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];
+
+      if (!glyph) continue;
+
+      if (!charHasUprightVerticalOrientation(codePoint) || writingMode === WritingMode.horizontal) {
+        positionedGlyphs.push({ glyph: codePoint, x, y, vertical: false });
+        x += glyph.metrics.advance + spacing;
+      } else {
+        positionedGlyphs.push({ glyph: codePoint, x, y: 0, vertical: true });
+        x += verticalHeight + spacing;
+      }
+    }
+
+    // Only justify if we placed at least one glyph
+    if (positionedGlyphs.length !== lineStartIndex) {
+      const lineLength = x - spacing;
+      maxLineLength = Math.max(lineLength, maxLineLength);
+
+      justifyLine(positionedGlyphs, glyphs, lineStartIndex, positionedGlyphs.length - 1, justify);
+    }
+
+    x = 0;
+    y += lineHeight;
+  }
+
+  const { horizontalAlign, verticalAlign } = getAnchorAlignment(textAnchor);
+  align(positionedGlyphs, justify, horizontalAlign, verticalAlign, maxLineLength, lineHeight, lines.length);
+
+  // Calculate the bounding box
+  const height = lines.length * lineHeight;
+
+  shaping.top += -verticalAlign * height;
+  shaping.bottom = shaping.top + height;
+  shaping.left += -horizontalAlign * maxLineLength;
+  shaping.right = shaping.left + maxLineLength;
+}
+
+// justify right = 1, left = 0, center = 0.5
+function justifyLine(positionedGlyphs, glyphs, start, end, justify) {
+  if (!justify) return;
+
+  const glyph = glyphs[positionedGlyphs[end].glyph];
+  if (glyph) {
+    const lastAdvance = glyph.metrics.advance;
+    const lineIndent = (positionedGlyphs[end].x + lastAdvance) * justify;
+
+    for (let j = start; j <= end; j++) {
+      positionedGlyphs[j].x -= lineIndent;
+    }
+  }
+}
+
+function align(positionedGlyphs, justify, horizontalAlign, verticalAlign, maxLineLength, lineHeight, lineCount) {
+  const shiftX = (justify - horizontalAlign) * maxLineLength;
+  const shiftY = (-verticalAlign * lineCount + 0.5) * lineHeight;
+
+  for (let j = 0; j < positionedGlyphs.length; j++) {
+    positionedGlyphs[j].x += shiftX;
+    positionedGlyphs[j].y += shiftY;
+  }
+}
+
+function shapeIcon(image, iconOffset, iconAnchor) {
+  const { horizontalAlign, verticalAlign } = getAnchorAlignment(iconAnchor);
+  const dx = iconOffset[0];
+  const dy = iconOffset[1];
+  const x1 = dx - image.displaySize[0] * horizontalAlign;
+  const x2 = x1 + image.displaySize[0];
+  const y1 = dy - image.displaySize[1] * verticalAlign;
+  const y2 = y1 + image.displaySize[1];
+  return { image, top: y1, bottom: y2, left: x1, right: x2 };
+}