Replace MapProvider.getMarkerIconURL with passing full URL to GenericMarker

This commit is contained in:
James Lyne 2022-02-24 18:39:00 +00:00
parent 60d84d61a0
commit bd13e67f48
10 changed files with 25 additions and 43 deletions

View File

@ -60,7 +60,7 @@ export default defineComponent({
})),
icon = computed(() => {
if('icon' in props.marker) {
return store.state.currentMapProvider!.getMarkerIconUrl((props.marker as LiveAtlasPointMarker).icon);
return (props.marker as LiveAtlasPointMarker).iconUrl;
}
return undefined;

4
src/index.d.ts vendored
View File

@ -191,8 +191,6 @@ interface LiveAtlasMapProvider {
login(formData: FormData): void;
logout(): void;
register(formData: FormData): void;
getMarkerIconUrl(icon: string): string;
}
interface LiveAtlasMarkerSet {
@ -220,7 +218,7 @@ interface LiveAtlasMarker {
interface LiveAtlasPointMarker extends LiveAtlasMarker {
type: LiveAtlasMarkerType.POINT;
dimensions: PointTuple;
icon: string;
iconUrl: string;
}
interface LiveAtlasPathMarker extends LiveAtlasMarker {

View File

@ -18,10 +18,9 @@
*/
import {PointExpression, Icon, DomUtil, point, BaseIconOptions, PointTuple, Layer, LayerOptions, Util} from 'leaflet';
import {useStore} from "@/store";
export interface GenericIconOptions extends BaseIconOptions {
icon: string;
iconUrl: string;
label: string;
isHtml?: boolean;
showLabel?: boolean;
@ -39,7 +38,7 @@ const markerLabel: HTMLSpanElement = document.createElement('span');
markerLabel.className = 'marker__label';
const defaultOptions: GenericIconOptions = {
icon: 'default',
iconUrl: 'default',
label: '',
iconSize: [16, 16],
popupAnchor: [0, 0],
@ -71,11 +70,10 @@ export class GenericIcon extends Layer implements Icon<GenericIconOptions> {
DomUtil.remove(oldIcon);
}
const div = markerContainer.cloneNode(false) as HTMLDivElement,
url = useStore().state.currentMapProvider!.getMarkerIconUrl(this.options.icon);
const div = markerContainer.cloneNode(false) as HTMLDivElement;
this._image = markerIcon.cloneNode(false) as HTMLImageElement;
this._image.src = url;
this._image.src = this.options.iconUrl;
div.appendChild(this._image);
div.classList.add('marker', 'leaflet-marker-icon');
@ -138,9 +136,9 @@ export class GenericIcon extends Layer implements Icon<GenericIconOptions> {
}
update(options: GenericIconOptions) {
if(this._image && options.icon !== this.options.icon) {
this.options.icon = options.icon;
this._image!.src = useStore().state.currentMapProvider!.getMarkerIconUrl(this.options.icon);
if(this._image && options.iconUrl !== this.options.iconUrl) {
this.options.iconUrl = options.iconUrl;
this._image!.src = this.options.iconUrl;
}
this.options.iconSize = options.iconSize;

View File

@ -31,7 +31,7 @@ export class GenericMarker extends Marker {
super(latLng, {});
this.options.icon = new GenericIcon({
icon: options.icon,
iconUrl: options.iconUrl,
label: options.tooltipHTML || options.tooltip,
iconSize: options.dimensions,
isHtml: !!options.tooltipHTML,

View File

@ -110,7 +110,7 @@ export default class DynmapMapProvider extends MapProvider {
markerSet = buildMarkerSet(key, set),
markers = new Map<string, LiveAtlasMarker>();
buildMarkers(set.markers || {}, markers);
buildMarkers(set.markers || {}, markers, this.config);
buildAreas(set.areas || {}, markers);
buildLines(set.lines || {}, markers);
buildCircles(set.circles || {}, markers);
@ -173,7 +173,7 @@ export default class DynmapMapProvider extends MapProvider {
const response = await this.getJSON(url, this.updateAbort.signal);
const players: Set<LiveAtlasPlayer> = new Set(),
updates = buildUpdates(response.updates || [], this.updateTimestamp),
updates = buildUpdates(response.updates || [], this.updateTimestamp, this.config),
worldState = {
timeOfDay: response.servertime || 0,
thundering: response.isThundering || false,
@ -311,10 +311,6 @@ export default class DynmapMapProvider extends MapProvider {
}
}
getMarkerIconUrl(icon: string): string {
return `${this.config.markers}_markers_/${icon}.png`;
}
async login(data: any) {
if (!this.store.getters.loginEnabled) {
return Promise.reject(this.store.state.messages.loginErrorDisabled);

View File

@ -33,8 +33,6 @@ export default abstract class MapProvider implements LiveAtlasMapProvider {
abstract loadServerConfiguration(): Promise<void>;
abstract createTileLayer(options: LiveAtlasTileLayerOptions): LiveAtlasTileLayer;
abstract getMarkerIconUrl(icon: string): string;
async populateWorld(world: LiveAtlasWorldDefinition): Promise<void> {}
async populateMap(map: LiveAtlasMapDefinition): Promise<void> {}

View File

@ -247,7 +247,7 @@ export default class OverviewerMapProvider extends MapProvider {
(markers[set.groupName]?.raw || []).forEach((marker: any, index: number) => {
const id = `marker_${index}`;
setContents.set(id, OverviewerMapProvider.buildMarker(id, marker, set));
setContents.set(id, this.buildMarker(id, marker, set));
});
this.mapMarkers.get(map)!.set(set.groupName, setContents);
@ -255,7 +255,7 @@ export default class OverviewerMapProvider extends MapProvider {
}
}
private static buildMarker(id: string, data: any, markerSet: any): LiveAtlasMarker {
private buildMarker(id: string, data: any, markerSet: any): LiveAtlasMarker {
const marker: any = {
id,
tooltip: stripHTML(data.hovertext.trim()),
@ -276,7 +276,7 @@ export default class OverviewerMapProvider extends MapProvider {
} else {
marker.type = LiveAtlasMarkerType.POINT;
marker.location = {x: data.x, y: data.y, z: data.z};
marker.icon = data.icon || markerSet.icon;
marker.iconUrl = this.config + (data.icon || markerSet.icon);
}
return marker as LiveAtlasMarker;
@ -317,8 +317,4 @@ export default class OverviewerMapProvider extends MapProvider {
createTileLayer(options: LiveAtlasTileLayerOptions): LiveAtlasTileLayer {
return new OverviewerTileLayer(options);
}
getMarkerIconUrl(icon: string): string {
return this.config + icon;
}
}

View File

@ -280,7 +280,7 @@ export default class Pl3xmapMapProvider extends MapProvider {
switch(marker.type) {
case 'icon':
markerId = `point_${markers.size}`;
markers.set(markerId, Pl3xmapMapProvider.buildMarker(markerId, marker));
markers.set(markerId, this.buildMarker(markerId, marker));
break;
case 'polyline':
@ -316,7 +316,7 @@ export default class Pl3xmapMapProvider extends MapProvider {
});
}
private static buildMarker(id: string, marker: any): LiveAtlasPointMarker {
private buildMarker(id: string, marker: any): LiveAtlasPointMarker {
return {
id,
type: LiveAtlasMarkerType.POINT,
@ -326,7 +326,7 @@ export default class Pl3xmapMapProvider extends MapProvider {
z: marker.point?.z || 0,
},
dimensions: marker.size ? [marker.size.x || 16, marker.size.z || 16] : [16, 16],
icon: marker.icon || "default",
iconUrl: `${this.config}images/icon/registered/${marker.icon || "default"}.png`,
tooltip: marker.tooltip ? stripHTML(marker.tooltip) : '',
tooltipHTML: marker.tooltip,
@ -599,8 +599,4 @@ export default class Pl3xmapMapProvider extends MapProvider {
this.markersAbort.abort();
}
}
getMarkerIconUrl(icon: string): string {
return `${this.config}images/icon/registered/${icon}.png`;
}
}

View File

@ -317,7 +317,7 @@ export function buildMarkerSet(id: string, data: MarkerSet): any {
}
}
export function buildMarkers(data: any, list: Map<string, LiveAtlasMarker>): void {
export function buildMarkers(data: any, list: Map<string, LiveAtlasMarker>, config: DynmapUrlConfig): void {
let id;
for (const key in data) {
@ -326,11 +326,11 @@ export function buildMarkers(data: any, list: Map<string, LiveAtlasMarker>): voi
}
id = `point_${key}`;
list.set(id, buildMarker(id, data[key]));
list.set(id, buildMarker(id, data[key], config));
}
}
export function buildMarker(id: string, data: Marker): LiveAtlasPointMarker {
function buildMarker(id: string, data: Marker, config: DynmapUrlConfig): LiveAtlasPointMarker {
let dimensions;
if(data.dim) {
@ -350,7 +350,7 @@ export function buildMarker(id: string, data: Marker): LiveAtlasPointMarker {
z: !isNaN(data.z) ? Number.isInteger(data.z) ? data.z + 0.5 : data.z : 0,
},
dimensions: (dimensions || [16, 16]) as PointTuple,
icon: data.icon || "default",
iconUrl: `${config.markers}_markers_/${data.icon || "default"}.png`,
minZoom: typeof data.minzoom !== 'undefined' && data.minzoom > -1 ? data.minzoom : undefined,
maxZoom: typeof data.maxzoom !== 'undefined' && data.maxzoom > -1 ? data.maxzoom : undefined,
tooltip: data.markup ? stripHTML(data.label) : data.label,
@ -504,7 +504,7 @@ export function buildCircle(id: string, circle: MarkerCircle): LiveAtlasCircleMa
};
}
export function buildUpdates(data: Array<any>, lastUpdate: Date) {
export function buildUpdates(data: Array<any>, lastUpdate: Date, config: DynmapUrlConfig) {
const updates = {
markerSets: [] as DynmapMarkerSetUpdate[],
markers: [] as DynmapMarkerUpdate[],
@ -565,7 +565,7 @@ export function buildUpdates(data: Array<any>, lastUpdate: Date) {
if (entry.msg.startsWith("marker")) {
update.id = `point_${entry.id}`;
update.type = LiveAtlasMarkerType.POINT;
update.payload = update.removed ? undefined : buildMarker(update.id, entry);
update.payload = update.removed ? undefined : buildMarker(update.id, entry, config);
} else if (entry.msg.startsWith("area")) {
update.id = `area_${entry.id}`;
update.type = LiveAtlasMarkerType.AREA;

View File

@ -52,7 +52,7 @@ export const updatePointLayer = (marker: Marker | undefined, options: LiveAtlasP
if(icon && icon instanceof GenericIcon) {
icon.update({
icon: options.icon,
iconUrl: options.iconUrl,
label: options.tooltipHTML || options.tooltip,
iconSize: options.dimensions,
isHtml: !!options.tooltipHTML,