From 12eb2a2d55e00a38e57711f93528b26ca1149629 Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Tue, 6 Jun 2023 00:01:01 +0200 Subject: [PATCH] Refactoring: add advanced buttons to open mapillary and to open other editors --- Models/Loc.ts | 5 -- UI/BigComponents/CopyrightPanel.ts | 101 ++------------------------ UI/BigComponents/MapillaryLink.svelte | 31 ++++++++ UI/BigComponents/MapillaryLink.ts | 30 -------- UI/BigComponents/OpenIdEditor.svelte | 33 +++++++++ UI/BigComponents/OpenJosm.ts | 57 +++++++++++++++ UI/Popup/MapillaryLinkVis.ts | 22 +++--- UI/SpecialVisualizations.ts | 8 +- UI/ThemeViewGUI.svelte | 8 +- 9 files changed, 152 insertions(+), 143 deletions(-) delete mode 100644 Models/Loc.ts create mode 100644 UI/BigComponents/MapillaryLink.svelte delete mode 100644 UI/BigComponents/MapillaryLink.ts create mode 100644 UI/BigComponents/OpenIdEditor.svelte create mode 100644 UI/BigComponents/OpenJosm.ts diff --git a/Models/Loc.ts b/Models/Loc.ts deleted file mode 100644 index 7b78d642a..000000000 --- a/Models/Loc.ts +++ /dev/null @@ -1,5 +0,0 @@ -export default interface Loc { - lat: number - lon: number - zoom: number -} diff --git a/UI/BigComponents/CopyrightPanel.ts b/UI/BigComponents/CopyrightPanel.ts index 08459ea60..d4d03763f 100644 --- a/UI/BigComponents/CopyrightPanel.ts +++ b/UI/BigComponents/CopyrightPanel.ts @@ -1,113 +1,28 @@ import Combine from "../Base/Combine" import Translations from "../i18n/Translations" -import { Store, UIEventSource } from "../../Logic/UIEventSource" -import { FixedUiElement } from "../Base/FixedUiElement" +import {Store} from "../../Logic/UIEventSource" +import {FixedUiElement} from "../Base/FixedUiElement" import licenses from "../../assets/generated/license_info.json" import SmallLicense from "../../Models/smallLicense" -import { Utils } from "../../Utils" +import {Utils} from "../../Utils" import Link from "../Base/Link" -import { VariableUiElement } from "../Base/VariableUIElement" +import {VariableUiElement} from "../Base/VariableUIElement" import contributors from "../../assets/contributors.json" import translators from "../../assets/translators.json" import BaseUIElement from "../BaseUIElement" import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig" import Title from "../Base/Title" -import { SubtleButton } from "../Base/SubtleButton" -import Svg from "../../Svg" -import { BBox } from "../../Logic/BBox" -import Toggle from "../Input/Toggle" -import { OsmConnection } from "../../Logic/Osm/OsmConnection" +import {BBox} from "../../Logic/BBox" +import {OsmConnection} from "../../Logic/Osm/OsmConnection" import Constants from "../../Models/Constants" import ContributorCount from "../../Logic/ContributorCount" import Img from "../Base/Img" -import { TypedTranslation } from "../i18n/Translation" +import {TypedTranslation} from "../i18n/Translation" import GeoIndexedStore from "../../Logic/FeatureSource/Actors/GeoIndexedStore" import {RasterLayerPolygon} from "../../Models/RasterLayers"; -export class OpenIdEditor extends VariableUiElement { - constructor( - mapProperties: { location: Store<{ lon: number; lat: number }>; zoom: Store }, - iconStyle?: string, - objectId?: string - ) { - const t = Translations.t.general.attribution - super( - mapProperties.location.map( - (location) => { - let elementSelect = "" - if (objectId !== undefined) { - const parts = objectId.split("/") - const tp = parts[0] - if ( - parts.length === 2 && - !isNaN(Number(parts[1])) && - (tp === "node" || tp === "way" || tp === "relation") - ) { - elementSelect = "&" + tp + "=" + parts[1] - } - } - const idLink = `https://www.openstreetmap.org/edit?editor=id${elementSelect}#map=${ - mapProperties.zoom?.data ?? 0 - }/${location?.lat ?? 0}/${location?.lon ?? 0}` - return new SubtleButton(Svg.pencil_svg().SetStyle(iconStyle), t.editId, { - url: idLink, - newTab: true, - }) - }, - [mapProperties.zoom] - ) - ) - } -} - -export class OpenJosm extends Combine { - constructor(osmConnection: OsmConnection, bounds: Store, iconStyle?: string) { - const t = Translations.t.general.attribution - - const josmState = new UIEventSource(undefined) - // Reset after 15s - josmState.stabilized(15000).addCallbackD((_) => josmState.setData(undefined)) - - const stateIndication = new VariableUiElement( - josmState.map((state) => { - if (state === undefined) { - return undefined - } - state = state.toUpperCase() - if (state === "OK") { - return t.josmOpened.SetClass("thanks") - } - return t.josmNotOpened.SetClass("alert") - }) - ) - - const toggle = new Toggle( - new SubtleButton(Svg.josm_logo_svg().SetStyle(iconStyle), t.editJosm).onClick(() => { - const bbox = bounds.data - if (bbox === undefined) { - return - } - const top = bbox.getNorth() - const bottom = bbox.getSouth() - const right = bbox.getEast() - const left = bbox.getWest() - const josmLink = `http://127.0.0.1:8111/load_and_zoom?left=${left}&right=${right}&top=${top}&bottom=${bottom}` - Utils.download(josmLink) - .then((answer) => josmState.setData(answer.replace(/\n/g, "").trim())) - .catch((_) => josmState.setData("ERROR")) - }), - undefined, - osmConnection.userDetails.map( - (ud) => ud.loggedIn && ud.csCount >= Constants.userJourney.historyLinkVisible - ) - ) - - super([stateIndication, toggle]) - } -} - /** - * The attribution panel shown on mobile + * The attribution panel in the theme menu. */ export default class CopyrightPanel extends Combine { private static LicenseObject = CopyrightPanel.GenerateLicenses() diff --git a/UI/BigComponents/MapillaryLink.svelte b/UI/BigComponents/MapillaryLink.svelte new file mode 100644 index 000000000..fd6ee332c --- /dev/null +++ b/UI/BigComponents/MapillaryLink.svelte @@ -0,0 +1,31 @@ + + + + Svg.mapillary_black_svg().SetClass("w-12 h-12 m-2 mr-4 shrink-0")}/> +
+ + +
+ diff --git a/UI/BigComponents/MapillaryLink.ts b/UI/BigComponents/MapillaryLink.ts deleted file mode 100644 index df79b9bcb..000000000 --- a/UI/BigComponents/MapillaryLink.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { VariableUiElement } from "../Base/VariableUIElement" -import { Store } from "../../Logic/UIEventSource" -import Loc from "../../Models/Loc" -import Translations from "../i18n/Translations" -import { SubtleButton } from "../Base/SubtleButton" -import Svg from "../../Svg" -import Combine from "../Base/Combine" - -export class MapillaryLink extends VariableUiElement { - constructor(state: { readonly locationControl: Store }, iconStyle?: string) { - const t = Translations.t.general.attribution - super( - state.locationControl.map((location) => { - const mapillaryLink = `https://www.mapillary.com/app/?focus=map&lat=${ - location?.lat ?? 0 - }&lng=${location?.lon ?? 0}&z=${Math.max((location?.zoom ?? 2) - 1, 1)}` - return new SubtleButton( - Svg.mapillary_black_svg().SetStyle(iconStyle), - new Combine([t.openMapillary.SetClass("font-bold"), t.mapillaryHelp]).SetClass( - "flex flex-col link-no-underline" - ), - { - url: mapillaryLink, - newTab: true, - } - ) - }) - ) - } -} diff --git a/UI/BigComponents/OpenIdEditor.svelte b/UI/BigComponents/OpenIdEditor.svelte new file mode 100644 index 000000000..10c1556d6 --- /dev/null +++ b/UI/BigComponents/OpenIdEditor.svelte @@ -0,0 +1,33 @@ + + + + + + + diff --git a/UI/BigComponents/OpenJosm.ts b/UI/BigComponents/OpenJosm.ts new file mode 100644 index 000000000..9428adfe7 --- /dev/null +++ b/UI/BigComponents/OpenJosm.ts @@ -0,0 +1,57 @@ +import Combine from "../Base/Combine"; +import {OsmConnection} from "../../Logic/Osm/OsmConnection"; +import {Store, UIEventSource} from "../../Logic/UIEventSource"; +import {BBox} from "../../Logic/BBox"; +import Translations from "../i18n/Translations"; +import {VariableUiElement} from "../Base/VariableUIElement"; +import Toggle from "../Input/Toggle"; +import {SubtleButton} from "../Base/SubtleButton"; +import Svg from "../../Svg"; +import {Utils} from "../../Utils"; +import Constants from "../../Models/Constants"; + +export class OpenJosm extends Combine { + constructor(osmConnection: OsmConnection, bounds: Store, iconStyle?: string) { + const t = Translations.t.general.attribution + + const josmState = new UIEventSource(undefined) + // Reset after 15s + josmState.stabilized(15000).addCallbackD((_) => josmState.setData(undefined)) + + const stateIndication = new VariableUiElement( + josmState.map((state) => { + if (state === undefined) { + return undefined + } + state = state.toUpperCase() + if (state === "OK") { + return t.josmOpened.SetClass("thanks") + } + return t.josmNotOpened.SetClass("alert") + }) + ) + + const toggle = new Toggle( + new SubtleButton(Svg.josm_logo_svg().SetStyle(iconStyle), t.editJosm).onClick(() => { + const bbox = bounds.data + if (bbox === undefined) { + return + } + const top = bbox.getNorth() + const bottom = bbox.getSouth() + const right = bbox.getEast() + const left = bbox.getWest() + const josmLink = `http://127.0.0.1:8111/load_and_zoom?left=${left}&right=${right}&top=${top}&bottom=${bottom}` + Utils.download(josmLink) + .then((answer) => josmState.setData(answer.replace(/\n/g, "").trim())) + .catch((_) => josmState.setData("ERROR")) + }).SetClass("w-full"), + undefined, + osmConnection.userDetails.map( + (ud) => ud.loggedIn && ud.csCount >= Constants.userJourney.historyLinkVisible + ) + ) + + super([stateIndication, toggle]) + } +} diff --git a/UI/Popup/MapillaryLinkVis.ts b/UI/Popup/MapillaryLinkVis.ts index 721e6be73..eadb35e47 100644 --- a/UI/Popup/MapillaryLinkVis.ts +++ b/UI/Popup/MapillaryLinkVis.ts @@ -1,10 +1,10 @@ -import { GeoOperations } from "../../Logic/GeoOperations" -import { MapillaryLink } from "../BigComponents/MapillaryLink" -import { UIEventSource } from "../../Logic/UIEventSource" -import Loc from "../../Models/Loc" -import { SpecialVisualization, SpecialVisualizationState } from "../SpecialVisualization" -import { Feature } from "geojson" +import {GeoOperations} from "../../Logic/GeoOperations" +import {ImmutableStore, UIEventSource} from "../../Logic/UIEventSource" +import {SpecialVisualization, SpecialVisualizationState} from "../SpecialVisualization" +import {Feature} from "geojson" import BaseUIElement from "../BaseUIElement" +import SvelteUIElement from "../Base/SvelteUIElement"; +import MapillaryLink from "../BigComponents/MapillaryLink.svelte"; export class MapillaryLinkVis implements SpecialVisualization { funcName = "mapillary_link" @@ -28,12 +28,12 @@ export class MapillaryLinkVis implements SpecialVisualization { if (isNaN(zoom)) { zoom = 18 } - return new MapillaryLink({ - locationControl: new UIEventSource({ + return new SvelteUIElement(MapillaryLink, { + mapProperties: { lat, - lon, - zoom, - }), + lon + }, + zoom: new ImmutableStore(zoom) }) } } diff --git a/UI/SpecialVisualizations.ts b/UI/SpecialVisualizations.ts index 95995fb82..6977f3ee7 100644 --- a/UI/SpecialVisualizations.ts +++ b/UI/SpecialVisualizations.ts @@ -30,7 +30,6 @@ import OpeningHoursVisualization from "./OpeningHours/OpeningHoursVisualization" import LiveQueryHandler from "../Logic/Web/LiveQueryHandler" import {SubtleButton} from "./Base/SubtleButton" import Svg from "../Svg" -import {OpenIdEditor, OpenJosm} from "./BigComponents/CopyrightPanel" import Hash from "../Logic/Web/Hash" import NoteCommentElement from "./Popup/NoteCommentElement" import ImgurUploader from "../Logic/ImageProviders/ImgurUploader" @@ -74,6 +73,8 @@ import {PointImportButtonViz} from "./Popup/ImportButtons/PointImportButtonViz"; import WayImportButtonViz from "./Popup/ImportButtons/WayImportButtonViz"; import ConflateImportButtonViz from "./Popup/ImportButtons/ConflateImportButtonViz"; import DeleteWizard from "./Popup/DeleteFlow/DeleteWizard.svelte"; +import {OpenJosm} from "./BigComponents/OpenJosm"; +import OpenIdEditor from "./BigComponents/OpenIdEditor.svelte"; class NearbyImageVis implements SpecialVisualization { // Class must be in SpecialVisualisations due to weird cyclical import that breaks the tests @@ -508,7 +509,7 @@ export default class SpecialVisualizations { constr(state: SpecialVisualizationState): BaseUIElement { return new LanguagePicker( state.layout.language, - Translations.t.general.pickLanguage.Clone() + state.userRelatedState.language ) }, }, @@ -890,7 +891,8 @@ export default class SpecialVisualizations { docs: "Opens the current view in the iD-editor", args: [], constr: (state, feature) => { - return new OpenIdEditor(state.mapProperties, undefined, feature.data.id) + return new SvelteUIElement(OpenIdEditor, + { mapProperties: state.mapProperties, objectId: feature.data.id}) }, }, { diff --git a/UI/ThemeViewGUI.svelte b/UI/ThemeViewGUI.svelte index 7c1408282..ccbea3e15 100644 --- a/UI/ThemeViewGUI.svelte +++ b/UI/ThemeViewGUI.svelte @@ -46,6 +46,9 @@ import RasterLayerOverview from "./Map/RasterLayerOverview.svelte"; import IfHidden from "./Base/IfHidden.svelte"; import {onDestroy} from "svelte"; + import {OpenJosm} from "./BigComponents/OpenJosm"; + import MapillaryLink from "./BigComponents/MapillaryLink.svelte"; + import OpenIdEditor from "./BigComponents/OpenIdEditor.svelte"; export let state: ThemeViewState; let layout = state.layout; @@ -359,7 +362,10 @@
- + + new OpenJosm(state.osmConnection, state.mapProperties.bounds).SetClass("w-full")}/> + +