@deck.gl/experimental-layers/dist/es5/advanced-text-layer/advanced-text-layer.js

Experimental layers for deck.gl

"use strict";

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

var _core = require("@deck.gl/core");

var _textMultiIconLayer = _interopRequireDefault(require("./text-multi-icon-layer"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }

function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }

function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

/* global fetch */
var DEFAULT_COLOR = [0, 0, 0, 255]; // TODO: support these options...
// const TEXT_ANCHOR = {
//   start: 1,
//   middle: 0,
//   end: -1
// };
// const ALIGNMENT_BASELINE = {
//   top: 1,
//   center: 0,
//   bottom: -1
// };

var defaultProps = {
  getText: function getText(x) {
    return x.text;
  },
  getPosition: function getPosition(x) {
    return x.coordinates;
  },
  getColor: function getColor(x) {
    return x.color || DEFAULT_COLOR;
  },
  getSize: function getSize(x) {
    return x.size || 32;
  },
  getAngle: function getAngle(x) {
    return x.angle || 0;
  },
  getTextAnchor: function getTextAnchor(x) {
    return x.textAnchor || 'middle';
  },
  getAlignmentBaseline: function getAlignmentBaseline(x) {
    return x.alignmentBaseline || 'center';
  },
  getPixelOffset: function getPixelOffset(x) {
    return x.pixelOffset || [0, 0];
  },
  fp64: false,
  fontTexture: null,
  fontInfo: null,
  fontSmoothing: 0.2
};

var AdvancedTextLayer =
/*#__PURE__*/
function (_CompositeLayer) {
  _inherits(AdvancedTextLayer, _CompositeLayer);

  function AdvancedTextLayer() {
    _classCallCheck(this, AdvancedTextLayer);

    return _possibleConstructorReturn(this, _getPrototypeOf(AdvancedTextLayer).apply(this, arguments));
  }

  _createClass(AdvancedTextLayer, [{
    key: "initializeState",
    value: function initializeState() {
      var _this = this;

      this.state = {
        iconAtlas: this.props.fontTexture,
        iconMapping: null
      }; // TODO: fetch again if props change

      fetch(this.props.fontInfo).then(function (response) {
        response.json().then(function (json) {
          return _this.parseFontInfo(json);
        });
      });
    }
  }, {
    key: "parseFontInfo",
    value: function parseFontInfo(json) {
      var iconMapping = {};
      json.forEach(function (fontChar) {
        var charid = fontChar.charid,
            x = fontChar.x,
            y = fontChar.y,
            width = fontChar.width,
            height = fontChar.height,
            xadvance = fontChar.xadvance,
            xoffset = fontChar.xoffset,
            yoffset = fontChar.yoffset;
        iconMapping[String.fromCharCode(charid)] = {
          x: x,
          y: y,
          width: width,
          height: height,
          mask: true,
          xadvance: xadvance,
          xoffset: xoffset,
          yoffset: yoffset
        };
      });
      this.setState({
        iconMapping: iconMapping
      });
    }
  }, {
    key: "updateState",
    value: function updateState(_ref) {
      var props = _ref.props,
          oldProps = _ref.oldProps,
          changeFlags = _ref.changeFlags;

      if (changeFlags.dataChanged || changeFlags.updateTriggersChanged && (changeFlags.updateTriggersChanged.all || changeFlags.updateTriggersChanged.getText || changeFlags.updateTriggersChanged.getPosition)) {
        this.transformStringToLetters();
      }
    }
  }, {
    key: "transformStringToLetters",
    value: function transformStringToLetters() {
      var _this2 = this;

      var _this$props = this.props,
          data = _this$props.data,
          getText = _this$props.getText,
          getPosition = _this$props.getPosition;

      if (data.length === 0) {
        return;
      } // TODO: auto-refresh when iconMapping is available


      var iconMapping = this.state.iconMapping;

      if (!iconMapping) {
        return;
      }

      var transformedData = data.map(function (val) {
        var text = getText(val);

        if (!text) {
          return [];
        }

        var position = getPosition(val);
        var xpos = 0;
        return Array.from(text).map(function (letter, index) {
          var _this2$state$iconMapp = _this2.state.iconMapping[letter],
              xadvance = _this2$state$iconMapp.xadvance,
              xoffset = _this2$state$iconMapp.xoffset,
              yoffset = _this2$state$iconMapp.yoffset,
              width = _this2$state$iconMapp.width,
              height = _this2$state$iconMapp.height;
          var x = xpos + (width / 2.0 - xoffset);
          var y = height / 2.0 + yoffset;
          xpos += xadvance;
          return {
            icon: letter,
            position: position,
            x: x,
            y: y
          };
        });
      }).reduce(function (prev, curr) {
        return [].concat(_toConsumableArray(prev), _toConsumableArray(curr));
      });
      this.setState({
        data: transformedData
      });
    }
  }, {
    key: "renderLayers",
    value: function renderLayers() {
      var _this$state = this.state,
          data = _this$state.data,
          iconAtlas = _this$state.iconAtlas,
          iconMapping = _this$state.iconMapping;

      if (!iconMapping || !iconAtlas || !data) {
        return null;
      }

      var _this$props2 = this.props,
          getColor = _this$props2.getColor,
          getSize = _this$props2.getSize,
          getAngle = _this$props2.getAngle,
          getPixelOffset = _this$props2.getPixelOffset,
          fontSmoothing = _this$props2.fontSmoothing,
          fp64 = _this$props2.fp64,
          sizeScale = _this$props2.sizeScale;
      return [new _textMultiIconLayer.default(this.getSubLayerProps({
        id: 'adv-text-multi-icon-layer',
        data: data,
        iconAtlas: iconAtlas,
        iconMapping: iconMapping,
        getColor: getColor,
        getSize: getSize,
        getAngle: getAngle,
        getPixelOffset: getPixelOffset,
        fontSmoothing: fontSmoothing,
        fp64: fp64,
        sizeScale: sizeScale,
        updateTriggers: {
          getAngle: getAngle,
          getColor: getColor,
          getSize: getSize
        }
      }))];
    }
  }]);

  return AdvancedTextLayer;
}(_core.CompositeLayer);

exports.default = AdvancedTextLayer;
AdvancedTextLayer.layerName = 'AdvancedTextLayer';
AdvancedTextLayer.defaultProps = defaultProps;
//# sourceMappingURL=advanced-text-layer.js.map