react-application-core
Version:
A react-based application core for the business applications.
478 lines • 19.7 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.GoogleMaps = void 0;
var React = require("react");
var R = require("ramda");
var menu_1 = require("../../menu");
var util_1 = require("../../../util");
var definition_1 = require("../../../definition");
var generic_component_1 = require("../../base/generic.component");
var GoogleMaps = /** @class */ (function (_super) {
__extends(GoogleMaps, _super);
/**
* @stable [10.01.2020]
* @param {IGoogleMapsProps} props
*/
function GoogleMaps(props) {
var _this = _super.call(this, props) || this;
_this.markers = new Map();
_this.markersListeners = new Map();
_this.menuRef = React.createRef();
_this.addHeatMapLayer = _this.addHeatMapLayer.bind(_this);
_this.onGoogleMapsReady = _this.onGoogleMapsReady.bind(_this);
_this.onMapClick = _this.onMapClick.bind(_this);
_this.onMapDbClick = _this.onMapDbClick.bind(_this);
_this.onMarkerClick = _this.onMarkerClick.bind(_this);
_this.onMarkerMouseOut = _this.onMarkerMouseOut.bind(_this);
_this.onMarkerMouseOver = _this.onMarkerMouseOver.bind(_this);
_this.onMenuSelect = _this.onMenuSelect.bind(_this);
_this.openMenu = _this.openMenu.bind(_this);
if (_this.haveMenuOptions) {
_this.openMenuTask = new util_1.DelayedTask(_this.openMenu, 200); // Double click issue
}
return _this;
}
/**
* @stable [28.07.2020]
*/
GoogleMaps.prototype.render = function () {
var _a = this.originalProps, className = _a.className, style = _a.style;
return (React.createElement("div", { style: style, className: util_1.ClsUtils.joinClassName(definition_1.GoogleMapsClassesEnum.GOOGLE_MAPS, util_1.CalcUtils.calc(className)) },
React.createElement("div", { ref: this.actualRef, className: definition_1.GoogleMapsClassesEnum.GOOGLE_MAPS_BODY }),
this.menuElement));
};
/**
* @stable [09.01.2020]
*/
GoogleMaps.prototype.componentDidMount = function () {
var _this = this;
this.googleMapsLibTask = this.asyncLibManager
.waitForLib({ alias: definition_1.AsyncLibsEnum.GOOGLE_MAPS })
.then(function () { return _this.onGoogleMapsReady(); });
// It seems google doesn't stop mouse wheel propagate event.
this.wheelListenerUnsubscriber = this.domAccessor.captureEvent({
eventName: definition_1.EventsEnum.WHEEL,
element: this.actualRef.current,
callback: this.domAccessor.cancelEvent,
});
};
/**
* @stable [22.01.2020]
*/
GoogleMaps.prototype.componentWillUnmount = function () {
var _this = this;
if (util_1.TypeUtils.isFn(this.wheelListenerUnsubscriber)) {
this.wheelListenerUnsubscriber();
this.wheelListenerUnsubscriber = null;
}
util_1.ConditionUtils.ifNotNilThanValue(this.openMenuTask, function (task) {
task.stop();
_this.openMenuTask = null;
});
this.cancelGoogleMapsLibTask();
this.unbindListeners();
this.markers = null;
this.markersListeners = null;
this.event = null;
};
/**
* @stable [28.07.2020]
* @param cfg
* @param name
*/
GoogleMaps.prototype.addMarker = function (cfg, name) {
var _this = this;
var config = __assign(__assign({ anchorPoint: new google.maps.Point(0, -29), position: null }, cfg), { map: this.map });
var markerId = name || util_1.UuidUtils.uuid();
var marker = new google.maps.Marker(config);
this.markers.set(markerId, marker);
if (config.clickable) {
this.addMakerListener('click', markerId, marker, function (event) { return _this.onMarkerClick(event, markerId, marker); });
}
if (config.draggable) {
this.addMakerListener('dragstart', markerId, marker, function (event) { return _this.onMarkerDragStart(event, markerId, marker); });
this.addMakerListener('dragend', markerId, marker, function (event) { return _this.onMarkerDragEnd(event, markerId, marker); });
}
if (config.trackable) {
this.addMakerListener('mouseover', markerId, marker, function (event) { return _this.onMarkerMouseOver(event, markerId, marker); });
this.addMakerListener('mouseout', markerId, marker, function (event) { return _this.onMarkerMouseOut(event, markerId, marker); });
}
return marker;
};
/**
* @stable [03.03.2020]
* @param {string} name
*/
GoogleMaps.prototype.removeMarker = function (name) {
var _this = this;
util_1.ConditionUtils.ifNotNilThanValue(this.markers.get(name), function (marker) {
marker.unbindAll();
marker.setMap(null);
_this.markers.delete(name);
});
};
/**
* @stable [10.01.2020]
* @param {IGoogleMapsMarkerConfigEntity} cfg
*/
GoogleMaps.prototype.refreshMarker = function (cfg) {
var marker = cfg.marker, _a = cfg.visible, visible = _a === void 0 ? true : _a, refreshMap = cfg.refreshMap, _b = cfg.lat, lat = _b === void 0 ? this.mapsSettings.lat : _b, _c = cfg.lng, lng = _c === void 0 ? this.mapsSettings.lng : _c, _d = cfg.zoom, zoom = _d === void 0 ? this.mapsSettings.zoom : _d;
var markerAsObject = util_1.TypeUtils.isString(marker)
? this.markers.get(marker)
: marker;
markerAsObject.setPosition({ lat: lat, lng: lng });
markerAsObject.setVisible(visible);
if (refreshMap) {
this.refreshMap({ lat: lat, lng: lng }, zoom);
}
};
/**
* @stable [23.02.2020]
*/
GoogleMaps.prototype.addPolyline = function (polylineCfg) {
var polylineConfig = __assign({ strokeWeight: 2 }, polylineCfg);
var polyline = new google.maps.Polyline(polylineConfig);
polyline.setMap(this.map);
return polyline;
};
/**
* @stable [23.02.2020]
*/
GoogleMaps.prototype.addDirectionPolyline = function (directionCfg, polylineCfg) {
var _this = this;
var directionConfig = __assign({ travelMode: google.maps.TravelMode.DRIVING }, directionCfg);
this.directionsService.route(directionConfig, function (result, status) {
// TODO Convert to Promise (to cancel)
if (status === google.maps.DirectionsStatus.OK) {
_this.addPolyline(__assign({ path: result.routes[0].overview_path }, polylineCfg));
}
else {
throw new Error("google.maps.DirectionsService request error, status code: " + status);
}
});
};
/**
* @stable [04.03.2019]
* @param {IGoogleMapsHeatMapLayerConfigEntity} cfg
*/
GoogleMaps.prototype.addHeatMapLayer = function (cfg) {
var points = cfg.points;
var isArrayOfPointsNotEmpty = util_1.isArrayNotEmpty(points);
if (isArrayOfPointsNotEmpty) {
this.heatMapLayer = new google.maps.visualization.HeatmapLayer({
map: this.map,
data: points.map(function (point) { return new google.maps.LatLng(point.lat, point.lng); }),
});
}
if (cfg.refreshMap) {
this.refreshMap(isArrayOfPointsNotEmpty ? points[0] : this.mapsSettings, util_1.NvlUtils.nvl(cfg.zoom, this.mapsSettings.zoom));
}
};
/**
* @stable [20.02.2020]
*/
GoogleMaps.prototype.fitBounds = function (bounds, padding) {
this.map.fitBounds(bounds, padding);
};
/**
* @stable [20.02.2020]
*/
GoogleMaps.prototype.getMarkers = function () {
return this.markers;
};
Object.defineProperty(GoogleMaps.prototype, "isInitialized", {
/**
* @stable [29.03.2020]
* @returns {boolean}
*/
get: function () {
return !R.isNil(this.map);
},
enumerable: false,
configurable: true
});
Object.defineProperty(GoogleMaps.prototype, "menuElement", {
/**
* @stable [22.01.2020]
* @returns {JSX.Element}
*/
get: function () {
var _this = this;
return util_1.ConditionUtils.orNull(this.haveMenuOptions, function () { return (React.createElement(menu_1.Menu, { ref: _this.menuRef, inline: true, positionConfiguration: { event: function () { return _this.event; } }, anchorElement: function () { return _this.actualRef.current; }, options: _this.props.menuOptions, onSelect: _this.onMenuSelect })); });
},
enumerable: false,
configurable: true
});
/**
* @stable [03.02.2020]
* @param {IGoogleMapsEventEntity} event
* @param {string} markerId
* @param {google.maps.Marker} marker
*/
GoogleMaps.prototype.onMarkerDragEnd = function (event, markerId, marker) {
var onMarkerDragEnd = this.originalProps.onMarkerDragEnd;
this.draggedMarkerId = null;
if (util_1.TypeUtils.isFn(onMarkerDragEnd)) {
onMarkerDragEnd(this.asMarkerInfo(event, markerId, marker));
// 156543.03392 * Math.cos(this.map.getCenter().lat() * Math.PI / 180) / Math.pow(2, this.map.getZoom())
}
};
/**
* @stable [03.02.2020]
* @param {IGoogleMapsEventEntity} event
* @param {string} markerId
* @param {google.maps.Marker} marker
*/
GoogleMaps.prototype.onMarkerDragStart = function (event, markerId, marker) {
var onMarkerDragStart = this.originalProps.onMarkerDragStart;
this.draggedMarkerId = markerId;
if (util_1.TypeUtils.isFn(onMarkerDragStart)) {
onMarkerDragStart(this.asMarkerInfo(event, markerId, marker));
}
};
/**
* @stable [28.07.2020]
* @param event
* @param markerId
* @param marker
*/
GoogleMaps.prototype.onMarkerMouseOver = function (event, markerId, marker) {
var onMarkerEnter = this.originalProps.onMarkerEnter;
if (this.draggedMarkerId === markerId) {
return;
}
if (util_1.TypeUtils.isFn(onMarkerEnter)) {
onMarkerEnter();
}
};
/**
* @stable [28.07.2020]
* @param event
* @param markerId
* @param marker
*/
GoogleMaps.prototype.onMarkerMouseOut = function (event, markerId, marker) {
var onMarkerLeave = this.originalProps.onMarkerLeave;
if (this.draggedMarkerId === markerId) {
return;
}
if (util_1.TypeUtils.isFn(onMarkerLeave)) {
onMarkerLeave();
}
};
/**
* @stable [28.07.2020]
* @param event
* @param markerId
* @param marker
*/
GoogleMaps.prototype.onMarkerClick = function (event, markerId, marker) {
var onMarkerClick = this.originalProps.onMarkerClick;
if (util_1.TypeUtils.isFn(onMarkerClick)) {
onMarkerClick(this.asMarkerInfo(event, markerId, marker));
}
};
/**
* @stable [28.07.2020]
* @param event
* @param markerId
* @param marker
*/
GoogleMaps.prototype.asMarkerInfo = function (event, markerId, marker) {
var position = marker.getPosition();
var lat = position.lat();
var lng = position.lng();
return { name: markerId, item: marker, lat: lat, lng: lng, event: event };
};
/**
* @stable [28.07.2020]
* @param item
*/
GoogleMaps.prototype.onMenuSelect = function (item) {
var onSelect = this.originalProps.onSelect;
if (util_1.TypeUtils.isFn(onSelect)) {
onSelect({ item: item, lat: this.lat, lng: this.lng });
}
};
/**
* @stable [22.01.2020]
* @param {IGoogleMapsEventEntity} payload
*/
GoogleMaps.prototype.onMapClick = function (payload) {
var _this = this;
var onClick = this.originalProps.onClick;
util_1.ConditionUtils.ifNotNilThanValue(payload.pixel, function () {
var event = R.find(util_1.FilterUtils.EVENT_VALUE_PREDICATE, R.values(payload));
var lat = payload.latLng.lat();
var lng = payload.latLng.lng();
util_1.ConditionUtils.ifNotNilThanValue(_this.openMenuTask, function (openMenuTask) { return openMenuTask.start({ event: event, lat: lat, lng: lng }); });
});
if (util_1.TypeUtils.isFn(onClick)) {
onClick(payload);
}
};
/**
* @stable [23.01.2020]
* @param {IGoogleMapsEventEntity} event
*/
GoogleMaps.prototype.onMapDbClick = function (event) {
util_1.ConditionUtils.ifNotNilThanValue(this.openMenuTask, function (openMenuTask) { return openMenuTask.stop(); });
};
/**
* @stable [10.01.2020]
* @param {IGoogleMapsMenuContextEntity} context
*/
GoogleMaps.prototype.openMenu = function (context) {
this.event = context.event;
this.lat = context.lat;
this.lng = context.lng;
this.menu.show();
};
/**
* @stable [28.07.2020]
*/
GoogleMaps.prototype.onGoogleMapsReady = function () {
var _this = this;
var _a = this.originalProps, initialMarkers = _a.initialMarkers, onInit = _a.onInit, _b = _a.options, options = _b === void 0 ? {} : _b;
// google.maps.MapTypeId enum is loaded as a lazy resource (within a lazy loaded script)
var mapTypes = new Map();
mapTypes.set(definition_1.GoogleMapsMapTypesEnum.SATELLITE, google.maps.MapTypeId.SATELLITE);
mapTypes.set(definition_1.GoogleMapsMapTypesEnum.HYBRID, google.maps.MapTypeId.HYBRID);
mapTypes.set(definition_1.GoogleMapsMapTypesEnum.TERRAIN, google.maps.MapTypeId.TERRAIN);
this.unbindListeners();
this.map = new google.maps.Map(this.actualRef.current, __assign(__assign({}, options), { mapTypeId: mapTypes.get(options.mapTypeId) || google.maps.MapTypeId.ROADMAP }));
this.directionsService = new google.maps.DirectionsService();
this.clickEventListener = google.maps.event.addListener(this.map, 'click', this.onMapClick);
this.dbClickEventListener = google.maps.event.addListener(this.map, 'dblclick', this.onMapDbClick);
util_1.ConditionUtils.ifNotEmptyThanValue(initialMarkers, function () {
initialMarkers.forEach(function (cfg, index) {
var marker = _this.addMarker(cfg);
var markerPosition = marker.getPosition();
_this.refreshMarker({
marker: marker,
lat: markerPosition.lat(),
lng: markerPosition.lng(),
visible: true,
refreshMap: initialMarkers.length - 1 === index,
});
});
});
util_1.ConditionUtils.ifNotNilThanValue(onInit, function () { return onInit(_this.map); });
};
/**
* @stable [04.03.2019]
* @param {ILatLngEntity} latLng
* @param {number} zoom
*/
GoogleMaps.prototype.refreshMap = function (latLng, zoom) {
this.map.setCenter({ lat: latLng.lat, lng: latLng.lng });
this.map.setZoom(zoom);
};
/**
* @stable [09.01.2020]
*/
GoogleMaps.prototype.cancelGoogleMapsLibTask = function () {
this.asyncLibManager.cancelWaiting(this.googleMapsLibTask);
this.googleMapsLibTask = null;
};
/**
* @stable [28.07.2020]
* @param eventName
* @param markerId
* @param marker
* @param callback
*/
GoogleMaps.prototype.addMakerListener = function (eventName, markerId, marker, callback) {
var listeners = this.markersListeners.get(markerId);
if (!Array.isArray(listeners)) {
this.markersListeners.set(markerId, listeners = []);
}
listeners.push(google.maps.event.addListener(marker, eventName, callback));
};
/**
* @stable [22.01.2020]
*/
GoogleMaps.prototype.unbindListeners = function () {
var _this = this;
this.markersListeners.forEach(function (listeners) { return listeners.forEach(function (listener) { return listener.remove(); }); });
this.markersListeners.clear();
this.markers.forEach(function (marker) { return marker.unbindAll(); });
this.markers.clear();
util_1.ConditionUtils.ifNotNilThanValue(this.clickEventListener, function (listener) {
listener.remove();
_this.clickEventListener = null;
});
util_1.ConditionUtils.ifNotNilThanValue(this.dbClickEventListener, function (listener) {
listener.remove();
_this.dbClickEventListener = null;
});
util_1.ConditionUtils.ifNotNilThanValue(this.heatMapLayer, function (heatMapLayer) {
heatMapLayer.unbindAll();
_this.heatMapLayer = null;
});
util_1.ConditionUtils.ifNotNilThanValue(this.map, function (map) {
map.unbindAll();
_this.map = null;
});
};
Object.defineProperty(GoogleMaps.prototype, "haveMenuOptions", {
/**
* @stable [23.01.2020]
* @returns {boolean}
*/
get: function () {
return util_1.ObjectUtils.isObjectNotEmpty(this.originalProps.menuOptions);
},
enumerable: false,
configurable: true
});
Object.defineProperty(GoogleMaps.prototype, "mapsSettings", {
/**
* @stable [04.03.2019]
* @returns {IGoogleMapsSettingsEntity}
*/
get: function () {
return this.settings.googleMaps;
},
enumerable: false,
configurable: true
});
Object.defineProperty(GoogleMaps.prototype, "menu", {
/**
* @stable [09.08.2020]
* @private
*/
get: function () {
return this.menuRef.current;
},
enumerable: false,
configurable: true
});
return GoogleMaps;
}(generic_component_1.GenericComponent));
exports.GoogleMaps = GoogleMaps;
//# sourceMappingURL=google-maps.component.js.map