angular2-google-maps
Version:
Angular 2 components for Google Maps
203 lines • 8.82 kB
JavaScript
import { ContentChildren, Directive, EventEmitter } from '@angular/core';
import { PolylineManager } from '../services/managers/polyline-manager';
import { SebmGoogleMapPolylinePoint } from './google-map-polyline-point';
var polylineId = 0;
/**
* SebmGoogleMapPolyline renders a polyline on a {@link SebmGoogleMap}
*
* ### Example
* ```typescript
* import { Component } from 'angular2/core';
* import { SebmGoogleMap, SebmGooglePolyline, SebmGooglePolylinePoint } from
* 'angular2-google-maps/core';
*
* @Component({
* selector: 'my-map-cmp',
* directives: [SebmGoogleMap, SebmGooglePolyline, SebmGooglePolylinePoint],
* styles: [`
* .sebm-google-map-container {
* height: 300px;
* }
* `],
* template: `
* <sebm-google-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">
* <sebm-google-map-polyline>
* <sebm-google-map-polyline-point [latitude]="latA" [longitude]="lngA">
* </sebm-google-map-polyline-point>
* <sebm-google-map-polyline-point [latitude]="latB" [longitude]="lngB">
* </sebm-google-map-polyline-point>
* </sebm-google-map-polyline>
* </sebm-google-map>
* `
* })
* ```
*/
export var SebmGoogleMapPolyline = (function () {
function SebmGoogleMapPolyline(_polylineManager) {
this._polylineManager = _polylineManager;
/**
* Indicates whether this Polyline handles mouse events. Defaults to true.
*/
this.clickable = true;
/**
* If set to true, the user can drag this shape over the map. The geodesic property defines the
* mode of dragging. Defaults to false.
*/
this.draggable = false;
/**
* If set to true, the user can edit this shape by dragging the control points shown at the
* vertices and on each segment. Defaults to false.
*/
this.editable = false;
/**
* When true, edges of the polygon are interpreted as geodesic and will follow the curvature of
* the Earth. When false, edges of the polygon are rendered as straight lines in screen space.
* Note that the shape of a geodesic polygon may appear to change when dragged, as the dimensions
* are maintained relative to the surface of the earth. Defaults to false.
*/
this.geodesic = false;
/**
* Whether this polyline is visible on the map. Defaults to true.
*/
this.visible = true;
/**
* This event is fired when the DOM click event is fired on the Polyline.
*/
this.lineClick = new EventEmitter();
/**
* This event is fired when the DOM dblclick event is fired on the Polyline.
*/
this.lineDblClick = new EventEmitter();
/**
* This event is repeatedly fired while the user drags the polyline.
*/
this.lineDrag = new EventEmitter();
/**
* This event is fired when the user stops dragging the polyline.
*/
this.lineDragEnd = new EventEmitter();
/**
* This event is fired when the user starts dragging the polyline.
*/
this.lineDragStart = new EventEmitter();
/**
* This event is fired when the DOM mousedown event is fired on the Polyline.
*/
this.lineMouseDown = new EventEmitter();
/**
* This event is fired when the DOM mousemove event is fired on the Polyline.
*/
this.lineMouseMove = new EventEmitter();
/**
* This event is fired on Polyline mouseout.
*/
this.lineMouseOut = new EventEmitter();
/**
* This event is fired on Polyline mouseover.
*/
this.lineMouseOver = new EventEmitter();
/**
* This event is fired whe the DOM mouseup event is fired on the Polyline
*/
this.lineMouseUp = new EventEmitter();
/**
* This even is fired when the Polyline is right-clicked on.
*/
this.lineRightClick = new EventEmitter();
this._polylineAddedToManager = false;
this._subscriptions = [];
this._id = (polylineId++).toString();
}
/** @internal */
SebmGoogleMapPolyline.prototype.ngAfterContentInit = function () {
var _this = this;
if (this.points.length) {
this.points.forEach(function (point) {
var s = point.positionChanged.subscribe(function () { _this._polylineManager.updatePolylinePoints(_this); });
_this._subscriptions.push(s);
});
}
if (!this._polylineAddedToManager) {
this._init();
}
var s = this.points.changes.subscribe(function () { return _this._polylineManager.updatePolylinePoints(_this); });
this._subscriptions.push(s);
this._polylineManager.updatePolylinePoints(this);
};
SebmGoogleMapPolyline.prototype.ngOnChanges = function (changes) {
if (!this._polylineAddedToManager) {
this._init();
return;
}
var options = {};
var optionKeys = Object.keys(changes).filter(function (k) { return SebmGoogleMapPolyline._polylineOptionsAttributes.indexOf(k) !== -1; });
optionKeys.forEach(function (k) { return options[k] = changes[k].currentValue; });
this._polylineManager.setPolylineOptions(this, options);
};
SebmGoogleMapPolyline.prototype._init = function () {
this._polylineManager.addPolyline(this);
this._polylineAddedToManager = true;
this._addEventListeners();
};
SebmGoogleMapPolyline.prototype._addEventListeners = function () {
var _this = this;
var handlers = [
{ name: 'click', handler: function (ev) { return _this.lineClick.emit(ev); } },
{ name: 'dbclick', handler: function (ev) { return _this.lineDblClick.emit(ev); } },
{ name: 'drag', handler: function (ev) { return _this.lineDrag.emit(ev); } },
{ name: 'dragend', handler: function (ev) { return _this.lineDragEnd.emit(ev); } },
{ name: 'dragstart', handler: function (ev) { return _this.lineDragStart.emit(ev); } },
{ name: 'mousedown', handler: function (ev) { return _this.lineMouseDown.emit(ev); } },
{ name: 'mousemove', handler: function (ev) { return _this.lineMouseMove.emit(ev); } },
{ name: 'mouseout', handler: function (ev) { return _this.lineMouseOut.emit(ev); } },
{ name: 'mouseover', handler: function (ev) { return _this.lineMouseOver.emit(ev); } },
{ name: 'mouseup', handler: function (ev) { return _this.lineMouseUp.emit(ev); } },
{ name: 'rightclick', handler: function (ev) { return _this.lineRightClick.emit(ev); } },
];
handlers.forEach(function (obj) {
var os = _this._polylineManager.createEventObservable(obj.name, _this).subscribe(obj.handler);
_this._subscriptions.push(os);
});
};
/** @internal */
SebmGoogleMapPolyline.prototype._getPoints = function () {
if (this.points) {
return this.points.toArray();
}
return [];
};
/** @internal */
SebmGoogleMapPolyline.prototype.id = function () { return this._id; };
/** @internal */
SebmGoogleMapPolyline.prototype.ngOnDestroy = function () {
this._polylineManager.deletePolyline(this);
// unsubscribe all registered observable subscriptions
this._subscriptions.forEach(function (s) { return s.unsubscribe(); });
};
SebmGoogleMapPolyline._polylineOptionsAttributes = [
'draggable', 'editable', 'visible', 'geodesic', 'strokeColor', 'strokeOpacity', 'strokeWeight',
'zIndex'
];
SebmGoogleMapPolyline.decorators = [
{ type: Directive, args: [{
selector: 'sebm-google-map-polyline',
inputs: [
'clickable', 'draggable: polylineDraggable', 'editable', 'geodesic', 'strokeColor',
'strokeWeight', 'strokeOpacity', 'visible', 'zIndex'
],
outputs: [
'lineClick', 'lineDblClick', 'lineDrag', 'lineDragEnd', 'lineMouseDown', 'lineMouseMove',
'lineMouseOut', 'lineMouseOver', 'lineMouseUp', 'lineRightClick'
]
},] },
];
/** @nocollapse */
SebmGoogleMapPolyline.ctorParameters = function () { return [
{ type: PolylineManager, },
]; };
SebmGoogleMapPolyline.propDecorators = {
'points': [{ type: ContentChildren, args: [SebmGoogleMapPolylinePoint,] },],
};
return SebmGoogleMapPolyline;
}());
//# sourceMappingURL=google-map-polyline.js.map