kopia lustrzana https://github.com/FacilMap/facilmap
108 wiersze
3.3 KiB
TypeScript
108 wiersze
3.3 KiB
TypeScript
import Component from "vue-class-component";
|
|
import Vue from "vue";
|
|
import WithRender from "./toolbox.vue";
|
|
import "./toolbox.scss";
|
|
import { Prop } from "vue-property-decorator";
|
|
import Client from "facilmap-client";
|
|
import { InjectClient, InjectMapComponents, InjectMapContext } from "../../utils/decorators";
|
|
import { baseLayers, displayView, overlays, setBaseLayer, toggleOverlay } from "facilmap-leaflet";
|
|
import { Type, View } from "facilmap-types";
|
|
import About from "../about/about";
|
|
import Sidebar from "../ui/sidebar/sidebar";
|
|
import Icon from "../ui/icon/icon";
|
|
import context from "../context";
|
|
import PadSettings from "../pad-settings/pad-settings";
|
|
import SaveView from "../save-view/save-view";
|
|
import ManageViews from "../manage-views/manage-views";
|
|
import { drawLine, drawMarker } from "../../utils/draw";
|
|
import ManageTypes from "../manage-types/manage-types";
|
|
import EditFilter from "../edit-filter/edit-filter";
|
|
import History from "../history/history";
|
|
import { MapComponents, MapContext } from "../leaflet-map/leaflet-map";
|
|
|
|
@WithRender
|
|
@Component({
|
|
components: { About, EditFilter, History, Icon, ManageViews, ManageTypes, PadSettings, SaveView, Sidebar }
|
|
})
|
|
export default class Toolbox extends Vue {
|
|
|
|
@InjectClient() readonly client!: Client;
|
|
@InjectMapComponents() readonly mapComponents!: MapComponents;
|
|
@InjectMapContext() readonly mapContext!: MapContext;
|
|
@Prop({ type: Boolean, default: true }) readonly interactive!: boolean;
|
|
|
|
get isNarrow(): boolean {
|
|
return context.isNarrow;
|
|
}
|
|
|
|
get links(): Record<'osm' | 'google' | 'bing' | 'facilmap', string> {
|
|
const v = this.mapContext;
|
|
return {
|
|
osm: `https://www.openstreetmap.org/#map=${v.zoom}/${v.center.lat}/${v.center.lng}`,
|
|
google: `https://www.google.com/maps/@${v.center.lat},${v.center.lng},${v.zoom}z`,
|
|
bing: `https://www.bing.com/maps?cp=${v.center.lat}~${v.center.lng}&lvl=${v.zoom}`,
|
|
facilmap: `/#${v.hash && v.hash != "#" ? v.hash : `${v.zoom}/${v.center.lat}/${v.center.lng}`}`
|
|
};
|
|
}
|
|
|
|
get filterQuery(): Record<'q' | 'a', string> {
|
|
const v = this.mapContext;
|
|
if (v.filter) {
|
|
return {
|
|
q: `?filter=${encodeURIComponent(v.filter)}`,
|
|
a: `&filter=${encodeURIComponent(v.filter)}`
|
|
};
|
|
} else {
|
|
return { q: "", a: "" };
|
|
}
|
|
}
|
|
|
|
get baseLayers(): Array<{ key: string; name: string; active: boolean }> {
|
|
return Object.keys(baseLayers).map((key) => ({
|
|
key,
|
|
name: baseLayers[key].options.fmName!,
|
|
active: this.mapContext.layers.baseLayer === key
|
|
}));
|
|
}
|
|
|
|
get overlays(): Array<{ key: string; name: string; active: boolean }> {
|
|
return Object.keys(overlays).map((key) => ({
|
|
key,
|
|
name: overlays[key].options.fmName!,
|
|
active: this.mapContext.layers.overlays.includes(key)
|
|
}));
|
|
}
|
|
|
|
addObject(type: Type): void {
|
|
if(type.type == "marker")
|
|
this.addMarker(type);
|
|
else if(type.type == "line")
|
|
this.addLine(type);
|
|
}
|
|
|
|
addMarker(type: Type): void {
|
|
drawMarker(type, this, this.client, this.mapComponents);
|
|
}
|
|
|
|
addLine(type: Type): void {
|
|
drawLine(type, this, this.client, this.mapComponents);
|
|
}
|
|
|
|
displayView(view: View): void {
|
|
displayView(this.mapComponents.map, view);
|
|
}
|
|
|
|
setBaseLayer(key: string): void {
|
|
setBaseLayer(this.mapComponents.map, key);
|
|
}
|
|
|
|
toggleOverlay(key: string): void {
|
|
toggleOverlay(this.mapComponents.map, key);
|
|
}
|
|
|
|
importFile(): void {
|
|
this.mapContext.$emit("fm-import-file");
|
|
}
|
|
|
|
}
|