cleanup a bit more after build
This commit is contained in:
parent
b1342fcc0f
commit
0bb6f69fa4
GPG key ID:
3B7FBC22144E6398
3 changed files with 4 additions and 462 deletions
|
|
@ -1,6 +0,0 @@
|
||||||
10-overlay.ts 147
|
|
||||||
11-tilelayer.ts 37
|
|
||||||
20-createOverlayModal.ts 98
|
|
||||||
29-modalCollection.ts 10
|
|
||||||
30-handlers.ts 118
|
|
||||||
99-onyx-scry.ts 44
|
|
||||||
|
|
@ -36,5 +36,7 @@ tsc --strict --target ES2015 --outFile ../static/${progname}.js ${progname}.ts |
|
||||||
# translate lines into original source with the source map and output to stdout
|
# translate lines into original source with the source map and output to stdout
|
||||||
../buildtools/sourcemapper ${errorOut}
|
../buildtools/sourcemapper ${errorOut}
|
||||||
|
|
||||||
# delete the temporary file
|
# delete the temporary files
|
||||||
rm ${errorOut}
|
rm ${errorOut}
|
||||||
|
rm ${progname}.ts
|
||||||
|
rm .srcmap
|
||||||
454
src/onyx-scry.ts
454
src/onyx-scry.ts
|
|
@ -1,454 +0,0 @@
|
||||||
class Point implements L.LatLngLiteral {
|
|
||||||
lat: number = 0.00;
|
|
||||||
lng: number = 0.00;
|
|
||||||
}
|
|
||||||
|
|
||||||
enum OverlayType {
|
|
||||||
POINT = 0,
|
|
||||||
CIRCLE = 1,
|
|
||||||
POLYGON = 2,
|
|
||||||
}
|
|
||||||
|
|
||||||
interface Overlay {
|
|
||||||
name: string;
|
|
||||||
desc: string;
|
|
||||||
points: Point[];
|
|
||||||
options: any;
|
|
||||||
}
|
|
||||||
|
|
||||||
class OverlayData implements Overlay {
|
|
||||||
name: string;
|
|
||||||
desc: string;
|
|
||||||
points: Point[];
|
|
||||||
options: any;
|
|
||||||
type: OverlayType;
|
|
||||||
|
|
||||||
constructor(type: OverlayType, name: string, desc: string, points: Point[], options: any) {
|
|
||||||
this.type = type;
|
|
||||||
this.name = name;
|
|
||||||
this.desc = desc;
|
|
||||||
this.points = points;
|
|
||||||
this.options = options;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
abstract class OverlayBase implements Overlay {
|
|
||||||
name: string;
|
|
||||||
desc: string;
|
|
||||||
points: Point[];
|
|
||||||
options: any;
|
|
||||||
protected self: any;
|
|
||||||
|
|
||||||
constructor(name: string, desc: string, points: Point[], options: any) {
|
|
||||||
this.name = name;
|
|
||||||
this.desc = desc;
|
|
||||||
this.points = points;
|
|
||||||
this.options = options;
|
|
||||||
}
|
|
||||||
|
|
||||||
add(map: L.Map): void {
|
|
||||||
this.self.addTo(map);
|
|
||||||
}
|
|
||||||
|
|
||||||
remove(map: L.Map): void {
|
|
||||||
this.self.removeFrom(map);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
class Marker extends OverlayBase {
|
|
||||||
|
|
||||||
constructor(name: string, desc: string, point: Point, options: any) {
|
|
||||||
super(name, desc, [ point ], options);
|
|
||||||
this.self = L.marker(point);
|
|
||||||
this.self.bindPopup(`<h3>${name}</h3><p>${desc}</p>`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class Circle extends OverlayBase {
|
|
||||||
|
|
||||||
constructor(name: string, desc: string, point: Point, options: any) {
|
|
||||||
super(name, desc, [ point ], options);
|
|
||||||
this.self = L.circle(point, options);
|
|
||||||
this.self.bindPopup(`<h3>${name}</h3><p>${desc}</p>`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class Polygon extends OverlayBase {
|
|
||||||
|
|
||||||
constructor(name: string, desc: string, points: Point[], options: any) {
|
|
||||||
super(name, desc, points, options);
|
|
||||||
this.self = L.polygon(points, options);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class OverlayState {
|
|
||||||
markers: Marker[];
|
|
||||||
circles: Circle[];
|
|
||||||
polygons: Polygon[];
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
this.markers = [];
|
|
||||||
this.circles = [];
|
|
||||||
this.polygons = [];
|
|
||||||
}
|
|
||||||
|
|
||||||
static load(): OverlayState {
|
|
||||||
const store = localStorage.getItem("overlay_state");
|
|
||||||
if (store) {
|
|
||||||
const model = JSON.parse(store);
|
|
||||||
return {
|
|
||||||
markers: model.markers.map((m: OverlayData) => OverlayState.fromData(m)),
|
|
||||||
circles: model.circles.map((c: OverlayData) => OverlayState.fromData(c)),
|
|
||||||
polygons: model.polygons.map((p: OverlayData) => OverlayState.fromData(p)),
|
|
||||||
} as OverlayState
|
|
||||||
} else {
|
|
||||||
return new OverlayState();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
static save(overlayState: OverlayState): void {
|
|
||||||
localStorage.setItem("overlay_state", JSON.stringify({
|
|
||||||
markers: overlayState.markers.map((m: OverlayBase) => OverlayState.toData(m)),
|
|
||||||
circles: overlayState.circles.map((c: OverlayBase) => OverlayState.toData(c)),
|
|
||||||
polygons: overlayState.polygons.map((p: OverlayBase) => OverlayState.toData(p)),
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
|
|
||||||
static clear(overlayState: OverlayState, map: L.Map): OverlayState {
|
|
||||||
overlayState.markers.forEach((m: Marker) => m.remove(map));
|
|
||||||
overlayState.circles.forEach((c: Circle) => c.remove(map));
|
|
||||||
overlayState.polygons.forEach((p: Polygon) => p.remove(map));
|
|
||||||
|
|
||||||
return new OverlayState();
|
|
||||||
}
|
|
||||||
|
|
||||||
private static toData(source: OverlayBase): OverlayData {
|
|
||||||
let type = OverlayType.POINT;
|
|
||||||
if (source.points.length > 1) {
|
|
||||||
type = OverlayType.POLYGON;
|
|
||||||
} else if (source.options.radius) {
|
|
||||||
type = OverlayType.CIRCLE;
|
|
||||||
}
|
|
||||||
return new OverlayData(type, source.name, source.desc, source.points, source.options);
|
|
||||||
}
|
|
||||||
|
|
||||||
private static fromData(data: OverlayData): OverlayBase {
|
|
||||||
switch(data.type) {
|
|
||||||
case OverlayType.POINT:
|
|
||||||
return new Marker(data.name, data.desc, data.points[0], data.options);
|
|
||||||
case OverlayType.CIRCLE:
|
|
||||||
return new Circle(data.name, data.desc, data.points[0], data.options);
|
|
||||||
case OverlayType.POLYGON:
|
|
||||||
return new Polygon(data.name, data.desc, data.points, data.options);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}class TileLayerWrapper {
|
|
||||||
self: L.TileLayer;
|
|
||||||
name: string;
|
|
||||||
visible: boolean = false;
|
|
||||||
|
|
||||||
constructor(name: string, self: L.TileLayer) {
|
|
||||||
this.self = self;
|
|
||||||
this.name = name;
|
|
||||||
}
|
|
||||||
|
|
||||||
static constructLayer(name: string, self: L.TileLayer): TileLayerWrapper {
|
|
||||||
const wrapper = new TileLayerWrapper(name, self);
|
|
||||||
TileLayerWrapper.layers.push(wrapper);
|
|
||||||
return wrapper;
|
|
||||||
}
|
|
||||||
|
|
||||||
static getActiveLayer(): string | null {
|
|
||||||
for (const l of TileLayerWrapper.layers) {
|
|
||||||
if (l.visible == true) {
|
|
||||||
return l.name;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
static layers: TileLayerWrapper[] = new Array<TileLayerWrapper>();
|
|
||||||
static enableOnly(self: string, map: L.Map): void {
|
|
||||||
for (const l of TileLayerWrapper.layers) {
|
|
||||||
if (l.visible) {
|
|
||||||
l.self.removeFrom(map);
|
|
||||||
l.visible = false;
|
|
||||||
}
|
|
||||||
if (l.name == self) {
|
|
||||||
l.self.addTo(map);
|
|
||||||
l.visible = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}class CreateOverlayModal {
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
const _this = this;
|
|
||||||
const closeBtn = document.getElementById("createOverlay-closeBtn");
|
|
||||||
if (closeBtn) {
|
|
||||||
closeBtn.onclick = ()=>{_this.setVisible(false)};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
self(): HTMLElement | null {
|
|
||||||
return document.getElementById("createOverlay-container");
|
|
||||||
}
|
|
||||||
|
|
||||||
title(): HTMLElement | null{
|
|
||||||
return document.getElementById("createOverlay-title");
|
|
||||||
}
|
|
||||||
|
|
||||||
content(): HTMLElement | null {
|
|
||||||
return document.getElementById("createOverlay-content");
|
|
||||||
}
|
|
||||||
|
|
||||||
submitBtn(): HTMLElement | null {
|
|
||||||
return document.getElementById("createOverlay-submitBtn");
|
|
||||||
}
|
|
||||||
|
|
||||||
radiusContainer(): HTMLElement | null {
|
|
||||||
return document.getElementById("radius-container");
|
|
||||||
}
|
|
||||||
|
|
||||||
nameField(): string {
|
|
||||||
return (document.getElementById("createOverlay-name") as HTMLInputElement)?.value ?? "";
|
|
||||||
}
|
|
||||||
|
|
||||||
descField(): string {
|
|
||||||
return (document.getElementById("createOverlay-desc") as HTMLInputElement)?.value ?? "";
|
|
||||||
}
|
|
||||||
|
|
||||||
radiusField(): string {
|
|
||||||
return (document.getElementById("createOverlay-radius") as HTMLInputElement)?.value ?? "";
|
|
||||||
}
|
|
||||||
|
|
||||||
visible(): boolean {
|
|
||||||
return this.self()?.style.display != "none";
|
|
||||||
}
|
|
||||||
|
|
||||||
setVisible(v: boolean): void {
|
|
||||||
const modal = this.self();
|
|
||||||
if (modal) {
|
|
||||||
modal.style.display = v ? "block" : "none";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
setState(state: OverlayType, args: any): void {
|
|
||||||
const _this = this;
|
|
||||||
const title = this.title()
|
|
||||||
const radiusContainer = _this.radiusContainer();
|
|
||||||
const radius = _this.radiusField();
|
|
||||||
const name = _this.nameField();
|
|
||||||
const desc = _this.descField();
|
|
||||||
const submitBtn = _this.submitBtn();
|
|
||||||
|
|
||||||
if (radiusContainer) {
|
|
||||||
radiusContainer.style.display = state == OverlayType.CIRCLE ? "block" : "none";
|
|
||||||
}
|
|
||||||
|
|
||||||
switch (state) {
|
|
||||||
case OverlayType.POINT:
|
|
||||||
if (title) {
|
|
||||||
title.innerHTML = "Add Marker";
|
|
||||||
}
|
|
||||||
|
|
||||||
if (submitBtn) {
|
|
||||||
submitBtn.onclick = () => {
|
|
||||||
const point = new Marker(name, desc, args.latlng, {title: name, alt: name});
|
|
||||||
point.add(args.map);
|
|
||||||
args.overlays.markers.push(point);
|
|
||||||
_this.setVisible(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case OverlayType.CIRCLE:
|
|
||||||
if (title) {
|
|
||||||
title.innerHTML = "Add Circle";
|
|
||||||
}
|
|
||||||
if (submitBtn) {
|
|
||||||
submitBtn.onclick = () => {
|
|
||||||
const circle = new Circle(name, desc, args.latlng, {radius: Number(radius) || 500});
|
|
||||||
circle.add(args.map);
|
|
||||||
args.overlays.circles.push(circle);
|
|
||||||
_this.setVisible(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case OverlayType.POLYGON:
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}class ModalCollection {
|
|
||||||
createOverlay: CreateOverlayModal;
|
|
||||||
|
|
||||||
constructor(createOverlay: CreateOverlayModal) {
|
|
||||||
this.createOverlay = createOverlay;
|
|
||||||
}
|
|
||||||
|
|
||||||
closeAll(): void {
|
|
||||||
this.createOverlay.setVisible(false);
|
|
||||||
}
|
|
||||||
}class MapHandler {
|
|
||||||
map: L.Map;
|
|
||||||
overlays: OverlayState;
|
|
||||||
layers: TileLayerWrapper[];
|
|
||||||
modals: ModalCollection;
|
|
||||||
|
|
||||||
static instance: MapHandler | null = null;
|
|
||||||
|
|
||||||
private constructor(map: L.Map, overlays: OverlayState, layers: TileLayerWrapper[], modals: ModalCollection) {
|
|
||||||
this.map = map;
|
|
||||||
this.overlays = overlays;
|
|
||||||
this.layers = layers;
|
|
||||||
this.modals = modals;
|
|
||||||
}
|
|
||||||
|
|
||||||
static init(map: L.Map, overlays: OverlayState, layers: TileLayerWrapper[], modals: ModalCollection): void {
|
|
||||||
if (!MapHandler.instance) {
|
|
||||||
MapHandler.instance = new MapHandler(map, overlays, layers, modals);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
static setButtonClick(btnId: string, handler: any): void {
|
|
||||||
const button = document.getElementById(btnId);
|
|
||||||
if (button) {
|
|
||||||
button.onclick = handler;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
static resetMapClick(): void {
|
|
||||||
const self = MapHandler.instance;
|
|
||||||
if (self) {
|
|
||||||
try {
|
|
||||||
const addPointBtn = document.getElementById("addPoint-btn");
|
|
||||||
if (addPointBtn) {
|
|
||||||
addPointBtn.classList.remove("activeBtn");
|
|
||||||
}
|
|
||||||
self.map.off("click", this.addMarker);
|
|
||||||
} catch {}
|
|
||||||
try {
|
|
||||||
const addCircleBtn = document.getElementById("addCircle-btn");
|
|
||||||
if (addCircleBtn) {
|
|
||||||
addCircleBtn.classList.remove("activeBtn");
|
|
||||||
}
|
|
||||||
self.map.off("click", this.addCircle);
|
|
||||||
} catch {}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
static addMarker(e: any): void {
|
|
||||||
const self = MapHandler.instance;
|
|
||||||
if (self) {
|
|
||||||
self.modals.createOverlay.setVisible(true);
|
|
||||||
self.modals.createOverlay.setState(OverlayType.POINT, {
|
|
||||||
latlng: e.latlng,
|
|
||||||
map: self.map,
|
|
||||||
overlays: self.overlays,
|
|
||||||
});
|
|
||||||
MapHandler.resetMapClick();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
static addCircle(e: any): void {
|
|
||||||
const self = MapHandler.instance;
|
|
||||||
if (self) {
|
|
||||||
self.modals.createOverlay.setVisible(true);
|
|
||||||
self.modals.createOverlay.setState(OverlayType.CIRCLE, {
|
|
||||||
latlng: e.latlng,
|
|
||||||
map: self.map,
|
|
||||||
overlays: self.overlays,
|
|
||||||
});
|
|
||||||
MapHandler.resetMapClick();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
static circleCollect(e: any): void {
|
|
||||||
const self = MapHandler.instance;
|
|
||||||
if (self) {
|
|
||||||
self.modals.closeAll();
|
|
||||||
MapHandler.resetMapClick();
|
|
||||||
(e.target as HTMLElement).classList.add("activeBtn");
|
|
||||||
self.map.on("click", MapHandler.addCircle);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
static markerCollect(e: any): void {
|
|
||||||
const self = MapHandler.instance;
|
|
||||||
if (self) {
|
|
||||||
self.modals.closeAll();
|
|
||||||
MapHandler.resetMapClick();
|
|
||||||
(e.target as HTMLElement).classList.add("activeBtn");
|
|
||||||
self.map.on("click", MapHandler.addMarker);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
static overlaySave(e: any): void {
|
|
||||||
const self = MapHandler.instance;
|
|
||||||
if (self) {
|
|
||||||
OverlayState.save(self.overlays);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
static overlayClear(e: any): void {
|
|
||||||
const self = MapHandler.instance;
|
|
||||||
if (self) {
|
|
||||||
OverlayState.clear(self.overlays, self.map);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
static swapTiles(e: any): void {
|
|
||||||
const self = MapHandler.instance;
|
|
||||||
if (self) {
|
|
||||||
if (TileLayerWrapper.getActiveLayer() == "satelliteLayer") {
|
|
||||||
TileLayerWrapper.enableOnly("streetLayer", self.map);
|
|
||||||
} else {
|
|
||||||
TileLayerWrapper.enableOnly("satelliteLayer", self.map);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
function init(): void {
|
|
||||||
let overlays: OverlayState = OverlayState.load() ?? new OverlayState();
|
|
||||||
const map = L.map('map').setView([35.6653, -105.9507], 13);
|
|
||||||
|
|
||||||
const streetLayer = TileLayerWrapper.constructLayer(
|
|
||||||
"streetLayer",
|
|
||||||
L.tileLayer(
|
|
||||||
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
|
|
||||||
{
|
|
||||||
maxZoom: 19,
|
|
||||||
attribution: "street map tiles © OpenStreetMap"
|
|
||||||
}));
|
|
||||||
|
|
||||||
const satelliteLayer = TileLayerWrapper.constructLayer(
|
|
||||||
"satelliteLayer",
|
|
||||||
L.tileLayer(
|
|
||||||
'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
|
|
||||||
{
|
|
||||||
maxZoom: 19,
|
|
||||||
attribution: "satellite tiles © Esri"
|
|
||||||
}));
|
|
||||||
|
|
||||||
TileLayerWrapper.enableOnly("streetLayer", map);
|
|
||||||
|
|
||||||
overlays.markers.forEach(m=>m.add(map));
|
|
||||||
overlays.circles.forEach(m=>m.add(map));
|
|
||||||
overlays.polygons.forEach(m=>m.add(map));
|
|
||||||
const createOverlayModal = new CreateOverlayModal();
|
|
||||||
const modals = new ModalCollection(
|
|
||||||
createOverlayModal);
|
|
||||||
|
|
||||||
MapHandler.init(map, overlays, TileLayerWrapper.layers, modals);
|
|
||||||
|
|
||||||
MapHandler.setButtonClick("addPoint-btn", MapHandler.markerCollect);
|
|
||||||
MapHandler.setButtonClick("addCircle-btn", MapHandler.circleCollect);
|
|
||||||
|
|
||||||
MapHandler.setButtonClick("save-btn", MapHandler.overlaySave);
|
|
||||||
MapHandler.setButtonClick("clear-btn", MapHandler.overlayClear);
|
|
||||||
|
|
||||||
MapHandler.setButtonClick("tiles-btn", MapHandler.swapTiles);
|
|
||||||
}
|
|
||||||
|
|
||||||
init();
|
|
||||||
Loading…
Reference in a new issue