220 lines
28 KiB
JavaScript
220 lines
28 KiB
JavaScript
|
/**
|
||
|
|
* @license
|
||
|
|
* Copyright Google LLC All Rights Reserved.
|
||
|
|
*
|
||
|
|
* Use of this source code is governed by an MIT-style license that can be
|
||
|
|
* found in the LICENSE file at https://angular.io/license
|
||
|
|
*/
|
||
|
|
// Workaround for: https://github.com/bazelbuild/rules_nodejs/issues/1265
|
||
|
|
/// <reference types="google.maps" preserve="true" />
|
||
|
|
import { Directive, Input, Output, NgZone, inject, EventEmitter, } from '@angular/core';
|
||
|
|
import { BehaviorSubject, combineLatest, Observable, Subject } from 'rxjs';
|
||
|
|
import { map, take, takeUntil } from 'rxjs/operators';
|
||
|
|
import { GoogleMap } from '../google-map/google-map';
|
||
|
|
import { MapEventManager } from '../map-event-manager';
|
||
|
|
import * as i0 from "@angular/core";
|
||
|
|
import * as i1 from "../google-map/google-map";
|
||
|
|
/**
|
||
|
|
* Angular component that renders a Google Maps Polyline via the Google Maps JavaScript API.
|
||
|
|
*
|
||
|
|
* See developers.google.com/maps/documentation/javascript/reference/polygon#Polyline
|
||
|
|
*/
|
||
|
|
export class MapPolyline {
|
||
|
|
set options(options) {
|
||
|
|
this._options.next(options || {});
|
||
|
|
}
|
||
|
|
set path(path) {
|
||
|
|
this._path.next(path);
|
||
|
|
}
|
||
|
|
constructor(_map, _ngZone) {
|
||
|
|
this._map = _map;
|
||
|
|
this._ngZone = _ngZone;
|
||
|
|
this._eventManager = new MapEventManager(inject(NgZone));
|
||
|
|
this._options = new BehaviorSubject({});
|
||
|
|
this._path = new BehaviorSubject(undefined);
|
||
|
|
this._destroyed = new Subject();
|
||
|
|
/**
|
||
|
|
* See developers.google.com/maps/documentation/javascript/reference/polygon#Polyline.click
|
||
|
|
*/
|
||
|
|
this.polylineClick = this._eventManager.getLazyEmitter('click');
|
||
|
|
/**
|
||
|
|
* See developers.google.com/maps/documentation/javascript/reference/polygon#Polyline.dblclick
|
||
|
|
*/
|
||
|
|
this.polylineDblclick = this._eventManager.getLazyEmitter('dblclick');
|
||
|
|
/**
|
||
|
|
* See developers.google.com/maps/documentation/javascript/reference/polygon#Polyline.drag
|
||
|
|
*/
|
||
|
|
this.polylineDrag = this._eventManager.getLazyEmitter('drag');
|
||
|
|
/**
|
||
|
|
* See developers.google.com/maps/documentation/javascript/reference/polygon#Polyline.dragend
|
||
|
|
*/
|
||
|
|
this.polylineDragend = this._eventManager.getLazyEmitter('dragend');
|
||
|
|
/**
|
||
|
|
* See developers.google.com/maps/documentation/javascript/reference/polygon#Polyline.dragstart
|
||
|
|
*/
|
||
|
|
this.polylineDragstart = this._eventManager.getLazyEmitter('dragstart');
|
||
|
|
/**
|
||
|
|
* See developers.google.com/maps/documentation/javascript/reference/polygon#Polyline.mousedown
|
||
|
|
*/
|
||
|
|
this.polylineMousedown = this._eventManager.getLazyEmitter('mousedown');
|
||
|
|
/**
|
||
|
|
* See developers.google.com/maps/documentation/javascript/reference/polygon#Polyline.mousemove
|
||
|
|
*/
|
||
|
|
this.polylineMousemove = this._eventManager.getLazyEmitter('mousemove');
|
||
|
|
/**
|
||
|
|
* See developers.google.com/maps/documentation/javascript/reference/polygon#Polyline.mouseout
|
||
|
|
*/
|
||
|
|
this.polylineMouseout = this._eventManager.getLazyEmitter('mouseout');
|
||
|
|
/**
|
||
|
|
* See developers.google.com/maps/documentation/javascript/reference/polygon#Polyline.mouseover
|
||
|
|
*/
|
||
|
|
this.polylineMouseover = this._eventManager.getLazyEmitter('mouseover');
|
||
|
|
/**
|
||
|
|
* See developers.google.com/maps/documentation/javascript/reference/polygon#Polyline.mouseup
|
||
|
|
*/
|
||
|
|
this.polylineMouseup = this._eventManager.getLazyEmitter('mouseup');
|
||
|
|
/**
|
||
|
|
* See developers.google.com/maps/documentation/javascript/reference/polygon#Polyline.rightclick
|
||
|
|
*/
|
||
|
|
this.polylineRightclick = this._eventManager.getLazyEmitter('rightclick');
|
||
|
|
/** Event emitted when the polyline is initialized. */
|
||
|
|
this.polylineInitialized = new EventEmitter();
|
||
|
|
}
|
||
|
|
ngOnInit() {
|
||
|
|
if (this._map._isBrowser) {
|
||
|
|
this._combineOptions()
|
||
|
|
.pipe(take(1))
|
||
|
|
.subscribe(options => {
|
||
|
|
if (google.maps.Polyline && this._map.googleMap) {
|
||
|
|
this._initialize(this._map.googleMap, google.maps.Polyline, options);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this._ngZone.runOutsideAngular(() => {
|
||
|
|
Promise.all([this._map._resolveMap(), google.maps.importLibrary('maps')]).then(([map, lib]) => {
|
||
|
|
this._initialize(map, lib.Polyline, options);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
_initialize(map, polylineConstructor, options) {
|
||
|
|
// Create the object outside the zone so its events don't trigger change detection.
|
||
|
|
// We'll bring it back in inside the `MapEventManager` only for the events that the
|
||
|
|
// user has subscribed to.
|
||
|
|
this._ngZone.runOutsideAngular(() => {
|
||
|
|
this.polyline = new polylineConstructor(options);
|
||
|
|
this._assertInitialized();
|
||
|
|
this.polyline.setMap(map);
|
||
|
|
this._eventManager.setTarget(this.polyline);
|
||
|
|
this.polylineInitialized.emit(this.polyline);
|
||
|
|
this._watchForOptionsChanges();
|
||
|
|
this._watchForPathChanges();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
ngOnDestroy() {
|
||
|
|
this._eventManager.destroy();
|
||
|
|
this._destroyed.next();
|
||
|
|
this._destroyed.complete();
|
||
|
|
this.polyline?.setMap(null);
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* See
|
||
|
|
* developers.google.com/maps/documentation/javascript/reference/polygon#Polyline.getDraggable
|
||
|
|
*/
|
||
|
|
getDraggable() {
|
||
|
|
this._assertInitialized();
|
||
|
|
return this.polyline.getDraggable();
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* See developers.google.com/maps/documentation/javascript/reference/polygon#Polyline.getEditable
|
||
|
|
*/
|
||
|
|
getEditable() {
|
||
|
|
this._assertInitialized();
|
||
|
|
return this.polyline.getEditable();
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* See developers.google.com/maps/documentation/javascript/reference/polygon#Polyline.getPath
|
||
|
|
*/
|
||
|
|
getPath() {
|
||
|
|
this._assertInitialized();
|
||
|
|
return this.polyline.getPath();
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* See developers.google.com/maps/documentation/javascript/reference/polygon#Polyline.getVisible
|
||
|
|
*/
|
||
|
|
getVisible() {
|
||
|
|
this._assertInitialized();
|
||
|
|
return this.polyline.getVisible();
|
||
|
|
}
|
||
|
|
_combineOptions() {
|
||
|
|
return combineLatest([this._options, this._path]).pipe(map(([options, path]) => {
|
||
|
|
const combinedOptions = {
|
||
|
|
...options,
|
||
|
|
path: path || options.path,
|
||
|
|
};
|
||
|
|
return combinedOptions;
|
||
|
|
}));
|
||
|
|
}
|
||
|
|
_watchForOptionsChanges() {
|
||
|
|
this._options.pipe(takeUntil(this._destroyed)).subscribe(options => {
|
||
|
|
this._assertInitialized();
|
||
|
|
this.polyline.setOptions(options);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
_watchForPathChanges() {
|
||
|
|
this._path.pipe(takeUntil(this._destroyed)).subscribe(path => {
|
||
|
|
if (path) {
|
||
|
|
this._assertInitialized();
|
||
|
|
this.polyline.setPath(path);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
_assertInitialized() {
|
||
|
|
if (typeof ngDevMode === 'undefined' || ngDevMode) {
|
||
|
|
if (!this.polyline) {
|
||
|
|
throw Error('Cannot interact with a Google Map Polyline before it has been ' +
|
||
|
|
'initialized. Please wait for the Polyline to load before trying to interact with it.');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0-next.2", ngImport: i0, type: MapPolyline, deps: [{ token: i1.GoogleMap }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
|
||
|
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0-next.2", type: MapPolyline, isStandalone: true, selector: "map-polyline", inputs: { options: "options", path: "path" }, outputs: { polylineClick: "polylineClick", polylineDblclick: "polylineDblclick", polylineDrag: "polylineDrag", polylineDragend: "polylineDragend", polylineDragstart: "polylineDragstart", polylineMousedown: "polylineMousedown", polylineMousemove: "polylineMousemove", polylineMouseout: "polylineMouseout", polylineMouseover: "polylineMouseover", polylineMouseup: "polylineMouseup", polylineRightclick: "polylineRightclick", polylineInitialized: "polylineInitialized" }, exportAs: ["mapPolyline"], ngImport: i0 }); }
|
||
|
|
}
|
||
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0-next.2", ngImport: i0, type: MapPolyline, decorators: [{
|
||
|
|
type: Directive,
|
||
|
|
args: [{
|
||
|
|
selector: 'map-polyline',
|
||
|
|
exportAs: 'mapPolyline',
|
||
|
|
standalone: true,
|
||
|
|
}]
|
||
|
|
}], ctorParameters: () => [{ type: i1.GoogleMap }, { type: i0.NgZone }], propDecorators: { options: [{
|
||
|
|
type: Input
|
||
|
|
}], path: [{
|
||
|
|
type: Input
|
||
|
|
}], polylineClick: [{
|
||
|
|
type: Output
|
||
|
|
}], polylineDblclick: [{
|
||
|
|
type: Output
|
||
|
|
}], polylineDrag: [{
|
||
|
|
type: Output
|
||
|
|
}], polylineDragend: [{
|
||
|
|
type: Output
|
||
|
|
}], polylineDragstart: [{
|
||
|
|
type: Output
|
||
|
|
}], polylineMousedown: [{
|
||
|
|
type: Output
|
||
|
|
}], polylineMousemove: [{
|
||
|
|
type: Output
|
||
|
|
}], polylineMouseout: [{
|
||
|
|
type: Output
|
||
|
|
}], polylineMouseover: [{
|
||
|
|
type: Output
|
||
|
|
}], polylineMouseup: [{
|
||
|
|
type: Output
|
||
|
|
}], polylineRightclick: [{
|
||
|
|
type: Output
|
||
|
|
}], polylineInitialized: [{
|
||
|
|
type: Output
|
||
|
|
}] } });
|
||
|
|
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWFwLXBvbHlsaW5lLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vc3JjL2dvb2dsZS1tYXBzL21hcC1wb2x5bGluZS9tYXAtcG9seWxpbmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7Ozs7OztHQU1HO0FBRUgseUVBQXlFO0FBQ3pFLHFEQUFxRDtBQUVyRCxPQUFPLEVBQ0wsU0FBUyxFQUNULEtBQUssRUFHTCxNQUFNLEVBQ04sTUFBTSxFQUNOLE1BQU0sRUFDTixZQUFZLEdBQ2IsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFDLGVBQWUsRUFBRSxhQUFhLEVBQUUsVUFBVSxFQUFFLE9BQU8sRUFBQyxNQUFNLE1BQU0sQ0FBQztBQUN6RSxPQUFPLEVBQUMsR0FBRyxFQUFFLElBQUksRUFBRSxTQUFTLEVBQUMsTUFBTSxnQkFBZ0IsQ0FBQztBQUVwRCxPQUFPLEVBQUMsU0FBUyxFQUFDLE1BQU0sMEJBQTBCLENBQUM7QUFDbkQsT0FBTyxFQUFDLGVBQWUsRUFBQyxNQUFNLHNCQUFzQixDQUFDOzs7QUFFckQ7Ozs7R0FJRztBQU1ILE1BQU0sT0FBTyxXQUFXO0lBbUJ0QixJQUNJLE9BQU8sQ0FBQyxPQUFvQztRQUM5QyxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxPQUFPLElBQUksRUFBRSxDQUFDLENBQUM7SUFDcEMsQ0FBQztJQUVELElBQ0ksSUFBSSxDQUNOLElBRytCO1FBRS9CLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQ3hCLENBQUM7SUF3RUQsWUFDbUIsSUFBZSxFQUN4QixPQUFlO1FBRE4sU0FBSSxHQUFKLElBQUksQ0FBVztRQUN4QixZQUFPLEdBQVAsT0FBTyxDQUFRO1FBekdqQixrQkFBYSxHQUFHLElBQUksZUFBZSxDQUFDLE1BQU0sQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDO1FBQzNDLGFBQVEsR0FBRyxJQUFJLGVBQWUsQ0FB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
|