Implement marker and marker-set sorting

BlueMapAPI

@@ -1 +1 @@
-Subproject commit 1d0d63f08853581a447f818fbacc7e5c14aa514e
+Subproject commit 2a3cc1c2709bb13021db9c8064715d569db40ca3

BlueMapCommon/webapp/public/lang/de.conf

@@ -17,6 +17,14 @@
     markerSet: "Markerset | Markersets"
     searchPlaceholder: "Suche..."
     followPlayerTitle: "Spieler folgen"
+    sort {
+      title: "Sortieren nach"
+      by {
+        default: "Standard"
+        label: "Name"
+        distance: "Distanz"
+      }
+    }
   }
   settings: {
     title: "Einstellungen"

BlueMapCommon/webapp/public/lang/en.conf

@@ -17,6 +17,14 @@
     markerSet: "marker-set | marker-sets"
     searchPlaceholder: "Search..."
     followPlayerTitle: "Follow Player"
+    sort {
+      title: "Sort by"
+      by {
+        default: "default"
+        label: "name"
+        distance: "distance"
+      }
+    }
   }
   settings: {
     title: "Settings"

BlueMapCommon/webapp/src/components/Menu/ChoiceBox.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="choice-box">
+    <div v-if="title" class="title">{{ title }}</div>
+    <div class="choices">
+      <div class="choice" v-for="choice of choices" :key="choice.id"
+           :class="{selected: selection === choice.id}"
+           @click="$emit('choice', choice)"
+      >
+        {{ choice.name }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ChoiceBox",
+  props: {
+    title: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    choices: Array,
+    selection: String
+  }
+}
+</script>
+
+<style lang="scss">
+  .choice-box {
+    display: flex;
+
+    font-size: 0.8rem;
+    text-align: center;
+    //margin-bottom: 0.5em;
+
+    border: solid 2px var(--theme-bg-hover);
+    //border-radius: 1em;
+    overflow: hidden;
+
+    .title, .choice {
+      padding: 0.3em 0.5em;
+    }
+
+    .title {
+      background-color: var(--theme-bg-hover);
+    }
+
+    .choices {
+      display: flex;
+      flex-grow: 1;
+
+      .choice {
+        flex-grow: 1;
+
+        cursor: pointer;
+        user-select: none;
+
+        background-color: var(--theme-bg);
+        &:hover {
+          background-color: var(--theme-bg-hover);
+        }
+        &.selected {
+          background-color: var(--theme-bg-light);
+        }
+      }
+    }
+  }
+</style>

BlueMapCommon/webapp/src/components/Menu/MarkerSetMenu.vue

@@ -6,6 +6,16 @@
   <hr v-if="filteredMarkerSets.length > 0 & thisMarkerSet.markers.length > 0">
   <div class="markers" v-if="thisMarkerSet.markers.length > 0">
     <TextInput :value="filter.search" @input="filter.search = $event.target.value" :placeholder="$t('markers.searchPlaceholder')" />
+    <ChoiceBox
+        :title="$t('markers.sort.title')"
+        :choices="[
+          {id: 'default', name: $t('markers.sort.by.default')},
+          {id: 'label', name: $t('markers.sort.by.label')},
+          {id: 'distance', name: $t('markers.sort.by.distance')}
+        ]"
+        :selection="filter.order"
+        @choice="filter.order = $event.id"
+    />
     <MarkerItem v-for="marker of filteredMarkers" :key="marker.id" :marker="marker" />
   </div>
 </div>
@@ -15,17 +25,23 @@
 import MarkerItem from "./MarkerItem.vue";
 import TextInput from "./TextInput.vue";
 import MarkerSet from "./MarkerSet.vue";
+import Group from "./Group.vue";
+import SimpleButton from "./SimpleButton.vue";
 import {MainMenu} from "../../js/MainMenu";
+import ChoiceBox from "./ChoiceBox.vue";
+
 export default {
   name: "MarkerSetMenu",
-  components: {MarkerSet, TextInput, MarkerItem},
+  components: {ChoiceBox, SimpleButton, MarkerSet, TextInput, MarkerItem, Group},
   props: {
     menu: MainMenu
   },
   data() {
     return {
+      controls: this.$bluemap.mapViewer.controlsManager.data,
       filter: {
         search: "",
+        order: "default"
       }
     }
   },
@@ -34,20 +50,28 @@ export default {
       return this.menu.currentPage().markerSet;
     },
     filteredMarkers() {
-      return [...this.thisMarkerSet.markers].sort((a, b) => {
+      return [...this.thisMarkerSet.markers].filter(marker => {
-        if (a.id < b.id) return -1;
-        if (a.id > b.id) return 1;
-        return 0;
-      }).filter(marker => {
         if (!this.filter.search) return true;
         if (marker.id.includesCI(this.filter.search)) return true;
         if (marker.label && marker.label.includesCI(this.filter.search)) return true;
         return marker.type === "player" && (marker.name.includesCI(this.filter.search) || marker.playerUuid.includesCI(this.filter.search));
+      }).sort((a, b) => {
+        if (this.filter.order === "label") {
+          if (a.label < b.label) return -1;
+          if (a.label > b.label) return 1;
+          return 0;
+        }
+        if (this.filter.order === "distance") {
+          return a.position.distanceToSquared(this.controls.position) - b.position.distanceToSquared(this.controls.position);
+        }
+        return (a.sorting || 0) - (b.sorting || 0);
       });
     },
     filteredMarkerSets() {
       return this.thisMarkerSet.markerSets.filter(markerSet => {
         return (markerSet.id !== "bm-popup-set");
+      }).sort((a, b) => {
+        return (a.sorting || 0) - (b.sorting || 0);
       });
     }
   },

BlueMapCommon/webapp/src/js/markers/HtmlMarker.js

@@ -93,6 +93,7 @@ export class HtmlMarker extends Marker {
      * @param markerData {{
      *      position: {x: number, y: number, z: number},
      *      label: string,
+     *      sorting: number,
      *      anchor: {x: number, y: number},
      *      html: string,
      *      classes: string[],
@@ -109,7 +110,14 @@ export class HtmlMarker extends Marker {
         this.position.setZ(pos.z || 0);
 
         // update label
-        this.data.label = markerData.label || null;
+        if (this.data.label !== markerData.label) {
+            this.data.label = markerData.label || null;
+        }
+
+        //update sorting
+        if (this.data.sorting !== markerData.sorting) {
+            this.data.sorting = markerData.sorting || 0;
+        }
 
         // update anchor
         let anch = markerData.anchor || {};

BlueMapCommon/webapp/src/js/markers/Marker.js

@@ -37,6 +37,7 @@ export class Marker extends Object3D {
         this.data = reactive({
             id: markerId,
             type: "marker",
+            sorting: 0,
             position: this.position,
             visible: this.visible
         });
@@ -67,7 +68,7 @@ export class Marker extends Object3D {
 
     /**
      * @param position {Vector3}
-     * @param camera {THREE.Camera}
+     * @param camera {Camera}
      * @param fadeDistanceMax {number}
      * @param fadeDistanceMin {number}
      * @returns {number} - opacity between 0 and 1
@@ -84,7 +85,7 @@ export class Marker extends Object3D {
 
     /**
      * @param position {Vector3}
-     * @param camera {THREE.Camera}
+     * @param camera {Camera}
      * @returns {number}
      */
     static calculateDistanceToCameraPlane (position, camera) {

BlueMapCommon/webapp/src/js/markers/MarkerSet.js

@@ -50,6 +50,7 @@ export class MarkerSet extends Scene {
             label: id,
             toggleable: true,
             defaultHide: false,
+            sorting: 0,
             markerSets: [],
             markers: [],
             visible: this.visible,
@@ -66,6 +67,7 @@ export class MarkerSet extends Scene {
         this.data.label = data.label || this.data.id;
         this.data.toggleable = !!data.toggleable;
         this.data.defaultHide = !!data.defaultHidden;
+        this.data.sorting = data.sorting || this.data.sorting;
 
         // update markerSets
         this.updateMarkerSetsFromData(data.markerSets);

BlueMapCommon/webapp/src/js/markers/ObjectMarker.js

@@ -73,6 +73,7 @@ export class ObjectMarker extends Marker {
      *      position: {x: number, y: number, z: number},
      *      label: string,
      *      detail: string,
+     *      sorting: number,
      *      link: string,
      *      newTab: boolean
      *      }}
@@ -91,6 +92,9 @@ export class ObjectMarker extends Marker {
         //update detail
         this.data.detail = markerData.detail || null;
 
+        //update sorting
+        this.data.sorting = markerData.sorting || 0;
+
         // update link
         this.data.link = markerData.link || null;
         this.data.newTab = !!markerData.newTab;

BlueMapCommon/webapp/src/js/markers/PoiMarker.js

@@ -90,6 +90,7 @@ export class PoiMarker extends HtmlMarker {
      *      iconAnchor: {x: number, y: number},
      *      label: string,
      *      detail: string,
+     *      sorting: number,
      *      icon: string,
      *      classes: string[],
      *      minDistance: number,
@@ -116,6 +117,11 @@ export class PoiMarker extends HtmlMarker {
             this.data.label = markerData.label || "";
         }
 
+        //update sorting
+        if (this.data.sorting !== markerData.sorting) {
+            this.data.sorting = markerData.sorting || 0;
+        }
+
         // update detail
         if (this.data.detail !== markerData.detail){
             this.data.detail = markerData.detail || this.data.label;

BlueMapCore/src/main/java/de/bluecolored/bluemap/core/util/math/Color.java

@@ -166,7 +166,7 @@ public Color straight() {
     /**
      * Parses the color from a string and sets it to this Color instance.
      * The value can be an integer in String-Format or a string in hexadecimal format prefixed with # (css-style: e.g. #f16 becomes #ff1166).
-     * @param val The String to parse
+     * @param value The String to parse
      * @return The parsed Integer
      * @throws NumberFormatException If the value is not formatted correctly or if there is no value present.
      */