Fixing map icon config UI #587

#667

package-lock.json

@@ -27,7 +27,7 @@
         "sharp": "0.31.3",
         "ts-exif-parser": "0.2.2",
         "ts-node-iptc": "1.0.11",
-        "typeconfig": "2.0.39",
+        "typeconfig": "2.1.0",
         "typeorm": "0.3.12",
         "xml2js": "0.4.23"
       },
@@ -21670,9 +21670,9 @@
       }
     },
     "node_modules/typeconfig": {
-      "version": "2.0.39",
+      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/typeconfig/-/typeconfig-2.0.39.tgz",
+      "resolved": "https://registry.npmjs.org/typeconfig/-/typeconfig-2.1.0.tgz",
-      "integrity": "sha512-Wys54XBKXeUSfaqrPajTCi6lY3c1b/M/PotGWVL5KT6393IO317wq45F/5otFBuFVREIh+4gRG6c/y+SvSZXYw==",
+      "integrity": "sha512-2Sn2lB8nG9lOvy2jY/4U0HCkqJqc7Fpf8uF5hXaB/+YVnjexX05bfOxUpxIB0fh+Qob7TrVkHxt/2R3aacj8Cw==",
       "dependencies": {
         "minimist": "1.2.8"
       }
@@ -39736,9 +39736,9 @@
       }
     },
     "typeconfig": {
-      "version": "2.0.39",
+      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/typeconfig/-/typeconfig-2.0.39.tgz",
+      "resolved": "https://registry.npmjs.org/typeconfig/-/typeconfig-2.1.0.tgz",
-      "integrity": "sha512-Wys54XBKXeUSfaqrPajTCi6lY3c1b/M/PotGWVL5KT6393IO317wq45F/5otFBuFVREIh+4gRG6c/y+SvSZXYw==",
+      "integrity": "sha512-2Sn2lB8nG9lOvy2jY/4U0HCkqJqc7Fpf8uF5hXaB/+YVnjexX05bfOxUpxIB0fh+Qob7TrVkHxt/2R3aacj8Cw==",
       "requires": {
         "minimist": "1.2.8"
       }

package.json

@@ -50,7 +50,7 @@
     "sharp": "0.31.3",
     "ts-exif-parser": "0.2.2",
     "ts-node-iptc": "1.0.11",
-    "typeconfig": "2.0.39",
+    "typeconfig": "2.1.0",
     "xml2js": "0.4.23",
     "typeorm": "0.3.12"
   },

src/common/config/public/ClientConfig.ts

@@ -515,7 +515,7 @@ export class ClientMapConfig {
     arrayType: MapPathGroupConfig,
     tags: {
       name: $localize`Path theme groups`,
-      priority: ConfigPriority.advanced
+      priority: ConfigPriority.underTheHood
     } as TAGS,
     description: $localize`Markers are grouped and themed by these settings`,
   })

src/frontend/app/ui/settings/template/settings-entry/settings-entry.component.html

@@ -156,6 +156,7 @@
                   (click)="showIconModal(iconModalTmp)">
             <svg xmlns="http://www.w3.org/2000/svg"
                  width="1em"
+                 fill="var(--bs-btn-color)"
                  [attr.viewBox]="state.value.viewBox || '0 0 512 512'">
               <path [attr.d]="state.value.path"/>
             </svg>
@@ -174,6 +175,7 @@
                 <div class="col text-center">
                   <svg xmlns="http://www.w3.org/2000/svg"
                        width="2em"
+                       fill="var(--bs-body-color)"
                        [attr.viewBox]="state.value.viewBox || '0 0 512 512'">
                     <path [attr.d]="state.value.path"/>
                   </svg>
@@ -199,12 +201,14 @@
 
               <app-settings-entry
                 [ngModel]="state.value.__state.viewBox"
+                [noChangeDetection]="true"
                 [name]="'icon_w_'+idName"
                 [id]="'icon_w_'+idName"
                 (change)="onChange($event)"></app-settings-entry>
 
               <app-settings-entry
                 [ngModel]="state.value.__state.path"
+                [noChangeDetection]="true"
                 [name]="'icon_p_'+idName"
                 [id]="'icon_p_'+idName"
                 (change)="onChange($event)"></app-settings-entry>
@@ -271,6 +275,7 @@
                 <div class="col ps-0">
                   <app-settings-entry
                     [ngModel]="val.__state.matchers"
+                    [noChangeDetection]="true"
                     [name]="'val_m_'+idName+i"
                     [id]="'val_m_'+idName+i"
                     (change)="onChange($event)"></app-settings-entry>
@@ -286,6 +291,7 @@
               <div class="row  mt-1 mb-1 bg-body-tertiary">
                 <app-settings-entry
                   [ngModel]="val.theme.__state.color"
+                  [noChangeDetection]="true"
                   [name]="'color_m_'+idName+i"
                   [id]="'color_m_'+idName+i"
                   (change)="onChange($event)"></app-settings-entry>
@@ -294,6 +300,7 @@
 
                 <app-settings-entry
                   [ngModel]="val.theme.__state.dashArray"
+                  [noChangeDetection]="true"
                   [name]="'dashArray_n_'+idName+i"
                   [id]="'dashArray_n_'+idName+i"
                   (change)="onChange($event)"></app-settings-entry>
@@ -301,6 +308,7 @@
               <div class="row  mt-1 mb-1 bg-body-tertiary">
                 <app-settings-entry
                   [ngModel]="val.theme.__state.svgIcon"
+                  [noChangeDetection]="true"
                   [name]="'svgIcon_'+idName+i"
                   [id]="'svgIcon_'+idName+i"
                   (ngModelChange)="onChange($event)">
@@ -345,6 +353,7 @@
 
                 <div class="col">
                   <app-settings-entry
+                    [noChangeDetection]="true"
                     [ngModel]="arr.__state.matchers"
                     [name]="'arr_m_'+idName+i"
                     [id]="'arr_m_'+idName+i"

src/frontend/app/ui/settings/template/settings-entry/settings-entry.component.ts

@@ -1,4 +1,4 @@
-import {Component, forwardRef, OnChanges, TemplateRef} from '@angular/core';
+import {Component, forwardRef, Input, OnChanges, TemplateRef} from '@angular/core';
 import {ControlValueAccessor, NG_VALIDATORS, NG_VALUE_ACCESSOR, ValidationErrors, Validator,} from '@angular/forms';
 import {Utils} from '../../../../../../common/Utils';
 import {propertyTypes} from 'typeconfig/common';
@@ -78,6 +78,7 @@ export class SettingsEntryComponent
   public uiType: string;
   newThemeModalRef: any;
   iconModal: { ref?: any, error?: string };
+  @Input() noChangeDetection = false;
 
 
   constructor(private searchQueryParserService: SearchQueryParserService,
@@ -87,7 +88,7 @@ export class SettingsEntryComponent
   }
 
   get changed(): boolean {
-    if (this.Disabled) {
+    if (this.Disabled || this.noChangeDetection) {
       return false;
     }