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

* Draw features and improvements * corrections * corrections * correctifs * correctifs * disappearing circle and added shorcuts button * entities displayed while modifiying * Draw and Spatial Filter delete bugs * Spatial Filter bug fixes * chore(*) :umd module Ids Co-authored-by: Philippe Lafreniere <[email protected]> Co-authored-by: Pierre-Etienne Lord <[email protected]>
infra-geo-ouverte · Sep 10, 2021 · 9dd0b3c · 9dd0b3c
1 parent 2c24dd7
commit 9dd0b3c
Show file tree

Hide file tree

Showing 27 changed files with 1,167 additions and 1,009 deletions.
diff --git a/packages/geo/ng-package.json b/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",

diff --git a/packages/geo/ng-package.prod.json b/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",

diff --git a/packages/geo/src/lib/draw/draw/draw-popup.component.html b/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>
diff --git a/packages/geo/src/lib/draw/draw/draw-popup.component.ts b/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();
+    }
   }
diff --git a/packages/geo/src/lib/draw/draw/draw-shorcuts.component.html b/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>
diff --git a/packages/geo/src/lib/draw/draw/draw-shorcuts.component.scss b/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;
+}
diff --git a/packages/geo/src/lib/draw/draw/draw-shorcuts.component.ts b/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 {}