107 lines
3.2 KiB
JavaScript
107 lines
3.2 KiB
JavaScript
|
import { P } from './Squaremap.js';
|
||
|
|
import { SquaremapTileLayer } from './SquaremapTileLayer.js';
|
||
|
|
|
||
|
|
class LayerControl {
|
||
|
|
constructor() {
|
||
|
|
this.layers = new Map();
|
||
|
|
}
|
||
|
|
init() {
|
||
|
|
this.currentLayer = 0;
|
||
|
|
this.updateInterval = 60;
|
||
|
|
|
||
|
|
this.playersLayer = new L.LayerGroup();
|
||
|
|
this.playersLayer.id = "players_layer";
|
||
|
|
|
||
|
|
this.controls = L.control.layers({}, {}, {
|
||
|
|
position: 'topleft',
|
||
|
|
sortLayers: true,
|
||
|
|
sortFunction: (a, b) => {
|
||
|
|
return a.order - b.order;
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.addTo(P.map);
|
||
|
|
}
|
||
|
|
addOverlay(name, layer, hide) {
|
||
|
|
this.controls.addOverlay(layer, name);
|
||
|
|
if (this.shouldHide(layer, hide) !== true) {
|
||
|
|
layer.addTo(P.map);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
removeOverlay(layer) {
|
||
|
|
this.ignoreLayer = layer;
|
||
|
|
this.controls.removeLayer(layer);
|
||
|
|
layer.remove();
|
||
|
|
this.ignoreLayer = null;
|
||
|
|
}
|
||
|
|
shouldHide(layer, def) {
|
||
|
|
const value = window.localStorage.getItem(`hide_${layer.id}`);
|
||
|
|
return value == null ? def : value === 'true';
|
||
|
|
}
|
||
|
|
hideLayer(layer) {
|
||
|
|
if (layer != this.ignoreLayer) {
|
||
|
|
window.localStorage.setItem(`hide_${layer.id}`, 'true');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
showLayer(layer) {
|
||
|
|
if (layer != this.ignoreLayer) {
|
||
|
|
window.localStorage.setItem(`hide_${layer.id}`, 'false');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
setupTileLayers(world) {
|
||
|
|
// setup the map tile layers
|
||
|
|
// we need 2 layers to swap between for seamless refreshing
|
||
|
|
if (this.tileLayer1 != null) {
|
||
|
|
P.map.removeLayer(this.tileLayer1);
|
||
|
|
}
|
||
|
|
if (this.tileLayer2 != null) {
|
||
|
|
P.map.removeLayer(this.tileLayer2);
|
||
|
|
}
|
||
|
|
this.tileLayer1 = this.createTileLayer(world);
|
||
|
|
this.tileLayer2 = this.createTileLayer(world);
|
||
|
|
|
||
|
|
// refresh player's control
|
||
|
|
this.removeOverlay(this.playersLayer);
|
||
|
|
if (world.player_tracker.show_controls) {
|
||
|
|
this.addOverlay(world.player_tracker.label,
|
||
|
|
this.playersLayer,
|
||
|
|
world.player_tracker.default_hidden);
|
||
|
|
}
|
||
|
|
this.playersLayer.order = world.player_tracker.priority;
|
||
|
|
this.playersLayer.setZIndex(world.player_tracker.z_index);
|
||
|
|
}
|
||
|
|
createTileLayer(world) {
|
||
|
|
return new SquaremapTileLayer(`tiles/${world.name}/{z}/{x}_{y}.png`, {
|
||
|
|
tileSize: 512,
|
||
|
|
minNativeZoom: 0,
|
||
|
|
maxNativeZoom: world.zoom.max,
|
||
|
|
errorTileUrl: 'images/clear.png'
|
||
|
|
}).addTo(P.map)
|
||
|
|
.addEventListener("load", () => {
|
||
|
|
// when all tiles are loaded, switch to this layer
|
||
|
|
this.switchTileLayer();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
updateTileLayer() {
|
||
|
|
// redraw background tile layer
|
||
|
|
if (this.currentLayer == 1) {
|
||
|
|
this.tileLayer2.redraw();
|
||
|
|
} else {
|
||
|
|
this.tileLayer1.redraw();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
switchTileLayer() {
|
||
|
|
// swap current tile layer
|
||
|
|
if (this.currentLayer == 1) {
|
||
|
|
this.tileLayer1.setZIndex(0);
|
||
|
|
this.tileLayer2.setZIndex(1);
|
||
|
|
this.currentLayer = 2;
|
||
|
|
} else {
|
||
|
|
this.tileLayer1.setZIndex(1);
|
||
|
|
this.tileLayer2.setZIndex(0);
|
||
|
|
this.currentLayer = 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export { LayerControl };
|