diff --git a/libs/asset-viewer/src/lib/components/map-controls/draw-controls.ts b/libs/asset-viewer/src/lib/components/map-controls/draw-controls.ts index b2feca2c..fa62b3ff 100644 --- a/libs/asset-viewer/src/lib/components/map-controls/draw-controls.ts +++ b/libs/asset-viewer/src/lib/components/map-controls/draw-controls.ts @@ -5,11 +5,8 @@ import { Control } from 'ol/control'; import Feature from 'ol/Feature'; import { Polygon } from 'ol/geom'; import Draw, { DrawEvent } from 'ol/interaction/Draw'; -import Map from 'ol/Map'; -import MapBrowserEvent from 'ol/MapBrowserEvent'; import VectorSource from 'ol/source/Vector'; -import View from 'ol/View'; -import { BehaviorSubject, distinctUntilChanged, filter, fromEventPattern, map, Observable, Subscription } from 'rxjs'; +import { asapScheduler, BehaviorSubject, filter, fromEventPattern, map, Observable, Subscription } from 'rxjs'; export class DrawControl extends Control { private readonly polygonSource: VectorSource; @@ -76,7 +73,11 @@ export class DrawControl extends Control { return polygon; }) ) - .subscribe(this.setPolygon.bind(this)); + .subscribe((polygon) => + asapScheduler.schedule(() => { + this.setPolygon(polygon); + }) + ); } toggle(): void { diff --git a/libs/asset-viewer/src/lib/components/map/map-controller.ts b/libs/asset-viewer/src/lib/components/map/map-controller.ts index a747f06d..32dc1184 100644 --- a/libs/asset-viewer/src/lib/components/map/map-controller.ts +++ b/libs/asset-viewer/src/lib/components/map/map-controller.ts @@ -45,6 +45,12 @@ export class MapController { */ private activeAsset: AssetEditDetail | null = null; + /** + * Whether clicking things on the map is currently allowed. + * @private + */ + private isClickEnabled = true; + private readonly _isInitialized$ = new BehaviorSubject(false); constructor(element: HTMLElement) { @@ -99,6 +105,10 @@ export class MapController { return this._isInitialized$.asObservable(); } + setClickEnabled(isEnabled: boolean): void { + this.isClickEnabled = isEnabled; + } + addControl(control: Control): void { this.map.addControl(control); } @@ -302,6 +312,8 @@ export class MapController { (h) => this.map.on('click', h), (h) => this.map.un('click', h) ).pipe( + filter(() => this.isClickEnabled), + // Check if the click has hit a study point, and use only that point if so. switchMap(async (event) => { let assetId: number | null = null; diff --git a/libs/asset-viewer/src/lib/components/map/map.component.ts b/libs/asset-viewer/src/lib/components/map/map.component.ts index ca3ace2c..4450b9a1 100644 --- a/libs/asset-viewer/src/lib/components/map/map.component.ts +++ b/libs/asset-viewer/src/lib/components/map/map.component.ts @@ -15,7 +15,7 @@ import { import { AppState } from '@asset-sg/client-shared'; import { ORD } from '@asset-sg/core'; import { Store } from '@ngrx/store'; -import { asapScheduler, filter, first, identity, skip, Subscription, switchMap } from 'rxjs'; +import { asapScheduler, first, identity, skip, Subscription, switchMap } from 'rxjs'; import { AllStudyService } from '../../services/all-study.service'; import * as searchActions from '../../state/asset-search/asset-search.actions'; import { @@ -127,9 +127,11 @@ export class MapComponent implements AfterViewInit, OnChanges, OnDestroy { this.controller.addControl(this.controls.zoom); this.controller.addControl(this.controls.draw); - this.subscription.add( - this.controller.assetsClick$.pipe(filter(() => !this.controls.draw.isDrawing)).subscribe(this.assetsClick) - ); + this.controls.draw.isDrawing$.subscribe((isDrawing) => { + this.controller.setClickEnabled(!isDrawing); + }); + + this.subscription.add(this.controller.assetsClick$.subscribe(this.assetsClick)); this.subscription.add(this.controller.assetsHover$.subscribe(this.assetsHover)); // Some bindings can be initialized only after the map has fully loaded,