zhangyuheng/BlueMap
1
0
Fork 0
forked from mirror/BlueMap
Code Pull Requests Activity

Implement marker and marker-set sorting

Browse Source
This commit is contained in:
Lukas Rieger (Blue) 2023-02-07 17:09:01 +01:00
parent 7d263c8b7f
commit 6ea755d366
No known key found for this signature in database
GPG Key ID: 2D09EC5ED2687FF2
11 changed files with 142 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
BlueMapAPI

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

8
BlueMapCommon/webapp/public/lang/de.conf
View File

@ -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"

8
BlueMapCommon/webapp/public/lang/en.conf
View File

@ -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"

70
BlueMapCommon/webapp/src/components/Menu/ChoiceBox.vue Normal file
View File

@ -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>

36
BlueMapCommon/webapp/src/components/Menu/MarkerSetMenu.vue
View File

@ -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) => {
if (a.id < b.id) return -1;
if (a.id > b.id) return 1;
return 0;
}).filter(marker => {
return [...this.thisMarkerSet.markers].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);
});
}
},

10
BlueMapCommon/webapp/src/js/markers/HtmlMarker.js
View File

@ -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 || {};

5
BlueMapCommon/webapp/src/js/markers/Marker.js
View File

@ -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) {

2
BlueMapCommon/webapp/src/js/markers/MarkerSet.js
View File

@ -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);

4
BlueMapCommon/webapp/src/js/markers/ObjectMarker.js
View File

@ -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;

6
BlueMapCommon/webapp/src/js/markers/PoiMarker.js
View File

@ -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;

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

@ -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.
*/