@mapwhit/tilerenderer 0.47.1

package/src/style-spec/util/color.js

@@ -0,0 +1,73 @@
+const { parseCSSColor } = require('csscolorparser');
+
+/**
+ * An RGBA color value. Create instances from color strings using the static
+ * method `Color.parse`. The constructor accepts RGB channel values in the range
+ * `[0, 1]`, premultiplied by A.
+ *
+ * @param {number} r The red channel.
+ * @param {number} g The green channel.
+ * @param {number} b The blue channel.
+ * @param {number} a The alpha channel.
+ * @private
+ */
+class Color {
+  constructor(r, g, b, a = 1) {
+    this.r = r;
+    this.g = g;
+    this.b = b;
+    this.a = a;
+  }
+
+  /**
+   * Parses valid CSS color strings and returns a `Color` instance.
+   * @returns A `Color` instance, or `undefined` if the input is not a valid color string.
+   */
+  static parse(input) {
+    if (!input) {
+      return undefined;
+    }
+
+    if (input instanceof Color) {
+      return input;
+    }
+
+    if (typeof input !== 'string') {
+      return undefined;
+    }
+
+    const rgba = parseCSSColor(input);
+    if (!rgba) {
+      return undefined;
+    }
+
+    return new Color((rgba[0] / 255) * rgba[3], (rgba[1] / 255) * rgba[3], (rgba[2] / 255) * rgba[3], rgba[3]);
+  }
+
+  /**
+   * Returns an RGBA string representing the color value.
+   *
+   * @returns An RGBA string.
+   * @example
+   * var purple = new Color.parse('purple');
+   * purple.toString; // = "rgba(128,0,128,1)"
+   * var translucentGreen = new Color.parse('rgba(26, 207, 26, .73)');
+   * translucentGreen.toString(); // = "rgba(26,207,26,0.73)"
+   */
+  toString() {
+    const [r, g, b, a] = this.toArray();
+    return `rgba(${Math.round(r)},${Math.round(g)},${Math.round(b)},${a})`;
+  }
+
+  toArray() {
+    const { r, g, b, a } = this;
+    return a === 0 ? [0, 0, 0, 0] : [(r * 255) / a, (g * 255) / a, (b * 255) / a, a];
+  }
+}
+
+Color.black = new Color(0, 0, 0, 1);
+Color.white = new Color(1, 1, 1, 1);
+Color.transparent = new Color(0, 0, 0, 0);
+Color.red = new Color(1, 0, 0, 1);
+
+module.exports = Color;

package/src/style-spec/util/color_spaces.js

@@ -0,0 +1,128 @@
+const Color = require('./color');
+
+const { number: interpolateNumber } = require('./interpolate');
+
+// Constants
+const Xn = 0.95047; // D65 standard referent
+const Yn = 1;
+const Zn = 1.08883;
+const t0 = 4 / 29;
+const t1 = 6 / 29;
+const t2 = 3 * t1 * t1;
+const t3 = t1 * t1 * t1;
+const deg2rad = Math.PI / 180;
+const rad2deg = 180 / Math.PI;
+
+// Utilities
+function xyz2lab(t) {
+  return t > t3 ? t ** (1 / 3) : t / t2 + t0;
+}
+
+function lab2xyz(t) {
+  return t > t1 ? t * t * t : t2 * (t - t0);
+}
+
+function xyz2rgb(x) {
+  return 255 * (x <= 0.0031308 ? 12.92 * x : 1.055 * x ** (1 / 2.4) - 0.055);
+}
+
+function rgb2xyz(x) {
+  x /= 255;
+  return x <= 0.04045 ? x / 12.92 : ((x + 0.055) / 1.055) ** 2.4;
+}
+
+// LAB
+function rgbToLab(rgbColor) {
+  const b = rgb2xyz(rgbColor.r);
+  const a = rgb2xyz(rgbColor.g);
+  const l = rgb2xyz(rgbColor.b);
+  const x = xyz2lab((0.4124564 * b + 0.3575761 * a + 0.1804375 * l) / Xn);
+  const y = xyz2lab((0.2126729 * b + 0.7151522 * a + 0.072175 * l) / Yn);
+  const z = xyz2lab((0.0193339 * b + 0.119192 * a + 0.9503041 * l) / Zn);
+
+  return {
+    l: 116 * y - 16,
+    a: 500 * (x - y),
+    b: 200 * (y - z),
+    alpha: rgbColor.a
+  };
+}
+
+function labToRgb(labColor) {
+  let y = (labColor.l + 16) / 116;
+  let x = isNaN(labColor.a) ? y : y + labColor.a / 500;
+  let z = isNaN(labColor.b) ? y : y - labColor.b / 200;
+  y = Yn * lab2xyz(y);
+  x = Xn * lab2xyz(x);
+  z = Zn * lab2xyz(z);
+  return new Color(
+    xyz2rgb(3.2404542 * x - 1.5371385 * y - 0.4985314 * z), // D65 -> sRGB
+    xyz2rgb(-0.969266 * x + 1.8760108 * y + 0.041556 * z),
+    xyz2rgb(0.0556434 * x - 0.2040259 * y + 1.0572252 * z),
+    labColor.alpha
+  );
+}
+
+function interpolateLab(from, to, t) {
+  return {
+    l: interpolateNumber(from.l, to.l, t),
+    a: interpolateNumber(from.a, to.a, t),
+    b: interpolateNumber(from.b, to.b, t),
+    alpha: interpolateNumber(from.alpha, to.alpha, t)
+  };
+}
+
+// HCL
+function rgbToHcl(rgbColor) {
+  const { l, a, b } = rgbToLab(rgbColor);
+  const h = Math.atan2(b, a) * rad2deg;
+  return {
+    h: h < 0 ? h + 360 : h,
+    c: Math.sqrt(a * a + b * b),
+    l: l,
+    alpha: rgbColor.a
+  };
+}
+
+function hclToRgb(hclColor) {
+  const h = hclColor.h * deg2rad;
+  const c = hclColor.c;
+  const l = hclColor.l;
+  return labToRgb({
+    l: l,
+    a: Math.cos(h) * c,
+    b: Math.sin(h) * c,
+    alpha: hclColor.alpha
+  });
+}
+
+function interpolateHue(a, b, t) {
+  const d = b - a;
+  return a + t * (d > 180 || d < -180 ? d - 360 * Math.round(d / 360) : d);
+}
+
+function interpolateHcl(from, to, t) {
+  return {
+    h: interpolateHue(from.h, to.h, t),
+    c: interpolateNumber(from.c, to.c, t),
+    l: interpolateNumber(from.l, to.l, t),
+    alpha: interpolateNumber(from.alpha, to.alpha, t)
+  };
+}
+
+const lab = {
+  forward: rgbToLab,
+  reverse: labToRgb,
+  interpolate: interpolateLab
+};
+
+const hcl = {
+  forward: rgbToHcl,
+  reverse: hclToRgb,
+  interpolate: interpolateHcl
+};
+
+module.exports = {
+  lab,
+  hcl
+};

package/src/style-spec/util/eval_support.js

@@ -0,0 +1,8 @@
+module.exports = (function () {
+  try {
+    new Function('');
+    return true;
+  } catch (e) {
+    return false;
+  }
+})();

package/src/style-spec/util/get_type.js

@@ -0,0 +1,18 @@
+module.exports = function getType(val) {
+  if (val instanceof Number) {
+    return 'number';
+  }
+  if (val instanceof String) {
+    return 'string';
+  }
+  if (val instanceof Boolean) {
+    return 'boolean';
+  }
+  if (Array.isArray(val)) {
+    return 'array';
+  }
+  if (val === null) {
+    return 'null';
+  }
+  return typeof val;
+};

package/src/style-spec/util/interpolate.js

@@ -0,0 +1,21 @@
+const Color = require('./color');
+
+function number(a, b, t) {
+  return a * (1 - t) + b * t;
+}
+
+function color(from, to, t) {
+  return new Color(number(from.r, to.r, t), number(from.g, to.g, t), number(from.b, to.b, t), number(from.a, to.a, t));
+}
+
+function array(from, to, t) {
+  return from.map((d, i) => {
+    return number(d, to[i], t);
+  });
+}
+
+module.exports = {
+  number,
+  color,
+  array
+};

package/src/style-spec/util/properties.js

@@ -0,0 +1,17 @@
+function supportsPropertyExpression({ ['property-type']: propertyType }) {
+  return propertyType === 'data-driven' || propertyType === 'cross-faded-data-driven';
+}
+
+function supportsZoomExpression(spec) {
+  return !!spec.expression?.parameters.includes('zoom');
+}
+
+function supportsInterpolation(spec) {
+  return !!spec.expression?.interpolated;
+}
+
+module.exports = {
+  supportsPropertyExpression,
+  supportsZoomExpression,
+  supportsInterpolation
+};

package/src/style-spec/util/ref_properties.js

@@ -0,0 +1 @@
+module.exports = ['type', 'source', 'source-layer', 'minzoom', 'maxzoom', 'filter', 'layout'];

package/src/style-spec/util/result.js

@@ -0,0 +1,19 @@
+/**
+ * A type used for returning and propagating errors. The first element of the union
+ * represents success and contains a value, and the second represents an error and
+ * contains an error value.
+ * @private
+ */
+
+function success(value) {
+  return { result: 'success', value };
+}
+
+function error(value) {
+  return { result: 'error', value };
+}
+
+module.exports = {
+  success,
+  error
+};

package/src/symbol/anchor.js

@@ -0,0 +1,21 @@
+const Point = require('@mapbox/point-geometry');
+
+const { register } = require('../util/web_worker_transfer');
+
+class Anchor extends Point {
+  constructor(x, y, angle, segment) {
+    super(x, y);
+    this.angle = angle;
+    if (segment !== undefined) {
+      this.segment = segment;
+    }
+  }
+
+  clone() {
+    return new Anchor(this.x, this.y, this.angle, this.segment);
+  }
+}
+
+register('Anchor', Anchor);
+
+module.exports = Anchor;

package/src/symbol/check_max_angle.js

@@ -0,0 +1,75 @@
+module.exports = checkMaxAngle;
+
+/**
+ * Labels placed around really sharp angles aren't readable. Check if any
+ * part of the potential label has a combined angle that is too big.
+ *
+ * @param line
+ * @param anchor The point on the line around which the label is anchored.
+ * @param labelLength The length of the label in geometry units.
+ * @param windowSize The check fails if the combined angles within a part of the line that is `windowSize` long is too big.
+ * @param maxAngle The maximum combined angle that any window along the label is allowed to have.
+ *
+ * @returns {boolean} whether the label should be placed
+ * @private
+ */
+function checkMaxAngle(line, anchor, labelLength, windowSize, maxAngle) {
+  // horizontal labels always pass
+  if (anchor.segment === undefined) return true;
+
+  let p = anchor;
+  let index = anchor.segment + 1;
+  let anchorDistance = 0;
+
+  // move backwards along the line to the first segment the label appears on
+  while (anchorDistance > -labelLength / 2) {
+    index--;
+
+    // there isn't enough room for the label after the beginning of the line
+    if (index < 0) return false;
+
+    anchorDistance -= line[index].dist(p);
+    p = line[index];
+  }
+
+  anchorDistance += line[index].dist(line[index + 1]);
+  index++;
+
+  // store recent corners and their total angle difference
+  const recentCorners = [];
+  let recentAngleDelta = 0;
+
+  // move forwards by the length of the label and check angles along the way
+  while (anchorDistance < labelLength / 2) {
+    const prev = line[index - 1];
+    const current = line[index];
+    const next = line[index + 1];
+
+    // there isn't enough room for the label before the end of the line
+    if (!next) return false;
+
+    let angleDelta = prev.angleTo(current) - current.angleTo(next);
+    // restrict angle to -pi..pi range
+    angleDelta = Math.abs(((angleDelta + 3 * Math.PI) % (Math.PI * 2)) - Math.PI);
+
+    recentCorners.push({
+      distance: anchorDistance,
+      angleDelta: angleDelta
+    });
+    recentAngleDelta += angleDelta;
+
+    // remove corners that are far enough away from the list of recent anchors
+    while (anchorDistance - recentCorners[0].distance > windowSize) {
+      recentAngleDelta -= recentCorners.shift().angleDelta;
+    }
+
+    // the sum of angles within the window area exceeds the maximum allowed value. check fails.
+    if (recentAngleDelta > maxAngle) return false;
+
+    index++;
+    anchorDistance += current.dist(next);
+  }
+
+  // no part of the line had an angle greater than the maximum allowed. check passes.
+  return true;
+}

package/src/symbol/clip_line.js

@@ -0,0 +1,73 @@
+const Point = require('@mapbox/point-geometry');
+
+module.exports = clipLine;
+
+/**
+ * Returns the part of a multiline that intersects with the provided rectangular box.
+ *
+ * @param lines
+ * @param x1 the left edge of the box
+ * @param y1 the top edge of the box
+ * @param x2 the right edge of the box
+ * @param y2 the bottom edge of the box
+ * @returns lines
+ * @private
+ */
+function clipLine(lines, x1, y1, x2, y2) {
+  const clippedLines = [];
+
+  for (let l = 0; l < lines.length; l++) {
+    const line = lines[l];
+    let clippedLine;
+
+    for (let i = 0; i < line.length - 1; i++) {
+      let p0 = line[i];
+      let p1 = line[i + 1];
+
+      if (p0.x < x1 && p1.x < x1) {
+        continue;
+      }
+      if (p0.x < x1) {
+        p0 = new Point(x1, p0.y + (p1.y - p0.y) * ((x1 - p0.x) / (p1.x - p0.x)))._round();
+      } else if (p1.x < x1) {
+        p1 = new Point(x1, p0.y + (p1.y - p0.y) * ((x1 - p0.x) / (p1.x - p0.x)))._round();
+      }
+
+      if (p0.y < y1 && p1.y < y1) {
+        continue;
+      }
+      if (p0.y < y1) {
+        p0 = new Point(p0.x + (p1.x - p0.x) * ((y1 - p0.y) / (p1.y - p0.y)), y1)._round();
+      } else if (p1.y < y1) {
+        p1 = new Point(p0.x + (p1.x - p0.x) * ((y1 - p0.y) / (p1.y - p0.y)), y1)._round();
+      }
+
+      if (p0.x >= x2 && p1.x >= x2) {
+        continue;
+      }
+      if (p0.x >= x2) {
+        p0 = new Point(x2, p0.y + (p1.y - p0.y) * ((x2 - p0.x) / (p1.x - p0.x)))._round();
+      } else if (p1.x >= x2) {
+        p1 = new Point(x2, p0.y + (p1.y - p0.y) * ((x2 - p0.x) / (p1.x - p0.x)))._round();
+      }
+
+      if (p0.y >= y2 && p1.y >= y2) {
+        continue;
+      }
+      if (p0.y >= y2) {
+        p0 = new Point(p0.x + (p1.x - p0.x) * ((y2 - p0.y) / (p1.y - p0.y)), y2)._round();
+      } else if (p1.y >= y2) {
+        p1 = new Point(p0.x + (p1.x - p0.x) * ((y2 - p0.y) / (p1.y - p0.y)), y2)._round();
+      }
+
+      if (!clippedLine || !p0.equals(clippedLine[clippedLine.length - 1])) {
+        clippedLine = [p0];
+        clippedLines.push(clippedLine);
+      }
+
+      clippedLine.push(p1);
+    }
+  }
+
+  return clippedLines;
+}

package/src/symbol/collision_feature.js

@@ -0,0 +1,230 @@
+const Point = require('@mapbox/point-geometry');
+
+/**
+ * A CollisionFeature represents the area of the tile covered by a single label.
+ * It is used with CollisionIndex to check if the label overlaps with any
+ * previous labels. A CollisionFeature is mostly just a set of CollisionBox
+ * objects.
+ *
+ * @private
+ */
+class CollisionFeature {
+  /**
+   * Create a CollisionFeature, adding its collision box data to the given collisionBoxArray in the process.
+   *
+   * @param line The geometry the label is placed on.
+   * @param anchor The point along the line around which the label is anchored.
+   * @param shaped The text or icon shaping results.
+   * @param boxScale A magic number used to convert from glyph metrics units to geometry units.
+   * @param padding The amount of padding to add around the label edges.
+   * @param alignLine Whether the label is aligned with the line or the viewport.
+   */
+  constructor(
+    collisionBoxArray,
+    line,
+    anchor,
+    featureIndex,
+    sourceLayerIndex,
+    bucketIndex,
+    shaped,
+    boxScale,
+    padding,
+    alignLine,
+    overscaling,
+    rotate
+  ) {
+    let y1 = shaped.top * boxScale - padding;
+    let y2 = shaped.bottom * boxScale + padding;
+    let x1 = shaped.left * boxScale - padding;
+    let x2 = shaped.right * boxScale + padding;
+
+    this.boxStartIndex = collisionBoxArray.length;
+
+    if (alignLine) {
+      let height = y2 - y1;
+      const length = x2 - x1;
+
+      if (height > 0) {
+        // set minimum box height to avoid very many small labels
+        height = Math.max(10 * boxScale, height);
+
+        this._addLineCollisionCircles(
+          collisionBoxArray,
+          line,
+          anchor,
+          anchor.segment,
+          length,
+          height,
+          featureIndex,
+          sourceLayerIndex,
+          bucketIndex,
+          overscaling
+        );
+      }
+    } else {
+      if (rotate) {
+        // Account for *-rotate in point collision boxes
+        // See https://github.com/mapbox/mapbox-gl-js/issues/6075
+        // Doesn't account for icon-text-fit
+
+        const tl = new Point(x1, y1);
+        const tr = new Point(x2, y1);
+        const bl = new Point(x1, y2);
+        const br = new Point(x2, y2);
+
+        const rotateRadians = (rotate * Math.PI) / 180;
+
+        tl._rotate(rotateRadians);
+        tr._rotate(rotateRadians);
+        bl._rotate(rotateRadians);
+        br._rotate(rotateRadians);
+
+        // Collision features require an "on-axis" geometry,
+        // so take the envelope of the rotated geometry
+        // (may be quite large for wide labels rotated 45 degrees)
+        x1 = Math.min(tl.x, tr.x, bl.x, br.x);
+        x2 = Math.max(tl.x, tr.x, bl.x, br.x);
+        y1 = Math.min(tl.y, tr.y, bl.y, br.y);
+        y2 = Math.max(tl.y, tr.y, bl.y, br.y);
+      }
+      collisionBoxArray.emplaceBack(
+        anchor.x,
+        anchor.y,
+        x1,
+        y1,
+        x2,
+        y2,
+        featureIndex,
+        sourceLayerIndex,
+        bucketIndex,
+        0,
+        0
+      );
+    }
+
+    this.boxEndIndex = collisionBoxArray.length;
+  }
+
+  /**
+   * Create a set of CollisionBox objects for a line.
+   *
+   * @param labelLength The length of the label in geometry units.
+   * @param anchor The point along the line around which the label is anchored.
+   * @param boxSize The size of the collision boxes that will be created.
+   * @private
+   */
+  _addLineCollisionCircles(
+    collisionBoxArray,
+    line,
+    anchor,
+    segment,
+    labelLength,
+    boxSize,
+    featureIndex,
+    sourceLayerIndex,
+    bucketIndex,
+    overscaling
+  ) {
+    const step = boxSize / 2;
+    const nBoxes = Math.floor(labelLength / step) || 1;
+    // We calculate line collision circles out to 300% of what would normally be our
+    // max size, to allow collision detection to work on labels that expand as
+    // they move into the distance
+    // Vertically oriented labels in the distant field can extend past this padding
+    // This is a noticeable problem in overscaled tiles where the pitch 0-based
+    // symbol spacing will put labels very close together in a pitched map.
+    // To reduce the cost of adding extra collision circles, we slowly increase
+    // them for overscaled tiles.
+    const overscalingPaddingFactor = 1 + (0.4 * Math.log(overscaling)) / Math.LN2;
+    const nPitchPaddingBoxes = Math.floor((nBoxes * overscalingPaddingFactor) / 2);
+
+    // offset the center of the first box by half a box so that the edge of the
+    // box is at the edge of the label.
+    const firstBoxOffset = -boxSize / 2;
+
+    let p = anchor;
+    let index = segment + 1;
+    let anchorDistance = firstBoxOffset;
+    const labelStartDistance = -labelLength / 2;
+    const paddingStartDistance = labelStartDistance - labelLength / 4;
+    // move backwards along the line to the first segment the label appears on
+    do {
+      index--;
+
+      if (index < 0) {
+        if (anchorDistance > labelStartDistance) {
+          // there isn't enough room for the label after the beginning of the line
+          // checkMaxAngle should have already caught this
+          return;
+        }
+        // The line doesn't extend far enough back for all of our padding,
+        // but we got far enough to show the label under most conditions.
+        index = 0;
+        break;
+      }
+      anchorDistance -= line[index].dist(p);
+      p = line[index];
+    } while (anchorDistance > paddingStartDistance);
+
+    let segmentLength = line[index].dist(line[index + 1]);
+
+    for (let i = -nPitchPaddingBoxes; i < nBoxes + nPitchPaddingBoxes; i++) {
+      // the distance the box will be from the anchor
+      const boxOffset = i * step;
+      let boxDistanceToAnchor = labelStartDistance + boxOffset;
+
+      // make the distance between pitch padding boxes bigger
+      if (boxOffset < 0) boxDistanceToAnchor += boxOffset;
+      if (boxOffset > labelLength) boxDistanceToAnchor += boxOffset - labelLength;
+
+      if (boxDistanceToAnchor < anchorDistance) {
+        // The line doesn't extend far enough back for this box, skip it
+        // (This could allow for line collisions on distant tiles)
+        continue;
+      }
+
+      // the box is not on the current segment. Move to the next segment.
+      while (anchorDistance + segmentLength < boxDistanceToAnchor) {
+        anchorDistance += segmentLength;
+        index++;
+
+        // There isn't enough room before the end of the line.
+        if (index + 1 >= line.length) {
+          return;
+        }
+
+        segmentLength = line[index].dist(line[index + 1]);
+      }
+
+      // the distance the box will be from the beginning of the segment
+      const segmentBoxDistance = boxDistanceToAnchor - anchorDistance;
+
+      const p0 = line[index];
+      const p1 = line[index + 1];
+      const boxAnchorPoint = p1.sub(p0)._unit()._mult(segmentBoxDistance)._add(p0)._round();
+
+      // If the box is within boxSize of the anchor, force the box to be used
+      // (so even 0-width labels use at least one box)
+      // Otherwise, the .8 multiplication gives us a little bit of conservative
+      // padding in choosing which boxes to use (see CollisionIndex#placedCollisionCircles)
+      const paddedAnchorDistance =
+        Math.abs(boxDistanceToAnchor - firstBoxOffset) < step ? 0 : (boxDistanceToAnchor - firstBoxOffset) * 0.8;
+
+      collisionBoxArray.emplaceBack(
+        boxAnchorPoint.x,
+        boxAnchorPoint.y,
+        -boxSize / 2,
+        -boxSize / 2,
+        boxSize / 2,
+        boxSize / 2,
+        featureIndex,
+        sourceLayerIndex,
+        bucketIndex,
+        boxSize / 2,
+        paddedAnchorDistance
+      );
+    }
+  }
+}
+
+module.exports = CollisionFeature;