LiveAtlas/src/leaflet/tileLayer/DynmapTileLayer.ts

import L, {Coords, DoneCallback, TileLayerOptions} from 'leaflet';
import {DynmapProjection} from "@/leaflet/projection/DynmapProjection";
import {Coordinate, DynmapMap} from "@/dynmap";

export interface DynmapTileLayerOptions extends TileLayerOptions {
	mapSettings: DynmapMap;
	errorTileUrl: string;
}

export interface DynmapTileLayer extends L.TileLayer {
	options: DynmapTileLayerOptions;
	_projection: DynmapProjection;
	_mapSettings: DynmapMap;
	_cachedTileUrls: Map<string, string>;
	_namedTiles: Map<string, DynmapTileElement>;
	_tileTemplate: DynmapTileElement;
	_loadQueue: DynmapTileElement[];
	_loadingTiles: Set<DynmapTileElement>;

	locationToLatLng(location: Coordinate): L.LatLng;

	latLngToLocation(latLng: L.LatLng): Coordinate;
}

export interface DynmapTile {
	active?: boolean;
	coords: Coords;
	current: boolean;
	el: DynmapTileElement;
	loaded?: Date;
	retain?: boolean;
	complete: boolean;
}

export interface DynmapTileElement extends HTMLImageElement {
	tileName: string;
}

export interface TileInfo {
	prefix: string;
	nightday: string;
	scaledx: number;
	scaledy: number;
	zoom: string;
	zoomprefix: string;
	x: number;
	y: number;
	fmt: string;
}

export class DynmapTileLayer extends L.TileLayer {

	constructor(options: DynmapTileLayerOptions) {
		super('', options);
		L.Util.setOptions(this, options);

		if (options.mapSettings === null) {
			throw new TypeError("mapSettings missing");
		}

		this._projection = new DynmapProjection({});
		this._mapSettings = options.mapSettings;
		this._cachedTileUrls = Object.seal(new Map());
		this._namedTiles = Object.seal(new Map());
		this._loadQueue = [];
		this._loadingTiles = Object.seal(new Set());

		this._tileTemplate = L.DomUtil.create('img', 'leaflet-tile') as DynmapTileElement;
		this._tileTemplate.style.width = this._tileTemplate.style.height = this.options.tileSize + 'px';
		this._tileTemplate.alt = '';
		this._tileTemplate.tileName = '';
		this._tileTemplate.setAttribute('role', 'presentation');

		Object.seal(this._tileTemplate);

		if(this.options.crossOrigin || this.options.crossOrigin === '') {
			this._tileTemplate.crossOrigin = this.options.crossOrigin === true ? '' : this.options.crossOrigin;
		}
	}

	getTileName(coords: Coordinate): string {
		throw "getTileName not implemented";
	}

	getTileUrl(coords: Coordinate) {
		const tileName = this.getTileName(coords);
		let url = this._cachedTileUrls.get(tileName);

		if (!url) {
			const path = escape(`${this._mapSettings.world.name}/${tileName}`);
			url = `${window.config.url.tiles}${path}`;
			this._cachedTileUrls.set(tileName, url);
		}

		return url;
	}

	updateNamedTile(name: string) {
		const tile = this._namedTiles.get(name);
		this._cachedTileUrls.delete(name);

		if (tile) {
			//tile.src = this._cachedTileUrls[name] = this.getTileUrl(name);
		}
	}

	createTile(coords: Coords, done: DoneCallback) {
		//Clone template image instead of creating a new one
		const tile = this._tileTemplate.cloneNode(false) as DynmapTileElement;

		tile.tileName = this.getTileName(coords);
		tile.dataset.src = this.getTileUrl(coords);

		this._namedTiles.set(tile.tileName, tile);
		this._loadQueue.push(tile);

		//Use addEventListener here
		tile.onload = () => {
			this._tileOnLoad(done, tile);
			this._loadingTiles.delete(tile);
			this._tickLoadQueue();
		};
		tile.onerror = () => {
			this._tileOnError(done, tile, {name: 'Error', message: 'Error'});
			this._loadingTiles.delete(tile);
			this._tickLoadQueue();
		};

		this._tickLoadQueue();

		return tile;
	}

	_tickLoadQueue() {
		if (this._loadingTiles.size > 6) {
			return;
		}

		const tile = this._loadQueue.shift();

		if (!tile) {
			return;
		}

		this._loadingTiles.add(tile);
		tile.src = tile.dataset.src as string;
	}

	// stops loading all tiles in the background layer
	_abortLoading() {
		let tile;

		for (const i in this._tiles) {
			if (!Object.prototype.hasOwnProperty.call(this._tiles, i)) {
				continue;
			}

			tile = this._tiles[i] as DynmapTile;

			if (tile.coords.z !== this._tileZoom) {
				if (tile.loaded && tile.el && tile.el.tileName) {
					this._namedTiles.delete(tile.el.tileName);
				}

				if(this._loadQueue.includes(tile.el)) {
					this._loadQueue.splice(this._loadQueue.indexOf(tile.el), 1);
				}

				this._loadingTiles.delete(tile.el);
			}
		}

		super._abortLoading.call(this);
	}

	_removeTile(key: string) {
		const tile = this._tiles[key] as DynmapTile;

		if (!tile) {
			return;
		}

		const tileName = tile.el.tileName as string;

		if (tileName) {
			this._namedTiles.delete(tileName);
			this._cachedTileUrls.delete(tileName);
			this._loadingTiles.delete(tile.el);

			if(this._loadQueue.includes(tile.el)) {
				this._loadQueue.splice(this._loadQueue.indexOf(tile.el), 1);
			}

			tile.el.onerror = null;
			tile.el.onload = null;
		}

		// @ts-ignore
		super._removeTile.call(this, key);
	}

	// Some helper functions.
	zoomprefix(amount: number) {
		return 'z'.repeat(amount);
	}

	getTileInfo(coords: Coordinate): TileInfo {
		// zoom: max zoomed in = this.options.maxZoom, max zoomed out = 0
		// izoom: max zoomed in = 0, max zoomed out = this.options.maxZoom
		// zoomoutlevel: izoom < mapzoomin -> 0, else -> izoom - mapzoomin (which ranges from 0 till mapzoomout)
		const izoom = this._getZoomForUrl(),
			zoomoutlevel = Math.max(0, izoom - this._mapSettings.extraZoomLevels),
			scale = 1 << zoomoutlevel,
			x = scale * coords.x,
			y = scale * coords.y;

		return {
			prefix: this._mapSettings.prefix,
			nightday: /*(this._mapSettings.nightAndDay && this.options.dynmap.serverday) ? '_day' :*/ '',
			scaledx: x >> 5,
			scaledy: y >> 5,
			zoom: this.zoomprefix(zoomoutlevel),
			zoomprefix: (zoomoutlevel == 0) ? "" : (this.zoomprefix(zoomoutlevel) + "_"),
			x: x,
			y: y,
			fmt: this._mapSettings.imageFormat || 'png'
		};
	}

	getProjection(): DynmapProjection {
		return this._projection;
	}
}