Add search group color control

zeldamods · Nov 4, 2024 · 9d6c52f · 9d6c52f
1 parent 1a79547
commit 9d6c52f
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 0 deletions.
diff --git a/src/MapSearch.ts b/src/MapSearch.ts
@@ -194,6 +194,15 @@ export class SearchResultGroup {
     this.setObjects(map, results);
   }
 
+  getFillColor(): string {
+    return this.fillColor
+  }
+
+  setFillColor(color: string) {
+    this.fillColor = color;
+    this.strokeColor = ui.shadeColor(this.fillColor, -20)
+  }
+
   private static COLOR_COUNTER = 0;
   private markerGroup = new ui.Unobservable<L.LayerGroup>(L.layerGroup());
   private markers = new ui.Unobservable<MapMarkers.MapMarkerObj[]>([]);

diff --git a/src/components/AppMap.ts b/src/components/AppMap.ts
@@ -1257,6 +1257,14 @@ export default class AppMap extends mixins(MixinUtil) {
     this.search();
   }
 
+  searchColorGroup(ev: any) {
+    const idx = parseInt(ev.target.dataset.id)
+    const group = this.searchGroups[idx];
+    group.setFillColor(ev.target.value)
+    group.update(SearchResultUpdateMode.UpdateVisibility | SearchResultUpdateMode.UpdateStyle,
+      this.searchExcludedSets);
+  }
+
   searchRemoveGroup(idx: number) {
     const group = this.searchGroups[idx];
     group.remove();

diff --git a/src/components/AppMap.vue b/src/components/AppMap.vue
@@ -98,6 +98,7 @@
                 <span>{{group.label}}</span>
                 <a class="ml-2" @click="searchRemoveGroup(idx)"><i class="text-danger fa fa-times"></i></a>
                 <a class="ml-2" style="font-size: 90%" v-if="group.query" @click="searchViewGroup(idx)"><i class="fa fa-edit"></i></a>
+                <span class="ml-2" v-if="settings && !settings.colorPerActor"><input class="marker-color2" type="color" :data-id="`${idx}`" @input="searchColorGroup" :value="group.getFillColor()"></span>
                 <span class="ml-2">({{group.size()}})</span>
               </span>
             </div>
@@ -435,6 +436,16 @@
     margin-left: 0.5em;
     margin-right: 0.3em;
 }
+.marker-color2 {
+    width: 1em;
+    height: 1em;
+    min-height: 0.5em;
+    padding: 0;
+    border: 1px solid #bbb;
+    border-radius: 0.2em;
+    margin-left: 0;
+    margin-right: 0;
+}
 
 .marker-row {
     display: flex;