@deck.gl/experimental-layers
Version:
Experimental layers for deck.gl
175 lines (151 loc) • 6.07 kB
JavaScript
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; }
import { CompositeLayer, COORDINATE_SYSTEM } from '@deck.gl/core';
import { ScatterplotLayer } from '@deck.gl/layers';
import PathOutlineLayer from '../path-outline-layer/path-outline-layer';
import MeshLayer from '../mesh-layer/mesh-layer';
import Arrow2DGeometry from './arrow-2d-geometry';
import createPathMarkers from './create-path-markers';
import { getClosestPointOnPolyline } from './polyline';
const DISTANCE_FOR_MULTI_ARROWS = 0.1;
const ARROW_HEAD_SIZE = 0.2;
const ARROW_TAIL_WIDTH = 0.05; // const ARROW_CENTER_ADJUST = -0.8;
const DEFAULT_MARKER_LAYER = MeshLayer;
const DEFAULT_MARKER_LAYER_PROPS = {
mesh: new Arrow2DGeometry({
headSize: ARROW_HEAD_SIZE,
tailWidth: ARROW_TAIL_WIDTH
})
};
const defaultProps = Object.assign({}, PathOutlineLayer.defaultProps, {
MarkerLayer: DEFAULT_MARKER_LAYER,
markerLayerProps: DEFAULT_MARKER_LAYER_PROPS,
sizeScale: 100,
fp64: false,
hightlightIndex: -1,
highlightPoint: null,
getPath: x => x.path,
getColor: x => x.color,
getMarkerColor: x => [0, 0, 0, 255],
getDirection: x => x.direction,
getMarkerPercentages: (object, _ref) => {
let lineLength = _ref.lineLength;
return lineLength > DISTANCE_FOR_MULTI_ARROWS ? [0.25, 0.5, 0.75] : [0.5];
}
});
export default class PathMarkerLayer extends CompositeLayer {
initializeState() {
this.state = {
markers: [],
mesh: new Arrow2DGeometry({
headSize: ARROW_HEAD_SIZE,
tailWidth: ARROW_TAIL_WIDTH
}),
closestPoint: null
};
}
projectFlat(xyz, viewport, coordinateSystem, coordinateOrigin) {
if (coordinateSystem === COORDINATE_SYSTEM.METER_OFFSETS) {
const _viewport$metersToLng = viewport.metersToLngLatDelta(xyz),
_viewport$metersToLng2 = _slicedToArray(_viewport$metersToLng, 2),
dx = _viewport$metersToLng2[0],
dy = _viewport$metersToLng2[1];
const _coordinateOrigin = _slicedToArray(coordinateOrigin, 2),
x = _coordinateOrigin[0],
y = _coordinateOrigin[1];
return viewport.projectFlat([x + dx, dy + y]);
} else if (coordinateSystem === COORDINATE_SYSTEM.LNGLAT_OFFSETS) {
const _xyz = _slicedToArray(xyz, 2),
dx = _xyz[0],
dy = _xyz[1];
const _coordinateOrigin2 = _slicedToArray(coordinateOrigin, 2),
x = _coordinateOrigin2[0],
y = _coordinateOrigin2[1];
return viewport.projectFlat([x + dx, dy + y]);
}
return viewport.projectFlat(xyz);
}
updateState(_ref2) {
let props = _ref2.props,
oldProps = _ref2.oldProps,
changeFlags = _ref2.changeFlags;
if (changeFlags.dataChanged || changeFlags.updateTriggersChanged) {
const _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;
const viewport = this.context.viewport;
const projectFlat = o => this.projectFlat(o, viewport, coordinateSystem, coordinateOrigin);
this.state.markers = createPathMarkers({
data,
getPath,
getDirection,
getColor: getMarkerColor,
getMarkerPercentages,
projectFlat
});
this._recalculateClosestPoint();
}
if (changeFlags.propsChanged) {
if (props.point !== oldProps.point) {
this._recalculateClosestPoint();
}
}
}
_recalculateClosestPoint() {
const _this$props2 = this.props,
highlightPoint = _this$props2.highlightPoint,
highlightIndex = _this$props2.highlightIndex;
if (highlightPoint && highlightIndex >= 0) {
const object = this.props.data[highlightIndex];
const points = this.props.getPath(object);
const _getClosestPointOnPol = getClosestPointOnPolyline({
points,
p: highlightPoint
}),
point = _getClosestPointOnPol.point;
this.state.closestPoints = [{
position: point
}];
} else {
this.state.closestPoints = [];
}
}
getPickingInfo(_ref3) {
let info = _ref3.info;
return Object.assign(info, {
// override object with picked feature
object: info.object && info.object.path || info.object
});
}
renderLayers() {
return [new PathOutlineLayer(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 ScatterplotLayer({
id: `${this.props.id}-highlight`,
data: this.state.closestPoints,
fp64: this.props.fp64
})];
}
}
PathMarkerLayer.layerName = 'PathMarkerLayer';
PathMarkerLayer.defaultProps = defaultProps;
//# sourceMappingURL=path-marker-layer.js.map