From b5cd8989340198464e10af891afa8e4a13565dc5 Mon Sep 17 00:00:00 2001 From: "Lukas Rieger (Blue)" Date: Sun, 18 Dec 2022 16:24:55 +0100 Subject: [PATCH] Some fixes --- src/markers/HtmlMarker.js | 10 ++++++++++ src/markers/PlayerMarker.js | 2 +- src/markers/PoiMarker.js | 21 ++++++++++++++++++++- 3 files changed, 31 insertions(+), 2 deletions(-) diff --git a/src/markers/HtmlMarker.js b/src/markers/HtmlMarker.js index 7633f2b..31f3939 100644 --- a/src/markers/HtmlMarker.js +++ b/src/markers/HtmlMarker.js @@ -38,6 +38,8 @@ export class HtmlMarker extends Marker { this.data.label = null; + this.data.classes = []; + this.elementObject = new CSS2DObject(htmlToElement(`
`)); this.elementObject.onBeforeRender = (renderer, scene, camera) => this.onBeforeRender(renderer, scene, camera); @@ -93,6 +95,7 @@ export class HtmlMarker extends Marker { * label: string, * anchor: {x: number, y: number}, * html: string, + * classes: string[], * minDistance: number, * maxDistance: number * }} @@ -118,6 +121,13 @@ export class HtmlMarker extends Marker { this.element.innerHTML = markerData.html; } + // update style-classes + if (this.data.classes !== markerData.classes) { + this.data.classes = markerData.classes; + this.element.classList.value = `bm-marker-${this.data.type}`; + this.element.classList.add(...markerData.classes); + } + // update min/max distances this.fadeDistanceMin = markerData.minDistance || 0; this.fadeDistanceMax = markerData.maxDistance !== undefined ? markerData.maxDistance : Number.MAX_VALUE; diff --git a/src/markers/PlayerMarker.js b/src/markers/PlayerMarker.js index 1af5b3a..5e29dfa 100644 --- a/src/markers/PlayerMarker.js +++ b/src/markers/PlayerMarker.js @@ -105,7 +105,7 @@ export class PlayerMarker extends Marker { if (!this.position.x && !this.position.y && !this.position.z) { this.position.set( pos.x || 0, - pos.y || 0, + (pos.y || 0) + 1.8, pos.z || 0 ); } else { diff --git a/src/markers/PoiMarker.js b/src/markers/PoiMarker.js index 406f2ad..40a84a7 100644 --- a/src/markers/PoiMarker.js +++ b/src/markers/PoiMarker.js @@ -34,6 +34,8 @@ export class PoiMarker extends HtmlMarker { Object.defineProperty(this, 'isPoiMarker', {value: true}); this.data.type = "poi"; + this.data.detail = null; + this.html = `POI Icon (${this.data.id})
`; this.iconElement = this.element.getElementsByTagName("img").item(0); @@ -87,7 +89,9 @@ export class PoiMarker extends HtmlMarker { * anchor: {x: number, y: number}, * iconAnchor: {x: number, y: number}, * label: string, + * detail: string, * icon: string, + * classes: string[], * minDistance: number, * maxDistance: number * }} @@ -110,7 +114,12 @@ export class PoiMarker extends HtmlMarker { // update label if (this.data.label !== markerData.label){ this.data.label = markerData.label || ""; - this.labelElement.innerHTML = this.data.label || ""; + } + + // update detail + if (this.data.detail !== markerData.detail){ + this.data.detail = markerData.detail || this.data.label; + this.labelElement.innerHTML = this.data.detail || ""; } // update icon @@ -119,6 +128,16 @@ export class PoiMarker extends HtmlMarker { this._lastIcon = markerData.icon; } + // update style-classes + if (this.data.classes !== markerData.classes) { + this.data.classes = markerData.classes; + let highlight = this.element.classList.contains("bm-marker-highlight"); + + this.element.classList.value = `bm-marker-html`; + if (highlight) this.element.classList.add("bm-marker-highlight"); + this.element.classList.add(...markerData.classes); + } + // update min/max distances this.fadeDistanceMin = markerData.minDistance || 0; this.fadeDistanceMax = markerData.maxDistance !== undefined ? markerData.maxDistance : Number.MAX_VALUE;