From 8ba41eaac45b4ae41c517793f01a123a429b9f78 Mon Sep 17 00:00:00 2001 From: aziz Date: Mon, 25 Sep 2023 19:10:50 +0200 Subject: [PATCH 1/9] fix(geo): color picker --- package-lock.json | 73 +++++++++++++------ package.json | 1 + .../style-modal-drawing.component.html | 18 ++++- packages/geo/src/lib/style/style.module.ts | 4 +- 4 files changed, 71 insertions(+), 25 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2a19aafc7d..c6741b8874 100644 --- a/package-lock.json +++ b/package-lock.json @@ -44,6 +44,7 @@ "jszip": "^3.10.1", "jwt-decode": "^2.2.0", "moment": "^2.29.4", + "ngx-color": "^9.0.0", "ngx-indexed-db": "^11.0.2", "ngx-toastr": "^17.0.0", "nosleep.js": "^0.12.0", @@ -2909,6 +2910,14 @@ "@jridgewell/sourcemap-codec": "^1.4.10" } }, + "node_modules/@ctrl/tinycolor": { + "version": "3.6.1", + "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz", + "integrity": "sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==", + "engines": { + "node": ">=10" + } + }, "node_modules/@cypress/request": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/@cypress/request/-/request-3.0.1.tgz", @@ -18508,6 +18517,11 @@ "node": ">=0.10.0" } }, + "node_modules/material-colors": { + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz", + "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==" + }, "node_modules/media-typer": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", @@ -19895,6 +19909,20 @@ "semver": "bin/semver.js" } }, + "node_modules/ngx-color": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/ngx-color/-/ngx-color-9.0.0.tgz", + "integrity": "sha512-zyAFux+FRI4cACZ7g8DQQsBbNMhqmFkhtUPaxhkiVHhPzWU1iqXP8MqWH6By3guNOCch5oYrYNBWlHToklbdDg==", + "dependencies": { + "@ctrl/tinycolor": "^3.6.0", + "material-colors": "^1.2.6", + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/common": ">=16.0.0-0", + "@angular/core": ">=16.0.0-0" + } + }, "node_modules/ngx-indexed-db": { "version": "11.0.2", "resolved": "https://registry.npmjs.org/ngx-indexed-db/-/ngx-indexed-db-11.0.2.tgz", @@ -27962,7 +27990,7 @@ }, "packages/auth": { "name": "@igo2/auth", - "version": "16.0.0-rc.0", + "version": "16.0.0-rc.1", "license": "MIT", "dependencies": { "jwt-decode": "^2.2.0", @@ -27981,14 +28009,14 @@ "@angular/material": "^16.2.4", "@angular/router": "^16.2.5", "@azure/msal-angular": "^3.0.4", - "@igo2/core": "^16.0.0-rc.0", - "@igo2/utils": "^16.0.0-rc.0", + "@igo2/core": "^16.0.0-rc.1", + "@igo2/utils": "^16.0.0-rc.1", "rxjs": "^7.5.6" } }, "packages/common": { "name": "@igo2/common", - "version": "16.0.0-rc.0", + "version": "16.0.0-rc.1", "license": "MIT", "dependencies": { "tslib": "^2.6.0" @@ -28001,8 +28029,9 @@ "@angular/core": "^16.2.5", "@angular/material": "^16.2.4", "@angular/platform-browser": "^16.2.5", - "@igo2/core": "^16.0.0-rc.0", - "@igo2/utils": "^16.0.0-rc.0", + "@floating-ui/utils": "^0.1.4", + "@igo2/core": "^16.0.0-rc.1", + "@igo2/utils": "^16.0.0-rc.1", "angular-shepherd": "16.0.0", "scroll-into-view-if-needed": "^3.0.0", "tinycolor2": "^1.6.0", @@ -28011,7 +28040,7 @@ }, "packages/context": { "name": "@igo2/context", - "version": "16.0.0-rc.0", + "version": "16.0.0-rc.1", "license": "MIT", "dependencies": { "tslib": "^2.6.0" @@ -28026,18 +28055,18 @@ "@angular/forms": "^16.2.5", "@angular/material": "^16.2.4", "@angular/platform-browser": "^16.2.5", - "@igo2/auth": "^16.0.0-rc.0", - "@igo2/common": "^16.0.0-rc.0", - "@igo2/core": "^16.0.0-rc.0", - "@igo2/geo": "^16.0.0-rc.0", - "@igo2/utils": "^16.0.0-rc.0", + "@igo2/auth": "^16.0.0-rc.1", + "@igo2/common": "^16.0.0-rc.1", + "@igo2/core": "^16.0.0-rc.1", + "@igo2/geo": "^16.0.0-rc.1", + "@igo2/utils": "^16.0.0-rc.1", "ol": "^7.5.2", "rxjs": "^7.8.0" } }, "packages/core": { "name": "@igo2/core", - "version": "16.0.0-rc.0", + "version": "16.0.0-rc.1", "license": "MIT", "dependencies": { "@ngx-translate/core": "^15.0.0", @@ -28052,7 +28081,7 @@ "@angular/core": "^16.2.5", "@angular/platform-browser": "^16.2.5", "@angular/router": "^16.2.5", - "@igo2/utils": "^16.0.0-rc.0", + "@igo2/utils": "^16.0.0-rc.1", "ngx-indexed-db": "^11.0.2", "ngx-toastr": "^17.0.0", "rxjs": "^7.8.0" @@ -28060,7 +28089,7 @@ }, "packages/geo": { "name": "@igo2/geo", - "version": "16.0.0-rc.0", + "version": "16.0.0-rc.1", "license": "MIT", "dependencies": { "@turf/helpers": "^6.5.0", @@ -28089,9 +28118,9 @@ "@angular/forms": "^16.2.5", "@angular/material": "^16.2.4", "@angular/platform-browser": "^16.2.5", - "@igo2/common": "^16.0.0-rc.0", - "@igo2/core": "^16.0.0-rc.0", - "@igo2/utils": "^16.0.0-rc.0", + "@igo2/common": "^16.0.0-rc.1", + "@igo2/core": "^16.0.0-rc.1", + "@igo2/utils": "^16.0.0-rc.1", "@mat-datetimepicker/core": "~12.0.0", "flexsearch": "0.7.21", "ngx-indexed-db": "^11.0.2", @@ -28104,7 +28133,7 @@ }, "packages/integration": { "name": "@igo2/integration", - "version": "16.0.0-rc.0", + "version": "16.0.0-rc.1", "license": "MIT", "dependencies": { "tslib": "^2.6.0" @@ -28115,8 +28144,8 @@ "peerDependencies": { "@angular/common": "^16.2.5", "@angular/core": "^16.2.5", - "@igo2/context": "16.0.0-rc.0", - "@igo2/geo": "16.0.0-rc.0", + "@igo2/context": "16.0.0-rc.1", + "@igo2/geo": "16.0.0-rc.1", "jspdf": "^2.5.1", "jspdf-autotable": "^3.5.29", "rxjs": "^7.8.0" @@ -28124,7 +28153,7 @@ }, "packages/utils": { "name": "@igo2/utils", - "version": "16.0.0-rc.0", + "version": "16.0.0-rc.1", "license": "MIT", "dependencies": { "bowser": "^2.10.0", diff --git a/package.json b/package.json index f2158a529d..8d3d591f8f 100644 --- a/package.json +++ b/package.json @@ -122,6 +122,7 @@ "jszip": "^3.10.1", "jwt-decode": "^2.2.0", "moment": "^2.29.4", + "ngx-color": "^9.0.0", "ngx-indexed-db": "^11.0.2", "ngx-toastr": "^17.0.0", "nosleep.js": "^0.12.0", diff --git a/packages/geo/src/lib/style/style-modal/drawing/style-modal-drawing.component.html b/packages/geo/src/lib/style/style-modal/drawing/style-modal-drawing.component.html index 0a55497b7f..329cde7531 100644 --- a/packages/geo/src/lib/style/style-modal/drawing/style-modal-drawing.component.html +++ b/packages/geo/src/lib/style/style-modal/drawing/style-modal-drawing.component.html @@ -6,6 +6,10 @@

mat-dialog-content [hidden]="data.features.length === 0" > + + + +
@@ -13,14 +17,24 @@

{{ 'igo.geo.style.fill' | translate }} - + > + + xxxx + + diff --git a/packages/geo/src/lib/style/style.module.ts b/packages/geo/src/lib/style/style.module.ts index 1579d28f2d..b15ac6dfd1 100644 --- a/packages/geo/src/lib/style/style.module.ts +++ b/packages/geo/src/lib/style/style.module.ts @@ -16,6 +16,7 @@ import { DrawStyleService } from './style-service/draw-style.service'; import { StyleService } from './style-service/style.service'; import { MatDialogModule } from '@angular/material/dialog'; import { ColorPickerFormFieldModule } from '@igo2/common'; +import { ColorChromeModule } from 'ngx-color/chrome'; // @NgModule({ imports: [ @@ -31,7 +32,8 @@ import { ColorPickerFormFieldModule } from '@igo2/common'; MatTooltipModule, ReactiveFormsModule, ColorPickerFormFieldModule, - IgoStyleListModule.forRoot() + IgoStyleListModule.forRoot(), + ColorChromeModule ], exports: [ IgoStyleListModule, From 6ad23611c5c479fb3f604d49d73bd6c5c5b8ace3 Mon Sep 17 00:00:00 2001 From: aziz Date: Wed, 27 Sep 2023 16:23:28 +0200 Subject: [PATCH 2/9] set default color --- package-lock.json | 42 +++------ package.json | 2 +- .../color-picker-form-field.component.html | 28 +++++- .../color-picker-form-field.component.scss | 32 +++++++ .../color-picker-form-field.component.ts | 91 +++++-------------- .../color-picker-form-field.module.ts | 10 +- .../style-modal-drawing.component.html | 27 +----- .../layer/style-modal-layer.component.html | 8 -- packages/geo/src/lib/style/style.module.ts | 4 +- 9 files changed, 105 insertions(+), 139 deletions(-) diff --git a/package-lock.json b/package-lock.json index c6741b8874..750c54b5d5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,6 +24,7 @@ "@angular/router": "^16.2.5", "@azure/msal-angular": "^3.0.4", "@floating-ui/utils": "^0.1.4", + "@iplab/ngx-color-picker": "^16.1.0", "@mat-datetimepicker/core": "~12.0.0", "@mdi/angular-material": "^7.2.96", "@ngx-translate/core": "^15.0.0", @@ -44,7 +45,6 @@ "jszip": "^3.10.1", "jwt-decode": "^2.2.0", "moment": "^2.29.4", - "ngx-color": "^9.0.0", "ngx-indexed-db": "^11.0.2", "ngx-toastr": "^17.0.0", "nosleep.js": "^0.12.0", @@ -2910,14 +2910,6 @@ "@jridgewell/sourcemap-codec": "^1.4.10" } }, - "node_modules/@ctrl/tinycolor": { - "version": "3.6.1", - "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz", - "integrity": "sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==", - "engines": { - "node": ">=10" - } - }, "node_modules/@cypress/request": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/@cypress/request/-/request-3.0.1.tgz", @@ -3664,6 +3656,19 @@ "resolved": "packages/utils", "link": true }, + "node_modules/@iplab/ngx-color-picker": { + "version": "16.1.0", + "resolved": "https://registry.npmjs.org/@iplab/ngx-color-picker/-/ngx-color-picker-16.1.0.tgz", + "integrity": "sha512-FmX+i2t0NOT4WfjXl1evYCuHTirfFUhNs3jNi73kuqqATunealmpcHbDB6R0yQw2CvyyjiTcd7cwURajrVS8Gw==", + "dependencies": { + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/animations": "^16.0.0", + "@angular/common": "^16.0.0", + "@angular/core": "^16.0.0" + } + }, "node_modules/@isaacs/cliui": { "version": "8.0.2", "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz", @@ -18517,11 +18522,6 @@ "node": ">=0.10.0" } }, - "node_modules/material-colors": { - "version": "1.2.6", - "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz", - "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==" - }, "node_modules/media-typer": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", @@ -19909,20 +19909,6 @@ "semver": "bin/semver.js" } }, - "node_modules/ngx-color": { - "version": "9.0.0", - "resolved": "https://registry.npmjs.org/ngx-color/-/ngx-color-9.0.0.tgz", - "integrity": "sha512-zyAFux+FRI4cACZ7g8DQQsBbNMhqmFkhtUPaxhkiVHhPzWU1iqXP8MqWH6By3guNOCch5oYrYNBWlHToklbdDg==", - "dependencies": { - "@ctrl/tinycolor": "^3.6.0", - "material-colors": "^1.2.6", - "tslib": "^2.3.0" - }, - "peerDependencies": { - "@angular/common": ">=16.0.0-0", - "@angular/core": ">=16.0.0-0" - } - }, "node_modules/ngx-indexed-db": { "version": "11.0.2", "resolved": "https://registry.npmjs.org/ngx-indexed-db/-/ngx-indexed-db-11.0.2.tgz", diff --git a/package.json b/package.json index 8d3d591f8f..5ae5f8612d 100644 --- a/package.json +++ b/package.json @@ -102,6 +102,7 @@ "@angular/router": "^16.2.5", "@azure/msal-angular": "^3.0.4", "@floating-ui/utils": "^0.1.4", + "@iplab/ngx-color-picker": "^16.1.0", "@mat-datetimepicker/core": "~12.0.0", "@mdi/angular-material": "^7.2.96", "@ngx-translate/core": "^15.0.0", @@ -122,7 +123,6 @@ "jszip": "^3.10.1", "jwt-decode": "^2.2.0", "moment": "^2.29.4", - "ngx-color": "^9.0.0", "ngx-indexed-db": "^11.0.2", "ngx-toastr": "^17.0.0", "nosleep.js": "^0.12.0", diff --git a/packages/common/src/lib/color-picker-form-field/color-picker-form-field.component.html b/packages/common/src/lib/color-picker-form-field/color-picker-form-field.component.html index ee50d7da06..b50e801507 100644 --- a/packages/common/src/lib/color-picker-form-field/color-picker-form-field.component.html +++ b/packages/common/src/lib/color-picker-form-field/color-picker-form-field.component.html @@ -4,14 +4,32 @@ tooltip-position="below" matTooltipShowDelay="500" subscriptSizing="dynamic" + cdkOverlayOrigin + #trigger="cdkOverlayOrigin" + (click)="isOpen = !isOpen" > - {{ value }} + {{ colorControl.value.toRgbaString() }} + + + + +
+ +
+ +
+ +
+
+ diff --git a/packages/common/src/lib/color-picker-form-field/color-picker-form-field.component.scss b/packages/common/src/lib/color-picker-form-field/color-picker-form-field.component.scss index e69de29bb2..bcad337a2a 100644 --- a/packages/common/src/lib/color-picker-form-field/color-picker-form-field.component.scss +++ b/packages/common/src/lib/color-picker-form-field/color-picker-form-field.component.scss @@ -0,0 +1,32 @@ +.picker { + left: 100%; + position: absolute; + top: 100%; + z-index: 2; + + chrome-picker { + left: 100%; + position: absolute; + top: 100%; + z-index: 2; + } + + .buttons { + padding: 0 12px 12px; + text-align: center; + + button { + padding: 0.2rem 1rem; + } + } + + .overlay { + background: transparent; + left: 0; + position: fixed; + top: 0; + height: 100%; + width: 100%; + z-index: 1; + } +} diff --git a/packages/common/src/lib/color-picker-form-field/color-picker-form-field.component.ts b/packages/common/src/lib/color-picker-form-field/color-picker-form-field.component.ts index d5b689d2e3..de168793bd 100644 --- a/packages/common/src/lib/color-picker-form-field/color-picker-form-field.component.ts +++ b/packages/common/src/lib/color-picker-form-field/color-picker-form-field.component.ts @@ -1,14 +1,8 @@ -import { - Component, - EventEmitter, - forwardRef, - Output, - OnInit -} from '@angular/core'; -import { Input } from '@angular/core'; -import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; -import tinycolor from 'tinycolor2'; +import { Component, Input, forwardRef } from '@angular/core'; +import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; +import { Color, ColorPickerControl } from '@iplab/ngx-color-picker'; +// import tinycolor from 'tinycolor2'; @Component({ selector: 'igo-color-picker-form-field', templateUrl: './color-picker-form-field.component.html', @@ -21,29 +15,11 @@ import tinycolor from 'tinycolor2'; } ] }) -export class ColorPickerFormFieldComponent - implements ControlValueAccessor, OnInit -{ - // native color picker can't give transparency - // set transparency manually - @Input() setAlpha: number = 1; - - // by default native color picker gives hex result - @Input() outputFormat: 'hex' | 'rgba' | 'hsla' = 'rgba'; - - // default color - @Input() color: string = '#000'; - - // open and close native color picker event - @Output() open = new EventEmitter(); - @Output() close = new EventEmitter(); - - onChange: any = () => {}; - onTouch: any = () => {}; +export class ColorPickerFormFieldComponent implements ControlValueAccessor { + isOpen: boolean = false; + colorControl = new ColorPickerControl().hidePresets(); - // final value we get as result with custom format set value(value: string) { - value = !value ? this.color : value; this.onChange(value); this.onTouch(value); this._value = value; @@ -51,25 +27,18 @@ export class ColorPickerFormFieldComponent get value(): string { return this._value; } - public _value: string; + private _value: string; - // native color picker accept hex format - set hexColor(value: string) { - this.value = this.setFormat(value); - this._hexColor = value; - } - get hexColor(): string { - return this._hexColor; + private _color: Color = null; + // default color + @Input() + public set color(color: string) { + this.colorControl.setValueFrom(color); + this._color = this.colorControl.value; } - public _hexColor: string; - ngOnInit(): void { - if (this.color) { - this._hexColor = tinycolor(this.color) - .setAlpha(this.setAlpha) - .toHexString(); - } - } + onChange: any = () => {}; + onTouch: any = () => {}; writeValue(value: string) { this.value = value; @@ -83,27 +52,11 @@ export class ColorPickerFormFieldComponent this.onTouch = fn; } - setFormat(color: string): string { - switch (this.outputFormat) { - case 'hex': - color = tinycolor(color).setAlpha(this.setAlpha).toHexString(); - break; - case 'rgba': - color = tinycolor(color).setAlpha(this.setAlpha).toRgbString(); - break; - case 'hsla': - color = tinycolor(color).setAlpha(this.setAlpha).toHsvString(); - break; - default: - color = tinycolor(color).setAlpha(this.setAlpha).toRgbString(); - break; - } - return color; - } - - closePicker() { - setTimeout(() => { - this.close.emit(true); - }, 300); + applyClick(event: MouseEvent) { + event.preventDefault(); + event.stopPropagation(); + this.isOpen = false; + this._color = this.colorControl.value; + this.value = this.colorControl.value.toRgbaString(); } } diff --git a/packages/common/src/lib/color-picker-form-field/color-picker-form-field.module.ts b/packages/common/src/lib/color-picker-form-field/color-picker-form-field.module.ts index 3a0d18aecc..9d47895335 100644 --- a/packages/common/src/lib/color-picker-form-field/color-picker-form-field.module.ts +++ b/packages/common/src/lib/color-picker-form-field/color-picker-form-field.module.ts @@ -3,13 +3,21 @@ import { ColorPickerFormFieldComponent } from './color-picker-form-field.compone import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { MatFormFieldModule } from '@angular/material/form-field'; import { MatInputModule } from '@angular/material/input'; +import { ColorPickerModule } from '@iplab/ngx-color-picker'; +import { CommonModule } from '@angular/common'; +import { OverlayModule } from '@angular/cdk/overlay'; +// import { ColorChromeModule } from 'ngx-color/chrome'; @NgModule({ imports: [ FormsModule, MatFormFieldModule, MatInputModule, - ReactiveFormsModule + ReactiveFormsModule, + ColorPickerModule, + CommonModule, + OverlayModule + // ColorChromeModule ], declarations: [ColorPickerFormFieldComponent], exports: [ColorPickerFormFieldComponent] diff --git a/packages/geo/src/lib/style/style-modal/drawing/style-modal-drawing.component.html b/packages/geo/src/lib/style/style-modal/drawing/style-modal-drawing.component.html index 329cde7531..6a1fac52b4 100644 --- a/packages/geo/src/lib/style/style-modal/drawing/style-modal-drawing.component.html +++ b/packages/geo/src/lib/style/style-modal/drawing/style-modal-drawing.component.html @@ -6,10 +6,6 @@

mat-dialog-content [hidden]="data.features.length === 0" > - - - -
@@ -17,24 +13,11 @@

{{ 'igo.geo.style.fill' | translate }} - - - xxxx - - + > @@ -45,10 +28,6 @@

diff --git a/packages/geo/src/lib/style/style-modal/layer/style-modal-layer.component.html b/packages/geo/src/lib/style/style-modal/layer/style-modal-layer.component.html index 46d0b7f7e8..431711b32e 100644 --- a/packages/geo/src/lib/style/style-modal/layer/style-modal-layer.component.html +++ b/packages/geo/src/lib/style/style-modal/layer/style-modal-layer.component.html @@ -14,10 +14,6 @@

@@ -30,10 +26,6 @@

diff --git a/packages/geo/src/lib/style/style.module.ts b/packages/geo/src/lib/style/style.module.ts index b15ac6dfd1..1579d28f2d 100644 --- a/packages/geo/src/lib/style/style.module.ts +++ b/packages/geo/src/lib/style/style.module.ts @@ -16,7 +16,6 @@ import { DrawStyleService } from './style-service/draw-style.service'; import { StyleService } from './style-service/style.service'; import { MatDialogModule } from '@angular/material/dialog'; import { ColorPickerFormFieldModule } from '@igo2/common'; -import { ColorChromeModule } from 'ngx-color/chrome'; // @NgModule({ imports: [ @@ -32,8 +31,7 @@ import { ColorChromeModule } from 'ngx-color/chrome'; // Date: Wed, 27 Sep 2023 19:12:44 +0200 Subject: [PATCH 3/9] delete dependencies and comments --- package-lock.json | 15 +-------------- package.json | 2 -- packages/common/package.json | 2 +- .../color-picker-form-field.component.html | 1 - .../color-picker-form-field.module.ts | 2 -- 5 files changed, 2 insertions(+), 20 deletions(-) diff --git a/package-lock.json b/package-lock.json index 750c54b5d5..0f28fb361a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -54,7 +54,6 @@ "rxjs": "^7.8.0", "scroll-into-view-if-needed": "^3.0.0", "striptags": "^3.2.0", - "tinycolor2": "^1.6.0", "ts-cacheable": "^1.0.6", "ts-md5": "^1.3.0", "tslib": "^2.6.0", @@ -80,7 +79,6 @@ "@types/jasmine": "~4.3.0", "@types/lodash": "^4.14.195", "@types/node": "^20.6.2", - "@types/tinycolor2": "^1.4.4", "@typescript-eslint/eslint-plugin": "^6.2.0", "@typescript-eslint/parser": "^6.2.0", "angular-cli-ghpages": "^1.0.3", @@ -5913,12 +5911,6 @@ "@types/node": "*" } }, - "node_modules/@types/tinycolor2": { - "version": "1.4.4", - "resolved": "https://registry.npmjs.org/@types/tinycolor2/-/tinycolor2-1.4.4.tgz", - "integrity": "sha512-FYK4mlLxUUajo/mblv7EUDHku20qT6ThYNsGZsTHilcHRvIkF8WXqtZO+DVTYkpHWCaAT97LueV59H/5Ve3bGA==", - "dev": true - }, "node_modules/@types/vinyl": { "version": "2.0.7", "resolved": "https://registry.npmjs.org/@types/vinyl/-/vinyl-2.0.7.tgz", @@ -25970,11 +25962,6 @@ "integrity": "sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==", "dev": true }, - "node_modules/tinycolor2": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz", - "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==" - }, "node_modules/tmp": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz", @@ -28018,9 +28005,9 @@ "@floating-ui/utils": "^0.1.4", "@igo2/core": "^16.0.0-rc.1", "@igo2/utils": "^16.0.0-rc.1", + "@iplab/ngx-color-picker": "^16.1.0", "angular-shepherd": "16.0.0", "scroll-into-view-if-needed": "^3.0.0", - "tinycolor2": "^1.6.0", "typy": "^3.3.0" } }, diff --git a/package.json b/package.json index 5ae5f8612d..34b004e4f8 100644 --- a/package.json +++ b/package.json @@ -132,7 +132,6 @@ "rxjs": "^7.8.0", "scroll-into-view-if-needed": "^3.0.0", "striptags": "^3.2.0", - "tinycolor2": "^1.6.0", "ts-cacheable": "^1.0.6", "ts-md5": "^1.3.0", "tslib": "^2.6.0", @@ -158,7 +157,6 @@ "@types/jasmine": "~4.3.0", "@types/lodash": "^4.14.195", "@types/node": "^20.6.2", - "@types/tinycolor2": "^1.4.4", "@typescript-eslint/eslint-plugin": "^6.2.0", "@typescript-eslint/parser": "^6.2.0", "angular-cli-ghpages": "^1.0.3", diff --git a/packages/common/package.json b/packages/common/package.json index 2e842296b6..bb77610e17 100644 --- a/packages/common/package.json +++ b/packages/common/package.json @@ -32,7 +32,7 @@ "angular-shepherd": "16.0.0", "scroll-into-view-if-needed": "^3.0.0", "typy": "^3.3.0", - "tinycolor2": "^1.6.0" + "@iplab/ngx-color-picker": "^16.1.0" }, "dependencies": { "tslib": "^2.6.0" diff --git a/packages/common/src/lib/color-picker-form-field/color-picker-form-field.component.html b/packages/common/src/lib/color-picker-form-field/color-picker-form-field.component.html index b50e801507..77938067a0 100644 --- a/packages/common/src/lib/color-picker-form-field/color-picker-form-field.component.html +++ b/packages/common/src/lib/color-picker-form-field/color-picker-form-field.component.html @@ -18,7 +18,6 @@ - Date: Thu, 28 Sep 2023 14:54:28 +0200 Subject: [PATCH 4/9] add ngx-color and tinycolor2 --- package-lock.json | 58 ++++++++++++++----- package.json | 4 +- packages/common/package.json | 4 +- .../color-picker-form-field.component.html | 24 ++++---- .../color-picker-form-field.component.scss | 26 ++------- .../color-picker-form-field.component.ts | 54 +++++++++++++---- .../color-picker-form-field.module.ts | 6 +- 7 files changed, 111 insertions(+), 65 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0f28fb361a..b86754b988 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,7 +24,6 @@ "@angular/router": "^16.2.5", "@azure/msal-angular": "^3.0.4", "@floating-ui/utils": "^0.1.4", - "@iplab/ngx-color-picker": "^16.1.0", "@mat-datetimepicker/core": "~12.0.0", "@mdi/angular-material": "^7.2.96", "@ngx-translate/core": "^15.0.0", @@ -33,6 +32,7 @@ "@turf/helpers": "^6.5.0", "@turf/line-intersect": "^6.5.0", "@turf/point-on-feature": "^6.5.0", + "@types/tinycolor2": "^1.4.4", "angular-shepherd": "16.0.0", "bowser": "^2.10.0", "core-js": "^3.32.2", @@ -45,6 +45,7 @@ "jszip": "^3.10.1", "jwt-decode": "^2.2.0", "moment": "^2.29.4", + "ngx-color": "^9.0.0", "ngx-indexed-db": "^11.0.2", "ngx-toastr": "^17.0.0", "nosleep.js": "^0.12.0", @@ -54,6 +55,7 @@ "rxjs": "^7.8.0", "scroll-into-view-if-needed": "^3.0.0", "striptags": "^3.2.0", + "tinycolor2": "^1.6.0", "ts-cacheable": "^1.0.6", "ts-md5": "^1.3.0", "tslib": "^2.6.0", @@ -2908,6 +2910,14 @@ "@jridgewell/sourcemap-codec": "^1.4.10" } }, + "node_modules/@ctrl/tinycolor": { + "version": "3.6.1", + "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz", + "integrity": "sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==", + "engines": { + "node": ">=10" + } + }, "node_modules/@cypress/request": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/@cypress/request/-/request-3.0.1.tgz", @@ -3654,19 +3664,6 @@ "resolved": "packages/utils", "link": true }, - "node_modules/@iplab/ngx-color-picker": { - "version": "16.1.0", - "resolved": "https://registry.npmjs.org/@iplab/ngx-color-picker/-/ngx-color-picker-16.1.0.tgz", - "integrity": "sha512-FmX+i2t0NOT4WfjXl1evYCuHTirfFUhNs3jNi73kuqqATunealmpcHbDB6R0yQw2CvyyjiTcd7cwURajrVS8Gw==", - "dependencies": { - "tslib": "^2.3.0" - }, - "peerDependencies": { - "@angular/animations": "^16.0.0", - "@angular/common": "^16.0.0", - "@angular/core": "^16.0.0" - } - }, "node_modules/@isaacs/cliui": { "version": "8.0.2", "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz", @@ -5911,6 +5908,11 @@ "@types/node": "*" } }, + "node_modules/@types/tinycolor2": { + "version": "1.4.4", + "resolved": "https://registry.npmjs.org/@types/tinycolor2/-/tinycolor2-1.4.4.tgz", + "integrity": "sha512-FYK4mlLxUUajo/mblv7EUDHku20qT6ThYNsGZsTHilcHRvIkF8WXqtZO+DVTYkpHWCaAT97LueV59H/5Ve3bGA==" + }, "node_modules/@types/vinyl": { "version": "2.0.7", "resolved": "https://registry.npmjs.org/@types/vinyl/-/vinyl-2.0.7.tgz", @@ -18514,6 +18516,11 @@ "node": ">=0.10.0" } }, + "node_modules/material-colors": { + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz", + "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==" + }, "node_modules/media-typer": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", @@ -19901,6 +19908,20 @@ "semver": "bin/semver.js" } }, + "node_modules/ngx-color": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/ngx-color/-/ngx-color-9.0.0.tgz", + "integrity": "sha512-zyAFux+FRI4cACZ7g8DQQsBbNMhqmFkhtUPaxhkiVHhPzWU1iqXP8MqWH6By3guNOCch5oYrYNBWlHToklbdDg==", + "dependencies": { + "@ctrl/tinycolor": "^3.6.0", + "material-colors": "^1.2.6", + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/common": ">=16.0.0-0", + "@angular/core": ">=16.0.0-0" + } + }, "node_modules/ngx-indexed-db": { "version": "11.0.2", "resolved": "https://registry.npmjs.org/ngx-indexed-db/-/ngx-indexed-db-11.0.2.tgz", @@ -25962,6 +25983,11 @@ "integrity": "sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==", "dev": true }, + "node_modules/tinycolor2": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz", + "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==" + }, "node_modules/tmp": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz", @@ -28005,9 +28031,11 @@ "@floating-ui/utils": "^0.1.4", "@igo2/core": "^16.0.0-rc.1", "@igo2/utils": "^16.0.0-rc.1", - "@iplab/ngx-color-picker": "^16.1.0", + "@types/tinycolor2": "^1.4.4", "angular-shepherd": "16.0.0", + "ngx-color": "^9.0.0", "scroll-into-view-if-needed": "^3.0.0", + "tinycolor2": "^1.6.0", "typy": "^3.3.0" } }, diff --git a/package.json b/package.json index 34b004e4f8..1949f1c71b 100644 --- a/package.json +++ b/package.json @@ -102,7 +102,6 @@ "@angular/router": "^16.2.5", "@azure/msal-angular": "^3.0.4", "@floating-ui/utils": "^0.1.4", - "@iplab/ngx-color-picker": "^16.1.0", "@mat-datetimepicker/core": "~12.0.0", "@mdi/angular-material": "^7.2.96", "@ngx-translate/core": "^15.0.0", @@ -111,6 +110,7 @@ "@turf/helpers": "^6.5.0", "@turf/line-intersect": "^6.5.0", "@turf/point-on-feature": "^6.5.0", + "@types/tinycolor2": "^1.4.4", "angular-shepherd": "16.0.0", "bowser": "^2.10.0", "core-js": "^3.32.2", @@ -123,6 +123,7 @@ "jszip": "^3.10.1", "jwt-decode": "^2.2.0", "moment": "^2.29.4", + "ngx-color": "^9.0.0", "ngx-indexed-db": "^11.0.2", "ngx-toastr": "^17.0.0", "nosleep.js": "^0.12.0", @@ -132,6 +133,7 @@ "rxjs": "^7.8.0", "scroll-into-view-if-needed": "^3.0.0", "striptags": "^3.2.0", + "tinycolor2": "^1.6.0", "ts-cacheable": "^1.0.6", "ts-md5": "^1.3.0", "tslib": "^2.6.0", diff --git a/packages/common/package.json b/packages/common/package.json index bb77610e17..bf1de304e9 100644 --- a/packages/common/package.json +++ b/packages/common/package.json @@ -32,7 +32,9 @@ "angular-shepherd": "16.0.0", "scroll-into-view-if-needed": "^3.0.0", "typy": "^3.3.0", - "@iplab/ngx-color-picker": "^16.1.0" + "ngx-color": "^9.0.0", + "@types/tinycolor2": "^1.4.4", + "tinycolor2": "^1.6.0" }, "dependencies": { "tslib": "^2.6.0" diff --git a/packages/common/src/lib/color-picker-form-field/color-picker-form-field.component.html b/packages/common/src/lib/color-picker-form-field/color-picker-form-field.component.html index 77938067a0..9dca683cd3 100644 --- a/packages/common/src/lib/color-picker-form-field/color-picker-form-field.component.html +++ b/packages/common/src/lib/color-picker-form-field/color-picker-form-field.component.html @@ -8,27 +8,23 @@ #trigger="cdkOverlayOrigin" (click)="isOpen = !isOpen" > - {{ colorControl.value.toRgbaString() }} - - + {{ color }} +
- -
- -
- -
+ + +
+ +
diff --git a/packages/common/src/lib/color-picker-form-field/color-picker-form-field.component.scss b/packages/common/src/lib/color-picker-form-field/color-picker-form-field.component.scss index bcad337a2a..346713482d 100644 --- a/packages/common/src/lib/color-picker-form-field/color-picker-form-field.component.scss +++ b/packages/common/src/lib/color-picker-form-field/color-picker-form-field.component.scss @@ -2,31 +2,17 @@ left: 100%; position: absolute; top: 100%; - z-index: 2; - - chrome-picker { - left: 100%; - position: absolute; - top: 100%; - z-index: 2; - } - .buttons { - padding: 0 12px 12px; + padding: 0 12px 8px; text-align: center; + background: #fff; + border-radius: 0px 0px 2px 2px; + box-shadow: 0 4px 5px #0000004d; + box-sizing: initial; + margin-top: -2px; button { padding: 0.2rem 1rem; } } - - .overlay { - background: transparent; - left: 0; - position: fixed; - top: 0; - height: 100%; - width: 100%; - z-index: 1; - } } diff --git a/packages/common/src/lib/color-picker-form-field/color-picker-form-field.component.ts b/packages/common/src/lib/color-picker-form-field/color-picker-form-field.component.ts index de168793bd..a47107aa2d 100644 --- a/packages/common/src/lib/color-picker-form-field/color-picker-form-field.component.ts +++ b/packages/common/src/lib/color-picker-form-field/color-picker-form-field.component.ts @@ -1,8 +1,8 @@ -import { Component, Input, forwardRef } from '@angular/core'; +import { Component, Input, forwardRef, OnInit } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; -import { Color, ColorPickerControl } from '@iplab/ngx-color-picker'; -// import tinycolor from 'tinycolor2'; +import { ColorEvent } from 'ngx-color'; +import tinycolor from 'tinycolor2'; @Component({ selector: 'igo-color-picker-form-field', templateUrl: './color-picker-form-field.component.html', @@ -15,9 +15,10 @@ import { Color, ColorPickerControl } from '@iplab/ngx-color-picker'; } ] }) -export class ColorPickerFormFieldComponent implements ControlValueAccessor { +export class ColorPickerFormFieldComponent + implements ControlValueAccessor, OnInit +{ isOpen: boolean = false; - colorControl = new ColorPickerControl().hidePresets(); set value(value: string) { this.onChange(value); @@ -29,17 +30,27 @@ export class ColorPickerFormFieldComponent implements ControlValueAccessor { } private _value: string; - private _color: Color = null; + // default format + @Input() outputFormat: 'hex' | 'rgba' | 'hsla' = 'rgba'; // default color @Input() - public set color(color: string) { - this.colorControl.setValueFrom(color); - this._color = this.colorControl.value; + set color(color: string) { + this._color = color; } + get color(): string { + return this._color; + } + private _color: string; onChange: any = () => {}; onTouch: any = () => {}; + ngOnInit(): void { + this.color = !this.color + ? this.setColorFormat('#000') + : this.setColorFormat(this.color); + } + writeValue(value: string) { this.value = value; } @@ -56,7 +67,28 @@ export class ColorPickerFormFieldComponent implements ControlValueAccessor { event.preventDefault(); event.stopPropagation(); this.isOpen = false; - this._color = this.colorControl.value; - this.value = this.colorControl.value.toRgbaString(); + this.value = this.color; + } + + handleChange($event: ColorEvent) { + this.color = this.setColorFormat(tinycolor($event.color.rgb).toRgbString()); + } + + setColorFormat(color: string): string { + switch (this.outputFormat) { + case 'hex': + color = tinycolor(color).toHexString(); + break; + case 'rgba': + color = tinycolor(color).toRgbString(); + break; + case 'hsla': + color = tinycolor(color).toHsvString(); + break; + default: + color = tinycolor(color).toRgbString(); + break; + } + return color; } } diff --git a/packages/common/src/lib/color-picker-form-field/color-picker-form-field.module.ts b/packages/common/src/lib/color-picker-form-field/color-picker-form-field.module.ts index 7ff22a5175..13351df6ae 100644 --- a/packages/common/src/lib/color-picker-form-field/color-picker-form-field.module.ts +++ b/packages/common/src/lib/color-picker-form-field/color-picker-form-field.module.ts @@ -3,9 +3,9 @@ import { ColorPickerFormFieldComponent } from './color-picker-form-field.compone import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { MatFormFieldModule } from '@angular/material/form-field'; import { MatInputModule } from '@angular/material/input'; -import { ColorPickerModule } from '@iplab/ngx-color-picker'; import { CommonModule } from '@angular/common'; import { OverlayModule } from '@angular/cdk/overlay'; +import { ColorChromeModule } from 'ngx-color/chrome'; @NgModule({ imports: [ @@ -13,9 +13,9 @@ import { OverlayModule } from '@angular/cdk/overlay'; MatFormFieldModule, MatInputModule, ReactiveFormsModule, - ColorPickerModule, CommonModule, - OverlayModule + OverlayModule, + ColorChromeModule ], declarations: [ColorPickerFormFieldComponent], exports: [ColorPickerFormFieldComponent] From 407e4c5d9e0d4b8544dc3a9f44cabf507854e918 Mon Sep 17 00:00:00 2001 From: Alexandre Caron Date: Thu, 28 Sep 2023 15:58:56 -0400 Subject: [PATCH 5/9] feat(ColorPickerFormField): use the form control value - Style adjustment --- .../color-picker-form-field.component.html | 15 ++++-- .../color-picker-form-field.component.scss | 25 +++++---- .../color-picker-form-field.component.ts | 54 +++++++++---------- .../color-picker-form-field.module.ts | 2 + .../style-modal-drawing.component.html | 2 - .../drawing/style-modal-drawing.component.ts | 17 +++--- .../layer/style-modal-layer.component.html | 2 - .../layer/style-modal-layer.component.ts | 17 +++--- 8 files changed, 71 insertions(+), 63 deletions(-) diff --git a/packages/common/src/lib/color-picker-form-field/color-picker-form-field.component.html b/packages/common/src/lib/color-picker-form-field/color-picker-form-field.component.html index 9dca683cd3..1f8db0c336 100644 --- a/packages/common/src/lib/color-picker-form-field/color-picker-form-field.component.html +++ b/packages/common/src/lib/color-picker-form-field/color-picker-form-field.component.html @@ -8,8 +8,13 @@ #trigger="cdkOverlayOrigin" (click)="isOpen = !isOpen" > - {{ color }} - + {{ colorPicker }} +
- +
- +
diff --git a/packages/common/src/lib/color-picker-form-field/color-picker-form-field.component.scss b/packages/common/src/lib/color-picker-form-field/color-picker-form-field.component.scss index 346713482d..3ff7084a6a 100644 --- a/packages/common/src/lib/color-picker-form-field/color-picker-form-field.component.scss +++ b/packages/common/src/lib/color-picker-form-field/color-picker-form-field.component.scss @@ -1,18 +1,21 @@ +@use '@angular/material' as mat; + .picker { left: 100%; position: absolute; top: 100%; - .buttons { - padding: 0 12px 8px; - text-align: center; - background: #fff; - border-radius: 0px 0px 2px 2px; - box-shadow: 0 4px 5px #0000004d; - box-sizing: initial; - margin-top: -2px; + background-color: white; + border-radius: 8px; + overflow: hidden; + @include mat.elevation(2); - button { - padding: 0.2rem 1rem; - } + ::ng-deep .chrome-picker { + box-shadow: none; + } + + .buttons { + padding: 4px 12px 8px; + display: flex; + justify-content: flex-end; } } diff --git a/packages/common/src/lib/color-picker-form-field/color-picker-form-field.component.ts b/packages/common/src/lib/color-picker-form-field/color-picker-form-field.component.ts index a47107aa2d..f94fd40421 100644 --- a/packages/common/src/lib/color-picker-form-field/color-picker-form-field.component.ts +++ b/packages/common/src/lib/color-picker-form-field/color-picker-form-field.component.ts @@ -1,8 +1,11 @@ -import { Component, Input, forwardRef, OnInit } from '@angular/core'; +import { Component, Input, forwardRef } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { ColorEvent } from 'ngx-color'; -import tinycolor from 'tinycolor2'; +import tinycolor, { ColorInput } from 'tinycolor2'; + +type ColorFormat = 'hex' | 'rgba' | 'hsla'; + @Component({ selector: 'igo-color-picker-form-field', templateUrl: './color-picker-form-field.component.html', @@ -15,42 +18,30 @@ import tinycolor from 'tinycolor2'; } ] }) -export class ColorPickerFormFieldComponent - implements ControlValueAccessor, OnInit -{ +export class ColorPickerFormFieldComponent implements ControlValueAccessor { isOpen: boolean = false; set value(value: string) { - this.onChange(value); - this.onTouch(value); - this._value = value; + this._value = this.formatColor(value ?? '#000'); + if (this.colorPicker == null || this.colorPicker !== this._value) { + this.colorPicker = this._value; + } + + this.onChange(this.value); + this.onTouch(this.value); } get value(): string { return this._value; } private _value: string; - // default format - @Input() outputFormat: 'hex' | 'rgba' | 'hsla' = 'rgba'; - // default color - @Input() - set color(color: string) { - this._color = color; - } - get color(): string { - return this._color; - } - private _color: string; + @Input() outputFormat: ColorFormat = 'rgba'; + + colorPicker: string; onChange: any = () => {}; onTouch: any = () => {}; - ngOnInit(): void { - this.color = !this.color - ? this.setColorFormat('#000') - : this.setColorFormat(this.color); - } - writeValue(value: string) { this.value = value; } @@ -63,19 +54,22 @@ export class ColorPickerFormFieldComponent this.onTouch = fn; } - applyClick(event: MouseEvent) { + handleClick(event: MouseEvent) { event.preventDefault(); event.stopPropagation(); this.isOpen = false; - this.value = this.color; + this.value = this.colorPicker; } handleChange($event: ColorEvent) { - this.color = this.setColorFormat(tinycolor($event.color.rgb).toRgbString()); + this.colorPicker = this.formatColor($event.color.rgb, 'rgba'); } - setColorFormat(color: string): string { - switch (this.outputFormat) { + formatColor( + color: ColorInput, + format: ColorFormat = this.outputFormat + ): string { + switch (format) { case 'hex': color = tinycolor(color).toHexString(); break; diff --git a/packages/common/src/lib/color-picker-form-field/color-picker-form-field.module.ts b/packages/common/src/lib/color-picker-form-field/color-picker-form-field.module.ts index 13351df6ae..611e855a84 100644 --- a/packages/common/src/lib/color-picker-form-field/color-picker-form-field.module.ts +++ b/packages/common/src/lib/color-picker-form-field/color-picker-form-field.module.ts @@ -6,10 +6,12 @@ import { MatInputModule } from '@angular/material/input'; import { CommonModule } from '@angular/common'; import { OverlayModule } from '@angular/cdk/overlay'; import { ColorChromeModule } from 'ngx-color/chrome'; +import { MatButtonModule } from '@angular/material/button'; @NgModule({ imports: [ FormsModule, + MatButtonModule, MatFormFieldModule, MatInputModule, ReactiveFormsModule, diff --git a/packages/geo/src/lib/style/style-modal/drawing/style-modal-drawing.component.html b/packages/geo/src/lib/style/style-modal/drawing/style-modal-drawing.component.html index 6a1fac52b4..2269959d81 100644 --- a/packages/geo/src/lib/style/style-modal/drawing/style-modal-drawing.component.html +++ b/packages/geo/src/lib/style/style-modal/drawing/style-modal-drawing.component.html @@ -16,7 +16,6 @@

@@ -28,7 +27,6 @@

diff --git a/packages/geo/src/lib/style/style-modal/drawing/style-modal-drawing.component.ts b/packages/geo/src/lib/style/style-modal/drawing/style-modal-drawing.component.ts index 99bed8271d..2f42925a96 100644 --- a/packages/geo/src/lib/style/style-modal/drawing/style-modal-drawing.component.ts +++ b/packages/geo/src/lib/style/style-modal/drawing/style-modal-drawing.component.ts @@ -27,9 +27,7 @@ export class StyleModalDrawingComponent implements OnInit { private formBuilder: UntypedFormBuilder, private drawStyleService: DrawStyleService, @Inject(MAT_DIALOG_DATA) public data: DrawingMatDialogData - ) { - this.buildForm(); - } + ) {} ngOnInit() { this.linestringOnly = true; @@ -39,12 +37,17 @@ export class StyleModalDrawingComponent implements OnInit { } } this.buildStyleData(); + this.buildForm(); + + this.form.valueChanges.subscribe((res) => { + console.log(res); + }); } private buildForm() { this.form = this.formBuilder.group({ - fill: [''], - stroke: [''] + fill: [this.getFeatureFillColor()], + stroke: [this.getFeatureStrokeColor()] }); } @@ -109,7 +112,7 @@ export class StyleModalDrawingComponent implements OnInit { } } - getFeatureFillColor() { + private getFeatureFillColor() { if (!this.styleModalData.fillColor) { return this.data.features.length > 0 ? this.data.features[0].properties.drawingStyle.fill @@ -119,7 +122,7 @@ export class StyleModalDrawingComponent implements OnInit { } } - getFeatureStrokeColor() { + private getFeatureStrokeColor() { if (!this.styleModalData.strokeColor) { return this.data.features.length > 0 ? this.data.features[0].properties.drawingStyle.stroke diff --git a/packages/geo/src/lib/style/style-modal/layer/style-modal-layer.component.html b/packages/geo/src/lib/style/style-modal/layer/style-modal-layer.component.html index 431711b32e..df70b6ef88 100644 --- a/packages/geo/src/lib/style/style-modal/layer/style-modal-layer.component.html +++ b/packages/geo/src/lib/style/style-modal/layer/style-modal-layer.component.html @@ -14,7 +14,6 @@

@@ -26,7 +25,6 @@

diff --git a/packages/geo/src/lib/style/style-modal/layer/style-modal-layer.component.ts b/packages/geo/src/lib/style/style-modal/layer/style-modal-layer.component.ts index e3c68b9901..7ea5b97dae 100644 --- a/packages/geo/src/lib/style/style-modal/layer/style-modal-layer.component.ts +++ b/packages/geo/src/lib/style/style-modal/layer/style-modal-layer.component.ts @@ -38,9 +38,7 @@ export class StyleModalLayerComponent implements OnInit { public dialogRef: MatDialogRef, private formBuilder: UntypedFormBuilder, @Inject(MAT_DIALOG_DATA) public data: LayerMatDialogData - ) { - this.buildForm(); - } + ) {} ngOnInit() { this.linestringOnly = true; @@ -50,12 +48,17 @@ export class StyleModalLayerComponent implements OnInit { } } this.buildStyleData(); + this.buildForm(); + + this.form.valueChanges.subscribe((res) => { + console.log(res); + }); } private buildForm() { this.form = this.formBuilder.group({ - fill: [''], - stroke: [''] + fill: [this.getLayerFillColor()], + stroke: [this.getLayerStrokeColor()] }); } @@ -70,7 +73,7 @@ export class StyleModalLayerComponent implements OnInit { }; } - getLayerFillColor() { + private getLayerFillColor() { let fillColor = this.defaultValues.fillColor; const style = this.layerOlStyle; if (style?.getFill()?.getColor()) { @@ -82,7 +85,7 @@ export class StyleModalLayerComponent implements OnInit { return fillColor; } - getLayerStrokeColor() { + private getLayerStrokeColor() { let strokeColor = this.defaultValues.strokeColor; const style = this.layerOlStyle; if (style?.getStroke()?.getColor()) { From a9376a2d103655247865c54042cd153c32e61e23 Mon Sep 17 00:00:00 2001 From: Alexandre Caron Date: Thu, 28 Sep 2023 16:01:58 -0400 Subject: [PATCH 6/9] fix(ColorPicker): define peer dependencies and remove types --- package-lock.json | 4 +++- packages/common/package.json | 4 +++- .../color-picker-form-field.component.ts | 2 +- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index b86754b988..b3a4e7d70c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28020,6 +28020,9 @@ "dependencies": { "tslib": "^2.6.0" }, + "devDependencies": { + "@types/tinycolor2": "^1.4.4" + }, "engines": { "node": ">=18.10.0" }, @@ -28031,7 +28034,6 @@ "@floating-ui/utils": "^0.1.4", "@igo2/core": "^16.0.0-rc.1", "@igo2/utils": "^16.0.0-rc.1", - "@types/tinycolor2": "^1.4.4", "angular-shepherd": "16.0.0", "ngx-color": "^9.0.0", "scroll-into-view-if-needed": "^3.0.0", diff --git a/packages/common/package.json b/packages/common/package.json index bf1de304e9..2d2a621b27 100644 --- a/packages/common/package.json +++ b/packages/common/package.json @@ -33,12 +33,14 @@ "scroll-into-view-if-needed": "^3.0.0", "typy": "^3.3.0", "ngx-color": "^9.0.0", - "@types/tinycolor2": "^1.4.4", "tinycolor2": "^1.6.0" }, "dependencies": { "tslib": "^2.6.0" }, + "devDependencies": { + "@types/tinycolor2": "^1.4.4" + }, "engines": { "node": ">=18.10.0" } diff --git a/packages/common/src/lib/color-picker-form-field/color-picker-form-field.component.ts b/packages/common/src/lib/color-picker-form-field/color-picker-form-field.component.ts index f94fd40421..a170709ed2 100644 --- a/packages/common/src/lib/color-picker-form-field/color-picker-form-field.component.ts +++ b/packages/common/src/lib/color-picker-form-field/color-picker-form-field.component.ts @@ -65,7 +65,7 @@ export class ColorPickerFormFieldComponent implements ControlValueAccessor { this.colorPicker = this.formatColor($event.color.rgb, 'rgba'); } - formatColor( + private formatColor( color: ColorInput, format: ColorFormat = this.outputFormat ): string { From d06f35815aea6fd68ac535df8d93ab1805e9c053 Mon Sep 17 00:00:00 2001 From: Alexandre Caron Date: Thu, 28 Sep 2023 16:04:37 -0400 Subject: [PATCH 7/9] fix(ColorPicker): remove unnecessary condition --- .../color-picker-form-field.component.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/common/src/lib/color-picker-form-field/color-picker-form-field.component.ts b/packages/common/src/lib/color-picker-form-field/color-picker-form-field.component.ts index a170709ed2..c60febce63 100644 --- a/packages/common/src/lib/color-picker-form-field/color-picker-form-field.component.ts +++ b/packages/common/src/lib/color-picker-form-field/color-picker-form-field.component.ts @@ -23,9 +23,7 @@ export class ColorPickerFormFieldComponent implements ControlValueAccessor { set value(value: string) { this._value = this.formatColor(value ?? '#000'); - if (this.colorPicker == null || this.colorPicker !== this._value) { - this.colorPicker = this._value; - } + this.colorPicker = this._value; this.onChange(this.value); this.onTouch(this.value); From 570291821c7930796a284633b07ca39560bc58fc Mon Sep 17 00:00:00 2001 From: aziz Date: Thu, 28 Sep 2023 22:30:17 +0200 Subject: [PATCH 8/9] add translate module --- .../color-picker-form-field.component.html | 2 +- .../color-picker-form-field/color-picker-form-field.module.ts | 4 +++- packages/common/src/locale/en.common.json | 3 ++- packages/common/src/locale/fr.common.json | 3 ++- 4 files changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/common/src/lib/color-picker-form-field/color-picker-form-field.component.html b/packages/common/src/lib/color-picker-form-field/color-picker-form-field.component.html index 1f8db0c336..37a436bb23 100644 --- a/packages/common/src/lib/color-picker-form-field/color-picker-form-field.component.html +++ b/packages/common/src/lib/color-picker-form-field/color-picker-form-field.component.html @@ -30,7 +30,7 @@
diff --git a/packages/common/src/lib/color-picker-form-field/color-picker-form-field.module.ts b/packages/common/src/lib/color-picker-form-field/color-picker-form-field.module.ts index 611e855a84..55514f633a 100644 --- a/packages/common/src/lib/color-picker-form-field/color-picker-form-field.module.ts +++ b/packages/common/src/lib/color-picker-form-field/color-picker-form-field.module.ts @@ -7,6 +7,7 @@ import { CommonModule } from '@angular/common'; import { OverlayModule } from '@angular/cdk/overlay'; import { ColorChromeModule } from 'ngx-color/chrome'; import { MatButtonModule } from '@angular/material/button'; +import { TranslateModule } from '@ngx-translate/core'; @NgModule({ imports: [ @@ -17,7 +18,8 @@ import { MatButtonModule } from '@angular/material/button'; ReactiveFormsModule, CommonModule, OverlayModule, - ColorChromeModule + ColorChromeModule, + TranslateModule ], declarations: [ColorPickerFormFieldComponent], exports: [ColorPickerFormFieldComponent] diff --git a/packages/common/src/locale/en.common.json b/packages/common/src/locale/en.common.json index c883e9c7b0..9eb4c39220 100644 --- a/packages/common/src/locale/en.common.json +++ b/packages/common/src/locale/en.common.json @@ -4,7 +4,8 @@ "confirmDialog": { "cancelBtn": "Cancel", "confirmBtn": "Confirm", - "title": "Confirm" + "title": "Confirm", + "applyBtn": "Apply" }, "table": { "filter": "Filter" diff --git a/packages/common/src/locale/fr.common.json b/packages/common/src/locale/fr.common.json index 20f80da79b..54816155ba 100644 --- a/packages/common/src/locale/fr.common.json +++ b/packages/common/src/locale/fr.common.json @@ -4,7 +4,8 @@ "confirmDialog": { "cancelBtn": "Annuler", "confirmBtn": "Confirmer", - "title": "Confirmation" + "title": "Confirmation", + "applyBtn": "Appliquer" }, "table": { "filter": "Filtre" From ba09f269d3a07e80266f029defbabe2134b0c809 Mon Sep 17 00:00:00 2001 From: aziz Date: Mon, 2 Oct 2023 17:04:30 +0200 Subject: [PATCH 9/9] delete console log --- .../style-modal/drawing/style-modal-drawing.component.ts | 4 ---- .../style/style-modal/layer/style-modal-layer.component.ts | 4 ---- 2 files changed, 8 deletions(-) diff --git a/packages/geo/src/lib/style/style-modal/drawing/style-modal-drawing.component.ts b/packages/geo/src/lib/style/style-modal/drawing/style-modal-drawing.component.ts index 2f42925a96..991e62480f 100644 --- a/packages/geo/src/lib/style/style-modal/drawing/style-modal-drawing.component.ts +++ b/packages/geo/src/lib/style/style-modal/drawing/style-modal-drawing.component.ts @@ -38,10 +38,6 @@ export class StyleModalDrawingComponent implements OnInit { } this.buildStyleData(); this.buildForm(); - - this.form.valueChanges.subscribe((res) => { - console.log(res); - }); } private buildForm() { diff --git a/packages/geo/src/lib/style/style-modal/layer/style-modal-layer.component.ts b/packages/geo/src/lib/style/style-modal/layer/style-modal-layer.component.ts index 7ea5b97dae..07f0d75659 100644 --- a/packages/geo/src/lib/style/style-modal/layer/style-modal-layer.component.ts +++ b/packages/geo/src/lib/style/style-modal/layer/style-modal-layer.component.ts @@ -49,10 +49,6 @@ export class StyleModalLayerComponent implements OnInit { } this.buildStyleData(); this.buildForm(); - - this.form.valueChanges.subscribe((res) => { - console.log(res); - }); } private buildForm() {