itowns/lib/Core/Style.js

A JS/WebGL framework for 3D geospatial data visualization

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _Feature = require("./Feature");

var inv255 = 1 / 255;
var canvas = document.createElement('canvas');

function rgba2rgb(orig) {
  var result = orig.match(/(?:((hsl|rgb)a? *\(([\d.%]+(?:deg|g?rad|turn)?)[ ,]*([\d.%]+)[ ,]*([\d.%]+)[ ,/]*([\d.%]*)\))|(#((?:[\d\w]{3}){1,2})([\d\w]{1,2})?))/i);

  if (!result) {
    return {
      color: orig,
      opacity: 1.0
    };
  } else if (result[7]) {
    var opacity = 1.0;

    if (result[9]) {
      opacity = parseInt(result[9].length == 1 ? "".concat(result[9]).concat(result[9]) : result[9], 16) * inv255;
    }

    return {
      color: "#".concat(result[8]),
      opacity: opacity
    };
  } else if (result[0]) {
    return {
      color: "".concat(result[2], "(").concat(result[3], ",").concat(result[4], ",").concat(result[5], ")"),
      opacity: Number(result[6]) || 1.0
    };
  }
}

function readVectorProperty(property, zoom) {
  if (property == undefined) {//
  } else if (property.stops) {
    var p = property.stops.slice().reverse().find(function (stop) {
      return zoom >= stop[0];
    });
    return p ? p[1] : property.stops[0][1];
  } else {
    return property.base || property;
  }
}
/**
 * Style defines {@link Feature} style.
 * @property {object} fill fill style.
 * @property {string} fill.color fill color string css.
 * @property {Image|Canvas} fill.pattern fill with pattern image.
 * @property {number} fill.opacity fill opacity.
 * @property {object} stroke stroke style.
 * @property {string} stroke.color stroke color string css.
 * @property {number} stroke.opacity stroke opacity.
 * @property {number} stroke.width stroke line width.
 * @property {object} point point style.
 * @property {string} point.color point color string css.
 * @property {string} point.line point line color string css.
 * @property {number} point.width point line width.
 * @property {number} point.opacity point opacity.
 * @property {number} point.radius point line radius
 */


var Style =
/*#__PURE__*/
function () {
  /**
   * Constructs the object.
   * @param  {Object}  [params={}] An object that can contain all properties of a Style.
   * @constructor
   */
  function Style() {
    var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
    (0, _classCallCheck2["default"])(this, Style);
    this.isStyle = true;
    params.fill = params.fill || {};
    params.stroke = params.stroke || {};
    params.point = params.point || {};
    this.fill = {
      color: params.fill.color,
      opacity: params.fill.opacity,
      pattern: params.fill.pattern
    };
    this.stroke = {
      color: params.stroke.color,
      opacity: params.stroke.opacity,
      width: params.stroke.width,
      dasharray: params.stroke.dasharray || []
    };
    this.point = {
      color: params.point.color,
      line: params.point.line,
      opacity: params.point.opacity,
      radius: params.point.radius,
      width: params.point.width
    };
  }
  /**
   * set Style from geojson properties.
   * @param {object} properties geojson properties.
   * @param {number} type
   * @returns {Style}
   */


  (0, _createClass2["default"])(Style, [{
    key: "setFromGeojsonProperties",
    value: function setFromGeojsonProperties(properties, type) {
      if (type === _Feature.FEATURE_TYPES.POINT) {
        this.point.color = properties.fill || 'white';
        this.point.opacity = properties['fill-opacity'] || 1.0;
        this.point.line = properties.stroke || 'gray';
        this.point.radius = properties.radius || 2.0;
      } else {
        this.stroke.color = properties.stroke;
        this.stroke.width = properties['stroke-width'];
        this.stroke.opacity = properties['stroke-opacity'];

        if (type !== _Feature.FEATURE_TYPES.LINE) {
          this.fill.color = properties.fill;
          this.fill.opacity = properties['fill-opacity'] || 1.0;
        }
      }

      return this;
    }
    /**
     * set Style from vector tile layer properties.
     * @param {object} layer vector tile layer.
     * @param {Number} zoom vector tile layer.
     * @param {Object} sprites vector tile layer.
     * @returns {Style}
     */

  }, {
    key: "setFromVectorTileLayer",
    value: function setFromVectorTileLayer(layer, zoom, sprites) {
      if (layer.type === 'fill' && !this.fill.color) {
        var _rgba2rgb = rgba2rgb(readVectorProperty(layer.paint['fill-color'] || layer.paint['fill-pattern'])),
            color = _rgba2rgb.color,
            opacity = _rgba2rgb.opacity;

        this.fill.color = color;
        this.fill.opacity = readVectorProperty(layer.paint['fill-opacity'], zoom) || opacity || 1.0;

        if (layer.paint['fill-pattern'] && sprites) {
          var sprite = sprites[layer.paint['fill-pattern']];
          canvas.width = sprite.width;
          canvas.height = sprite.height;
          canvas.getContext('2d').drawImage(sprites.img, sprite.x, sprite.y, sprite.width, sprite.height, 0, 0, sprite.width, sprite.height);
          this.fill.pattern = document.createElement('img');
          this.fill.pattern.src = canvas.toDataURL('image/png');
        }

        if (layer.paint['fill-outline-color']) {
          var _rgba2rgb2 = rgba2rgb(readVectorProperty(layer.paint['fill-outline-color'])),
              _color = _rgba2rgb2.color,
              _opacity = _rgba2rgb2.opacity;

          this.stroke.color = _color;
          this.stroke.opacity = _opacity;
          this.stroke.width = 1.0;
          this.stroke.dasharray = [];
        }
      }

      if (layer.type === 'line' && !this.stroke.color) {
        var prepare = readVectorProperty(layer.paint['line-color'], zoom);

        var _rgba2rgb3 = rgba2rgb(prepare),
            _color2 = _rgba2rgb3.color,
            _opacity2 = _rgba2rgb3.opacity;

        this.stroke.dasharray = readVectorProperty(layer.paint['line-dasharray'], zoom) || [];
        this.stroke.color = _color2;
        this.stroke.lineCap = layer.layout && layer.layout['line-cap'];
        this.stroke.width = readVectorProperty(layer.paint['line-width'], zoom) || 3.0;
        this.stroke.opacity = readVectorProperty(layer.paint['line-opacity'], zoom) || _opacity2 || 1.0;
      }

      if (layer.type === 'symbol') {
        var _rgba2rgb4 = rgba2rgb(readVectorProperty(layer.paint['text-color'] || '#000000', zoom)),
            _color3 = _rgba2rgb4.color,
            _opacity3 = _rgba2rgb4.opacity;

        this.point.color = _color3;
        this.point.opacity = _opacity3;
        this.point.radius = 1.5;
      } else if (layer.type === 'circle') {
        var _rgba2rgb5 = rgba2rgb(readVectorProperty(layer.paint['circle-color']), zoom),
            _color4 = _rgba2rgb5.color,
            _opacity4 = _rgba2rgb5.opacity;

        this.point.color = _color4;
        this.point.opacity = _opacity4;
        this.point.radius = readVectorProperty(layer.paint['circle-radius'], zoom);
      }

      return this;
    }
  }]);
  return Style;
}();

var _default = Style;
exports["default"] = _default;