From 8e29b9f139e81e3d125f4b3b32632762c37ece13 Mon Sep 17 00:00:00 2001 From: Fabian Jeglinski Date: Fri, 10 May 2019 17:40:05 +0200 Subject: [PATCH] work on custom color entry component --- package-lock.json | 6 +- package.json | 1 + src/app/app.module.ts | 2 + src/app/enums/CustomProperties.ts | 4 +- .../custom-color-entry.component.html | 20 ++-- .../custom-color-entry.component.ts | 91 +++++++++++++++++-- .../feature-manager.component.ts | 2 + 7 files changed, 110 insertions(+), 16 deletions(-) diff --git a/package-lock.json b/package-lock.json index ff9e8f9..49e9b92 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index ac817c6..1e62f64 100644 --- a/package.json +++ b/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", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 2b7e565..2d0f3a7 100644 --- a/src/app/app.module.ts +++ b/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 diff --git a/src/app/enums/CustomProperties.ts b/src/app/enums/CustomProperties.ts index e492f7e..12cb17a 100644 --- a/src/app/enums/CustomProperties.ts +++ b/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', } diff --git a/src/app/feature-management/custom-color-entry/custom-color-entry.component.html b/src/app/feature-management/custom-color-entry/custom-color-entry.component.html index 32abf4c..6d40763 100644 --- a/src/app/feature-management/custom-color-entry/custom-color-entry.component.html +++ b/src/app/feature-management/custom-color-entry/custom-color-entry.component.html @@ -1,11 +1,17 @@
- Default Color: -
+ Color: +
+ (Default)
- edit - delete + + edit + delete
diff --git a/src/app/feature-management/custom-color-entry/custom-color-entry.component.ts b/src/app/feature-management/custom-color-entry/custom-color-entry.component.ts index 9cfa383..3155070 100644 --- a/src/app/feature-management/custom-color-entry/custom-color-entry.component.ts +++ b/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 = 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(); + } + } diff --git a/src/app/feature-management/feature-manager/feature-manager.component.ts b/src/app/feature-management/feature-manager/feature-manager.component.ts index 9a36a5e..91fad8e 100644 --- a/src/app/feature-management/feature-manager/feature-manager.component.ts +++ b/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; }