@mapwhit/tilerenderer 0.47.1

package/src/style/evaluation_parameters.js

@@ -0,0 +1,45 @@
+const ZoomHistory = require('./zoom_history');
+const { isStringInSupportedScript } = require('../util/script_detection');
+const { plugin: rtlTextPlugin } = require('../source/rtl_text_plugin');
+
+class EvaluationParameters {
+  // "options" may also be another EvaluationParameters to copy, see CrossFadedProperty.possiblyEvaluate
+  constructor(zoom, options) {
+    this.zoom = zoom;
+
+    if (options) {
+      this.now = options.now;
+      this.fadeDuration = options.fadeDuration;
+      this.zoomHistory = options.zoomHistory;
+      this.transition = options.transition;
+    } else {
+      this.now = 0;
+      this.fadeDuration = 0;
+      this.zoomHistory = new ZoomHistory();
+      this.transition = {};
+    }
+  }
+
+  isSupportedScript(str) {
+    return isStringInSupportedScript(str, rtlTextPlugin.isLoaded());
+  }
+
+  crossFadingFactor() {
+    if (this.fadeDuration === 0) {
+      return 1;
+    }
+    return Math.min((this.now - this.zoomHistory.lastIntegerZoomTime) / this.fadeDuration, 1);
+  }
+
+  getCrossfadeParameters() {
+    const z = this.zoom;
+    const fraction = z - Math.floor(z);
+    const t = this.crossFadingFactor();
+
+    return z > this.zoomHistory.lastIntegerZoom
+      ? { fromScale: 2, toScale: 1, t: fraction + (1 - fraction) * t }
+      : { fromScale: 0.5, toScale: 1, t: 1 - (1 - t) * fraction };
+  }
+}
+
+module.exports = EvaluationParameters;

package/src/style/light.js

@@ -0,0 +1,112 @@
+const { sphericalToCartesian } = require('../util/util');
+const { Evented } = require('../util/evented');
+const interpolate = require('../util/interpolate');
+
+const lightSpec = {
+  anchor: {
+    type: 'enum',
+    default: 'viewport',
+    values: ['map', 'viewport'],
+    expression: {
+      parameters: ['zoom']
+    }
+  },
+  position: {
+    type: 'array',
+    default: [1.15, 210, 30],
+    transition: true,
+    expression: {
+      interpolated: true,
+      parameters: ['zoom']
+    }
+  },
+  color: {
+    type: 'color',
+    default: '#ffffff',
+    transition: true,
+    expression: {
+      interpolated: true,
+      parameters: ['zoom']
+    }
+  },
+  intensity: {
+    type: 'number',
+    default: 0.5,
+    transition: true,
+    expression: {
+      interpolated: true,
+      parameters: ['zoom']
+    }
+  }
+};
+
+const { Properties, Transitionable, DataConstantProperty } = require('./properties');
+
+class LightPositionProperty {
+  constructor(specification) {
+    this.specification = specification;
+    this.specification['property-type'] = 'data-constant';
+  }
+
+  possiblyEvaluate(value, parameters) {
+    return sphericalToCartesian(value.expression.evaluate(parameters));
+  }
+
+  interpolate(a, b, t) {
+    return {
+      x: interpolate(a.x, b.x, t),
+      y: interpolate(a.y, b.y, t),
+      z: interpolate(a.z, b.z, t)
+    };
+  }
+}
+
+const properties = new Properties({
+  anchor: new DataConstantProperty(lightSpec.anchor),
+  position: new LightPositionProperty(lightSpec.position),
+  color: new DataConstantProperty(lightSpec.color),
+  intensity: new DataConstantProperty(lightSpec.intensity)
+});
+
+const TRANSITION_SUFFIX = '-transition';
+
+/*
+ * Represents the light used to light extruded features.
+ */
+class Light extends Evented {
+  constructor(lightOptions) {
+    super();
+    this._transitionable = new Transitionable(properties);
+    this.setLight(lightOptions);
+    this._transitioning = this._transitionable.untransitioned();
+  }
+
+  getLight() {
+    return this._transitionable.serialize();
+  }
+
+  setLight(options) {
+    for (const name in options) {
+      const value = options[name];
+      if (name.endsWith(TRANSITION_SUFFIX)) {
+        this._transitionable.setTransition(name.slice(0, -TRANSITION_SUFFIX.length), value);
+      } else {
+        this._transitionable.setValue(name, value);
+      }
+    }
+  }
+
+  updateTransitions(parameters) {
+    this._transitioning = this._transitionable.transitioned(parameters, this._transitioning);
+  }
+
+  hasTransition() {
+    return this._transitioning.hasTransition();
+  }
+
+  recalculate(parameters) {
+    this.properties = this._transitioning.possiblyEvaluate(parameters);
+  }
+}
+
+module.exports = Light;

package/src/style/load_glyph_range.js

@@ -0,0 +1,17 @@
+const parseGlyphPBF = require('./parse_glyph_pbf');
+const { callback } = require('../util/callback');
+
+module.exports = loadGlyphRange;
+
+function loadGlyphRange(fontstack, range, load, fn) {
+  return callback(fn, perform());
+
+  async function perform() {
+    const data = await load(fontstack, range);
+    const glyphs = {};
+    for (const glyph of parseGlyphPBF(data)) {
+      glyphs[glyph.id] = glyph;
+    }
+    return glyphs;
+  }
+}

package/src/style/load_sprite.js

@@ -0,0 +1,26 @@
+const browser = require('../util/browser');
+const { RGBAImage } = require('../util/image');
+const loadImage = require('../util/loader/image');
+
+module.exports = loadSprite;
+
+function loadSprite(sprite, callback) {
+  loadImage(sprite.image, (error, image) => {
+    const { json } = sprite;
+    if (error) {
+      callback(error);
+    } else if (json && image) {
+      const imageData = browser.getImageData(image);
+      const result = {};
+
+      for (const id in json) {
+        const { width, height, x, y, sdf, pixelRatio } = json[id];
+        const data = new RGBAImage({ width, height });
+        RGBAImage.copy(imageData, data, { x, y }, { x: 0, y: 0 }, { width, height });
+        result[id] = { data, pixelRatio, sdf };
+      }
+
+      callback(null, result);
+    }
+  });
+}

package/src/style/parse_glyph_pbf.js

@@ -0,0 +1,45 @@
+const { AlphaImage } = require('../util/image');
+
+const Protobuf = require('@mapwhit/pbf');
+const border = 3;
+
+function readFontstacks(tag, glyphs, pbf) {
+  if (tag === 1) {
+    pbf.readMessage(readFontstack, glyphs);
+  }
+}
+
+function readFontstack(tag, glyphs, pbf) {
+  if (tag === 3) {
+    const { id, bitmap, width, height, left, top, advance } = pbf.readMessage(readGlyph, {});
+    glyphs.push({
+      id,
+      bitmap: new AlphaImage(
+        {
+          width: width + 2 * border,
+          height: height + 2 * border
+        },
+        bitmap
+      ),
+      metrics: { width, height, left, top, advance }
+    });
+  }
+}
+
+function readGlyph(tag, glyph, pbf) {
+  if (tag === 1) glyph.id = pbf.readVarint();
+  else if (tag === 2) glyph.bitmap = pbf.readBytes();
+  else if (tag === 3) glyph.width = pbf.readVarint();
+  else if (tag === 4) glyph.height = pbf.readVarint();
+  else if (tag === 5) glyph.left = pbf.readSVarint();
+  else if (tag === 6) glyph.top = pbf.readSVarint();
+  else if (tag === 7) glyph.advance = pbf.readVarint();
+}
+
+function parseGlyph(data) {
+  return new Protobuf(data).readFields(readFontstacks, []);
+}
+
+parseGlyph.GLYPH_PBF_BORDER = border;
+
+module.exports = parseGlyph;

package/src/style/pauseable_placement.js

@@ -0,0 +1,88 @@
+const browser = require('../util/browser');
+
+const { Placement } = require('../symbol/placement');
+
+class LayerPlacement {
+  constructor() {
+    this._currentTileIndex = 0;
+    this._seenCrossTileIDs = {};
+  }
+
+  continuePlacement(tiles, placement, showCollisionBoxes, styleLayer, shouldPausePlacement) {
+    while (this._currentTileIndex < tiles.length) {
+      const tile = tiles[this._currentTileIndex];
+      placement.placeLayerTile(styleLayer, tile, showCollisionBoxes, this._seenCrossTileIDs);
+
+      this._currentTileIndex++;
+      if (shouldPausePlacement()) {
+        return true;
+      }
+    }
+  }
+}
+
+class PauseablePlacement {
+  constructor(transform, order, forceFullPlacement, showCollisionBoxes, fadeDuration, crossSourceCollisions) {
+    this.placement = new Placement(transform, fadeDuration, crossSourceCollisions);
+    this._currentPlacementIndex = order.length - 1;
+    this._forceFullPlacement = forceFullPlacement;
+    this._showCollisionBoxes = showCollisionBoxes;
+    this._done = false;
+  }
+
+  isDone() {
+    return this._done;
+  }
+
+  continuePlacement(order, layers, layerTiles) {
+    const startTime = browser.now();
+
+    const shouldPausePlacement = () => {
+      const elapsedTime = browser.now() - startTime;
+      return this._forceFullPlacement ? false : elapsedTime > 2;
+    };
+
+    while (this._currentPlacementIndex >= 0) {
+      const layerId = order[this._currentPlacementIndex];
+      const layer = layers[layerId];
+      const placementZoom = this.placement.collisionIndex.transform.zoom;
+      if (
+        layer.type === 'symbol' &&
+        (!layer.minzoom || layer.minzoom <= placementZoom) &&
+        (!layer.maxzoom || layer.maxzoom > placementZoom)
+      ) {
+        if (!this._inProgressLayer) {
+          this._inProgressLayer = new LayerPlacement();
+        }
+
+        const pausePlacement = this._inProgressLayer.continuePlacement(
+          layerTiles[layer.source],
+          this.placement,
+          this._showCollisionBoxes,
+          layer,
+          shouldPausePlacement
+        );
+
+        if (pausePlacement) {
+          // We didn't finish placing all layers within 2ms,
+          // but we can keep rendering with a partial placement
+          // We'll resume here on the next frame
+          return;
+        }
+
+        delete this._inProgressLayer;
+      }
+
+      this._currentPlacementIndex--;
+    }
+
+    this._done = true;
+  }
+
+  commit(previousPlacement, now) {
+    this.placement.commit(previousPlacement, now);
+    return this.placement;
+  }
+}
+
+module.exports = PauseablePlacement;