angular2-google-maps
Version:
Angular 2 components for Google Maps
197 lines • 8.03 kB
JavaScript
"use strict";
var core_1 = require('@angular/core');
var circle_manager_1 = require('../services/managers/circle-manager');
var SebmGoogleMapCircle = (function () {
function SebmGoogleMapCircle(_manager) {
this._manager = _manager;
/**
* Indicates whether this Circle handles mouse events. Defaults to true.
*/
this.clickable = true;
/**
* If set to true, the user can drag this circle over the map. Defaults to false.
*/
this.draggable = false;
/**
* If set to true, the user can edit this circle by dragging the control points shown at
* the center and around the circumference of the circle. Defaults to false.
*/
this.editable = false;
/**
* The radius in meters on the Earth's surface.
*/
this.radius = 0;
/**
* The stroke position. Defaults to CENTER.
* This property is not supported on Internet Explorer 8 and earlier.
*/
this.strokePosition = 'CENTER';
/**
* The stroke width in pixels.
*/
this.strokeWeight = 0;
/**
* Whether this circle is visible on the map. Defaults to true.
*/
this.visible = true;
/**
* This event is fired when the circle's center is changed.
*/
this.centerChange = new core_1.EventEmitter();
/**
* This event emitter gets emitted when the user clicks on the circle.
*/
this.circleClick = new core_1.EventEmitter();
/**
* This event emitter gets emitted when the user clicks on the circle.
*/
this.circleDblClick = new core_1.EventEmitter();
/**
* This event is repeatedly fired while the user drags the circle.
*/
this.drag = new core_1.EventEmitter();
/**
* This event is fired when the user stops dragging the circle.
*/
this.dragEnd = new core_1.EventEmitter();
/**
* This event is fired when the user starts dragging the circle.
*/
this.dragStart = new core_1.EventEmitter();
/**
* This event is fired when the DOM mousedown event is fired on the circle.
*/
this.mouseDown = new core_1.EventEmitter();
/**
* This event is fired when the DOM mousemove event is fired on the circle.
*/
this.mouseMove = new core_1.EventEmitter();
/**
* This event is fired on circle mouseout.
*/
this.mouseOut = new core_1.EventEmitter();
/**
* This event is fired on circle mouseover.
*/
this.mouseOver = new core_1.EventEmitter();
/**
* This event is fired when the DOM mouseup event is fired on the circle.
*/
this.mouseUp = new core_1.EventEmitter();
/**
* This event is fired when the circle's radius is changed.
*/
this.radiusChange = new core_1.EventEmitter();
/**
* This event is fired when the circle is right-clicked on.
*/
this.rightClick = new core_1.EventEmitter();
this._circleAddedToManager = false;
this._eventSubscriptions = [];
}
/** @internal */
SebmGoogleMapCircle.prototype.ngOnInit = function () {
this._manager.addCircle(this);
this._circleAddedToManager = true;
this._registerEventListeners();
};
/** @internal */
SebmGoogleMapCircle.prototype.ngOnChanges = function (changes) {
if (!this._circleAddedToManager) {
return;
}
if (changes['latitude'] || changes['longitude']) {
this._manager.setCenter(this);
}
if (changes['editable']) {
this._manager.setEditable(this);
}
if (changes['draggable']) {
this._manager.setDraggable(this);
}
if (changes['visible']) {
this._manager.setVisible(this);
}
if (changes['radius']) {
this._manager.setRadius(this);
}
this._updateCircleOptionsChanges(changes);
};
SebmGoogleMapCircle.prototype._updateCircleOptionsChanges = function (changes) {
var options = {};
var optionKeys = Object.keys(changes).filter(function (k) { return SebmGoogleMapCircle._mapOptions.indexOf(k) !== -1; });
optionKeys.forEach(function (k) { options[k] = changes[k].currentValue; });
if (optionKeys.length > 0) {
this._manager.setOptions(this, options);
}
};
SebmGoogleMapCircle.prototype._registerEventListeners = function () {
var _this = this;
var events = new Map();
events.set('center_changed', this.centerChange);
events.set('click', this.circleClick);
events.set('dblclick', this.circleDblClick);
events.set('drag', this.drag);
events.set('dragend', this.dragEnd);
events.set('dragStart', this.dragStart);
events.set('mousedown', this.mouseDown);
events.set('mousemove', this.mouseMove);
events.set('mouseout', this.mouseOut);
events.set('mouseover', this.mouseOver);
events.set('mouseup', this.mouseUp);
events.set('radius_changed', this.radiusChange);
events.set('rightclick', this.rightClick);
events.forEach(function (eventEmitter, eventName) {
_this._eventSubscriptions.push(_this._manager.createEventObservable(eventName, _this).subscribe(function (value) {
switch (eventName) {
case 'radius_changed':
_this._manager.getRadius(_this).then(function (radius) { return eventEmitter.emit(radius); });
break;
case 'center_changed':
_this._manager.getCenter(_this).then(function (center) {
return eventEmitter.emit({ lat: center.lat(), lng: center.lng() });
});
break;
default:
eventEmitter.emit({ coords: { lat: value.latLng.lat(), lng: value.latLng.lng() } });
}
}));
});
};
/** @internal */
SebmGoogleMapCircle.prototype.ngOnDestroy = function () {
this._eventSubscriptions.forEach(function (s) { s.unsubscribe(); });
this._eventSubscriptions = null;
this._manager.removeCircle(this);
};
/**
* Gets the LatLngBounds of this Circle.
*/
SebmGoogleMapCircle.prototype.getBounds = function () { return this._manager.getBounds(this); };
SebmGoogleMapCircle.prototype.getCenter = function () { return this._manager.getCenter(this); };
SebmGoogleMapCircle._mapOptions = [
'fillColor', 'fillOpacity', 'strokeColor', 'strokeOpacity', 'strokePosition', 'strokeWeight',
'visible', 'zIndex'
];
SebmGoogleMapCircle.decorators = [
{ type: core_1.Directive, args: [{
selector: 'sebm-google-map-circle',
inputs: [
'latitude', 'longitude', 'clickable', 'draggable: circleDraggable', 'editable', 'fillColor',
'fillOpacity', 'radius', 'strokeColor', 'strokeOpacity', 'strokePosition', 'strokeWeight',
'visible', 'zIndex'
],
outputs: [
'centerChange', 'circleClick', 'circleDblClick', 'drag', 'dragEnd', 'dragStart', 'mouseDown',
'mouseMove', 'mouseOut', 'mouseOver', 'mouseUp', 'radiusChange', 'rightClick'
]
},] },
];
/** @nocollapse */
SebmGoogleMapCircle.ctorParameters = function () { return [
{ type: circle_manager_1.CircleManager, },
]; };
return SebmGoogleMapCircle;
}());
exports.SebmGoogleMapCircle = SebmGoogleMapCircle;
//# sourceMappingURL=google-map-circle.js.map