Skirda/LiveAtlas
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Targeted leaflet imports

Browse Source
This commit is contained in:
James Lyne 2020-12-12 22:04:56 +00:00
parent 37d7758d70
commit b9b58399f6
21 changed files with 95 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Map.vue
View File

@ -13,7 +13,7 @@
<script lang="ts">
import {defineComponent, computed} from "@vue/runtime-core";
import L from 'leaflet';
import {LatLng, CRS} from 'leaflet';
import {useStore} from '@/store';
import MapLayer from "@/components/map/layer/MapLayer.vue";
import PlayersLayer from "@/components/map/layer/PlayersLayer.vue";
@ -40,7 +40,7 @@ export default defineComponent({
setup() {
const store = useStore(),
leaflet = undefined as L.Map | undefined,
leaflet = undefined as DynmapMap | undefined,
maps = computed(() => store.state.maps),
markerSets = computed(() => store.state.markerSets),
@ -106,14 +106,14 @@ export default defineComponent({
mounted() {
this.leaflet = new DynmapMap(this.$el, Object.freeze({
zoom: this.configuration.defaultZoom,
center: new L.LatLng(0, 0),
center: new LatLng(0, 0),
fadeAnimation: false,
zoomAnimation: true,
zoomControl: true,
layerControl: true,
preferCanvas: true,
attributionControl: false,
crs: L.CRS.Simple,
crs: CRS.Simple,
worldCopyJump: false,
// markerZoomAnimation: false,
}));

4
src/components/map/control/CoordinatesControl.vue
View File

@ -1,13 +1,13 @@
<script lang="ts">
import {defineComponent} from "@vue/runtime-core";
import {useStore} from "@/store";
import L from 'leaflet';
import {CoordinatesControl, CoordinatesControlOptions} from "@/leaflet/control/CoordinatesControl";
import DynmapMap from "@/leaflet/DynmapMap";
export default defineComponent({
props: {
leaflet: {
type: Object as () => L.Map,
type: Object as () => DynmapMap,
required: true,
}
},

4
src/components/map/control/LogoControl.vue
View File

@ -1,7 +1,7 @@
<script lang="ts">
import {defineComponent} from "@vue/runtime-core";
import L from 'leaflet';
import {LogoControl, LogoControlOptions} from "@/leaflet/control/LogoControl";
import DynmapMap from "@/leaflet/DynmapMap";
export default defineComponent({
props: {
@ -10,7 +10,7 @@ export default defineComponent({
required: true,
},
leaflet: {
type: Object as () => L.Map,
type: Object as () => DynmapMap,
required: true,
}
},

4
src/components/map/layer/MarkerSetLayer.vue
View File

@ -8,7 +8,7 @@
<script lang="ts">
import {defineComponent, computed} from "@vue/runtime-core";
import {useStore} from "@/store";
import L from 'leaflet';
import {LayerGroup} from 'leaflet';
import {DynmapMarkerSet} from "@/dynmap";
import GenericMarker from "@/components/map/marker/GenericMarker.vue";
import Areas from "@/components/map/vector/Areas.vue";
@ -39,7 +39,7 @@ export default defineComponent({
setup() {
const store = useStore(),
markerSettings = computed(() => store.state.components.markers),
layerGroup = new L.LayerGroup() as L.LayerGroup;
layerGroup = new LayerGroup();
return {
markerSettings,

4
src/components/map/layer/PlayersLayer.vue
View File

@ -6,7 +6,7 @@
import PlayerMarker from "@/components/map/marker/PlayerMarker.vue";
import {defineComponent, computed} from "@vue/runtime-core";
import {useStore} from "@/store";
import L from 'leaflet';
import {LayerGroup} from 'leaflet';
import DynmapMap from "@/leaflet/DynmapMap";
export default defineComponent({
@ -25,7 +25,7 @@ export default defineComponent({
const store = useStore(),
players = computed(() => store.state.players),
componentSettings = store.state.components.playerMarkers,
layerGroup = new L.LayerGroup() as L.LayerGroup;
layerGroup = new LayerGroup();
return {
players,

8
src/components/map/marker/GenericMarker.vue
View File

@ -1,6 +1,6 @@
<script lang="ts">
import {defineComponent, computed, ref} from "@vue/runtime-core";
import L from 'leaflet';
import {LayerGroup, Marker} from 'leaflet';
import {DynmapMarker} from "@/dynmap";
import {useStore} from "@/store";
import {DynmapIcon} from "@/leaflet/icon/DynmapIcon";
@ -12,7 +12,7 @@ export default defineComponent({
required: true
},
layerGroup: {
type: Object as () => L.LayerGroup,
type: Object as () => LayerGroup,
required: true
}
},
@ -24,7 +24,7 @@ export default defineComponent({
projectedPosition = computed(() => store.state.currentProjection.locationToLatLng(props.options.location)),
visible = ref(false),
marker = undefined as L.Marker | undefined;
marker = undefined as Marker | undefined;
return {
marker,
@ -42,7 +42,7 @@ export default defineComponent({
},
mounted() {
this.marker = new L.Marker(this.currentProjection.locationToLatLng(this.options.location), {
this.marker = new Marker(this.currentProjection.locationToLatLng(this.options.location), {
icon: new DynmapIcon({
icon: this.options.icon,
label: this.options.label,

4
src/components/map/marker/PlayerMarker.vue
View File

@ -1,6 +1,6 @@
<script lang="ts">
import {defineComponent, computed, ref} from "@vue/runtime-core";
import L from 'leaflet';
import {LayerGroup} from 'leaflet';
import {DynmapPlayer} from "@/dynmap";
import {useStore} from "@/store";
import {PlayerMarker} from "@/leaflet/marker/PlayerMarker";
@ -12,7 +12,7 @@ export default defineComponent({
required: true
},
layerGroup: {
type: Object as () => L.LayerGroup,
type: Object as () => LayerGroup,
required: true
}
},

8
src/leaflet/DynmapMap.ts
View File

@ -1,11 +1,11 @@
import L, {MapOptions} from 'leaflet';
import {Map, DomUtil, MapOptions} from 'leaflet';
import LayerManager from "@/leaflet/layer/LayerManager";
interface DynmapMapOptions extends MapOptions {
layerControl: boolean;
}
export default class DynmapMap extends L.Map {
export default class DynmapMap extends Map {
private readonly _layerManager: LayerManager;
private _controlCorners: any;
private _controlContainer?: HTMLElement;
@ -25,12 +25,12 @@ export default class DynmapMap extends L.Map {
const corners: any = this._controlCorners = {},
l = 'leaflet-',
container = this._controlContainer =
L.DomUtil.create('div', l + 'control-container', this._container);
DomUtil.create('div', l + 'control-container', this._container);
function createCorner(vSide: string, hSide: string) {
const className = l + vSide + ' ' + l + hSide;
corners[`${vSide}${hSide}`] = L.DomUtil.create('div', className, container);
corners[`${vSide}${hSide}`] = DomUtil.create('div', className, container);
}
createCorner('top', 'left');

23
src/leaflet/control/ClockControl.ts
View File

@ -1,5 +1,5 @@
import L, {ControlOptions} from 'leaflet';
import Util from '@/util';
import {ControlOptions, DomUtil, Util, Map, Control} from 'leaflet';
import Utils from '@/util';
import {DynmapWorldState} from "@/dynmap";
export interface ClockControlOptions extends ControlOptions {
@ -7,11 +7,10 @@ export interface ClockControlOptions extends ControlOptions {
showWeather: boolean;
}
export class ClockControl extends L.Control {
export class ClockControl extends Control {
// @ts-ignore
options: ClockControlOptions;
private _map ?: L.Map;
private _container?: HTMLElement;
private _sun?: HTMLElement;
private _moon?: HTMLElement;
@ -21,23 +20,23 @@ export class ClockControl extends L.Control {
constructor(options: ClockControlOptions) {
super(Object.assign(options, {position: 'topcenter'}));
L.Util.setOptions(this, options);
Util.setOptions(this, options);
}
onAdd(map: L.Map) {
this._container = L.DomUtil.create('div', 'largeclock timeofday');
this._sun = L.DomUtil.create('div', 'timeofday sun', this._container);
this._moon = L.DomUtil.create('div', 'timeofday moon', this._sun);
onAdd(map: Map) {
this._container = DomUtil.create('div', 'largeclock timeofday');
this._sun = DomUtil.create('div', 'timeofday sun', this._container);
this._moon = DomUtil.create('div', 'timeofday moon', this._sun);
this._sun.style.backgroundPosition = (-150) + 'px ' + (-150) + 'px';
this._moon.style.backgroundPosition = (-150) + 'px ' + (-150) + 'px';
if (this.options.showDigitalClock) {
this._clock = L.DomUtil.create('div', 'timeofday digitalclock', this._container)
this._clock = DomUtil.create('div', 'timeofday digitalclock', this._container)
}
if (this.options.showWeather) {
this._weather = L.DomUtil.create('div', 'weather', this._container)
this._weather = DomUtil.create('div', 'weather', this._container)
}
return this._container;
@ -72,7 +71,7 @@ export class ClockControl extends L.Control {
this._moon!.style.backgroundPosition = '-150px -150px';
}
const minecraftTime = Util.getMinecraftTime(timeOfDay);
const minecraftTime = Utils.getMinecraftTime(timeOfDay);
if(timeOfDay >= 0) {
this._clock!.classList.remove(minecraftTime.night ? 'day' : 'night');

20
src/leaflet/control/CoordinatesControl.ts
View File

@ -1,4 +1,4 @@
import L, {ControlOptions, LeafletMouseEvent} from 'leaflet';
import {ControlOptions, LeafletMouseEvent, Control, Map, DomUtil, Util} from 'leaflet';
import {useStore} from "@/store";
import {Coordinate} from "@/dynmap";
@ -11,11 +11,11 @@ export interface CoordinatesControlOptions extends ControlOptions {
label: string;
}
export class CoordinatesControl extends L.Control {
export class CoordinatesControl extends Control {
// @ts-ignore
options: CoordinatesControlOptions;
private _map ?: L.Map;
private _map ?: Map;
private _location?: Coordinate;
private _locationChanged: boolean = false;
private readonly _coordsContainer: HTMLSpanElement;
@ -27,16 +27,16 @@ export class CoordinatesControl extends L.Control {
options.showRegion = true;
options.showChunk = true;
this._coordsContainer = L.DomUtil.create('span', 'value coordinates');
this._chunkContainer = L.DomUtil.create('span', 'value chunk');
this._regionContainer = L.DomUtil.create('span', 'value region');
this._coordsContainer = DomUtil.create('span', 'value coordinates');
this._chunkContainer = DomUtil.create('span', 'value chunk');
this._regionContainer = DomUtil.create('span', 'value region');
options.position = 'bottomleft';
L.Util.setOptions(this, options);
Util.setOptions(this, options);
}
onAdd(map: L.Map) {
const container = L.DomUtil.create('div', 'leaflet-control-coordinates');
onAdd(map: Map) {
const container = DomUtil.create('div', 'leaflet-control-coordinates');
this._coordsContainer.textContent = this.options.showY ? '-----, ----- , -----' : '-----, -----';
this._coordsContainer.dataset.label = this.options.label;
@ -67,7 +67,7 @@ export class CoordinatesControl extends L.Control {
this._map.on('mousemove', this._onMouseMove, this);
this._map.on('mouseout', this._onMouseOut, this);
L.Control.prototype.remove.call(this);
Control.prototype.remove.call(this);
return this;
}

7
src/leaflet/control/DynmapLayerControl.ts
View File

@ -1,17 +1,16 @@
import L, {Control, ControlOptions} from 'leaflet';
import {useStore} from "@/store";
import {Control, Map} from 'leaflet';
import layers from '@/assets/icons/layers.svg';
import LayersObject = Control.LayersObject;
import LayersOptions = Control.LayersOptions;
export class DynmapLayerControl extends L.Control.Layers {
export class DynmapLayerControl extends Control.Layers {
private _layersLink?: HTMLElement;
constructor(baseLayers?: LayersObject, overlays?: LayersObject, options?: LayersOptions) {
super(baseLayers, overlays, options);
}
onAdd(map: L.Map) {
onAdd(map: Map) {
// @ts-ignore
const element = super.onAdd(map);

10
src/leaflet/control/LinkControl.ts
View File

@ -1,19 +1,19 @@
import L, {ControlOptions} from 'leaflet';
import {Control, ControlOptions, DomUtil, Map} from 'leaflet';
import {useStore} from "@/store";
import linkIcon from '@/assets/icons/link.svg';
export class LinkControl extends L.Control {
export class LinkControl extends Control {
// @ts-ignore
options: ControlOptions
private _map ?: L.Map;
private _map ?: Map;
constructor(options: ControlOptions) {
super(options);
}
onAdd(map: L.Map) {
const linkButton = L.DomUtil.create('button', 'leaflet-control-link') as HTMLButtonElement;
onAdd(map: Map) {
const linkButton = DomUtil.create('button', 'leaflet-control-link') as HTMLButtonElement;
linkButton.type = 'button';
linkButton.title = 'Link';

10
src/leaflet/control/LogoControl.ts
View File

@ -1,4 +1,4 @@
import L, {ControlOptions} from 'leaflet';
import {Control, ControlOptions, DomUtil} from 'leaflet';
export interface LogoControlOptions extends ControlOptions {
url?: string;
@ -6,7 +6,7 @@ export interface LogoControlOptions extends ControlOptions {
text: string;
}
export class LogoControl extends L.Control {
export class LogoControl extends Control {
// @ts-ignore
options: LogoControlOptions;
@ -15,16 +15,16 @@ export class LogoControl extends L.Control {
}
onAdd(map: L.Map) {
const container = L.DomUtil.create('div', 'leaflet-control-logo');
const container = DomUtil.create('div', 'leaflet-control-logo');
let link;
if (this.options.url) {
link = L.DomUtil.create('a', '', container) as HTMLAnchorElement;
link = DomUtil.create('a', '', container) as HTMLAnchorElement;
link.href = this.options.url;
}
if (this.options.image) {
const image = L.DomUtil.create('img', '', link) as HTMLImageElement;
const image = DomUtil.create('img', '', link) as HTMLImageElement;
image.src = this.options.image;
image.alt = this.options.text;
} else {

10
src/leaflet/icon/DynmapIcon.ts
View File

@ -1,4 +1,4 @@
import L, {DivIconOptions, PointExpression, PointTuple} from 'leaflet';
import {DivIconOptions, PointExpression, Icon, DivIcon, DomUtil, point} from 'leaflet';
export interface DynmapIconOptions extends DivIconOptions {
icon: string;
@ -7,7 +7,7 @@ export interface DynmapIconOptions extends DivIconOptions {
isHtml?: boolean;
}
export class DynmapIcon extends L.DivIcon {
export class DynmapIcon extends DivIcon {
static defaultOptions: DynmapIconOptions = {
icon: 'default',
label: '',
@ -26,14 +26,14 @@ export class DynmapIcon extends L.DivIcon {
createIcon(oldIcon: HTMLElement) {
if (oldIcon) {
L.DomUtil.remove(oldIcon);
DomUtil.remove(oldIcon);
}
const div = document.createElement('div'),
img = document.createElement('img'),
label = document.createElement('span'),
url = `${window.config.url.markers}_markers_/${this.options.icon}.png`,
size = L.point(this.options.iconSize as PointExpression);
size = point(this.options.iconSize as PointExpression);
const sizeClass = [size.x, size.y].join('x');
@ -50,7 +50,7 @@ export class DynmapIcon extends L.DivIcon {
}
// @ts-ignore
L.Icon.prototype._setIconStyles.call(this, div, 'icon');
Icon.prototype._setIconStyles.call(this, div, 'icon');
div.appendChild(img);
div.appendChild(label);

6
src/leaflet/icon/PlayerIcon.ts
View File

@ -1,4 +1,4 @@
import L, {MarkerOptions} from 'leaflet';
import {MarkerOptions, DivIcon, DomUtil} from 'leaflet';
import {DynmapPlayer} from "@/dynmap";
import Util from '@/util';
@ -28,7 +28,7 @@ export interface PlayerIconOptions extends MarkerOptions {
showHealth: boolean,
}
export class PlayerIcon extends L.DivIcon {
export class PlayerIcon extends DivIcon {
private readonly _player: DynmapPlayer;
private _container?: HTMLDivElement;
private _playerImage?: HTMLImageElement;
@ -50,7 +50,7 @@ export class PlayerIcon extends L.DivIcon {
createIcon(oldIcon: HTMLElement) {
if (oldIcon) {
L.DomUtil.remove(oldIcon);
DomUtil.remove(oldIcon);
}
const player = this._player;

10
src/leaflet/layer/LayerManager.ts
View File

@ -1,12 +1,12 @@
import L from 'leaflet';
import {Map, Layer} from 'leaflet';
import {DynmapLayerControl} from "@/leaflet/control/DynmapLayerControl";
export default class LayerManager {
private showControl: boolean = false;
private readonly layerControl: DynmapLayerControl;
private readonly map: L.Map;
private readonly map: Map;
constructor(map: L.Map, showControl?: boolean) {
constructor(map: Map, showControl?: boolean) {
this.showControl = showControl || this.showControl;
this.map = map;
this.layerControl = new DynmapLayerControl({}, {},{
@ -18,7 +18,7 @@ export default class LayerManager {
}
}
addLayer(layer: L.Layer, showInControl: boolean, name: string, position: number) {
addLayer(layer: Layer, showInControl: boolean, name: string, position: number) {
this.map.addLayer(layer);
if(showInControl) {
@ -26,7 +26,7 @@ export default class LayerManager {
}
}
removeLayer(layer: L.Layer) {
removeLayer(layer: Layer) {
this.map.removeLayer(layer);
this.layerControl.removeLayer(layer);
}

4
src/leaflet/mapType/HDMapType.ts
View File

@ -1,4 +1,4 @@
import L from 'leaflet';
import {Util} from 'leaflet';
import HDProjection from "@/leaflet/projection/HDProjection";
import {Coordinate} from "@/dynmap";
import {DynmapTileLayer, DynmapTileLayerOptions} from "@/leaflet/tileLayer/DynmapTileLayer";
@ -18,7 +18,7 @@ export class HDMapType extends DynmapTileLayer {
options.tileSize = 128;
options.minZoom = 0;
L.Util.setOptions(this, options);
Util.setOptions(this, options);
this._projection = Object.freeze(new HDProjection({
mapToWorld: this._mapSettings.mapToWorld,
worldToMap: this._mapSettings.worldToMap,

8
src/leaflet/marker/PlayerMarker.ts
View File

@ -1,4 +1,4 @@
import L, {LatLng, MarkerOptions} from 'leaflet';
import {LatLng, MarkerOptions, Marker, Util} from 'leaflet';
import {DynmapPlayer} from "@/dynmap";
import {PlayerIcon} from "@/leaflet/icon/PlayerIcon";
@ -9,7 +9,7 @@ export interface PlayerMarkerOptions extends MarkerOptions {
showHealth: boolean,
}
export class PlayerMarker extends L.Marker {
export class PlayerMarker extends Marker {
private _player: DynmapPlayer;
constructor(player: DynmapPlayer, options: PlayerMarkerOptions) {
@ -24,7 +24,7 @@ export class PlayerMarker extends L.Marker {
showHealth: options.showHealth,
});
L.Util.setOptions(this, options);
Util.setOptions(this, options);
}
getIcon(): PlayerIcon {
@ -43,6 +43,6 @@ export class PlayerMarker extends L.Marker {
}
_resetZIndex() {
//Don't chnage the zindex
//Don't change the zindex
}
}

16
src/leaflet/projection/DynmapProjection.ts
View File

@ -1,25 +1,25 @@
import L from 'leaflet';
import {Util, LatLng, Class} from 'leaflet';
import {Coordinate} from "@/dynmap";
export interface DynmapProjectionOptions {}
export interface DynmapProjection {
locationToLatLng(location: Coordinate): L.LatLng;
latLngToLocation(latLng: L.LatLng, y: number): Coordinate;
locationToLatLng(location: Coordinate): LatLng;
latLngToLocation(latLng: LatLng, y: number): Coordinate;
}
export class DynmapProjection extends L.Class {
export class DynmapProjection extends Class {
constructor(options?: DynmapProjectionOptions) {
super();
L.Util.setOptions(this, options);
Util.setOptions(this, options);
}
locationToLatLng(location: Coordinate): L.LatLng {
return new L.LatLng(location.x, location.z);
locationToLatLng(location: Coordinate): LatLng {
return new LatLng(location.x, location.z);
}
latLngToLocation(latLng: L.LatLng, y: number): Coordinate {
latLngToLocation(latLng: LatLng, y: number): Coordinate {
return {x: latLng.lat, y, z: latLng.lng};
}
}

10
src/leaflet/projection/HDProjection.ts
View File

@ -1,5 +1,5 @@
import {DynmapProjection} from "@/leaflet/projection/DynmapProjection";
import L from 'leaflet';
import {Util, LatLng} from 'leaflet';
import {Coordinate} from "@/dynmap";
export interface HDProjectionOptions {
@ -15,20 +15,20 @@ export interface HDProjection extends DynmapProjection {
export class HDProjection extends DynmapProjection {
constructor(options: HDProjectionOptions) {
super(options);
L.Util.setOptions(this, options);
Util.setOptions(this, options);
}
locationToLatLng(location: Coordinate): L.LatLng {
locationToLatLng(location: Coordinate): LatLng {
const wtp = this.options.worldToMap,
lat = wtp[3] * location.x + wtp[4] * location.y + wtp[5] * location.z,
lng = wtp[0] * location.x + wtp[1] * location.y + wtp[2] * location.z;
return new L.LatLng(
return new LatLng(
-((128 - lat) / (1 << this.options.nativeZoomLevels)),
lng / (1 << this.options.nativeZoomLevels));
}
latLngToLocation(latLng: L.LatLng, y: number): Coordinate {
latLngToLocation(latLng: LatLng, y: number): Coordinate {
const ptw = this.options.mapToWorld,
lat = latLng.lng * (1 << this.options.nativeZoomLevels),
lon = 128 + latLng.lat * (1 << this.options.nativeZoomLevels),

14
src/leaflet/tileLayer/DynmapTileLayer.ts
View File

@ -1,4 +1,4 @@
import L, {Coords, DoneCallback, TileLayerOptions} from 'leaflet';
import {TileLayer, Coords, DoneCallback, TileLayerOptions, DomUtil, Util, LatLng} from 'leaflet';
import {DynmapProjection} from "@/leaflet/projection/DynmapProjection";
import {Coordinate, DynmapWorldMap} from "@/dynmap";
@ -7,7 +7,7 @@ export interface DynmapTileLayerOptions extends TileLayerOptions {
errorTileUrl: string;
}
export interface DynmapTileLayer extends L.TileLayer {
export interface DynmapTileLayer extends TileLayer {
options: DynmapTileLayerOptions;
_projection: DynmapProjection;
_mapSettings: DynmapWorldMap;
@ -17,9 +17,9 @@ export interface DynmapTileLayer extends L.TileLayer {
_loadQueue: DynmapTileElement[];
_loadingTiles: Set<DynmapTileElement>;
locationToLatLng(location: Coordinate): L.LatLng;
locationToLatLng(location: Coordinate): LatLng;
latLngToLocation(latLng: L.LatLng): Coordinate;
latLngToLocation(latLng: LatLng): Coordinate;
}
export interface DynmapTile {
@ -48,11 +48,11 @@ export interface TileInfo {
fmt: string;
}
export class DynmapTileLayer extends L.TileLayer {
export class DynmapTileLayer extends TileLayer {
constructor(options: DynmapTileLayerOptions) {
super('', options);
L.Util.setOptions(this, options);
Util.setOptions(this, options);
if (options.mapSettings === null) {
throw new TypeError("mapSettings missing");
@ -65,7 +65,7 @@ export class DynmapTileLayer extends L.TileLayer {
this._loadQueue = [];
this._loadingTiles = Object.seal(new Set());
this._tileTemplate = L.DomUtil.create('img', 'leaflet-tile') as DynmapTileElement;
this._tileTemplate = 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 = '';