UNPKG

@deck.gl/experimental-layers

Version:

Experimental layers for deck.gl

243 lines (199 loc) 9.72 kB
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.default = void 0; var _core = require("@deck.gl/core"); var _layers = require("@deck.gl/layers"); var _pathOutlineLayer = _interopRequireDefault(require("../path-outline-layer/path-outline-layer")); var _meshLayer = _interopRequireDefault(require("../mesh-layer/mesh-layer")); var _arrow2dGeometry = _interopRequireDefault(require("./arrow-2d-geometry")); var _createPathMarkers = _interopRequireDefault(require("./create-path-markers")); var _polyline = require("./polyline"); 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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); } function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } 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); } var DISTANCE_FOR_MULTI_ARROWS = 0.1; var ARROW_HEAD_SIZE = 0.2; var ARROW_TAIL_WIDTH = 0.05; // const ARROW_CENTER_ADJUST = -0.8; var DEFAULT_MARKER_LAYER = _meshLayer.default; var DEFAULT_MARKER_LAYER_PROPS = { mesh: new _arrow2dGeometry.default({ headSize: ARROW_HEAD_SIZE, tailWidth: ARROW_TAIL_WIDTH }) }; var defaultProps = Object.assign({}, _pathOutlineLayer.default.defaultProps, { MarkerLayer: DEFAULT_MARKER_LAYER, markerLayerProps: DEFAULT_MARKER_LAYER_PROPS, sizeScale: 100, fp64: false, hightlightIndex: -1, highlightPoint: null, getPath: function getPath(x) { return x.path; }, getColor: function getColor(x) { return x.color; }, getMarkerColor: function getMarkerColor(x) { return [0, 0, 0, 255]; }, getDirection: function getDirection(x) { return x.direction; }, getMarkerPercentages: function getMarkerPercentages(object, _ref) { var lineLength = _ref.lineLength; return lineLength > DISTANCE_FOR_MULTI_ARROWS ? [0.25, 0.5, 0.75] : [0.5]; } }); var PathMarkerLayer = /*#__PURE__*/ function (_CompositeLayer) { _inherits(PathMarkerLayer, _CompositeLayer); function PathMarkerLayer() { _classCallCheck(this, PathMarkerLayer); return _possibleConstructorReturn(this, _getPrototypeOf(PathMarkerLayer).apply(this, arguments)); } _createClass(PathMarkerLayer, [{ key: "initializeState", value: function initializeState() { this.state = { markers: [], mesh: new _arrow2dGeometry.default({ headSize: ARROW_HEAD_SIZE, tailWidth: ARROW_TAIL_WIDTH }), closestPoint: null }; } }, { key: "projectFlat", value: function projectFlat(xyz, viewport, coordinateSystem, coordinateOrigin) { if (coordinateSystem === _core.COORDINATE_SYSTEM.METER_OFFSETS) { var _viewport$metersToLng = viewport.metersToLngLatDelta(xyz), _viewport$metersToLng2 = _slicedToArray(_viewport$metersToLng, 2), dx = _viewport$metersToLng2[0], dy = _viewport$metersToLng2[1]; var _coordinateOrigin = _slicedToArray(coordinateOrigin, 2), x = _coordinateOrigin[0], y = _coordinateOrigin[1]; return viewport.projectFlat([x + dx, dy + y]); } else if (coordinateSystem === _core.COORDINATE_SYSTEM.LNGLAT_OFFSETS) { var _xyz = _slicedToArray(xyz, 2), _dx = _xyz[0], _dy = _xyz[1]; var _coordinateOrigin2 = _slicedToArray(coordinateOrigin, 2), _x = _coordinateOrigin2[0], _y = _coordinateOrigin2[1]; return viewport.projectFlat([_x + _dx, _dy + _y]); } return viewport.projectFlat(xyz); } }, { key: "updateState", value: function updateState(_ref2) { var _this = this; var props = _ref2.props, oldProps = _ref2.oldProps, changeFlags = _ref2.changeFlags; if (changeFlags.dataChanged || changeFlags.updateTriggersChanged) { var _this$props = this.props, data = _this$props.data, getPath = _this$props.getPath, getDirection = _this$props.getDirection, getMarkerColor = _this$props.getMarkerColor, getMarkerPercentages = _this$props.getMarkerPercentages, coordinateSystem = _this$props.coordinateSystem, coordinateOrigin = _this$props.coordinateOrigin; var viewport = this.context.viewport; var projectFlat = function projectFlat(o) { return _this.projectFlat(o, viewport, coordinateSystem, coordinateOrigin); }; this.state.markers = (0, _createPathMarkers.default)({ data: data, getPath: getPath, getDirection: getDirection, getColor: getMarkerColor, getMarkerPercentages: getMarkerPercentages, projectFlat: projectFlat }); this._recalculateClosestPoint(); } if (changeFlags.propsChanged) { if (props.point !== oldProps.point) { this._recalculateClosestPoint(); } } } }, { key: "_recalculateClosestPoint", value: function _recalculateClosestPoint() { var _this$props2 = this.props, highlightPoint = _this$props2.highlightPoint, highlightIndex = _this$props2.highlightIndex; if (highlightPoint && highlightIndex >= 0) { var object = this.props.data[highlightIndex]; var points = this.props.getPath(object); var _getClosestPointOnPol = (0, _polyline.getClosestPointOnPolyline)({ points: points, p: highlightPoint }), point = _getClosestPointOnPol.point; this.state.closestPoints = [{ position: point }]; } else { this.state.closestPoints = []; } } }, { key: "getPickingInfo", value: function getPickingInfo(_ref3) { var info = _ref3.info; return Object.assign(info, { // override object with picked feature object: info.object && info.object.path || info.object }); } }, { key: "renderLayers", value: function renderLayers() { return [new _pathOutlineLayer.default(this.props, this.getSubLayerProps({ id: 'paths', // Note: data has to be passed explicitly like this to avoid being empty data: this.props.data })), new this.props.MarkerLayer(this.getSubLayerProps(Object.assign({}, this.props.markerLayerProps, { id: 'markers', data: this.state.markers, sizeScale: this.props.sizeScale, fp64: this.props.fp64, pickable: false, parameters: { blend: false, depthTest: false } }))), this.state.closestPoints && new _layers.ScatterplotLayer({ id: "".concat(this.props.id, "-highlight"), data: this.state.closestPoints, fp64: this.props.fp64 })]; } }]); return PathMarkerLayer; }(_core.CompositeLayer); exports.default = PathMarkerLayer; PathMarkerLayer.layerName = 'PathMarkerLayer'; PathMarkerLayer.defaultProps = defaultProps; //# sourceMappingURL=path-marker-layer.js.map