[Imagery/OL] Draw multiple same type of annotations consecutively

imagery-ol/plugins/annotations/annotations.visualizer.ts

@@ -58,6 +58,7 @@ export interface IEditAnnotationMode {
 })
 @Injectable()
 export class AnnotationsVisualizer extends EntitiesVisualizer {
+	private skipNextMapClickHandler = false;
 	static fillAlpha = 0.4;
 	disableCache = true;
 	public mode: AnnotationMode;
@@ -274,6 +275,7 @@ export class AnnotationsVisualizer extends EntitiesVisualizer {
 	onDrawEndEvent({ feature }) {
 		const { mode } = this;
 		this.setMode(undefined, true);
+		this.skipNextMapClickHandler = true;
 		const id = UUID.UUID();
 		const geometry = feature.getGeometry();
 		let cloneGeometry = <any>geometry.clone();
@@ -774,6 +776,11 @@ export class AnnotationsVisualizer extends EntitiesVisualizer {
 	}
 
 	protected mapClick = (event) => {
+		this.events.onClick.next();
+		if (this.skipNextMapClickHandler) {
+			this.skipNextMapClickHandler = false;
+			return;
+		}
 		if (this.mapSearchIsActive || this.mode || this.isHidden) {
 			return;
 		}

imagery-tester/src/app/annotations-control/annotations-control.component.html

@@ -20,6 +20,18 @@
     {{ mode }}
   </button>
 
+  <mat-checkbox
+    style="margin-right: 15px;"
+    [checked]="continusousDrawingEnabled"
+    (change)="continusousDrawingEnabled = !continusousDrawingEnabled">
+    Continuous Drawing
+  </mat-checkbox>
+  <mat-checkbox
+    [checked]="openContextMenuOnDrawEnd"
+    (change)="openContextMenuOnDrawEnd = !openContextMenuOnDrawEnd">
+    Open Context Menu on DrawEnd
+  </mat-checkbox>
+
   <button mat-icon-button (click)="clear()" [disabled]="!annotations">
     <mat-icon aria-label="Example icon-button with a heart icon">delete</mat-icon>
   </button>

imagery-tester/src/app/annotations-control/annotations-control.component.ts

@@ -11,12 +11,13 @@ import {
   OpenlayersMapName
 } from '@ansyn/imagery-ol';
 import { fromEvent, of } from 'rxjs';
-import { filter, mergeMap, take, tap } from 'rxjs/operators';
+import { filter, mergeMap, take, tap, concatMap, skip, map, switchMapTo } from 'rxjs/operators';
 import IMAGERY_SETTINGS from '../IMAGERY_SETTINGS';
 import { CesiumMapName, CesiumDrawAnnotationsVisualizer } from '@ansyn/imagery-cesium';
 import { MouseMarkerPlugin } from '../plugins/cesium/mouse-marker-plugin';
 import { GeoJsonObject } from 'geojson';
 
+
 @Component({
   selector: 'app-annotations-control',
   templateUrl: './annotations-control.component.html',
@@ -30,6 +31,9 @@ export class AnnotationsControlComponent implements OnInit {
   currentEntities: IVisualizerEntity[];
   communicator: CommunicatorEntity;
 
+  continusousDrawingEnabled = false;
+  openContextMenuOnDrawEnd = false;
+
   onFileLoad$ = fromEvent(this.reader, 'load').pipe(
     mergeMap(() => {
       const readerResult: string = <string>this.reader.result;
@@ -96,18 +100,43 @@ export class AnnotationsControlComponent implements OnInit {
   draw(mode) {
     if (this.communicator.activeMapName === OpenlayersMapName) {
       this.annotations.setMode(this.annotations.mode === mode ? null : mode, true);
-      this.annotations.events.onDrawEnd.pipe(take(1)).subscribe((drawEndEvent: IDrawEndEvent) => {
-        const newEntities = this.annotations.annotationsLayerToEntities(drawEndEvent.GeoJSON);
-        this.annotations.addOrUpdateEntities(newEntities).subscribe();
-      });
+
+      this.annotations.events.onDrawEnd.pipe(
+        concatMap((drawEndEvent: IDrawEndEvent) => {
+          const newEntities = this.annotations.annotationsLayerToEntities(drawEndEvent.GeoJSON);
+          const id = drawEndEvent.GeoJSON.features[0]?.id;
+          return this.annotations.addOrUpdateEntities(newEntities).pipe(map(_ => id));
+        }),
+        filter(featureId => this.continusousDrawingEnabled || (this.openContextMenuOnDrawEnd && !!featureId)),
+        tap((id) => {
+          if (this.openContextMenuOnDrawEnd) {
+            this.annotations.events.onSelect.next([`${id}`]);
+          }
+        }),
+        switchMapTo(this.annotations.events.onClick.pipe(
+          skip(this.continusousDrawingEnabled && !this.openContextMenuOnDrawEnd ? 0 : 1),
+          take(1),
+          tap(_ => {
+            if (this.openContextMenuOnDrawEnd) {
+              this.annotations.events.onSelect.next([]);
+            }
+            if (this.continusousDrawingEnabled) {
+              this.annotations.setMode(mode, true);
+            }
+          }))
+        )
+      ).subscribe();
     } else if (this.communicator.activeMapName === CesiumMapName) {
       const isDrawingStarted = this.cesiumDrawer.startDrawing(mode);
+
       if (isDrawingStarted) {
-        this.cesiumDrawer.events.onDrawEnd.pipe(take(1)).subscribe(geoJson => {
-          const plugin = this.communicator.getPlugin(MouseMarkerPlugin);
-          const newEntities = plugin.annotationsLayerToEntities(geoJson);
-          plugin.addOrUpdateEntities(newEntities).pipe(take(1)).subscribe();
-        });
+        this.cesiumDrawer.events.onDrawEnd.pipe(
+          concatMap((geoJson) => {
+            const plugin = this.communicator.getPlugin(MouseMarkerPlugin);
+            const newEntities = plugin.annotationsLayerToEntities(geoJson);
+            return plugin.addOrUpdateEntities(newEntities).pipe(take(1));
+          })
+        ).subscribe();
       }
     }
   }

imagery-tester/src/app/app.module.ts

@@ -44,6 +44,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { FormsModule } from '@angular/forms';
 import { ImageProcessingControlComponent } from './image-processing-control/image-processing-control.component';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 
 @NgModule({
   declarations: [
@@ -84,7 +85,8 @@ import { ImageProcessingControlComponent } from './image-processing-control/imag
         CesiumSentinelSourceProvider
       ]
     }),
-    AnnotationsContextMenuModule
+    AnnotationsContextMenuModule,
+    MatCheckboxModule
   ],
   providers: [
     {