feat(draw): Management of the editing of the labels (#1059)

* Merge branch 'DrawingGestionOnLabels' into DessinGestionDesEtiquettes * formatted the html * format ts file * Fixed some formatting issues * Redid design of the inputs box * Reformatting
infra-geo-ouverte · Jun 10, 2022 · 2c039e2 · 2c039e2
1 parent b922508
commit 2c039e2
Show file tree

Hide file tree

Showing 9 changed files with 408 additions and 171 deletions.
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,21 +1,20 @@
 <div mat-dialog-content>
-  <p class="mat-typography">{{'igo.geo.draw.dialogInstruction' | translate}}</p>
+  <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}}"
-      value="{{data.currentLabel}}">
+      placeholder="{{ 'igo.geo.draw.dialogTitle' | translate }}"
+      value="{{ data.currentLabel }}"/>
   </mat-form-field>
 </div>
 <div mat-dialog-actions>
-  <button
-    mat-raised-button
-    (click)="noLabel()">{{'igo.geo.draw.noLabel' | translate}}
+  <button mat-raised-button (click)="cancelDrawing()">
+    {{ 'igo.geo.draw.cancel' | translate }}
   </button>
-  <button
-    mat-raised-button
-    color="primary"
-    [mat-dialog-close]="input.value">OK
+  <button mat-raised-button color="primary" (click)="confirm(input.value)">
+    OK
   </button>
-</div>
+</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,28 @@
-import { Component, Inject } from '@angular/core';
+import { Component, Inject, Input } 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 {
+  selector: 'igo-draw-popup-component',
+  templateUrl: './draw-popup.component.html',
+  styleUrls: ['./draw-popup.component.scss']
+})
+export class DrawPopupComponent {
+  @Input() confirmFlag: boolean = false;
 
-    constructor(
-      public dialogRef: MatDialogRef<DrawPopupComponent>,
-      @Inject(MAT_DIALOG_DATA) public data: {currentLabel: string}) {}
+  constructor(
+    public dialogRef: MatDialogRef<DrawPopupComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: { currentLabel: string }
+  ) {}
 
-    noLabel() {
-      this.dialogRef.close();
-    }
+  cancelDrawing() {
+    this.dialogRef.close();
   }
+  confirm(labelString: string) {
+    this.confirmFlag = true;
+    this.dialogRef.close(labelString);
+  }
+}
diff --git a/packages/geo/src/lib/draw/draw/draw.component.html b/packages/geo/src/lib/draw/draw/draw.component.html
@@ -1,21 +1,21 @@
 <div>
   <div class="geometry-type-toggle mat-typography">
-    <mat-button-toggle-group
-      (change)="onGeometryTypeChange($event.value)" [value]="geometryType.Point">
+    <mat-button-toggle-group (change)="onGeometryTypeChange($event.value)" [value]="geometryType.Point">
+
       <mat-button-toggle [value]="geometryType.Point">
-        {{('igo.geo.draw.' + geometryType.Point) | translate}}
+        {{ 'igo.geo.draw.' + geometryType.Point | translate }}
       </mat-button-toggle>
 
       <mat-button-toggle [value]="geometryType.LineString">
-        {{('igo.geo.draw.' + geometryType.LineString) | translate}}
+        {{ 'igo.geo.draw.' + geometryType.LineString | translate }}
       </mat-button-toggle>
 
       <mat-button-toggle [value]="geometryType.Polygon">
-        {{('igo.geo.draw.' + geometryType.Polygon) | translate}}
+        {{ 'igo.geo.draw.' + geometryType.Polygon | translate }}
       </mat-button-toggle>
 
       <mat-button-toggle [value]="geometryType.Circle">
-        {{('igo.geo.draw.' + geometryType.Circle) | translate}}
+        {{ 'igo.geo.draw.' + geometryType.Circle | translate }}
       </mat-button-toggle>
     </mat-button-toggle-group>
   </div>
@@ -26,22 +26,22 @@
       [checked]="drawControlIsActive"
       [labelPosition]="'before'"
       (change)="onToggleDrawControl($event.checked)">
-      {{'igo.geo.spatialFilter.drawControl' | translate}}
+      {{ 'igo.geo.spatialFilter.drawControl' | translate }}
     </mat-slide-toggle>
 
     <mat-slide-toggle
       [checked]="labelsAreShown"
       [labelPosition]="'before'"
       (change)="onToggleLabels()">
-      {{'igo.geo.draw.toggleMapTooltips' | translate}}
+      {{ 'igo.geo.draw.toggleMapTooltips' | translate }}
     </mat-slide-toggle>
   </div>
 
-  <form class="igo-form" [formGroup]="form" >
+  <form class="igo-form" [formGroup]="form">
     <div class="fill-color-picker mat-typography">
       <span>
         <mat-icon class="stroke-palette-icon" svgIcon="square"></mat-icon>
-        {{'igo.geo.draw.fill' | translate}}
+        {{ 'igo.geo.draw.fill' | translate }}
       </span>
 
       <mat-form-field
@@ -51,7 +51,7 @@
         tooltip-position="below"
         matTooltipShowDelay="500"
         [matTooltip]="'igo.geo.draw.colorPicker' | translate">
-        <mat-label>{{fillColor}}</mat-label>
+        <mat-label>{{ fillColor }}</mat-label>
 
         <input
           formControlName="fill"
@@ -61,21 +61,21 @@
           [style.background]="fillColor"
           [readonly]="true"
           [colorPicker]="fillColor"
-          [cpWidth]="('200px')"
+          [cpWidth]="'200px'"
           [cpOutputFormat]="'rgba'"
           [cpPosition]="'bottom'"
           [cpPositionOffset]="'-75%'"
           [cpCancelButton]="true"
-          [cpCancelButtonText]="'igo.geo.draw.cancelColorPicker' | translate"
+          [cpCancelButtonText]="'igo.geo.draw.cancel' | translate"
           [cpOKButton]="true"
-          (colorPickerChange)="onColorChange(labelsAreShown, false)">
+          (colorPickerChange)="onColorChange(labelsAreShown, false)"/>
       </mat-form-field>
     </div>
 
     <div class="stroke-color-picker mat-typography">
       <span>
         <mat-icon class="stroke-palette-icon" svgIcon="square-outline"></mat-icon>
-        {{'igo.geo.draw.stroke' | translate}}
+        {{ 'igo.geo.draw.stroke' | translate }}
       </span>
 
       <mat-form-field
@@ -85,8 +85,7 @@
         tooltip-position="below"
         matTooltipShowDelay="500"
         [matTooltip]="'igo.geo.draw.colorPicker' | translate">
-        <mat-label>{{strokeColor}}</mat-label>
-
+        <mat-label>{{ strokeColor }}</mat-label>
         <input
           formControlName="stroke"
           matInput
@@ -95,44 +94,80 @@
           [style.background]="strokeColor"
           [readonly]="true"
           [colorPicker]="strokeColor"
-          [cpWidth]="('200px')"
+          [cpWidth]="'200px'"
           [cpPosition]="'bottom'"
           [cpPositionOffset]="'-75%'"
           [cpOutputFormat]="'rgba'"
           [cpCancelButton]="true"
-          [cpCancelButtonText]="'igo.geo.draw.cancelColorPicker' | translate"
+          [cpCancelButtonText]="'igo.geo.draw.cancel' | translate"
           [cpOKButton]="true"
           (colorPickerChange)="onColorChange(labelsAreShown, false)">
       </mat-form-field>
     </div>
 
     <div>
       <mat-form-field *ngIf="icons.length >= 1">
-        <mat-label>{{'igo.geo.draw.icon' | translate}}</mat-label>
+        <mat-label>{{ 'igo.geo.draw.icon' | translate }}</mat-label>
         <mat-select>
           <mat-select-trigger>
             <div *ngIf="icon" class="box">
-              <img src={{icon}}>
+              <img src="{{ icon }}">
             </div>
           </mat-select-trigger>
-          <mat-option value="" (click)="onIconChange()">{{'igo.geo.draw.noIcon' | translate}}</mat-option>
+          <mat-option value="" (click)="onIconChange()">{{ 'igo.geo.draw.noIcon' | translate }}</mat-option>
           <mat-option
             *ngFor="let icon_html of icons"
             [value]="icon_html"
             (click)="onIconChange(icon_html)">
             <div class="box">
-              <img src={{icon_html}}>
+              <img src="{{ icon_html }}">
             </div>
           </mat-option>
         </mat-select>
       </mat-form-field>
     </div>
   </form>
 
-  <mat-divider></mat-divider>
 
+  <div class="igo-form-font">
+    <mat-form-field appearance="outline" class="igo-form-fontSize">
+      <mat-label>{{ 'igo.geo.draw.fontSize' | translate }}</mat-label>
+      <input
+        matInput
+        #testFontSize
+        type="number"
+        placeholder="10"
+        min="10"
+        onkeydown="return event.keyCode !== 69"
+        [value]="fontSize"
+        (input)="
+          onFontChange(
+            labelsAreShown,
+            $event.target.value,
+            testFontStyle.value
+          )"
+      />
+      <span matSuffix>px</span>
+    </mat-form-field>
+    <mat-form-field appearance="outline" class="igo-form-fontStyle">
+      <mat-label>{{ 'igo.geo.draw.fontStyle' | translate }}</mat-label>
+      <mat-select
+        #testFontStyle
+        [value]="fontStyle"
+        (selectionChange)="onFontChange(labelsAreShown, testFontSize.value, $event.value)">
+        <mat-option
+          *ngFor="let fontSelect of allFontStyles"
+          [value]="fontSelect">
+          {{ fontSelect }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+  </div>
+
+  <mat-divider></mat-divider>
   <div>
-    <button *ngIf="store.count$.getValue() > 0"
+    <button
+      *ngIf="store.count$.getValue() > 0"
       class="deleteBtn"
       mat-icon-button
       color="warn"
@@ -148,7 +183,8 @@
       #table
       class="table-compact"
       [store]="store"
-      [template]="tableTemplate">
+      [template]="tableTemplate"
+      (dblclick)="editLabelDrawing()">
     </igo-entity-table>
   </div>
 

diff --git a/packages/geo/src/lib/draw/draw/draw.component.scss b/packages/geo/src/lib/draw/draw/draw.component.scss
@@ -67,3 +67,16 @@ img {
 .deleteBtn {
   margin-left: 12px;
 }
+
+.igo-form-font .mat-form-field + .mat-form-field{
+  margin-left: 18px;
+}
+
+.igo-form-fontSize{
+  left: 10px !important;
+  width: 150px;
+}
+.igo-form-fontStyle{
+  width: 150px;
+}
+