diff --git a/Customizations/JSON/LayerConfig.ts b/Customizations/JSON/LayerConfig.ts index 994b4c37c5..3198a71bc3 100644 --- a/Customizations/JSON/LayerConfig.ts +++ b/Customizations/JSON/LayerConfig.ts @@ -1,562 +1,562 @@ import Translations from "../../UI/i18n/Translations"; import TagRenderingConfig from "./TagRenderingConfig"; -import { LayerConfigJson } from "./LayerConfigJson"; -import { FromJSON } from "./FromJSON"; +import {LayerConfigJson} from "./LayerConfigJson"; +import {FromJSON} from "./FromJSON"; import SharedTagRenderings from "../SharedTagRenderings"; -import { TagRenderingConfigJson } from "./TagRenderingConfigJson"; -import { Translation } from "../../UI/i18n/Translation"; +import {TagRenderingConfigJson} from "./TagRenderingConfigJson"; +import {Translation} from "../../UI/i18n/Translation"; import Svg from "../../Svg"; -import { Utils } from "../../Utils"; +import {Utils} from "../../Utils"; import Combine from "../../UI/Base/Combine"; -import { VariableUiElement } from "../../UI/Base/VariableUIElement"; -import { UIEventSource } from "../../Logic/UIEventSource"; -import { FixedUiElement } from "../../UI/Base/FixedUiElement"; +import {VariableUiElement} from "../../UI/Base/VariableUIElement"; +import {UIEventSource} from "../../Logic/UIEventSource"; +import {FixedUiElement} from "../../UI/Base/FixedUiElement"; import SourceConfig from "./SourceConfig"; -import { TagsFilter } from "../../Logic/Tags/TagsFilter"; -import { Tag } from "../../Logic/Tags/Tag"; +import {TagsFilter} from "../../Logic/Tags/TagsFilter"; +import {Tag} from "../../Logic/Tags/Tag"; import BaseUIElement from "../../UI/BaseUIElement"; -import { Unit } from "./Denomination"; +import {Unit} from "./Denomination"; import DeleteConfig from "./DeleteConfig"; import FilterConfig from "./FilterConfig"; export default class LayerConfig { - static WAYHANDLING_DEFAULT = 0; - static WAYHANDLING_CENTER_ONLY = 1; - static WAYHANDLING_CENTER_AND_WAY = 2; + static WAYHANDLING_DEFAULT = 0; + static WAYHANDLING_CENTER_ONLY = 1; + static WAYHANDLING_CENTER_AND_WAY = 2; - id: string; - name: Translation; - description: Translation; - source: SourceConfig; - calculatedTags: [string, string][]; - doNotDownload: boolean; - passAllFeatures: boolean; - isShown: TagRenderingConfig; - minzoom: number; - maxzoom: number; - title?: TagRenderingConfig; - titleIcons: TagRenderingConfig[]; - icon: TagRenderingConfig; - iconOverlays: { if: TagsFilter; then: TagRenderingConfig; badge: boolean }[]; - iconSize: TagRenderingConfig; - label: TagRenderingConfig; - rotation: TagRenderingConfig; - color: TagRenderingConfig; - width: TagRenderingConfig; - dashArray: TagRenderingConfig; - wayHandling: number; - public readonly units: Unit[]; - public readonly deletion: DeleteConfig | null; + id: string; + name: Translation; + description: Translation; + source: SourceConfig; + calculatedTags: [string, string][]; + doNotDownload: boolean; + passAllFeatures: boolean; + isShown: TagRenderingConfig; + minzoom: number; + maxzoom: number; + title?: TagRenderingConfig; + titleIcons: TagRenderingConfig[]; + icon: TagRenderingConfig; + iconOverlays: { if: TagsFilter; then: TagRenderingConfig; badge: boolean }[]; + iconSize: TagRenderingConfig; + label: TagRenderingConfig; + rotation: TagRenderingConfig; + color: TagRenderingConfig; + width: TagRenderingConfig; + dashArray: TagRenderingConfig; + wayHandling: number; + public readonly units: Unit[]; + public readonly deletion: DeleteConfig | null; - presets: { - title: Translation; - tags: Tag[]; - description?: Translation; - }[]; + presets: { + title: Translation; + tags: Tag[]; + description?: Translation; + }[]; - tagRenderings: TagRenderingConfig[]; - filters: FilterConfig[]; + tagRenderings: TagRenderingConfig[]; + filters: FilterConfig[]; - constructor( - json: LayerConfigJson, - units?: Unit[], - context?: string, - official: boolean = true - ) { - this.units = units ?? []; - context = context + "." + json.id; - const self = this; - this.id = json.id; - this.name = Translations.T(json.name, context + ".name"); - - if (json.description !== undefined) { - if (Object.keys(json.description).length === 0) { - json.description = undefined; - } - } - - this.description = Translations.T( - json.description, - context + ".description" - ); - - let legacy = undefined; - if (json["overpassTags"] !== undefined) { - // @ts-ignore - legacy = FromJSON.Tag(json["overpassTags"], context + ".overpasstags"); - } - if (json.source !== undefined) { - if (legacy !== undefined) { - throw ( - context + - "Both the legacy 'layer.overpasstags' and the new 'layer.source'-field are defined" - ); - } - - let osmTags: TagsFilter = legacy; - if (json.source["osmTags"]) { - osmTags = FromJSON.Tag( - json.source["osmTags"], - context + "source.osmTags" - ); - } - - if (json.source["geoJsonSource"] !== undefined) { - throw context + "Use 'geoJson' instead of 'geoJsonSource'"; - } - - this.source = new SourceConfig( - { - osmTags: osmTags, - geojsonSource: json.source["geoJson"], - geojsonSourceLevel: json.source["geoJsonZoomLevel"], - overpassScript: json.source["overpassScript"], - isOsmCache: json.source["isOsmCache"], - }, - this.id - ); - } else { - this.source = new SourceConfig({ - osmTags: legacy, - }); - } - - this.calculatedTags = undefined; - if (json.calculatedTags !== undefined) { - if (!official) { - console.warn( - `Unofficial theme ${this.id} with custom javascript! This is a security risk` - ); - } - this.calculatedTags = []; - for (const kv of json.calculatedTags) { - const index = kv.indexOf("="); - const key = kv.substring(0, index); - const code = kv.substring(index + 1); - - this.calculatedTags.push([key, code]); - } - } - - this.doNotDownload = json.doNotDownload ?? false; - this.passAllFeatures = json.passAllFeatures ?? false; - this.minzoom = json.minzoom ?? 0; - this.maxzoom = json.maxzoom ?? 1000; - this.wayHandling = json.wayHandling ?? 0; - this.presets = (json.presets ?? []).map((pr, i) => ({ - title: Translations.T(pr.title, `${context}.presets[${i}].title`), - tags: pr.tags.map((t) => FromJSON.SimpleTag(t)), - description: Translations.T( - pr.description, - `${context}.presets[${i}].description` - ), - })); - - /** Given a key, gets the corresponding property from the json (or the default if not found - * - * The found value is interpreted as a tagrendering and fetched/parsed - * */ - function tr(key: string, deflt) { - const v = json[key]; - if (v === undefined || v === null) { - if (deflt === undefined) { - return undefined; - } - return new TagRenderingConfig( - deflt, - self.source.osmTags, - `${context}.${key}.default value` - ); - } - if (typeof v === "string") { - const shared = SharedTagRenderings.SharedTagRendering.get(v); - if (shared) { - return shared; - } - } - return new TagRenderingConfig( - v, - self.source.osmTags, - `${context}.${key}` - ); - } - - /** - * Converts a list of tagRenderingCOnfigJSON in to TagRenderingConfig - * A string is interpreted as a name to call - */ - function trs( - tagRenderings?: (string | TagRenderingConfigJson)[], - readOnly = false + constructor( + json: LayerConfigJson, + units?: Unit[], + context?: string, + official: boolean = true ) { - if (tagRenderings === undefined) { - return []; - } + this.units = units ?? []; + context = context + "." + json.id; + const self = this; + this.id = json.id; + this.name = Translations.T(json.name, context + ".name"); - return Utils.NoNull( - tagRenderings.map((renderingJson, i) => { - if (typeof renderingJson === "string") { - if (renderingJson === "questions") { - if (readOnly) { - throw `A tagrendering has a question, but asking a question does not make sense here: is it a title icon or a geojson-layer? ${context}. The offending tagrendering is ${JSON.stringify( - renderingJson - )}`; - } + if (json.description !== undefined) { + if (Object.keys(json.description).length === 0) { + json.description = undefined; + } + } - return new TagRenderingConfig("questions", undefined); + this.description = Translations.T( + json.description, + context + ".description" + ); + + let legacy = undefined; + if (json["overpassTags"] !== undefined) { + // @ts-ignore + legacy = FromJSON.Tag(json["overpassTags"], context + ".overpasstags"); + } + if (json.source !== undefined) { + if (legacy !== undefined) { + throw ( + context + + "Both the legacy 'layer.overpasstags' and the new 'layer.source'-field are defined" + ); } - const shared = - SharedTagRenderings.SharedTagRendering.get(renderingJson); - if (shared !== undefined) { - return shared; + let osmTags: TagsFilter = legacy; + if (json.source["osmTags"]) { + osmTags = FromJSON.Tag( + json.source["osmTags"], + context + "source.osmTags" + ); } - const keys = Array.from( - SharedTagRenderings.SharedTagRendering.keys() + if (json.source["geoJsonSource"] !== undefined) { + throw context + "Use 'geoJson' instead of 'geoJsonSource'"; + } + + this.source = new SourceConfig( + { + osmTags: osmTags, + geojsonSource: json.source["geoJson"], + geojsonSourceLevel: json.source["geoJsonZoomLevel"], + overpassScript: json.source["overpassScript"], + isOsmCache: json.source["isOsmCache"], + }, + this.id ); + } else { + this.source = new SourceConfig({ + osmTags: legacy, + }); + } - if (Utils.runningFromConsole) { - return undefined; + this.calculatedTags = undefined; + if (json.calculatedTags !== undefined) { + if (!official) { + console.warn( + `Unofficial theme ${this.id} with custom javascript! This is a security risk` + ); + } + this.calculatedTags = []; + for (const kv of json.calculatedTags) { + const index = kv.indexOf("="); + const key = kv.substring(0, index); + const code = kv.substring(index + 1); + + this.calculatedTags.push([key, code]); + } + } + + this.doNotDownload = json.doNotDownload ?? false; + this.passAllFeatures = json.passAllFeatures ?? false; + this.minzoom = json.minzoom ?? 0; + this.maxzoom = json.maxzoom ?? 1000; + this.wayHandling = json.wayHandling ?? 0; + this.presets = (json.presets ?? []).map((pr, i) => ({ + title: Translations.T(pr.title, `${context}.presets[${i}].title`), + tags: pr.tags.map((t) => FromJSON.SimpleTag(t)), + description: Translations.T( + pr.description, + `${context}.presets[${i}].description` + ), + })); + + /** Given a key, gets the corresponding property from the json (or the default if not found + * + * The found value is interpreted as a tagrendering and fetched/parsed + * */ + function tr(key: string, deflt) { + const v = json[key]; + if (v === undefined || v === null) { + if (deflt === undefined) { + return undefined; + } + return new TagRenderingConfig( + deflt, + self.source.osmTags, + `${context}.${key}.default value` + ); + } + if (typeof v === "string") { + const shared = SharedTagRenderings.SharedTagRendering.get(v); + if (shared) { + return shared; + } + } + return new TagRenderingConfig( + v, + self.source.osmTags, + `${context}.${key}` + ); + } + + /** + * Converts a list of tagRenderingCOnfigJSON in to TagRenderingConfig + * A string is interpreted as a name to call + */ + function trs( + tagRenderings?: (string | TagRenderingConfigJson)[], + readOnly = false + ) { + if (tagRenderings === undefined) { + return []; } - throw `Predefined tagRendering ${renderingJson} not found in ${context}.\n Try one of ${keys.join( - ", " - )}\n If you intent to output this text literally, use {\"render\": } instead"}`; - } - return new TagRenderingConfig( - renderingJson, - self.source.osmTags, - `${context}.tagrendering[${i}]` - ); - }) - ); + return Utils.NoNull( + tagRenderings.map((renderingJson, i) => { + if (typeof renderingJson === "string") { + if (renderingJson === "questions") { + if (readOnly) { + throw `A tagrendering has a question, but asking a question does not make sense here: is it a title icon or a geojson-layer? ${context}. The offending tagrendering is ${JSON.stringify( + renderingJson + )}`; + } + + return new TagRenderingConfig("questions", undefined); + } + + const shared = + SharedTagRenderings.SharedTagRendering.get(renderingJson); + if (shared !== undefined) { + return shared; + } + + const keys = Array.from( + SharedTagRenderings.SharedTagRendering.keys() + ); + + if (Utils.runningFromConsole) { + return undefined; + } + + throw `Predefined tagRendering ${renderingJson} not found in ${context}.\n Try one of ${keys.join( + ", " + )}\n If you intent to output this text literally, use {\"render\": } instead"}`; + } + return new TagRenderingConfig( + renderingJson, + self.source.osmTags, + `${context}.tagrendering[${i}]` + ); + }) + ); + } + + this.tagRenderings = trs(json.tagRenderings, false); + + this.filters = (json.filter ?? []).map((option, i) => { + return new FilterConfig(option, `${context}.filter-[${i}]`) + }); + + const titleIcons = []; + const defaultIcons = [ + "phonelink", + "emaillink", + "wikipedialink", + "osmlink", + "sharelink", + ]; + for (const icon of json.titleIcons ?? defaultIcons) { + if (icon === "defaults") { + titleIcons.push(...defaultIcons); + } else { + titleIcons.push(icon); + } + } + + this.titleIcons = trs(titleIcons, true); + + this.title = tr("title", undefined); + this.icon = tr("icon", ""); + this.iconOverlays = (json.iconOverlays ?? []).map((overlay, i) => { + let tr = new TagRenderingConfig( + overlay.then, + self.source.osmTags, + `iconoverlays.${i}` + ); + if ( + typeof overlay.then === "string" && + SharedTagRenderings.SharedIcons.get(overlay.then) !== undefined + ) { + tr = SharedTagRenderings.SharedIcons.get(overlay.then); + } + return { + if: FromJSON.Tag(overlay.if), + then: tr, + badge: overlay.badge ?? false, + }; + }); + + const iconPath = this.icon.GetRenderValue({id: "node/-1"}).txt; + if (iconPath.startsWith(Utils.assets_path)) { + const iconKey = iconPath.substr(Utils.assets_path.length); + if (Svg.All[iconKey] === undefined) { + throw "Builtin SVG asset not found: " + iconPath; + } + } + this.isShown = tr("isShown", "yes"); + this.iconSize = tr("iconSize", "40,40,center"); + this.label = tr("label", ""); + this.color = tr("color", "#0000ff"); + this.width = tr("width", "7"); + this.rotation = tr("rotation", "0"); + this.dashArray = tr("dashArray", ""); + + this.deletion = null; + if (json.deletion === true) { + json.deletion = {}; + } + if (json.deletion !== undefined && json.deletion !== false) { + this.deletion = new DeleteConfig(json.deletion, `${context}.deletion`); + } + + if (json["showIf"] !== undefined) { + throw ( + "Invalid key on layerconfig " + + this.id + + ": showIf. Did you mean 'isShown' instead?" + ); + } } - this.tagRenderings = trs(json.tagRenderings, false); + public CustomCodeSnippets(): string[] { + if (this.calculatedTags === undefined) { + return []; + } - this.filters = (json.filter ?? []).map((option, i) => { - return new FilterConfig(option, `${context}.filter-[${i}]`) - }); - - const titleIcons = []; - const defaultIcons = [ - "phonelink", - "emaillink", - "wikipedialink", - "osmlink", - "sharelink", - ]; - for (const icon of json.titleIcons ?? defaultIcons) { - if (icon === "defaults") { - titleIcons.push(...defaultIcons); - } else { - titleIcons.push(icon); - } + return this.calculatedTags.map((code) => code[1]); } - this.titleIcons = trs(titleIcons, true); + public AddRoamingRenderings(addAll: { + tagRenderings: TagRenderingConfig[]; + titleIcons: TagRenderingConfig[]; + iconOverlays: { + if: TagsFilter; + then: TagRenderingConfig; + badge: boolean; + }[]; + }): LayerConfig { + let insertionPoint = this.tagRenderings + .map((tr) => tr.IsQuestionBoxElement()) + .indexOf(true); + if (insertionPoint < 0) { + // No 'questions' defined - we just add them all to the end + insertionPoint = this.tagRenderings.length; + } + this.tagRenderings.splice(insertionPoint, 0, ...addAll.tagRenderings); - this.title = tr("title", undefined); - this.icon = tr("icon", ""); - this.iconOverlays = (json.iconOverlays ?? []).map((overlay, i) => { - let tr = new TagRenderingConfig( - overlay.then, - self.source.osmTags, - `iconoverlays.${i}` - ); - if ( - typeof overlay.then === "string" && - SharedTagRenderings.SharedIcons.get(overlay.then) !== undefined - ) { - tr = SharedTagRenderings.SharedIcons.get(overlay.then); - } - return { - if: FromJSON.Tag(overlay.if), - then: tr, - badge: overlay.badge ?? false, - }; - }); - - const iconPath = this.icon.GetRenderValue({ id: "node/-1" }).txt; - if (iconPath.startsWith(Utils.assets_path)) { - const iconKey = iconPath.substr(Utils.assets_path.length); - if (Svg.All[iconKey] === undefined) { - throw "Builtin SVG asset not found: " + iconPath; - } - } - this.isShown = tr("isShown", "yes"); - this.iconSize = tr("iconSize", "40,40,center"); - this.label = tr("label", ""); - this.color = tr("color", "#0000ff"); - this.width = tr("width", "7"); - this.rotation = tr("rotation", "0"); - this.dashArray = tr("dashArray", ""); - - this.deletion = null; - if (json.deletion === true) { - json.deletion = {}; - } - if (json.deletion !== undefined && json.deletion !== false) { - this.deletion = new DeleteConfig(json.deletion, `${context}.deletion`); + this.iconOverlays.push(...addAll.iconOverlays); + for (const icon of addAll.titleIcons) { + this.titleIcons.splice(0, 0, icon); + } + return this; } - if (json["showIf"] !== undefined) { - throw ( - "Invalid key on layerconfig " + - this.id + - ": showIf. Did you mean 'isShown' instead?" - ); - } - } + public GetRoamingRenderings(): { + tagRenderings: TagRenderingConfig[]; + titleIcons: TagRenderingConfig[]; + iconOverlays: { + if: TagsFilter; + then: TagRenderingConfig; + badge: boolean; + }[]; + } { + const tagRenderings = this.tagRenderings.filter((tr) => tr.roaming); + const titleIcons = this.titleIcons.filter((tr) => tr.roaming); + const iconOverlays = this.iconOverlays.filter((io) => io.then.roaming); - public CustomCodeSnippets(): string[] { - if (this.calculatedTags === undefined) { - return []; + return { + tagRenderings: tagRenderings, + titleIcons: titleIcons, + iconOverlays: iconOverlays, + }; } - return this.calculatedTags.map((code) => code[1]); - } + public GenerateLeafletStyle( + tags: UIEventSource, + clickable: boolean, + widthHeight = "100%" + ): { + icon: { + html: BaseUIElement; + iconSize: [number, number]; + iconAnchor: [number, number]; + popupAnchor: [number, number]; + iconUrl: string; + className: string; + }; + color: string; + weight: number; + dashArray: number[]; + } { + function num(str, deflt = 40) { + const n = Number(str); + if (isNaN(n)) { + return deflt; + } + return n; + } - public AddRoamingRenderings(addAll: { - tagRenderings: TagRenderingConfig[]; - titleIcons: TagRenderingConfig[]; - iconOverlays: { - if: TagsFilter; - then: TagRenderingConfig; - badge: boolean; - }[]; - }): LayerConfig { - let insertionPoint = this.tagRenderings - .map((tr) => tr.IsQuestionBoxElement()) - .indexOf(true); - if (insertionPoint < 0) { - // No 'questions' defined - we just add them all to the end - insertionPoint = this.tagRenderings.length; - } - this.tagRenderings.splice(insertionPoint, 0, ...addAll.tagRenderings); + function rendernum(tr: TagRenderingConfig, deflt: number) { + const str = Number(render(tr, "" + deflt)); + const n = Number(str); + if (isNaN(n)) { + return deflt; + } + return n; + } - this.iconOverlays.push(...addAll.iconOverlays); - for (const icon of addAll.titleIcons) { - this.titleIcons.splice(0, 0, icon); - } - return this; - } + function render(tr: TagRenderingConfig, deflt?: string) { + const str = tr?.GetRenderValue(tags.data)?.txt ?? deflt; + return Utils.SubstituteKeys(str, tags.data).replace(/{.*}/g, ""); + } - public GetRoamingRenderings(): { - tagRenderings: TagRenderingConfig[]; - titleIcons: TagRenderingConfig[]; - iconOverlays: { - if: TagsFilter; - then: TagRenderingConfig; - badge: boolean; - }[]; - } { - const tagRenderings = this.tagRenderings.filter((tr) => tr.roaming); - const titleIcons = this.titleIcons.filter((tr) => tr.roaming); - const iconOverlays = this.iconOverlays.filter((io) => io.then.roaming); + const iconSize = render(this.iconSize, "40,40,center").split(","); + const dashArray = render(this.dashArray).split(" ").map(Number); + let color = render(this.color, "#00f"); - return { - tagRenderings: tagRenderings, - titleIcons: titleIcons, - iconOverlays: iconOverlays, - }; - } + if (color.startsWith("--")) { + color = getComputedStyle(document.body).getPropertyValue( + "--catch-detail-color" + ); + } - public GenerateLeafletStyle( - tags: UIEventSource, - clickable: boolean, - widthHeight = "100%" - ): { - icon: { - html: BaseUIElement; - iconSize: [number, number]; - iconAnchor: [number, number]; - popupAnchor: [number, number]; - iconUrl: string; - className: string; - }; - color: string; - weight: number; - dashArray: number[]; - } { - function num(str, deflt = 40) { - const n = Number(str); - if (isNaN(n)) { - return deflt; - } - return n; + const weight = rendernum(this.width, 5); + + const iconW = num(iconSize[0]); + let iconH = num(iconSize[1]); + const mode = iconSize[2]?.trim()?.toLowerCase() ?? "center"; + + let anchorW = iconW / 2; + let anchorH = iconH / 2; + if (mode === "left") { + anchorW = 0; + } + if (mode === "right") { + anchorW = iconW; + } + + if (mode === "top") { + anchorH = 0; + } + if (mode === "bottom") { + anchorH = iconH; + } + + const iconUrlStatic = render(this.icon); + const self = this; + const mappedHtml = tags.map((tgs) => { + function genHtmlFromString(sourcePart: string): BaseUIElement { + const style = `width:100%;height:100%;transform: rotate( ${rotation} );display:block;position: absolute; top: 0; left: 0`; + let html: BaseUIElement = new FixedUiElement( + `` + ); + const match = sourcePart.match(/([a-zA-Z0-9_]*):([^;]*)/); + if (match !== null && Svg.All[match[1] + ".svg"] !== undefined) { + html = new Combine([ + (Svg.All[match[1] + ".svg"] as string).replace( + /#000000/g, + match[2] + ), + ]).SetStyle(style); + } + return html; + } + + // What do you mean, 'tgs' is never read? + // It is read implicitly in the 'render' method + const iconUrl = render(self.icon); + const rotation = render(self.rotation, "0deg"); + + let htmlParts: BaseUIElement[] = []; + let sourceParts = Utils.NoNull( + iconUrl.split(";").filter((prt) => prt != "") + ); + for (const sourcePart of sourceParts) { + htmlParts.push(genHtmlFromString(sourcePart)); + } + + let badges = []; + for (const iconOverlay of self.iconOverlays) { + if (!iconOverlay.if.matchesProperties(tgs)) { + continue; + } + if (iconOverlay.badge) { + const badgeParts: BaseUIElement[] = []; + const partDefs = iconOverlay.then + .GetRenderValue(tgs) + .txt.split(";") + .filter((prt) => prt != ""); + + for (const badgePartStr of partDefs) { + badgeParts.push(genHtmlFromString(badgePartStr)); + } + + const badgeCompound = new Combine(badgeParts).SetStyle( + "display:flex;position:relative;width:100%;height:100%;" + ); + + badges.push(badgeCompound); + } else { + htmlParts.push( + genHtmlFromString(iconOverlay.then.GetRenderValue(tgs).txt) + ); + } + } + + if (badges.length > 0) { + const badgesComponent = new Combine(badges).SetStyle( + "display:flex;height:50%;width:100%;position:absolute;top:50%;left:50%;" + ); + htmlParts.push(badgesComponent); + } + + if (sourceParts.length == 0) { + iconH = 0; + } + try { + const label = self.label + ?.GetRenderValue(tgs) + ?.Subs(tgs) + ?.SetClass("block text-center") + ?.SetStyle("margin-top: " + (iconH + 2) + "px"); + if (label !== undefined) { + htmlParts.push( + new Combine([label]).SetClass("flex flex-col items-center") + ); + } + } catch (e) { + console.error(e, tgs); + } + return new Combine(htmlParts); + }); + + return { + icon: { + html: new VariableUiElement(mappedHtml), + iconSize: [iconW, iconH], + iconAnchor: [anchorW, anchorH], + popupAnchor: [0, 3 - anchorH], + iconUrl: iconUrlStatic, + className: clickable + ? "leaflet-div-icon" + : "leaflet-div-icon unclickable", + }, + color: color, + weight: weight, + dashArray: dashArray, + }; } - function rendernum(tr: TagRenderingConfig, deflt: number) { - const str = Number(render(tr, "" + deflt)); - const n = Number(str); - if (isNaN(n)) { - return deflt; - } - return n; - } - - function render(tr: TagRenderingConfig, deflt?: string) { - const str = tr?.GetRenderValue(tags.data)?.txt ?? deflt; - return Utils.SubstituteKeys(str, tags.data).replace(/{.*}/g, ""); - } - - const iconSize = render(this.iconSize, "40,40,center").split(","); - const dashArray = render(this.dashArray).split(" ").map(Number); - let color = render(this.color, "#00f"); - - if (color.startsWith("--")) { - color = getComputedStyle(document.body).getPropertyValue( - "--catch-detail-color" - ); - } - - const weight = rendernum(this.width, 5); - - const iconW = num(iconSize[0]); - let iconH = num(iconSize[1]); - const mode = iconSize[2]?.trim()?.toLowerCase() ?? "center"; - - let anchorW = iconW / 2; - let anchorH = iconH / 2; - if (mode === "left") { - anchorW = 0; - } - if (mode === "right") { - anchorW = iconW; - } - - if (mode === "top") { - anchorH = 0; - } - if (mode === "bottom") { - anchorH = iconH; - } - - const iconUrlStatic = render(this.icon); - const self = this; - const mappedHtml = tags.map((tgs) => { - function genHtmlFromString(sourcePart: string): BaseUIElement { - const style = `width:100%;height:100%;transform: rotate( ${rotation} );display:block;position: absolute; top: 0; left: 0`; - let html: BaseUIElement = new FixedUiElement( - `` + public ExtractImages(): Set { + const parts: Set[] = []; + parts.push(...this.tagRenderings?.map((tr) => tr.ExtractImages(false))); + parts.push(...this.titleIcons?.map((tr) => tr.ExtractImages(true))); + parts.push(this.icon?.ExtractImages(true)); + parts.push( + ...this.iconOverlays?.map((overlay) => overlay.then.ExtractImages(true)) ); - const match = sourcePart.match(/([a-zA-Z0-9_]*):([^;]*)/); - if (match !== null && Svg.All[match[1] + ".svg"] !== undefined) { - html = new Combine([ - (Svg.All[match[1] + ".svg"] as string).replace( - /#000000/g, - match[2] - ), - ]).SetStyle(style); + for (const preset of this.presets) { + parts.push(new Set(preset.description?.ExtractImages(false))); } - return html; - } - // What do you mean, 'tgs' is never read? - // It is read implicitly in the 'render' method - const iconUrl = render(self.icon); - const rotation = render(self.rotation, "0deg"); - - let htmlParts: BaseUIElement[] = []; - let sourceParts = Utils.NoNull( - iconUrl.split(";").filter((prt) => prt != "") - ); - for (const sourcePart of sourceParts) { - htmlParts.push(genHtmlFromString(sourcePart)); - } - - let badges = []; - for (const iconOverlay of self.iconOverlays) { - if (!iconOverlay.if.matchesProperties(tgs)) { - continue; + const allIcons = new Set(); + for (const part of parts) { + part?.forEach(allIcons.add, allIcons); } - if (iconOverlay.badge) { - const badgeParts: BaseUIElement[] = []; - const partDefs = iconOverlay.then - .GetRenderValue(tgs) - .txt.split(";") - .filter((prt) => prt != ""); - for (const badgePartStr of partDefs) { - badgeParts.push(genHtmlFromString(badgePartStr)); - } - - const badgeCompound = new Combine(badgeParts).SetStyle( - "display:flex;position:relative;width:100%;height:100%;" - ); - - badges.push(badgeCompound); - } else { - htmlParts.push( - genHtmlFromString(iconOverlay.then.GetRenderValue(tgs).txt) - ); - } - } - - if (badges.length > 0) { - const badgesComponent = new Combine(badges).SetStyle( - "display:flex;height:50%;width:100%;position:absolute;top:50%;left:50%;" - ); - htmlParts.push(badgesComponent); - } - - if (sourceParts.length == 0) { - iconH = 0; - } - try { - const label = self.label - ?.GetRenderValue(tgs) - ?.Subs(tgs) - ?.SetClass("block text-center") - ?.SetStyle("margin-top: " + (iconH + 2) + "px"); - if (label !== undefined) { - htmlParts.push( - new Combine([label]).SetClass("flex flex-col items-center") - ); - } - } catch (e) { - console.error(e, tgs); - } - return new Combine(htmlParts); - }); - - return { - icon: { - html: new VariableUiElement(mappedHtml), - iconSize: [iconW, iconH], - iconAnchor: [anchorW, anchorH], - popupAnchor: [0, 3 - anchorH], - iconUrl: iconUrlStatic, - className: clickable - ? "leaflet-div-icon" - : "leaflet-div-icon unclickable", - }, - color: color, - weight: weight, - dashArray: dashArray, - }; - } - - public ExtractImages(): Set { - const parts: Set[] = []; - parts.push(...this.tagRenderings?.map((tr) => tr.ExtractImages(false))); - parts.push(...this.titleIcons?.map((tr) => tr.ExtractImages(true))); - parts.push(this.icon?.ExtractImages(true)); - parts.push( - ...this.iconOverlays?.map((overlay) => overlay.then.ExtractImages(true)) - ); - for (const preset of this.presets) { - parts.push(new Set(preset.description?.ExtractImages(false))); + return allIcons; } - - const allIcons = new Set(); - for (const part of parts) { - part?.forEach(allIcons.add, allIcons); - } - - return allIcons; - } } diff --git a/InitUiElements.ts b/InitUiElements.ts index 3ed379c103..c47b0a0053 100644 --- a/InitUiElements.ts +++ b/InitUiElements.ts @@ -1,19 +1,19 @@ -import { CenterFlexedElement } from "./UI/Base/CenterFlexedElement"; -import { FixedUiElement } from "./UI/Base/FixedUiElement"; +import {CenterFlexedElement} from "./UI/Base/CenterFlexedElement"; +import {FixedUiElement} from "./UI/Base/FixedUiElement"; import Toggle from "./UI/Input/Toggle"; -import { Basemap } from "./UI/BigComponents/Basemap"; +import {Basemap} from "./UI/BigComponents/Basemap"; import State from "./State"; import LoadFromOverpass from "./Logic/Actors/OverpassFeatureSource"; -import { UIEventSource } from "./Logic/UIEventSource"; -import { QueryParameters } from "./Logic/Web/QueryParameters"; +import {UIEventSource} from "./Logic/UIEventSource"; +import {QueryParameters} from "./Logic/Web/QueryParameters"; import StrayClickHandler from "./Logic/Actors/StrayClickHandler"; import SimpleAddUI from "./UI/BigComponents/SimpleAddUI"; import CenterMessageBox from "./UI/CenterMessageBox"; import UserBadge from "./UI/BigComponents/UserBadge"; import SearchAndGo from "./UI/BigComponents/SearchAndGo"; import GeoLocationHandler from "./Logic/Actors/GeoLocationHandler"; -import { LocalStorageSource } from "./Logic/Web/LocalStorageSource"; -import { Utils } from "./Utils"; +import {LocalStorageSource} from "./Logic/Web/LocalStorageSource"; +import {Utils} from "./Utils"; import Svg from "./Svg"; import Link from "./UI/Base/Link"; import * as personal from "./assets/themes/personalLayout/personalLayout.json"; @@ -34,571 +34,572 @@ import MapControlButton from "./UI/MapControlButton"; import Combine from "./UI/Base/Combine"; import SelectedFeatureHandler from "./Logic/Actors/SelectedFeatureHandler"; import LZString from "lz-string"; -import { LayoutConfigJson } from "./Customizations/JSON/LayoutConfigJson"; +import {LayoutConfigJson} from "./Customizations/JSON/LayoutConfigJson"; import AttributionPanel from "./UI/BigComponents/AttributionPanel"; import ContributorCount from "./Logic/ContributorCount"; import FeatureSource from "./Logic/FeatureSource/FeatureSource"; import AllKnownLayers from "./Customizations/AllKnownLayers"; import LayerConfig from "./Customizations/JSON/LayerConfig"; import AvailableBaseLayers from "./Logic/Actors/AvailableBaseLayers"; -import { SimpleMapScreenshoter } from "leaflet-simple-map-screenshoter"; +import {SimpleMapScreenshoter} from "leaflet-simple-map-screenshoter"; import jsPDF from "jspdf"; import FilterView from "./UI/BigComponents/FilterView"; export class InitUiElements { - static InitAll( - layoutToUse: LayoutConfig, - layoutFromBase64: string, - testing: UIEventSource, - layoutName: string, - layoutDefinition: string = "" - ) { - if (layoutToUse === undefined) { - console.log("Incorrect layout"); - new FixedUiElement( - `Error: incorrect layout ${layoutName}
Go back` - ) - .AttachTo("centermessage") - .onClick(() => {}); - throw "Incorrect layout"; - } - - console.log( - "Using layout: ", - layoutToUse.id, - "LayoutFromBase64 is ", - layoutFromBase64 - ); - - State.state = new State(layoutToUse); - - // This 'leaks' the global state via the window object, useful for debugging - // @ts-ignore - window.mapcomplete_state = State.state; - - if (layoutToUse.hideFromOverview) { - State.state.osmConnection - .GetPreference("hidden-theme-" + layoutToUse.id + "-enabled") - .setData("true"); - } - - if (layoutFromBase64 !== "false") { - State.state.layoutDefinition = layoutDefinition; - console.log( - "Layout definition:", - Utils.EllipsesAfter(State.state.layoutDefinition, 100) - ); - if (testing.data !== "true") { - State.state.osmConnection.OnLoggedIn(() => { - State.state.osmConnection - .GetLongPreference("installed-theme-" + layoutToUse.id) - .setData(State.state.layoutDefinition); - }); - } else { - console.warn( - "NOT saving custom layout to OSM as we are tesing -> probably in an iFrame" - ); - } - } - - function updateFavs() { - // This is purely for the personal theme to load the layers there - const favs = State.state.favouriteLayers.data ?? []; - - const neededLayers = new Set(); - - console.log("Favourites are: ", favs); - layoutToUse.layers.splice(0, layoutToUse.layers.length); - let somethingChanged = false; - for (const fav of favs) { - if (AllKnownLayers.sharedLayers.has(fav)) { - const layer = AllKnownLayers.sharedLayers.get(fav); - if (!neededLayers.has(layer)) { - neededLayers.add(layer); - somethingChanged = true; - } - } - - for (const layouts of State.state.installedThemes.data) { - for (const layer of layouts.layout.layers) { - if (typeof layer === "string") { - continue; - } - if (layer.id === fav) { - if (!neededLayers.has(layer)) { - neededLayers.add(layer); - somethingChanged = true; - } - } - } - } - } - if (somethingChanged) { - console.log("layoutToUse.layers:", layoutToUse.layers); - State.state.layoutToUse.data.layers = Array.from(neededLayers); - State.state.layoutToUse.ping(); - State.state.layerUpdater?.ForceRefresh(); - } - } - - if (layoutToUse.customCss !== undefined) { - Utils.LoadCustomCss(layoutToUse.customCss); - } - - InitUiElements.InitBaseMap(); - - InitUiElements.OnlyIf(State.state.featureSwitchUserbadge, () => { - new UserBadge().AttachTo("userbadge"); - }); - - InitUiElements.OnlyIf(State.state.featureSwitchSearch, () => { - new SearchAndGo().AttachTo("searchbox"); - }); - - InitUiElements.OnlyIf(State.state.featureSwitchWelcomeMessage, () => { - InitUiElements.InitWelcomeMessage(); - }); - - if ( - (window != window.top && !State.state.featureSwitchWelcomeMessage.data) || - State.state.featureSwitchIframe.data + static InitAll( + layoutToUse: LayoutConfig, + layoutFromBase64: string, + testing: UIEventSource, + layoutName: string, + layoutDefinition: string = "" ) { - const currentLocation = State.state.locationControl; - const url = `${window.location.origin}${window.location.pathname}?z=${ - currentLocation.data.zoom ?? 0 - }&lat=${currentLocation.data.lat ?? 0}&lon=${ - currentLocation.data.lon ?? 0 - }`; - new MapControlButton( - new Link(Svg.pop_out_img, url, true).SetClass( - "block w-full h-full p-1.5" - ) - ).AttachTo("messagesbox"); - } + if (layoutToUse === undefined) { + console.log("Incorrect layout"); + new FixedUiElement( + `Error: incorrect layout ${layoutName}
Go back` + ) + .AttachTo("centermessage") + .onClick(() => { + }); + throw "Incorrect layout"; + } - State.state.osmConnection.userDetails - .map((userDetails: UserDetails) => userDetails?.home) - .addCallbackAndRunD((home) => { - const color = getComputedStyle(document.body).getPropertyValue( - "--subtle-detail-color" + console.log( + "Using layout: ", + layoutToUse.id, + "LayoutFromBase64 is ", + layoutFromBase64 ); - const icon = L.icon({ - iconUrl: Img.AsData(Svg.home_white_bg.replace(/#ffffff/g, color)), - iconSize: [30, 30], - iconAnchor: [15, 15], + + State.state = new State(layoutToUse); + + // This 'leaks' the global state via the window object, useful for debugging + // @ts-ignore + window.mapcomplete_state = State.state; + + if (layoutToUse.hideFromOverview) { + State.state.osmConnection + .GetPreference("hidden-theme-" + layoutToUse.id + "-enabled") + .setData("true"); + } + + if (layoutFromBase64 !== "false") { + State.state.layoutDefinition = layoutDefinition; + console.log( + "Layout definition:", + Utils.EllipsesAfter(State.state.layoutDefinition, 100) + ); + if (testing.data !== "true") { + State.state.osmConnection.OnLoggedIn(() => { + State.state.osmConnection + .GetLongPreference("installed-theme-" + layoutToUse.id) + .setData(State.state.layoutDefinition); + }); + } else { + console.warn( + "NOT saving custom layout to OSM as we are tesing -> probably in an iFrame" + ); + } + } + + function updateFavs() { + // This is purely for the personal theme to load the layers there + const favs = State.state.favouriteLayers.data ?? []; + + const neededLayers = new Set(); + + console.log("Favourites are: ", favs); + layoutToUse.layers.splice(0, layoutToUse.layers.length); + let somethingChanged = false; + for (const fav of favs) { + if (AllKnownLayers.sharedLayers.has(fav)) { + const layer = AllKnownLayers.sharedLayers.get(fav); + if (!neededLayers.has(layer)) { + neededLayers.add(layer); + somethingChanged = true; + } + } + + for (const layouts of State.state.installedThemes.data) { + for (const layer of layouts.layout.layers) { + if (typeof layer === "string") { + continue; + } + if (layer.id === fav) { + if (!neededLayers.has(layer)) { + neededLayers.add(layer); + somethingChanged = true; + } + } + } + } + } + if (somethingChanged) { + console.log("layoutToUse.layers:", layoutToUse.layers); + State.state.layoutToUse.data.layers = Array.from(neededLayers); + State.state.layoutToUse.ping(); + State.state.layerUpdater?.ForceRefresh(); + } + } + + if (layoutToUse.customCss !== undefined) { + Utils.LoadCustomCss(layoutToUse.customCss); + } + + InitUiElements.InitBaseMap(); + + InitUiElements.OnlyIf(State.state.featureSwitchUserbadge, () => { + new UserBadge().AttachTo("userbadge"); }); - const marker = L.marker([home.lat, home.lon], { icon: icon }); - marker.addTo(State.state.leafletMap.data); - }); - const geolocationButton = new Toggle( - new MapControlButton( - new GeoLocationHandler( - State.state.currentGPSLocation, - State.state.leafletMap, - State.state.layoutToUse + InitUiElements.OnlyIf(State.state.featureSwitchSearch, () => { + new SearchAndGo().AttachTo("searchbox"); + }); + + InitUiElements.OnlyIf(State.state.featureSwitchWelcomeMessage, () => { + InitUiElements.InitWelcomeMessage(); + }); + + if ( + (window != window.top && !State.state.featureSwitchWelcomeMessage.data) || + State.state.featureSwitchIframe.data + ) { + const currentLocation = State.state.locationControl; + const url = `${window.location.origin}${window.location.pathname}?z=${ + currentLocation.data.zoom ?? 0 + }&lat=${currentLocation.data.lat ?? 0}&lon=${ + currentLocation.data.lon ?? 0 + }`; + new MapControlButton( + new Link(Svg.pop_out_img, url, true).SetClass( + "block w-full h-full p-1.5" + ) + ).AttachTo("messagesbox"); + } + + State.state.osmConnection.userDetails + .map((userDetails: UserDetails) => userDetails?.home) + .addCallbackAndRunD((home) => { + const color = getComputedStyle(document.body).getPropertyValue( + "--subtle-detail-color" + ); + const icon = L.icon({ + iconUrl: Img.AsData(Svg.home_white_bg.replace(/#ffffff/g, color)), + iconSize: [30, 30], + iconAnchor: [15, 15], + }); + const marker = L.marker([home.lat, home.lon], {icon: icon}); + marker.addTo(State.state.leafletMap.data); + }); + + const geolocationButton = new Toggle( + new MapControlButton( + new GeoLocationHandler( + State.state.currentGPSLocation, + State.state.leafletMap, + State.state.layoutToUse + ) + ), + undefined, + State.state.featureSwitchGeolocation + ); + + const plus = new MapControlButton( + new CenterFlexedElement( + Img.AsImageElement(Svg.plus_zoom, "", "width:1.25rem;height:1.25rem") + ) + ).onClick(() => { + State.state.locationControl.data.zoom++; + State.state.locationControl.ping(); + }); + + const min = new MapControlButton( + new CenterFlexedElement( + Img.AsImageElement(Svg.min_zoom, "", "width:1.25rem;height:1.25rem") + ) + ).onClick(() => { + State.state.locationControl.data.zoom--; + State.state.locationControl.ping(); + }); + + + // To download pdf of leaflet you need to turn it into and image first + // Then export that image as a pdf + // leaflet-simple-map-screenshoter: to make image + // jsPDF: to make pdf + + const screenshot = new MapControlButton( + new CenterFlexedElement( + Img.AsImageElement(Svg.bug, "", "width:1.25rem;height:1.25rem") + ) + ).onClick(() => { + const screenshotter = new SimpleMapScreenshoter(); + console.log("Debug - Screenshot"); + screenshotter.addTo(State.state.leafletMap.data); + let doc = new jsPDF(); + screenshotter.takeScreen('image').then(image => { + // TO DO: scale image on pdf to its original size + doc.addImage(image, 'PNG', 0, 0, screen.width / 10, screen.height / 10); + doc.setDisplayMode('fullheight'); + doc.save("Screenshot"); + }); + //screenshotter.remove(); + // The line below is for downloading the png + //screenshotter.takeScreen().then(blob => Utils.offerContentsAsDownloadableFile(blob, "Screenshot.png")); + }); + + new Combine( + [plus, min, geolocationButton, screenshot].map((el) => el.SetClass("m-0.5 md:m-1")) ) - ), - undefined, - State.state.featureSwitchGeolocation - ); + .SetClass("flex flex-col") + .AttachTo("bottom-right"); - const plus = new MapControlButton( - new CenterFlexedElement( - Img.AsImageElement(Svg.plus_zoom, "", "width:1.25rem;height:1.25rem") - ) - ).onClick(() => { - State.state.locationControl.data.zoom++; - State.state.locationControl.ping(); - }); + if (layoutToUse.id === personal.id) { + updateFavs(); + } + InitUiElements.setupAllLayerElements(); - const min = new MapControlButton( - new CenterFlexedElement( - Img.AsImageElement(Svg.min_zoom, "", "width:1.25rem;height:1.25rem") - ) - ).onClick(() => { - State.state.locationControl.data.zoom--; - State.state.locationControl.ping(); - }); - - - // To download pdf of leaflet you need to turn it into and image first - // Then export that image as a pdf - // leaflet-simple-map-screenshoter: to make image - // jsPDF: to make pdf - - const screenshot = new MapControlButton( - new CenterFlexedElement( - Img.AsImageElement(Svg.bug, "", "width:1.25rem;height:1.25rem") - ) - ).onClick(() => { - const screenshotter = new SimpleMapScreenshoter(); - console.log("Debug - Screenshot"); - screenshotter.addTo(State.state.leafletMap.data); - let doc = new jsPDF(); - screenshotter.takeScreen('image').then(image => { - // TO DO: scale image on pdf to its original size - doc.addImage(image, 'PNG', 0, 0, screen.width/10, screen.height/10); - doc.setDisplayMode('fullheight'); - doc.save("Screenshot"); - }); - //screenshotter.remove(); - // The line below is for downloading the png - //screenshotter.takeScreen().then(blob => Utils.offerContentsAsDownloadableFile(blob, "Screenshot.png")); - }); - - new Combine( - [plus, min, geolocationButton, screenshot].map((el) => el.SetClass("m-0.5 md:m-1")) - ) - .SetClass("flex flex-col") - .AttachTo("bottom-right"); - - if (layoutToUse.id === personal.id) { - updateFavs(); - } - InitUiElements.setupAllLayerElements(); - - if (layoutToUse.id === personal.id) { - State.state.favouriteLayers.addCallback(updateFavs); - State.state.installedThemes.addCallback(updateFavs); - } else { - State.state.locationControl.ping(); - } - - // Reset the loading message once things are loaded - new CenterMessageBox().AttachTo("centermessage"); - document - .getElementById("centermessage") - .classList.add("pointer-events-none"); - } - - static LoadLayoutFromHash( - userLayoutParam: UIEventSource - ): [LayoutConfig, string] { - try { - let hash = location.hash.substr(1); - const layoutFromBase64 = userLayoutParam.data; - // layoutFromBase64 contains the name of the theme. This is partly to do tracking with goat counter - - const dedicatedHashFromLocalStorage = LocalStorageSource.Get( - "user-layout-" + layoutFromBase64.replace(" ", "_") - ); - if (dedicatedHashFromLocalStorage.data?.length < 10) { - dedicatedHashFromLocalStorage.setData(undefined); - } - - const hashFromLocalStorage = LocalStorageSource.Get( - "last-loaded-user-layout" - ); - if (hash.length < 10) { - hash = dedicatedHashFromLocalStorage.data ?? hashFromLocalStorage.data; - } else { - console.log("Saving hash to local storage"); - hashFromLocalStorage.setData(hash); - dedicatedHashFromLocalStorage.setData(hash); - } - - let json: {}; - try { - json = JSON.parse(atob(hash)); - } catch (e) { - // We try to decode with lz-string - json = JSON.parse( - Utils.UnMinify(LZString.decompressFromBase64(hash)) - ) as LayoutConfigJson; - } - - // @ts-ignore - const layoutToUse = new LayoutConfig(json, false); - userLayoutParam.setData(layoutToUse.id); - return [layoutToUse, btoa(Utils.MinifyJSON(JSON.stringify(json)))]; - } catch (e) { - new FixedUiElement( - "Error: could not parse the custom layout:
" + e - ).AttachTo("centermessage"); - throw e; - } - } - - private static OnlyIf( - featureSwitch: UIEventSource, - callback: () => void - ) { - featureSwitch.addCallbackAndRun(() => { - if (featureSwitch.data) { - callback(); - } - }); - } - - private static InitWelcomeMessage() { - const isOpened = new UIEventSource(false); - const fullOptions = new FullWelcomePaneWithTabs(isOpened); - - // ?-Button on Desktop, opens panel with close-X. - const help = new MapControlButton(Svg.help_svg()); - help.onClick(() => isOpened.setData(true)); - new Toggle(fullOptions.SetClass("welcomeMessage"), help, isOpened).AttachTo( - "messagesbox" - ); - const openedTime = new Date().getTime(); - State.state.locationControl.addCallback(() => { - if (new Date().getTime() - openedTime < 15 * 1000) { - // Don't autoclose the first 15 secs when the map is moving - return; - } - isOpened.setData(false); - }); - - State.state.selectedElement.addCallbackAndRunD((_) => { - isOpened.setData(false); - }); - isOpened.setData( - Hash.hash.data === undefined || - Hash.hash.data === "" || - Hash.hash.data == "welcome" - ); - } - - private static InitLayerSelection(featureSource: FeatureSource) { - const copyrightNotice = new ScrollableFullScreen( - () => Translations.t.general.attribution.attributionTitle.Clone(), - () => - new AttributionPanel( - State.state.layoutToUse, - new ContributorCount(featureSource).Contributors - ), - "copyright" - ); - - const copyrightButton = new Toggle( - copyrightNotice, - new MapControlButton(Svg.osm_copyright_svg()), - copyrightNotice.isShown - ) - .ToggleOnClick() - .SetClass("p-0.5"); - - const layerControlPanel = new LayerControlPanel( - State.state.layerControlIsOpened - ).SetClass("block p-1 rounded-full"); - - const layerControlButton = new Toggle( - layerControlPanel, - new MapControlButton(Svg.layers_svg()), - State.state.layerControlIsOpened - ).ToggleOnClick(); - - const layerControl = new Toggle( - layerControlButton, - "", - State.state.featureSwitchLayers - ); - - const filterView = new FilterView(State.state.FilterIsOpened).SetClass( - "block p-1 rounded-full" - ); - - const filterMapControlButton = new MapControlButton( - new CenterFlexedElement( - Img.AsImageElement(Svg.filter, "", "width:1.25rem;height:1.25rem") - ) - ); - - const filterButton = new Toggle( - filterView, - filterMapControlButton, - State.state.FilterIsOpened - ).ToggleOnClick(); - - const filterControl = new Toggle( - filterButton, - "", - State.state.featureSwitchFilter - ); - - new Combine([copyrightButton, layerControl, filterControl]).AttachTo( - "bottom-left" - ); - - State.state.locationControl.addCallback(() => { - // Close the layer selection when the map is moved - layerControlButton.isEnabled.setData(false); - copyrightButton.isEnabled.setData(false); - }); - - State.state.selectedElement.addCallbackAndRunD((_) => { - layerControlButton.isEnabled.setData(false); - copyrightButton.isEnabled.setData(false); - }); - } - - private static InitBaseMap() { - State.state.availableBackgroundLayers = new AvailableBaseLayers( - State.state.locationControl - ).availableEditorLayers; - - State.state.backgroundLayer = State.state.backgroundLayerId.map( - (selectedId: string) => { - if (selectedId === undefined) { - return AvailableBaseLayers.osmCarto; + if (layoutToUse.id === personal.id) { + State.state.favouriteLayers.addCallback(updateFavs); + State.state.installedThemes.addCallback(updateFavs); + } else { + State.state.locationControl.ping(); } - const available = State.state.availableBackgroundLayers.data; - for (const layer of available) { - if (layer.id === selectedId) { - return layer; - } + // Reset the loading message once things are loaded + new CenterMessageBox().AttachTo("centermessage"); + document + .getElementById("centermessage") + .classList.add("pointer-events-none"); + } + + static LoadLayoutFromHash( + userLayoutParam: UIEventSource + ): [LayoutConfig, string] { + try { + let hash = location.hash.substr(1); + const layoutFromBase64 = userLayoutParam.data; + // layoutFromBase64 contains the name of the theme. This is partly to do tracking with goat counter + + const dedicatedHashFromLocalStorage = LocalStorageSource.Get( + "user-layout-" + layoutFromBase64.replace(" ", "_") + ); + if (dedicatedHashFromLocalStorage.data?.length < 10) { + dedicatedHashFromLocalStorage.setData(undefined); + } + + const hashFromLocalStorage = LocalStorageSource.Get( + "last-loaded-user-layout" + ); + if (hash.length < 10) { + hash = dedicatedHashFromLocalStorage.data ?? hashFromLocalStorage.data; + } else { + console.log("Saving hash to local storage"); + hashFromLocalStorage.setData(hash); + dedicatedHashFromLocalStorage.setData(hash); + } + + let json: {}; + try { + json = JSON.parse(atob(hash)); + } catch (e) { + // We try to decode with lz-string + json = JSON.parse( + Utils.UnMinify(LZString.decompressFromBase64(hash)) + ) as LayoutConfigJson; + } + + // @ts-ignore + const layoutToUse = new LayoutConfig(json, false); + userLayoutParam.setData(layoutToUse.id); + return [layoutToUse, btoa(Utils.MinifyJSON(JSON.stringify(json)))]; + } catch (e) { + new FixedUiElement( + "Error: could not parse the custom layout:
" + e + ).AttachTo("centermessage"); + throw e; } - return AvailableBaseLayers.osmCarto; - }, - [State.state.availableBackgroundLayers], - (layer) => layer.id - ); + } - new LayerResetter( - State.state.backgroundLayer, - State.state.locationControl, - State.state.availableBackgroundLayers, - State.state.layoutToUse.map( - (layout: LayoutConfig) => layout.defaultBackgroundId - ) - ); + private static OnlyIf( + featureSwitch: UIEventSource, + callback: () => void + ) { + featureSwitch.addCallbackAndRun(() => { + if (featureSwitch.data) { + callback(); + } + }); + } - const attr = new Attribution( - State.state.locationControl, - State.state.osmConnection.userDetails, - State.state.layoutToUse, - State.state.leafletMap - ); + private static InitWelcomeMessage() { + const isOpened = new UIEventSource(false); + const fullOptions = new FullWelcomePaneWithTabs(isOpened); - const bm = new Basemap( - "leafletDiv", - State.state.locationControl, - State.state.backgroundLayer, - State.state.LastClickLocation, - attr - ); - State.state.leafletMap.setData(bm.map); - const layout = State.state.layoutToUse.data; - if (layout.lockLocation) { - if (layout.lockLocation === true) { - const tile = Utils.embedded_tile( - layout.startLat, - layout.startLon, - layout.startZoom - 1 + // ?-Button on Desktop, opens panel with close-X. + const help = new MapControlButton(Svg.help_svg()); + help.onClick(() => isOpened.setData(true)); + new Toggle(fullOptions.SetClass("welcomeMessage"), help, isOpened).AttachTo( + "messagesbox" ); - const bounds = Utils.tile_bounds(tile.z, tile.x, tile.y); - // We use the bounds to get a sense of distance for this zoom level - const latDiff = bounds[0][0] - bounds[1][0]; - const lonDiff = bounds[0][1] - bounds[1][1]; - layout.lockLocation = [ - [layout.startLat - latDiff, layout.startLon - lonDiff], - [layout.startLat + latDiff, layout.startLon + lonDiff], - ]; - } - console.warn("Locking the bounds to ", layout.lockLocation); - bm.map.setMaxBounds(layout.lockLocation); - bm.map.setMinZoom(layout.startZoom); - } - } + const openedTime = new Date().getTime(); + State.state.locationControl.addCallback(() => { + if (new Date().getTime() - openedTime < 15 * 1000) { + // Don't autoclose the first 15 secs when the map is moving + return; + } + isOpened.setData(false); + }); - private static InitLayers(): FeatureSource { - const state = State.state; - state.filteredLayers = state.layoutToUse.map((layoutToUse) => { - const flayers = []; - - for (const layer of layoutToUse.layers) { - const isDisplayed = QueryParameters.GetQueryParameter( - "layer-" + layer.id, - "true", - "Wether or not layer " + layer.id + " is shown" - ).map( - (str) => str !== "false", - [], - (b) => b.toString() + State.state.selectedElement.addCallbackAndRunD((_) => { + isOpened.setData(false); + }); + isOpened.setData( + Hash.hash.data === undefined || + Hash.hash.data === "" || + Hash.hash.data == "welcome" ); - const flayer = { - isDisplayed: isDisplayed, - layerDef: layer, - }; - flayers.push(flayer); - } - return flayers; - }); + } - const updater = new LoadFromOverpass( - state.locationControl, - state.layoutToUse, - state.leafletMap - ); - State.state.layerUpdater = updater; + private static InitLayerSelection(featureSource: FeatureSource) { + const copyrightNotice = new ScrollableFullScreen( + () => Translations.t.general.attribution.attributionTitle.Clone(), + () => + new AttributionPanel( + State.state.layoutToUse, + new ContributorCount(featureSource).Contributors + ), + "copyright" + ); - const source = new FeaturePipeline( - state.filteredLayers, - updater, - state.osmApiFeatureSource, - state.layoutToUse, - state.changes, - state.locationControl, - state.selectedElement - ); + const copyrightButton = new Toggle( + copyrightNotice, + new MapControlButton(Svg.osm_copyright_svg()), + copyrightNotice.isShown + ) + .ToggleOnClick() + .SetClass("p-0.5"); - new ShowDataLayer( - source.features, - State.state.leafletMap, - State.state.layoutToUse - ); + const layerControlPanel = new LayerControlPanel( + State.state.layerControlIsOpened + ).SetClass("block p-1 rounded-full"); - const selectedFeatureHandler = new SelectedFeatureHandler( - Hash.hash, - State.state.selectedElement, - source, - State.state.osmApiFeatureSource - ); - selectedFeatureHandler.zoomToSelectedFeature(State.state.locationControl); - return source; - } + const layerControlButton = new Toggle( + layerControlPanel, + new MapControlButton(Svg.layers_svg()), + State.state.layerControlIsOpened + ).ToggleOnClick(); - private static setupAllLayerElements() { - // ------------- Setup the layers ------------------------------- + const layerControl = new Toggle( + layerControlButton, + "", + State.state.featureSwitchLayers + ); - const source = InitUiElements.InitLayers(); - InitUiElements.InitLayerSelection(source); + const filterView = new FilterView(State.state.FilterIsOpened).SetClass( + "block p-1 rounded-full" + ); - // ------------------ Setup various other UI elements ------------ + const filterMapControlButton = new MapControlButton( + new CenterFlexedElement( + Img.AsImageElement(Svg.filter, "", "width:1.25rem;height:1.25rem") + ) + ); - InitUiElements.OnlyIf(State.state.featureSwitchAddNew, () => { - let presetCount = 0; - for (const layer of State.state.filteredLayers.data) { - for (const preset of layer.layerDef.presets) { - presetCount++; + const filterButton = new Toggle( + filterView, + filterMapControlButton, + State.state.FilterIsOpened + ).ToggleOnClick(); + + const filterControl = new Toggle( + filterButton, + "", + State.state.featureSwitchFilter + ); + + new Combine([copyrightButton, layerControl, filterControl]).AttachTo( + "bottom-left" + ); + + State.state.locationControl.addCallback(() => { + // Close the layer selection when the map is moved + layerControlButton.isEnabled.setData(false); + copyrightButton.isEnabled.setData(false); + }); + + State.state.selectedElement.addCallbackAndRunD((_) => { + layerControlButton.isEnabled.setData(false); + copyrightButton.isEnabled.setData(false); + }); + } + + private static InitBaseMap() { + State.state.availableBackgroundLayers = new AvailableBaseLayers( + State.state.locationControl + ).availableEditorLayers; + + State.state.backgroundLayer = State.state.backgroundLayerId.map( + (selectedId: string) => { + if (selectedId === undefined) { + return AvailableBaseLayers.osmCarto; + } + + const available = State.state.availableBackgroundLayers.data; + for (const layer of available) { + if (layer.id === selectedId) { + return layer; + } + } + return AvailableBaseLayers.osmCarto; + }, + [State.state.availableBackgroundLayers], + (layer) => layer.id + ); + + new LayerResetter( + State.state.backgroundLayer, + State.state.locationControl, + State.state.availableBackgroundLayers, + State.state.layoutToUse.map( + (layout: LayoutConfig) => layout.defaultBackgroundId + ) + ); + + const attr = new Attribution( + State.state.locationControl, + State.state.osmConnection.userDetails, + State.state.layoutToUse, + State.state.leafletMap + ); + + const bm = new Basemap( + "leafletDiv", + State.state.locationControl, + State.state.backgroundLayer, + State.state.LastClickLocation, + attr + ); + State.state.leafletMap.setData(bm.map); + const layout = State.state.layoutToUse.data; + if (layout.lockLocation) { + if (layout.lockLocation === true) { + const tile = Utils.embedded_tile( + layout.startLat, + layout.startLon, + layout.startZoom - 1 + ); + const bounds = Utils.tile_bounds(tile.z, tile.x, tile.y); + // We use the bounds to get a sense of distance for this zoom level + const latDiff = bounds[0][0] - bounds[1][0]; + const lonDiff = bounds[0][1] - bounds[1][1]; + layout.lockLocation = [ + [layout.startLat - latDiff, layout.startLon - lonDiff], + [layout.startLat + latDiff, layout.startLon + lonDiff], + ]; + } + console.warn("Locking the bounds to ", layout.lockLocation); + bm.map.setMaxBounds(layout.lockLocation); + bm.map.setMinZoom(layout.startZoom); } - } - if (presetCount == 0) { - return; - } + } - const newPointDialogIsShown = new UIEventSource(false); - const addNewPoint = new ScrollableFullScreen( - () => Translations.t.general.add.title.Clone(), - () => new SimpleAddUI(newPointDialogIsShown), - "new", - newPointDialogIsShown - ); - addNewPoint.isShown.addCallback((isShown) => { - if (!isShown) { - State.state.LastClickLocation.setData(undefined); - } - }); + private static InitLayers(): FeatureSource { + const state = State.state; + state.filteredLayers = state.layoutToUse.map((layoutToUse) => { + const flayers = []; - new StrayClickHandler( - State.state.LastClickLocation, - State.state.selectedElement, - State.state.filteredLayers, - State.state.leafletMap, - addNewPoint - ); - }); - } + for (const layer of layoutToUse.layers) { + const isDisplayed = QueryParameters.GetQueryParameter( + "layer-" + layer.id, + "true", + "Wether or not layer " + layer.id + " is shown" + ).map( + (str) => str !== "false", + [], + (b) => b.toString() + ); + const flayer = { + isDisplayed: isDisplayed, + layerDef: layer, + }; + flayers.push(flayer); + } + return flayers; + }); + + const updater = new LoadFromOverpass( + state.locationControl, + state.layoutToUse, + state.leafletMap + ); + State.state.layerUpdater = updater; + + const source = new FeaturePipeline( + state.filteredLayers, + updater, + state.osmApiFeatureSource, + state.layoutToUse, + state.changes, + state.locationControl, + state.selectedElement + ); + + new ShowDataLayer( + source.features, + State.state.leafletMap, + State.state.layoutToUse + ); + + const selectedFeatureHandler = new SelectedFeatureHandler( + Hash.hash, + State.state.selectedElement, + source, + State.state.osmApiFeatureSource + ); + selectedFeatureHandler.zoomToSelectedFeature(State.state.locationControl); + return source; + } + + private static setupAllLayerElements() { + // ------------- Setup the layers ------------------------------- + + const source = InitUiElements.InitLayers(); + InitUiElements.InitLayerSelection(source); + + // ------------------ Setup various other UI elements ------------ + + InitUiElements.OnlyIf(State.state.featureSwitchAddNew, () => { + let presetCount = 0; + for (const layer of State.state.filteredLayers.data) { + for (const preset of layer.layerDef.presets) { + presetCount++; + } + } + if (presetCount == 0) { + return; + } + + const newPointDialogIsShown = new UIEventSource(false); + const addNewPoint = new ScrollableFullScreen( + () => Translations.t.general.add.title.Clone(), + () => new SimpleAddUI(newPointDialogIsShown), + "new", + newPointDialogIsShown + ); + addNewPoint.isShown.addCallback((isShown) => { + if (!isShown) { + State.state.LastClickLocation.setData(undefined); + } + }); + + new StrayClickHandler( + State.state.LastClickLocation, + State.state.selectedElement, + State.state.filteredLayers, + State.state.leafletMap, + addNewPoint + ); + }); + } } diff --git a/Logic/Actors/GeoLocationHandler.ts b/Logic/Actors/GeoLocationHandler.ts index 8ea2886b42..f9f84a685a 100644 --- a/Logic/Actors/GeoLocationHandler.ts +++ b/Logic/Actors/GeoLocationHandler.ts @@ -1,265 +1,265 @@ import * as L from "leaflet"; -import { UIEventSource } from "../UIEventSource"; -import { Utils } from "../../Utils"; +import {UIEventSource} from "../UIEventSource"; +import {Utils} from "../../Utils"; import Svg from "../../Svg"; import Img from "../../UI/Base/Img"; -import { LocalStorageSource } from "../Web/LocalStorageSource"; +import {LocalStorageSource} from "../Web/LocalStorageSource"; import LayoutConfig from "../../Customizations/JSON/LayoutConfig"; -import { VariableUiElement } from "../../UI/Base/VariableUIElement"; -import { CenterFlexedElement } from "../../UI/Base/CenterFlexedElement"; +import {VariableUiElement} from "../../UI/Base/VariableUIElement"; +import {CenterFlexedElement} from "../../UI/Base/CenterFlexedElement"; export default class GeoLocationHandler extends VariableUiElement { - /** - * Wether or not the geolocation is active, aka the user requested the current location - * @private - */ - private readonly _isActive: UIEventSource; + /** + * Wether or not the geolocation is active, aka the user requested the current location + * @private + */ + private readonly _isActive: UIEventSource; - /** - * The callback over the permission API - * @private - */ - private readonly _permission: UIEventSource; - /*** - * The marker on the map, in order to update it - * @private - */ - private _marker: L.Marker; - /** - * Literally: _currentGPSLocation.data != undefined - * @private - */ - private readonly _hasLocation: UIEventSource; - private readonly _currentGPSLocation: UIEventSource<{ - latlng: any; - accuracy: number; - }>; - /** - * Kept in order to update the marker - * @private - */ - private readonly _leafletMap: UIEventSource; - /** - * The date when the user requested the geolocation. If we have a location, it'll autozoom to it the first 30 secs - * @private - */ - private _lastUserRequest: Date; - /** - * A small flag on localstorage. If the user previously granted the geolocation, it will be set. - * On firefox, the permissions api is broken (probably fingerprint resistiance) and "granted + don't ask again" doesn't stick between sessions. - * - * Instead, we set this flag. If this flag is set upon loading the page, we start geolocating immediately. - * If the user denies the geolocation this time, we unset this flag - * @private - */ - private readonly _previousLocationGrant: UIEventSource; - private readonly _layoutToUse: UIEventSource; + /** + * The callback over the permission API + * @private + */ + private readonly _permission: UIEventSource; + /*** + * The marker on the map, in order to update it + * @private + */ + private _marker: L.Marker; + /** + * Literally: _currentGPSLocation.data != undefined + * @private + */ + private readonly _hasLocation: UIEventSource; + private readonly _currentGPSLocation: UIEventSource<{ + latlng: any; + accuracy: number; + }>; + /** + * Kept in order to update the marker + * @private + */ + private readonly _leafletMap: UIEventSource; + /** + * The date when the user requested the geolocation. If we have a location, it'll autozoom to it the first 30 secs + * @private + */ + private _lastUserRequest: Date; + /** + * A small flag on localstorage. If the user previously granted the geolocation, it will be set. + * On firefox, the permissions api is broken (probably fingerprint resistiance) and "granted + don't ask again" doesn't stick between sessions. + * + * Instead, we set this flag. If this flag is set upon loading the page, we start geolocating immediately. + * If the user denies the geolocation this time, we unset this flag + * @private + */ + private readonly _previousLocationGrant: UIEventSource; + private readonly _layoutToUse: UIEventSource; - constructor( - currentGPSLocation: UIEventSource<{ latlng: any; accuracy: number }>, - leafletMap: UIEventSource, - layoutToUse: UIEventSource - ) { - const hasLocation = currentGPSLocation.map( - (location) => location !== undefined - ); - const previousLocationGrant = LocalStorageSource.Get( - "geolocation-permissions" - ); - const isActive = new UIEventSource(false); - - super( - hasLocation.map( - (hasLocation) => { - if (hasLocation) { - return new CenterFlexedElement( - Img.AsImageElement(Svg.location, "", "width:1.25rem;height:1.25rem") - ); // crosshair_blue_ui() - } - if (isActive.data) { - return new CenterFlexedElement( - Img.AsImageElement(Svg.location, "", "width:1.25rem;height:1.25rem") - ); // crosshair_blue_center_ui - } - return new CenterFlexedElement( - Img.AsImageElement(Svg.location, "", "width:1.25rem;height:1.25rem") - ); //crosshair_ui - }, - [isActive] - ) - ); - this._isActive = isActive; - this._permission = new UIEventSource(""); - this._previousLocationGrant = previousLocationGrant; - this._currentGPSLocation = currentGPSLocation; - this._leafletMap = leafletMap; - this._layoutToUse = layoutToUse; - this._hasLocation = hasLocation; - const self = this; - - const currentPointer = this._isActive.map( - (isActive) => { - if (isActive && !self._hasLocation.data) { - return "cursor-wait"; - } - return "cursor-pointer"; - }, - [this._hasLocation] - ); - currentPointer.addCallbackAndRun((pointerClass) => { - self.SetClass(pointerClass); - }); - - this.onClick(() => self.init(true)); - this.init(false); - } - - private init(askPermission: boolean) { - const self = this; - const map = this._leafletMap.data; - - this._currentGPSLocation.addCallback((location) => { - self._previousLocationGrant.setData("granted"); - - const timeSinceRequest = - (new Date().getTime() - (self._lastUserRequest?.getTime() ?? 0)) / 1000; - if (timeSinceRequest < 30) { - self.MoveToCurrentLoction(16); - } - - let color = "#1111cc"; - try { - color = getComputedStyle(document.body).getPropertyValue( - "--catch-detail-color" - ); - } catch (e) { - console.error(e); - } - const icon = L.icon({ - iconUrl: Img.AsData(Svg.crosshair.replace(/#000000/g, color)), - iconSize: [40, 40], // size of the icon - iconAnchor: [20, 20], // point of the icon which will correspond to marker's location - }); - - const newMarker = L.marker(location.latlng, { icon: icon }); - newMarker.addTo(map); - - if (self._marker !== undefined) { - map.removeLayer(self._marker); - } - self._marker = newMarker; - }); - - try { - navigator?.permissions - ?.query({ name: "geolocation" }) - ?.then(function (status) { - console.log("Geolocation is already", status); - if (status.state === "granted") { - self.StartGeolocating(false); - } - self._permission.setData(status.state); - status.onchange = function () { - self._permission.setData(status.state); - }; - }); - } catch (e) { - console.error(e); - } - if (askPermission) { - self.StartGeolocating(true); - } else if (this._previousLocationGrant.data === "granted") { - this._previousLocationGrant.setData(""); - self.StartGeolocating(false); - } - } - - private locate() { - const self = this; - const map: any = this._leafletMap.data; - - if (navigator.geolocation) { - navigator.geolocation.getCurrentPosition( - function (position) { - self._currentGPSLocation.setData({ - latlng: [position.coords.latitude, position.coords.longitude], - accuracy: position.coords.accuracy, - }); - }, - function () { - console.warn("Could not get location with navigator.geolocation"); - } - ); - return; - } else { - map.findAccuratePosition({ - maxWait: 10000, // defaults to 10000 - desiredAccuracy: 50, // defaults to 20 - }); - } - } - - private MoveToCurrentLoction(targetZoom = 16) { - const location = this._currentGPSLocation.data; - this._lastUserRequest = undefined; - - if ( - this._currentGPSLocation.data.latlng[0] === 0 && - this._currentGPSLocation.data.latlng[1] === 0 + constructor( + currentGPSLocation: UIEventSource<{ latlng: any; accuracy: number }>, + leafletMap: UIEventSource, + layoutToUse: UIEventSource ) { - console.debug("Not moving to GPS-location: it is null island"); - return; + const hasLocation = currentGPSLocation.map( + (location) => location !== undefined + ); + const previousLocationGrant = LocalStorageSource.Get( + "geolocation-permissions" + ); + const isActive = new UIEventSource(false); + + super( + hasLocation.map( + (hasLocation) => { + if (hasLocation) { + return new CenterFlexedElement( + Img.AsImageElement(Svg.location, "", "width:1.25rem;height:1.25rem") + ); // crosshair_blue_ui() + } + if (isActive.data) { + return new CenterFlexedElement( + Img.AsImageElement(Svg.location, "", "width:1.25rem;height:1.25rem") + ); // crosshair_blue_center_ui + } + return new CenterFlexedElement( + Img.AsImageElement(Svg.location, "", "width:1.25rem;height:1.25rem") + ); //crosshair_ui + }, + [isActive] + ) + ); + this._isActive = isActive; + this._permission = new UIEventSource(""); + this._previousLocationGrant = previousLocationGrant; + this._currentGPSLocation = currentGPSLocation; + this._leafletMap = leafletMap; + this._layoutToUse = layoutToUse; + this._hasLocation = hasLocation; + const self = this; + + const currentPointer = this._isActive.map( + (isActive) => { + if (isActive && !self._hasLocation.data) { + return "cursor-wait"; + } + return "cursor-pointer"; + }, + [this._hasLocation] + ); + currentPointer.addCallbackAndRun((pointerClass) => { + self.SetClass(pointerClass); + }); + + this.onClick(() => self.init(true)); + this.init(false); } - // We check that the GPS location is not out of bounds - const b = this._layoutToUse.data.lockLocation; - let inRange = true; - if (b) { - if (b !== true) { - // B is an array with our locklocation - inRange = - b[0][0] <= location.latlng[0] && - location.latlng[0] <= b[1][0] && - b[0][1] <= location.latlng[1] && - location.latlng[1] <= b[1][1]; - } - } - if (!inRange) { - console.log( - "Not zooming to GPS location: out of bounds", - b, - location.latlng - ); - } else { - this._leafletMap.data.setView(location.latlng, targetZoom); - } - } + private init(askPermission: boolean) { + const self = this; + const map = this._leafletMap.data; - private StartGeolocating(zoomToGPS = true) { - const self = this; - console.log("Starting geolocation"); + this._currentGPSLocation.addCallback((location) => { + self._previousLocationGrant.setData("granted"); - this._lastUserRequest = zoomToGPS ? new Date() : new Date(0); - if (self._permission.data === "denied") { - self._previousLocationGrant.setData(""); - return ""; - } - if (this._currentGPSLocation.data !== undefined) { - this.MoveToCurrentLoction(16); - } + const timeSinceRequest = + (new Date().getTime() - (self._lastUserRequest?.getTime() ?? 0)) / 1000; + if (timeSinceRequest < 30) { + self.MoveToCurrentLoction(16); + } - console.log("Searching location using GPS"); - this.locate(); + let color = "#1111cc"; + try { + color = getComputedStyle(document.body).getPropertyValue( + "--catch-detail-color" + ); + } catch (e) { + console.error(e); + } + const icon = L.icon({ + iconUrl: Img.AsData(Svg.crosshair.replace(/#000000/g, color)), + iconSize: [40, 40], // size of the icon + iconAnchor: [20, 20], // point of the icon which will correspond to marker's location + }); - if (!self._isActive.data) { - self._isActive.setData(true); - Utils.DoEvery(60000, () => { - if (document.visibilityState !== "visible") { - console.log("Not starting gps: document not visible"); - return; + const newMarker = L.marker(location.latlng, {icon: icon}); + newMarker.addTo(map); + + if (self._marker !== undefined) { + map.removeLayer(self._marker); + } + self._marker = newMarker; + }); + + try { + navigator?.permissions + ?.query({name: "geolocation"}) + ?.then(function (status) { + console.log("Geolocation is already", status); + if (status.state === "granted") { + self.StartGeolocating(false); + } + self._permission.setData(status.state); + status.onchange = function () { + self._permission.setData(status.state); + }; + }); + } catch (e) { + console.error(e); + } + if (askPermission) { + self.StartGeolocating(true); + } else if (this._previousLocationGrant.data === "granted") { + this._previousLocationGrant.setData(""); + self.StartGeolocating(false); + } + } + + private locate() { + const self = this; + const map: any = this._leafletMap.data; + + if (navigator.geolocation) { + navigator.geolocation.getCurrentPosition( + function (position) { + self._currentGPSLocation.setData({ + latlng: [position.coords.latitude, position.coords.longitude], + accuracy: position.coords.accuracy, + }); + }, + function () { + console.warn("Could not get location with navigator.geolocation"); + } + ); + return; + } else { + map.findAccuratePosition({ + maxWait: 10000, // defaults to 10000 + desiredAccuracy: 50, // defaults to 20 + }); + } + } + + private MoveToCurrentLoction(targetZoom = 16) { + const location = this._currentGPSLocation.data; + this._lastUserRequest = undefined; + + if ( + this._currentGPSLocation.data.latlng[0] === 0 && + this._currentGPSLocation.data.latlng[1] === 0 + ) { + console.debug("Not moving to GPS-location: it is null island"); + return; + } + + // We check that the GPS location is not out of bounds + const b = this._layoutToUse.data.lockLocation; + let inRange = true; + if (b) { + if (b !== true) { + // B is an array with our locklocation + inRange = + b[0][0] <= location.latlng[0] && + location.latlng[0] <= b[1][0] && + b[0][1] <= location.latlng[1] && + location.latlng[1] <= b[1][1]; + } + } + if (!inRange) { + console.log( + "Not zooming to GPS location: out of bounds", + b, + location.latlng + ); + } else { + this._leafletMap.data.setView(location.latlng, targetZoom); + } + } + + private StartGeolocating(zoomToGPS = true) { + const self = this; + console.log("Starting geolocation"); + + this._lastUserRequest = zoomToGPS ? new Date() : new Date(0); + if (self._permission.data === "denied") { + self._previousLocationGrant.setData(""); + return ""; + } + if (this._currentGPSLocation.data !== undefined) { + this.MoveToCurrentLoction(16); + } + + console.log("Searching location using GPS"); + this.locate(); + + if (!self._isActive.data) { + self._isActive.setData(true); + Utils.DoEvery(60000, () => { + if (document.visibilityState !== "visible") { + console.log("Not starting gps: document not visible"); + return; + } + this.locate(); + }); } - this.locate(); - }); } - } }