midgard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Reformat all files with prettier

Browse source
This commit is contained in:
Pieter Vander Vennet 2022-09-08 21:40:48 +02:00
parent e22d189376
commit b541d3eab4
382 changed files with 50893 additions and 35566 deletions
Download patch file Download diff file Expand all files Collapse all files

303
UI/BigComponents/DownloadPanel.ts
View file

@ -1,98 +1,105 @@
import {SubtleButton} from "../Base/SubtleButton";
import Svg from "../../Svg";
import Translations from "../i18n/Translations";
import State from "../../State";
import {Utils} from "../../Utils";
import Combine from "../Base/Combine";
import CheckBoxes from "../Input/Checkboxes";
import {GeoOperations} from "../../Logic/GeoOperations";
import Toggle from "../Input/Toggle";
import Title from "../Base/Title";
import FeaturePipeline from "../../Logic/FeatureSource/FeaturePipeline";
import {UIEventSource} from "../../Logic/UIEventSource";
import SimpleMetaTagger from "../../Logic/SimpleMetaTagger";
import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig";
import {BBox} from "../../Logic/BBox";
import FilteredLayer, {FilterState} from "../../Models/FilteredLayer";
import { SubtleButton } from "../Base/SubtleButton"
import Svg from "../../Svg"
import Translations from "../i18n/Translations"
import State from "../../State"
import { Utils } from "../../Utils"
import Combine from "../Base/Combine"
import CheckBoxes from "../Input/Checkboxes"
import { GeoOperations } from "../../Logic/GeoOperations"
import Toggle from "../Input/Toggle"
import Title from "../Base/Title"
import FeaturePipeline from "../../Logic/FeatureSource/FeaturePipeline"
import { UIEventSource } from "../../Logic/UIEventSource"
import SimpleMetaTagger from "../../Logic/SimpleMetaTagger"
import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig"
import { BBox } from "../../Logic/BBox"
import FilteredLayer, { FilterState } from "../../Models/FilteredLayer"
import geojson2svg from "geojson2svg"
import Constants from "../../Models/Constants";
import LayerConfig from "../../Models/ThemeConfig/LayerConfig";
import Constants from "../../Models/Constants"
import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
export class DownloadPanel extends Toggle {
constructor(state: {
filteredLayers: UIEventSource<FilteredLayer[]>
featurePipeline: FeaturePipeline,
layoutToUse: LayoutConfig,
currentBounds: UIEventSource<BBox>,
featurePipeline: FeaturePipeline
layoutToUse: LayoutConfig
currentBounds: UIEventSource<BBox>
}) {
const t = Translations.t.general.download
const name = State.state.layoutToUse.id;
const name = State.state.layoutToUse.id
const includeMetaToggle = new CheckBoxes([t.includeMetaData])
const metaisIncluded = includeMetaToggle.GetValue().map(selected => selected.length > 0)
const metaisIncluded = includeMetaToggle.GetValue().map((selected) => selected.length > 0)
const buttonGeoJson = new SubtleButton(
Svg.floppy_ui(),
new Combine([
t.downloadGeojson.SetClass("font-bold"),
t.downloadGeoJsonHelper,
]).SetClass("flex flex-col")
).OnClickWithLoading(t.exporting, async () => {
const geojson = DownloadPanel.getCleanGeoJson(state, metaisIncluded.data)
Utils.offerContentsAsDownloadableFile(
JSON.stringify(geojson, null, " "),
`MapComplete_${name}_export_${new Date().toISOString().substr(0, 19)}.geojson`,
{
mimetype: "application/vnd.geo+json",
}
)
})
const buttonGeoJson = new SubtleButton(Svg.floppy_ui(),
new Combine([t.downloadGeojson.SetClass("font-bold"),
t.downloadGeoJsonHelper]).SetClass("flex flex-col"))
.OnClickWithLoading(t.exporting, async () => {
const geojson = DownloadPanel.getCleanGeoJson(state, metaisIncluded.data)
Utils.offerContentsAsDownloadableFile(JSON.stringify(geojson, null, " "),
`MapComplete_${name}_export_${new Date().toISOString().substr(0, 19)}.geojson`, {
mimetype: "application/vnd.geo+json"
});
const buttonCSV = new SubtleButton(
Svg.floppy_ui(),
new Combine([t.downloadCSV.SetClass("font-bold"), t.downloadCSVHelper]).SetClass(
"flex flex-col"
)
).OnClickWithLoading(t.exporting, async () => {
const geojson = DownloadPanel.getCleanGeoJson(state, metaisIncluded.data)
const csv = GeoOperations.toCSV(geojson.features)
Utils.offerContentsAsDownloadableFile(
csv,
`MapComplete_${name}_export_${new Date().toISOString().substr(0, 19)}.csv`,
{
mimetype: "text/csv",
}
)
})
const buttonSvg = new SubtleButton(
Svg.floppy_ui(),
new Combine([t.downloadAsSvg.SetClass("font-bold"), t.downloadAsSvgHelper]).SetClass(
"flex flex-col"
)
).OnClickWithLoading(t.exporting, async () => {
const geojson = DownloadPanel.getCleanGeoJsonPerLayer(state, metaisIncluded.data)
const leafletdiv = document.getElementById("leafletDiv")
const csv = DownloadPanel.asSvg(geojson, {
layers: state.filteredLayers.data.map((l) => l.layerDef),
mapExtent: state.currentBounds.data,
width: leafletdiv.offsetWidth,
height: leafletdiv.offsetHeight,
})
Utils.offerContentsAsDownloadableFile(
csv,
`MapComplete_${name}_export_${new Date().toISOString().substr(0, 19)}.svg`,
{
mimetype: "image/svg+xml",
}
)
})
const buttonCSV = new SubtleButton(Svg.floppy_ui(), new Combine(
[t.downloadCSV.SetClass("font-bold"),
t.downloadCSVHelper]).SetClass("flex flex-col"))
.OnClickWithLoading(t.exporting, async () => {
const geojson = DownloadPanel.getCleanGeoJson(state, metaisIncluded.data)
const csv = GeoOperations.toCSV(geojson.features)
const downloadButtons = new Combine([
new Title(t.title),
buttonGeoJson,
buttonCSV,
buttonSvg,
includeMetaToggle,
t.licenseInfo.SetClass("link-underline"),
]).SetClass("w-full flex flex-col border-4 border-gray-300 rounded-3xl p-4")
Utils.offerContentsAsDownloadableFile(csv,
`MapComplete_${name}_export_${new Date().toISOString().substr(0, 19)}.csv`, {
mimetype: "text/csv"
});
})
const buttonSvg = new SubtleButton(Svg.floppy_ui(), new Combine(
[t.downloadAsSvg.SetClass("font-bold"),
t.downloadAsSvgHelper]).SetClass("flex flex-col"))
.OnClickWithLoading(t.exporting, async () => {
const geojson = DownloadPanel.getCleanGeoJsonPerLayer(state, metaisIncluded.data)
const leafletdiv = document.getElementById("leafletDiv")
const csv = DownloadPanel.asSvg(geojson,
{
layers: state.filteredLayers.data.map(l => l.layerDef),
mapExtent: state.currentBounds.data,
width: leafletdiv.offsetWidth,
height: leafletdiv.offsetHeight
})
Utils.offerContentsAsDownloadableFile(csv,
`MapComplete_${name}_export_${new Date().toISOString().substr(0, 19)}.svg`, {
mimetype: "image/svg+xml"
});
})
const downloadButtons = new Combine(
[new Title(t.title),
buttonGeoJson,
buttonCSV,
buttonSvg,
includeMetaToggle,
t.licenseInfo.SetClass("link-underline")])
.SetClass("w-full flex flex-col border-4 border-gray-300 rounded-3xl p-4")
super(
downloadButtons,
t.noDataLoaded,
state.featurePipeline.somethingLoaded)
super(downloadButtons, t.noDataLoaded, state.featurePipeline.somethingLoaded)
}
/**
@ -112,20 +119,21 @@ export class DownloadPanel extends Toggle {
* const perLayer = new Map<string, any[]>([["testlayer", [feature]]])
* DownloadPanel.asSvg(perLayer).replace(/\n/g, "") // => `<svg width="1000px" height="1000px" viewBox="0 0 1000 1000"> <g id="testlayer" inkscape:groupmode="layer" inkscape:label="testlayer"> <path d="M0,27.77777777777778 1000,472.22222222222223" style="fill:none;stroke-width:1" stroke="#ff0000"/> </g></svg>`
*/
public static asSvg(perLayer: Map<string, any[]>,
options?:
{
layers?: LayerConfig[],
width?: 1000 | number,
height?: 1000 | number,
mapExtent?: BBox
unit?: "px" | "mm" | string
}) {
public static asSvg(
perLayer: Map<string, any[]>,
options?: {
layers?: LayerConfig[]
width?: 1000 | number
height?: 1000 | number
mapExtent?: BBox
unit?: "px" | "mm" | string
}
) {
options = options ?? {}
const w = options.width ?? 1000
const h = options.height ?? 1000
const unit = options.unit ?? "px"
const mapExtent = {left: -180, bottom: -90, right: 180, top: 90}
const mapExtent = { left: -180, bottom: -90, right: 180, top: 90 }
if (options.mapExtent !== undefined) {
const bbox = options.mapExtent
mapExtent.left = bbox.minLon
@ -134,51 +142,50 @@ export class DownloadPanel extends Toggle {
mapExtent.top = bbox.maxLat
}
const elements: string [] = []
const elements: string[] = []
for (const layer of Array.from(perLayer.keys())) {
const features = perLayer.get(layer)
if(features.length === 0){
if (features.length === 0) {
continue
}
const layerDef = options?.layers?.find(l => l.id === layer)
const layerDef = options?.layers?.find((l) => l.id === layer)
const rendering = layerDef?.lineRendering[0]
const converter = geojson2svg({
viewportSize: {width: w, height: h},
const converter = geojson2svg({
viewportSize: { width: w, height: h },
mapExtent,
output: 'svg',
attributes:[
output: "svg",
attributes: [
{
property: "style",
type:'static',
value: "fill:none;stroke-width:1"
type: "static",
value: "fill:none;stroke-width:1",
},
{
property: 'properties.stroke',
type:'dynamic',
key: 'stroke'
}
]
});
property: "properties.stroke",
type: "dynamic",
key: "stroke",
},
],
})
for (const feature of features) {
const stroke = rendering?.color?.GetRenderValue(feature.properties)?.txt ?? "#ff0000"
const color = Utils.colorAsHex( Utils.color(stroke))
const stroke =
rendering?.color?.GetRenderValue(feature.properties)?.txt ?? "#ff0000"
const color = Utils.colorAsHex(Utils.color(stroke))
feature.properties.stroke = color
}
const groupPaths: string[] = converter.convert({type: "FeatureCollection", features})
const group = ` <g id="${layer}" inkscape:groupmode="layer" inkscape:label="${layer}">\n` +
groupPaths.map(p => " " + p).join("\n")
+ "\n </g>"
const groupPaths: string[] = converter.convert({ type: "FeatureCollection", features })
const group =
` <g id="${layer}" inkscape:groupmode="layer" inkscape:label="${layer}">\n` +
groupPaths.map((p) => " " + p).join("\n") +
"\n </g>"
elements.push(group)
}
const header = `<svg width="${w}${unit}" height="${h}${unit}" viewBox="0 0 ${w} ${h}">`
return header + "\n" + elements.join("\n") + "\n</svg>"
}
@ -189,48 +196,53 @@ export class DownloadPanel extends Toggle {
* @param includeMetaData
* @private
*/
private static getCleanGeoJson(state: {
featurePipeline: FeaturePipeline,
currentBounds: UIEventSource<BBox>,
filteredLayers: UIEventSource<FilteredLayer[]>
}, includeMetaData: boolean) {
private static getCleanGeoJson(
state: {
featurePipeline: FeaturePipeline
currentBounds: UIEventSource<BBox>
filteredLayers: UIEventSource<FilteredLayer[]>
},
includeMetaData: boolean
) {
const perLayer = DownloadPanel.getCleanGeoJsonPerLayer(state, includeMetaData)
const features = [].concat(...Array.from(perLayer.values()))
return {
type: "FeatureCollection",
features
features,
}
}
private static getCleanGeoJsonPerLayer(state: {
featurePipeline: FeaturePipeline,
currentBounds: UIEventSource<BBox>,
filteredLayers: UIEventSource<FilteredLayer[]>
}, includeMetaData: boolean): Map<string, any[]> /*{layerId --> geojsonFeatures[]}*/ {
const perLayer = new Map<string, any[]>();
const neededLayers = state.filteredLayers.data.map(l => l.layerDef.id)
private static getCleanGeoJsonPerLayer(
state: {
featurePipeline: FeaturePipeline
currentBounds: UIEventSource<BBox>
filteredLayers: UIEventSource<FilteredLayer[]>
},
includeMetaData: boolean
): Map<string, any[]> /*{layerId --> geojsonFeatures[]}*/ {
const perLayer = new Map<string, any[]>()
const neededLayers = state.filteredLayers.data.map((l) => l.layerDef.id)
const bbox = state.currentBounds.data
const featureList = state.featurePipeline.GetAllFeaturesAndMetaWithin(bbox, new Set(neededLayers));
outer : for (const tile of featureList) {
if(Constants.priviliged_layers.indexOf(tile.layer) >= 0){
const featureList = state.featurePipeline.GetAllFeaturesAndMetaWithin(
bbox,
new Set(neededLayers)
)
outer: for (const tile of featureList) {
if (Constants.priviliged_layers.indexOf(tile.layer) >= 0) {
continue
}
const layer = state.filteredLayers.data.find(fl => fl.layerDef.id === tile.layer)
const layer = state.filteredLayers.data.find((fl) => fl.layerDef.id === tile.layer)
if (!perLayer.has(tile.layer)) {
perLayer.set(tile.layer, [])
}
const featureList = perLayer.get(tile.layer)
const filters = layer.appliedFilters.data
for (const feature of tile.features) {
if (!bbox.overlapsWith(BBox.get(feature))) {
continue
}
if (filters !== undefined) {
for (let key of Array.from(filters.keys())) {
const filter: FilterState = filters.get(key)
@ -238,21 +250,21 @@ export class DownloadPanel extends Toggle {
continue
}
if (!filter.currentFilter.matchesProperties(feature.properties)) {
continue outer;
continue outer
}
}
}
const cleaned = {
type: feature.type,
geometry: {...feature.geometry},
properties: {...feature.properties}
geometry: { ...feature.geometry },
properties: { ...feature.properties },
}
if (!includeMetaData) {
for (const key in cleaned.properties) {
if (key === "_lon" || key === "_lat") {
continue;
continue
}
if (key.startsWith("_")) {
delete feature.properties[key]
@ -260,7 +272,11 @@ export class DownloadPanel extends Toggle {
}
}
const datedKeys = [].concat(SimpleMetaTagger.metatags.filter(tagging => tagging.includesDates).map(tagging => tagging.keys))
const datedKeys = [].concat(
SimpleMetaTagger.metatags
.filter((tagging) => tagging.includesDates)
.map((tagging) => tagging.keys)
)
for (const key of datedKeys) {
delete feature.properties[key]
}
@ -270,6 +286,5 @@ export class DownloadPanel extends Toggle {
}
return perLayer
}
}
}