feat(draw): Management of the editing of individual element

package.json

@@ -107,7 +107,7 @@
     "jszip": "^3.10.1",
     "jwt-decode": "^2.2.0",
     "moment": "^2.29.4",
-    "ngx-color-picker": "^10.1.0",
+    "ngx-color-picker": "^13.0.0",
     "ngx-indexed-db": "^11.0.2",
     "ngx-toastr": "^15.0.0",
     "nosleep.js": "^0.12.0",

packages/common/src/lib/entity/entity-table/entity-table.component.html

@@ -1,4 +1,4 @@
-<div class="table-container">
+<div class="table-container" [ngStyle]="{'height': tableHeight}">
   <table mat-table matSort [ngClass]="getTableClass()" [dataSource]="dataSource" [trackBy]="getTrackByFunction()" (matSortChange)="onSort($event)">
       <ng-container matColumnDef="selectionCheckbox" class="mat-cell-checkbox">
           <th mat-header-cell *matHeaderCellDef>

packages/common/src/lib/entity/entity-table/entity-table.component.ts

@@ -197,6 +197,8 @@ export class EntityTableComponent implements OnInit, OnChanges, OnDestroy {
    */
   get fixedHeader(): boolean { return this.template.fixedHeader === undefined ? true : this.template.fixedHeader; }
 
+  get tableHeight(): string { return this.template.tableHeight ? this.template.tableHeight : 'auto'; }
+
   constructor(private cdRef: ChangeDetectorRef,
     private formBuilder: UntypedFormBuilder,
     protected _focusMonitor: FocusMonitor,

packages/common/src/lib/entity/shared/entity.interfaces.ts

@@ -79,6 +79,7 @@ export interface EntityTableTemplate {
   selectMany?: boolean;
   sort?: boolean;
   fixedHeader?: boolean;
+  tableHeight?:string;
   valueAccessor?: (entity: object, property: string, record: EntityRecord<object>) => any;
   headerClassFunc?: () => {
     [key: string]: boolean;

packages/geo/package.json

@@ -35,7 +35,8 @@
     "ol": "^7.1.0",
     "proj4": "^2.8.0",
     "rxjs": "^7.5.6",
-    "striptags": "^3.2.0"
+    "striptags": "^3.2.0",
+    "ngx-color-picker": "^13.0.0"
   },
   "optionalDependencies": {
     "file-saver": "^2.0.2",

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

@@ -1,20 +1,21 @@
 <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)="cancelDrawing()">
-    {{ 'igo.geo.draw.cancel' | translate }}
+  <button 
+    mat-raised-button 
+    (click)="cancelDrawing()">{{'igo.geo.draw.cancel' | translate}}
   </button>
-  <button mat-raised-button color="primary" (click)="confirm(input.value)">
-    OK
+  <button 
+    mat-raised-button 
+    color="primary" 
+    (click)="confirm(input.value)">OK
   </button>
 </div>

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

@@ -1,26 +1,22 @@
 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 {
   @Input() confirmFlag: boolean = false;
 
   constructor(
     public dialogRef: MatDialogRef<DrawPopupComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: { currentLabel: string }
-  ) {}
+    @Inject(MAT_DIALOG_DATA) public data: { currentLabel: string }){}
 
   cancelDrawing() {
     this.dialogRef.close();
   }
+
   confirm(labelString: string) {
     this.confirmFlag = true;
     this.dialogRef.close(labelString);

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,148 +26,19 @@
       [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">
-    <div class="fill-color-picker mat-typography">
-      <span>
-        <mat-icon class="stroke-palette-icon" svgIcon="square"></mat-icon>
-        {{ 'igo.geo.draw.fill' | translate }}
-      </span>
-
-      <mat-form-field
-        class="fill-field"
-        appearance="outline"
-        floatLabel="always"
-        tooltip-position="below"
-        matTooltipShowDelay="500"
-        [matTooltip]="'igo.geo.draw.colorPicker' | translate">
-        <mat-label>{{ fillColor }}</mat-label>
-
-        <input
-          formControlName="fill"
-          matInput
-          type="text"
-          [(colorPicker)]="fillColor"
-          [style.background]="fillColor"
-          [readonly]="true"
-          [colorPicker]="fillColor"
-          [cpWidth]="'200px'"
-          [cpOutputFormat]="'rgba'"
-          [cpPosition]="'bottom'"
-          [cpPositionOffset]="'-75%'"
-          [cpCancelButton]="true"
-          [cpCancelButtonText]="'igo.geo.draw.cancel' | translate"
-          [cpOKButton]="true"
-          (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 }}
-      </span>
-
-      <mat-form-field
-        class="stroke-field"
-        appearance="outline"
-        floatLabel="always"
-        tooltip-position="below"
-        matTooltipShowDelay="500"
-        [matTooltip]="'igo.geo.draw.colorPicker' | translate">
-        <mat-label>{{ strokeColor }}</mat-label>
-        <input
-          formControlName="stroke"
-          matInput
-          type="text"
-          [(colorPicker)]="strokeColor"
-          [style.background]="strokeColor"
-          [readonly]="true"
-          [colorPicker]="strokeColor"
-          [cpWidth]="'200px'"
-          [cpPosition]="'bottom'"
-          [cpPositionOffset]="'-75%'"
-          [cpOutputFormat]="'rgba'"
-          [cpCancelButton]="true"
-          [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-select>
-          <mat-select-trigger>
-            <div *ngIf="icon" class="box">
-              <img src="{{ icon }}">
-            </div>
-          </mat-select-trigger>
-          <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 }}">
-            </div>
-          </mat-option>
-        </mat-select>
-      </mat-form-field>
-    </div>
-  </form>
-
-
-  <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"
@@ -179,15 +50,56 @@
       <mat-icon svgIcon="delete"></mat-icon>
     </button>
 
-    <igo-entity-table
-      #table
-      class="table-compact"
-      [store]="store"
-      [template]="tableTemplate"
-      (dblclick)="editLabelDrawing()">
-    </igo-entity-table>
+    <div>
+      <igo-entity-table
+        #table
+        class="table-compact"
+        id="storeElements"
+        [store]="store"
+        [template]="tableTemplate"
+        (dblclick)="editLabelDrawing()">
+      </igo-entity-table>
+    </div>
+  </div>
+
+  <div class="icon-options">
+    <mat-form-field *ngIf="icons.length >= 1">
+      <mat-label>{{ 'igo.geo.draw.icon' | translate }}</mat-label>
+      <mat-select>
+        <mat-select-trigger>
+          <div *ngIf="icon" class="box">
+            <img src="{{ icon }}">
+          </div>
+        </mat-select-trigger>
+        <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 }}">
+          </div>
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
   </div>
 
+  <button
+    *ngIf="selectedFeatures$.value.length"
+    mat-raised-button
+    color="primary"
+    (click)="openStyleModalDialog()"
+    [matTooltip]="'igo.geo.layer.style.styleModalTooltip' | translate">
+    {{'igo.geo.layer.style.styleModal' | translate}}
+    <mat-icon
+      class="style-icon"
+      svgIcon="palette"
+      [matBadge]="selectedFeatures$.value.length"
+      matBadgeColor="warn"
+      matBadgeSize="medium">
+    </mat-icon>
+  </button>
+
   <button
     mat-icon-button
     color="accent"