@deck.gl/experimental-layers
Version:
Experimental layers for deck.gl
243 lines (199 loc) • 9.72 kB
JavaScript
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
;