work on custom color entry component

package-lock.json

@@ -1,5 +1,4 @@
 {
-  "layerName": "gane-web",
   "version": "0.0.0",
   "lockfileVersion": 1,
   "requires": true,
@@ -6351,6 +6350,11 @@
       "integrity": "sha512-MFh0d/Wa7vkKO3Y3LlacqAEeHK0mckVqzDieUKTT+KGxi+zIpeVsFxymkIiRpbpDziHc290Xr9A1O4Om7otoRA==",
       "dev": true
     },
+    "ngx-color-picker": {
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/ngx-color-picker/-/ngx-color-picker-7.5.0.tgz",
+      "integrity": "sha512-bTW16A3IitWUNGc3kZtE+N1r3FpmUj7uJTG80eym2nQLvsROkMntalKJDo1SQVQhh9Nh4N9C88UezdMg8fjR5Q=="
+    },
     "nice-try": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",

package.json

@@ -26,6 +26,7 @@
     "core-js": "^2.5.4",
     "hammerjs": "^2.0.8",
     "leaflet": "^1.4.0",
+    "ngx-color-picker": "^7.5.0",
     "ol": "^5.3.1",
     "rxjs": "~6.3.3",
     "tslib": "^1.9.0",

src/app/app.module.ts

@@ -20,6 +20,7 @@ import {DragDropModule} from "@angular/cdk/drag-drop";
 import { AddLayerComponent } from './add-layer-component/add-layer.component';
 import {FeatureManagerComponent} from "./feature-management/feature-manager/feature-manager.component";
 import {CustomColorEntryComponent} from "./feature-management/custom-color-entry/custom-color-entry.component";
+import {ColorPickerModule} from "ngx-color-picker";
 
 @NgModule({
   declarations: [
@@ -43,6 +44,7 @@ import {CustomColorEntryComponent} from "./feature-management/custom-color-entry
     MatInputModule,
     MatDialogModule,
     MatTableModule,
+    ColorPickerModule
   ],
   entryComponents: [
     AddLayerComponent

src/app/enums/CustomProperties.ts

@@ -3,5 +3,7 @@
  */
 export enum CustomProperties {
   DEFAULT_COLOR_STROKE = 'default-style-stroke',
-  DEFAULT_COLOR_FILL = 'default-style-fill'
+  DEFAULT_COLOR_FILL = 'default-style-fill',
+  COLOR_STROKE = 'style-stroke',
+  COLOR_FILL = 'style-fill',
 }

src/app/feature-management/custom-color-entry/custom-color-entry.component.html

@@ -1,11 +1,17 @@
 <div class="entry">
-  Default Color:
+  Color:
-  <div class="color-preview" [ngStyle]="{
+  <div class="color-preview" [ngStyle]="previewStyle"></div>
-  'background-color': fillColorAsRgba,
+  <span *ngIf="isDefaultColor">(Default)</span>
-   'border-color': strokeColorAsRgba
-   }"></div>
   <div class="controls">
-    <i class="material-icons" (click)="startEditDialog()">edit</i>
+<!--    [(colorPicker)]="selectedColor"-->
-    <i class="material-icons">delete</i>
+    <i class="material-icons"
+       colorPicker
+       cpAlphaChannel="disabled"
+       cpOutputFormat="hex"
+       [cpOKButton]="true"
+       [cpCancelButton]="true"
+       (colorPickerSelect)="selectedColor = $event"
+    >edit</i>
+    <i class="material-icons" (click)="resetColor()">delete</i>
   </div>
 </div>

src/app/feature-management/custom-color-entry/custom-color-entry.component.ts

@@ -1,6 +1,7 @@
-import {Component, EventEmitter, Input, Output} from "@angular/core";
+import {Component, EventEmitter, Input, OnInit, Output} from "@angular/core";
 import {CustomProperties} from "../../enums/CustomProperties";
 import {Utils} from "../../misc/Utils";
+import {Config} from "../../misc/Config";
 
 /**
  * This component represents an entry of the custom properties section inside the feature management and
@@ -11,8 +12,7 @@ import {Utils} from "../../misc/Utils";
   templateUrl: 'custom-color-entry.component.html',
   styleUrls: ['custom-color-entry.component.scss']
 })
-export class CustomColorEntryComponent {
+export class CustomColorEntryComponent implements OnInit{
-
 
   _colors: any;
   @Input() set colors(value: any) {
@@ -23,16 +23,46 @@ export class CustomColorEntryComponent {
     return this._colors;
   }
 
-  get strokeColor(): number[] {
+  private _selectedColor: any;
+  set selectedColor(value: any) {
+    this._selectedColor = value;
+    this.applyColor(value);
+    this.colorChangeEmitter.emit(this.colors);
+  }
+
+  get selectedColor(): any {
+    return this._selectedColor;
+  }
+
+  // - default color properties
+  get defaultStrokeColor(): any {
     return this.colors[CustomProperties.DEFAULT_COLOR_STROKE];
   }
 
+  get defaultStrokeColorAsRgba(): string {
+    return Utils.colorArrayToRgba(this.defaultStrokeColor);
+  }
+
+  get defaultFillColor(): number[] {
+    return this.colors[CustomProperties.DEFAULT_COLOR_FILL];
+  }
+
+  get defaultFillColorAsRgba(): string {
+    return Utils.colorArrayToRgba(this.defaultFillColor);
+  }
+
+  // - not default color properties
+
+  get strokeColor(): any {
+    return this.colors[CustomProperties.COLOR_STROKE];
+  }
+
   get strokeColorAsRgba(): string {
     return Utils.colorArrayToRgba(this.strokeColor);
   }
 
   get fillColor(): number[] {
-    return this.colors[CustomProperties.DEFAULT_COLOR_FILL];
+    return this.colors[CustomProperties.COLOR_FILL];
   }
 
   get fillColorAsRgba(): string {
@@ -41,7 +71,54 @@ export class CustomColorEntryComponent {
 
   @Output('colorChanged') colorChangeEmitter: EventEmitter<any> = new EventEmitter();
 
-  startEditDialog() {
+  /**
-    this.colorChangeEmitter.emit(this.colors);
+   * The color style of the color preview
+   */
+  previewStyle : any;
+
+  /**
+   * A simple flag that is true, if the default color is active
+   */
+  isDefaultColor : boolean;
+
+  ngOnInit(){
+    this.definePreviewStyle();
   }
+
+  /**
+   * Returns the style for the preview. If a color was defined, this color is used. If not, the default color is used
+   * instead.
+   */
+  definePreviewStyle(): any {
+    let styles = {
+      'border-color': this.defaultStrokeColorAsRgba,
+      'background-color': this.defaultFillColorAsRgba
+    };
+    this.isDefaultColor = true;
+    if (this.strokeColor) {
+      styles = {
+        'border-color': this.strokeColorAsRgba,
+        'background-color': this.fillColorAsRgba
+      };
+      this.isDefaultColor = false;
+    }
+    this.previewStyle = styles;
+  }
+
+  /**
+   * Saves the given hex value to colors object as not default color
+   * @param value
+   */
+  applyColor(value: any) {
+    this.colors[CustomProperties.COLOR_STROKE] = Utils.hexToRgba(value);
+    this.colors[CustomProperties.COLOR_FILL] = Utils.hexToRgba(value, Config.DEFAULT_FILL_OPACITY_TO_STROKE);
+    this.definePreviewStyle();
+  }
+
+  resetColor(){
+    this.colors[CustomProperties.COLOR_STROKE] = null;
+    this.colors[CustomProperties.COLOR_FILL] = null;
+    this.definePreviewStyle();
+  }
+
 }

src/app/feature-management/feature-manager/feature-manager.component.ts

@@ -56,6 +56,8 @@ export class FeatureManagerComponent {
     const colors = {};
     colors[CustomProperties.DEFAULT_COLOR_STROKE] = this.curCustomProperties[CustomProperties.DEFAULT_COLOR_STROKE];
     colors[CustomProperties.DEFAULT_COLOR_FILL] = this.curCustomProperties[CustomProperties.DEFAULT_COLOR_FILL];
+    colors[CustomProperties.COLOR_STROKE] = this.curCustomProperties[CustomProperties.COLOR_STROKE];
+    colors[CustomProperties.COLOR_FILL] = this.curCustomProperties[CustomProperties.COLOR_FILL];
     return colors;
   }