feat(draw): new features, improvements and bug fixes

packages/geo/ng-package.json

@@ -36,6 +36,7 @@
       "ol/Geolocation": "olGeolocation",
       "ol/control/Attribution": "olAttribution",
       "ol/control/ScaleLine": "olControlScaleLine",
+      "ol/interaction/Select": "olInteractionSelect",
       "ol/geom/Circle": "olCircle",
       "ol/layer/Image": "olLayerImage",
       "ol/layer/Tile": "olLayerTile",

packages/geo/ng-package.prod.json

@@ -35,6 +35,7 @@
       "ol/Geolocation": "olGeolocation",
       "ol/control/Attribution": "olAttribution",
       "ol/control/ScaleLine": "olControlScaleLine",
+      "ol/interaction/Select": "olInteractionSelect",
       "ol/geom/Circle": "olCircle",
       "ol/layer/Image": "olLayerImage",
       "ol/layer/Tile": "olLayerTile",

packages/geo/src/lib/draw/draw/draw-popup.component.html

@@ -1,6 +1,20 @@
-<h1>{{'igo.geo.draw.dialogTitle' | translate}}</h1>
-<p class="mat-typography">{{'igo.geo.draw.dialogInstruction' | translate}}</p>
-<mat-form-field class="example-full-width">
-<input matInput placeholder="{{'igo.geo.draw.dialogTitle' | translate}}" #input (keydown.enter)="onOk$.next(input.value); dialog.close()">
-</mat-form-field>
-<button mat-button (click)="onOk$.next(input.value); dialog.close()">OK</button>
+<div mat-dialog-content>
+  <p class="mat-typography">{{'igo.geo.draw.dialogInstruction' | translate}}</p>
+  <mat-form-field class="example-full-width">
+    <input
+      #input
+      matInput
+      placeholder="{{'igo.geo.draw.dialogTitle' | translate}}">
+  </mat-form-field>
+</div>
+<div mat-dialog-actions>
+  <button
+    mat-raised-button
+    (click)="noLabel()">{{'igo.geo.draw.noLabel' | translate}}
+  </button>
+  <button
+    mat-raised-button
+    color="primary"
+    [mat-dialog-close]="input.value">OK
+  </button>
+</div>

packages/geo/src/lib/draw/draw/draw-popup.component.ts

@@ -1,22 +1,22 @@
-import { Component } from '@angular/core';
-import { MatDialogRef } from '@angular/material/dialog';
-import { BehaviorSubject } from 'rxjs';
-import { LanguageService } from '@igo2/core';
+import { Component, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+
+export interface DialogData {
+  label: string;
+}
 
 @Component({
     selector: 'igo-draw-popup-component',
     templateUrl: './draw-popup.component.html',
     styleUrls: ['./draw-popup.component.scss'],
   })
   export class DrawPopupComponent {
-    public title: string;
-    public message: string;
-    onOk$: BehaviorSubject<string> = new BehaviorSubject('');
+
     constructor(
-      private languageService: LanguageService,
-      public dialog: MatDialogRef<DrawPopupComponent>
-      ) {
-        this.title = this.languageService.translate.instant('igo.geo.draw.labels');
-        this.message = this.languageService.translate.instant('igo.geo.draw.dialogInstruction');
-     }
+      public dialogRef: MatDialogRef<DrawPopupComponent>,
+      @Inject(MAT_DIALOG_DATA) public data: DialogData) {}
+
+    noLabel() {
+      this.dialogRef.close();
+    }
   }

packages/geo/src/lib/draw/draw/draw-shorcuts.component.html

@@ -0,0 +1,21 @@
+<mat-dialog-content>
+  <div>
+    <span class="shortcut mat-typography">
+      <mat-icon class="shortcut-icon" svgIcon="keyboard-return"></mat-icon>{{'igo.geo.draw.finish' | translate}}</span>
+  </div>
+  <div>
+    <span class="shortcut mat-typography">
+      <mat-icon class="shortcut-icon" svgIcon="backspace-outline"></mat-icon>{{'igo.geo.draw.undo' | translate}}</span>
+  </div>
+  <div>
+    <span class="shortcut mat-typography">
+      <mat-icon class="shortcut-icon" svgIcon="keyboard-esc"></mat-icon>{{'igo.geo.draw.abort' | translate}}</span>
+  </div>
+  <div>
+    <span class="shortcut mat-typography">
+      <mat-icon class="shortcut-icon" svgIcon="keyboard-space"></mat-icon>{{'igo.geo.draw.move' | translate}}</span>
+  </div>
+</mat-dialog-content>
+<mat-dialog-actions class="shortcuts-close">
+  <button mat-raised-button mat-dialog-close color="primary">OK</button>
+</mat-dialog-actions>

packages/geo/src/lib/draw/draw/draw-shorcuts.component.scss

@@ -0,0 +1,13 @@
+.shortcut {
+    display: flex;
+    align-items: center;
+}
+
+.shortcut-icon {
+    margin-right: 10px;
+}
+
+.shortcuts-close {
+    display: flex;
+    justify-content: center;
+}

packages/geo/src/lib/draw/draw/draw-shorcuts.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'igo-draw-shorcuts',
+  templateUrl: './draw-shorcuts.component.html',
+  styleUrls: ['./draw-shorcuts.component.scss']
+})
+
+export class DrawShorcutsComponent {}