240 lines
29 KiB
JavaScript
240 lines
29 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 Rectangle via the Google Maps JavaScript API.
|
||
|
|
*
|
||
|
|
* See developers.google.com/maps/documentation/javascript/reference/polygon#Rectangle
|
||
|
|
*/
|
||
|
|
export class MapRectangle {
|
||
|
|
set options(options) {
|
||
|
|
this._options.next(options || {});
|
||
|
|
}
|
||
|
|
set bounds(bounds) {
|
||
|
|
this._bounds.next(bounds);
|
||
|
|
}
|
||
|
|
constructor(_map, _ngZone) {
|
||
|
|
this._map = _map;
|
||
|
|
this._ngZone = _ngZone;
|
||
|
|
this._eventManager = new MapEventManager(inject(NgZone));
|
||
|
|
this._options = new BehaviorSubject({});
|
||
|
|
this._bounds = new BehaviorSubject(undefined);
|
||
|
|
this._destroyed = new Subject();
|
||
|
|
/**
|
||
|
|
* See
|
||
|
|
* developers.google.com/maps/documentation/javascript/reference/polygon#Rectangle.boundsChanged
|
||
|
|
*/ this.boundsChanged = this._eventManager.getLazyEmitter('bounds_changed');
|
||
|
|
/**
|
||
|
|
* See
|
||
|
|
* developers.google.com/maps/documentation/javascript/reference/polygon#Rectangle.click
|
||
|
|
*/
|
||
|
|
this.rectangleClick = this._eventManager.getLazyEmitter('click');
|
||
|
|
/**
|
||
|
|
* See
|
||
|
|
* developers.google.com/maps/documentation/javascript/reference/polygon#Rectangle.dblclick
|
||
|
|
*/
|
||
|
|
this.rectangleDblclick = this._eventManager.getLazyEmitter('dblclick');
|
||
|
|
/**
|
||
|
|
* See
|
||
|
|
* developers.google.com/maps/documentation/javascript/reference/polygon#Rectangle.drag
|
||
|
|
*/
|
||
|
|
this.rectangleDrag = this._eventManager.getLazyEmitter('drag');
|
||
|
|
/**
|
||
|
|
* See
|
||
|
|
* developers.google.com/maps/documentation/javascript/reference/polygon#Rectangle.dragend
|
||
|
|
*/
|
||
|
|
this.rectangleDragend = this._eventManager.getLazyEmitter('dragend');
|
||
|
|
/**
|
||
|
|
* See
|
||
|
|
* developers.google.com/maps/documentation/javascript/reference/polygon#Rectangle.dragstart
|
||
|
|
*/
|
||
|
|
this.rectangleDragstart = this._eventManager.getLazyEmitter('dragstart');
|
||
|
|
/**
|
||
|
|
* See
|
||
|
|
* developers.google.com/maps/documentation/javascript/reference/polygon#Rectangle.mousedown
|
||
|
|
*/
|
||
|
|
this.rectangleMousedown = this._eventManager.getLazyEmitter('mousedown');
|
||
|
|
/**
|
||
|
|
* See
|
||
|
|
* developers.google.com/maps/documentation/javascript/reference/polygon#Rectangle.mousemove
|
||
|
|
*/
|
||
|
|
this.rectangleMousemove = this._eventManager.getLazyEmitter('mousemove');
|
||
|
|
/**
|
||
|
|
* See
|
||
|
|
* developers.google.com/maps/documentation/javascript/reference/polygon#Rectangle.mouseout
|
||
|
|
*/
|
||
|
|
this.rectangleMouseout = this._eventManager.getLazyEmitter('mouseout');
|
||
|
|
/**
|
||
|
|
* See
|
||
|
|
* developers.google.com/maps/documentation/javascript/reference/polygon#Rectangle.mouseover
|
||
|
|
*/
|
||
|
|
this.rectangleMouseover = this._eventManager.getLazyEmitter('mouseover');
|
||
|
|
/**
|
||
|
|
* See
|
||
|
|
* developers.google.com/maps/documentation/javascript/reference/polygon#Rectangle.mouseup
|
||
|
|
*/
|
||
|
|
this.rectangleMouseup = this._eventManager.getLazyEmitter('mouseup');
|
||
|
|
/**
|
||
|
|
* See
|
||
|
|
* developers.google.com/maps/documentation/javascript/reference/polygon#Rectangle.rightclick
|
||
|
|
*/
|
||
|
|
this.rectangleRightclick = this._eventManager.getLazyEmitter('rightclick');
|
||
|
|
/** Event emitted when the rectangle is initialized. */
|
||
|
|
this.rectangleInitialized = new EventEmitter();
|
||
|
|
}
|
||
|
|
ngOnInit() {
|
||
|
|
if (this._map._isBrowser) {
|
||
|
|
this._combineOptions()
|
||
|
|
.pipe(take(1))
|
||
|
|
.subscribe(options => {
|
||
|
|
if (google.maps.Rectangle && this._map.googleMap) {
|
||
|
|
this._initialize(this._map.googleMap, google.maps.Rectangle, options);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this._ngZone.runOutsideAngular(() => {
|
||
|
|
Promise.all([this._map._resolveMap(), google.maps.importLibrary('maps')]).then(([map, lib]) => {
|
||
|
|
this._initialize(map, lib.Rectangle, options);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
_initialize(map, rectangleConstructor, 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.rectangle = new rectangleConstructor(options);
|
||
|
|
this._assertInitialized();
|
||
|
|
this.rectangle.setMap(map);
|
||
|
|
this._eventManager.setTarget(this.rectangle);
|
||
|
|
this.rectangleInitialized.emit(this.rectangle);
|
||
|
|
this._watchForOptionsChanges();
|
||
|
|
this._watchForBoundsChanges();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
ngOnDestroy() {
|
||
|
|
this._eventManager.destroy();
|
||
|
|
this._destroyed.next();
|
||
|
|
this._destroyed.complete();
|
||
|
|
this.rectangle?.setMap(null);
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* See
|
||
|
|
* developers.google.com/maps/documentation/javascript/reference/polygon#Rectangle.getBounds
|
||
|
|
*/
|
||
|
|
getBounds() {
|
||
|
|
this._assertInitialized();
|
||
|
|
return this.rectangle.getBounds();
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* See
|
||
|
|
* developers.google.com/maps/documentation/javascript/reference/polygon#Rectangle.getDraggable
|
||
|
|
*/
|
||
|
|
getDraggable() {
|
||
|
|
this._assertInitialized();
|
||
|
|
return this.rectangle.getDraggable();
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* See
|
||
|
|
* developers.google.com/maps/documentation/javascript/reference/polygon#Rectangle.getEditable
|
||
|
|
*/
|
||
|
|
getEditable() {
|
||
|
|
this._assertInitialized();
|
||
|
|
return this.rectangle.getEditable();
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* See
|
||
|
|
* developers.google.com/maps/documentation/javascript/reference/polygon#Rectangle.getVisible
|
||
|
|
*/
|
||
|
|
getVisible() {
|
||
|
|
this._assertInitialized();
|
||
|
|
return this.rectangle.getVisible();
|
||
|
|
}
|
||
|
|
_combineOptions() {
|
||
|
|
return combineLatest([this._options, this._bounds]).pipe(map(([options, bounds]) => {
|
||
|
|
const combinedOptions = {
|
||
|
|
...options,
|
||
|
|
bounds: bounds || options.bounds,
|
||
|
|
};
|
||
|
|
return combinedOptions;
|
||
|
|
}));
|
||
|
|
}
|
||
|
|
_watchForOptionsChanges() {
|
||
|
|
this._options.pipe(takeUntil(this._destroyed)).subscribe(options => {
|
||
|
|
this._assertInitialized();
|
||
|
|
this.rectangle.setOptions(options);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
_watchForBoundsChanges() {
|
||
|
|
this._bounds.pipe(takeUntil(this._destroyed)).subscribe(bounds => {
|
||
|
|
if (bounds) {
|
||
|
|
this._assertInitialized();
|
||
|
|
this.rectangle.setBounds(bounds);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
_assertInitialized() {
|
||
|
|
if (typeof ngDevMode === 'undefined' || ngDevMode) {
|
||
|
|
if (!this.rectangle) {
|
||
|
|
throw Error('Cannot interact with a Google Map Rectangle before it has been initialized. ' +
|
||
|
|
'Please wait for the Rectangle 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: MapRectangle, 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: MapRectangle, isStandalone: true, selector: "map-rectangle", inputs: { options: "options", bounds: "bounds" }, outputs: { boundsChanged: "boundsChanged", rectangleClick: "rectangleClick", rectangleDblclick: "rectangleDblclick", rectangleDrag: "rectangleDrag", rectangleDragend: "rectangleDragend", rectangleDragstart: "rectangleDragstart", rectangleMousedown: "rectangleMousedown", rectangleMousemove: "rectangleMousemove", rectangleMouseout: "rectangleMouseout", rectangleMouseover: "rectangleMouseover", rectangleMouseup: "rectangleMouseup", rectangleRightclick: "rectangleRightclick", rectangleInitialized: "rectangleInitialized" }, exportAs: ["mapRectangle"], ngImport: i0 }); }
|
||
|
|
}
|
||
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0-next.2", ngImport: i0, type: MapRectangle, decorators: [{
|
||
|
|
type: Directive,
|
||
|
|
args: [{
|
||
|
|
selector: 'map-rectangle',
|
||
|
|
exportAs: 'mapRectangle',
|
||
|
|
standalone: true,
|
||
|
|
}]
|
||
|
|
}], ctorParameters: () => [{ type: i1.GoogleMap }, { type: i0.NgZone }], propDecorators: { options: [{
|
||
|
|
type: Input
|
||
|
|
}], bounds: [{
|
||
|
|
type: Input
|
||
|
|
}], boundsChanged: [{
|
||
|
|
type: Output
|
||
|
|
}], rectangleClick: [{
|
||
|
|
type: Output
|
||
|
|
}], rectangleDblclick: [{
|
||
|
|
type: Output
|
||
|
|
}], rectangleDrag: [{
|
||
|
|
type: Output
|
||
|
|
}], rectangleDragend: [{
|
||
|
|
type: Output
|
||
|
|
}], rectangleDragstart: [{
|
||
|
|
type: Output
|
||
|
|
}], rectangleMousedown: [{
|
||
|
|
type: Output
|
||
|
|
}], rectangleMousemove: [{
|
||
|
|
type: Output
|
||
|
|
}], rectangleMouseout: [{
|
||
|
|
type: Output
|
||
|
|
}], rectangleMouseover: [{
|
||
|
|
type: Output
|
||
|
|
}], rectangleMouseup: [{
|
||
|
|
type: Output
|
||
|
|
}], rectangleRightclick: [{
|
||
|
|
type: Output
|
||
|
|
}], rectangleInitialized: [{
|
||
|
|
type: Output
|
||
|
|
}] } });
|
||
|
|
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWFwLXJlY3RhbmdsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9nb29nbGUtbWFwcy9tYXAtcmVjdGFuZ2xlL21hcC1yZWN0YW5nbGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7Ozs7OztHQU1HO0FBRUgseUVBQXlFO0FBQ3pFLHFEQUFxRDtBQUVyRCxPQUFPLEVBQ0wsU0FBUyxFQUNULEtBQUssRUFHTCxNQUFNLEVBQ04sTUFBTSxFQUNOLE1BQU0sRUFDTixZQUFZLEdBQ2IsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFDLGVBQWUsRUFBRSxhQUFhLEVBQUUsVUFBVSxFQUFFLE9BQU8sRUFBQyxNQUFNLE1BQU0sQ0FBQztBQUN6RSxPQUFPLEVBQUMsR0FBRyxFQUFFLElBQUksRUFBRSxTQUFTLEVBQUMsTUFBTSxnQkFBZ0IsQ0FBQztBQUVwRCxPQUFPLEVBQUMsU0FBUyxFQUFDLE1BQU0sMEJBQTBCLENBQUM7QUFDbkQsT0FBTyxFQUFDLGVBQWUsRUFBQyxNQUFNLHNCQUFzQixDQUFDOzs7QUFFckQ7Ozs7R0FJRztBQU1ILE1BQU0sT0FBTyxZQUFZO0lBZ0J2QixJQUNJLE9BQU8sQ0FBQyxPQUFxQztRQUMvQyxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxPQUFPLElBQUksRUFBRSxDQUFDLENBQUM7SUFDcEMsQ0FBQztJQUVELElBQ0ksTUFBTSxDQUFDLE1BQWtFO1FBQzNFLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO0lBQzVCLENBQUM7SUF5RkQsWUFDbUIsSUFBZSxFQUNmLE9BQWU7UUFEZixTQUFJLEdBQUosSUFBSSxDQUFXO1FBQ2YsWUFBTyxHQUFQLE9BQU8sQ0FBUTtRQWxIMUIsa0JBQWEsR0FBRyxJQUFJLGVBQWUsQ0FBQyxNQUFNLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQztRQUMzQyxhQUFRLEdBQUcsSUFBSSxlQUFlLENB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
|