From 3bb73425e36fb4a089097b44f0428892c6a0c23f Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Wed, 10 Jul 2024 11:40:00 +0200 Subject: [PATCH] Refactoring: remove last of old SVG-bundling --- scripts/generateIncludedImages.ts | 151 +++---------------- src/UI/Base/Loading.ts | 6 +- src/UI/Image/DeleteImage.ts | 5 +- src/UI/OpeningHours/OpeningHoursRange.ts | 5 +- src/UI/Popup/ImportButtons/ImportFlow.svelte | 7 +- src/UI/Popup/LoginButton.ts | 10 +- src/UI/Popup/Notes/CreateNewNote.svelte | 5 +- src/UI/Popup/SendEmail.svelte | 2 - 8 files changed, 38 insertions(+), 153 deletions(-) diff --git a/scripts/generateIncludedImages.ts b/scripts/generateIncludedImages.ts index 6b256bc70..d31dd6b17 100644 --- a/scripts/generateIncludedImages.ts +++ b/scripts/generateIncludedImages.ts @@ -1,118 +1,9 @@ import * as fs from "fs" +import Script from "./Script" function genImages(dryrun = false) { console.log("Generating images") - // These images are not referenced via 'Svg.ts' anymore and can be ignored - const blacklist: string[] = [ - "add", - "addSmall", - "back", - "circle", - "blocked", - "brick_wall", - "brick_wall_raw", - "brick_wall_round", - "brick_wall_square", - "bug", - "center", - "checkmark", - "clock", - "close", - "community", - "compass", - "compass_arrow", - "confirm", - "copyright", - "cross", - "cross_bottom_right", - "crosshair", - "crosshair_locked", - "crosshair-locked", - "delete_not_allowed", - "direction_gradient", - "direction_stroke", - "duplicate", - "elevator", - "elevator_wheelchair", - "envelope", - "eye", - "filter", - "filter_disable", - "floppy", - "gear", - "gender_bi", - "gender_inter", - "gender_female", - "gender_male", - "gender_trans", - "gender_queer", - "generic_map", - "gps_arrow", - "hand", - "help", - "home", - "length_crosshair", - "length-crosshair", - "liberapay", - "location", - "location_empty", - "location_locked", - "location_refused", - "location-refused", - "location_unlocked", - "logo", - "logout", - "mapcomplete_logo", - "mapillary", - "mapillary_black", - "mastodon", - "min", - "move", - "move-arrows", - "move_confirm", - "move_not_allowed", - "not_found", - "osm_logo_us", - "osm-logo-us", - "party", - "pencil", - "person", - "pin", - "plantnet_logo", - "plus", - "reload", - "resolved", - "ring", - "robot", - "scissors", - "search", - "search_disable", - "share", - "SocialImageForeground", - "speech_bubble", - "speech_bubble_black_outline", - "square", - "square_rounded", - "star", - "star_half", - "star_outline", - "teardrop", - "teardrop_with_hole_green", - "statistics", - "translate", - "triangle", - "up", - "Upload", - "wikidata", - "wikimedia-commons-white", - "wikimedia_commons_white", - "wikipedia", - "github", - ].map((s) => s.toLowerCase()) const dir = fs.readdirSync("./assets/svg") - - let module = - 'import Img from "./UI/Base/Img";\n\n/* @deprecated */\nexport default class Svg {\n\n\n' for (const path of dir) { if (path.endsWith("license_info.json")) { continue @@ -133,7 +24,7 @@ function genImages(dryrun = false) { .replace(/\n/g, " ") .replace(/\r/g, "") .replace(/\\/g, "\\") - .replace(/"/g, '\\"') + .replace(/"/g, "\\\"") .replaceAll(" ", " ") let hasNonAsciiChars = Array.from(svg) @@ -147,35 +38,29 @@ function genImages(dryrun = false) { const nameUC = name.toUpperCase().at(0) + name.substring(1) const svelteCode = - '\n' + + "\n" + svg .replace( " path.toLowerCase().endsWith(item + ".svg"))) { - continue - } - if (dryrun) { - svg = "" - } - - let rawName = name - - module += ` public static ${name} = "${svg}"\n` - if (!dryrun) { - module += ` public static ${name}_svg() { return new Img(Svg.${rawName}, true);}\n` - } else { - module += ` public static ${name}_svg() { return new Img("", true);}\n` - } } - module += "}\n" - fs.writeFileSync("src/Svg.ts", module) - console.log("Done") } -genImages() + +class GenerateIncludedImages extends Script { + constructor() { + super("Converts all images from assets/svg into svelte-classes.") + } + + async main(args: string[]): Promise { + genImages() + + } +} + +new GenerateIncludedImages().run() diff --git a/src/UI/Base/Loading.ts b/src/UI/Base/Loading.ts index b6e0b577a..f63a3813d 100644 --- a/src/UI/Base/Loading.ts +++ b/src/UI/Base/Loading.ts @@ -1,14 +1,14 @@ import Combine from "./Combine" -import Svg from "../../Svg" import Translations from "../i18n/Translations" import BaseUIElement from "../BaseUIElement" - +import SvelteUIElement from "./SvelteUIElement" +import {default as LoadingSvg} from "../../assets/svg/Loading.svelte" export default class Loading extends Combine { constructor(msg?: BaseUIElement | string) { const t = Translations.W(msg) ?? Translations.t.general.loading t.SetClass("pl-2") super([ - Svg.loading_svg() + new SvelteUIElement(LoadingSvg) .SetClass("animate-spin self-center") .SetStyle("width: 1.5rem; height: 1.5rem; min-width: 1.5rem;"), t, diff --git a/src/UI/Image/DeleteImage.ts b/src/UI/Image/DeleteImage.ts index 93f182e22..760213563 100644 --- a/src/UI/Image/DeleteImage.ts +++ b/src/UI/Image/DeleteImage.ts @@ -2,12 +2,13 @@ import { Store } from "../../Logic/UIEventSource" import Translations from "../i18n/Translations" import Toggle, { ClickableToggle } from "../Input/Toggle" import Combine from "../Base/Combine" -import Svg from "../../Svg" import { Tag } from "../../Logic/Tags/Tag" import ChangeTagAction from "../../Logic/Osm/Actions/ChangeTagAction" import { Changes } from "../../Logic/Osm/Changes" import { OsmConnection } from "../../Logic/Osm/OsmConnection" import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig" +import SvelteUIElement from "../Base/SvelteUIElement" +import Delete_icon from "../../assets/svg/Delete_icon.svelte" export default class DeleteImage extends Toggle { constructor( @@ -48,7 +49,7 @@ export default class DeleteImage extends Toggle { .Clone() .SetClass("bg-white pl-4 pr-4") .SetStyle("border-bottom-left-radius:30rem; border-bottom-right-radius: 30rem;") - const openDelete = Svg.delete_icon_svg().SetStyle("width: 2em; height: 2em; display:block;") + const openDelete = new SvelteUIElement(Delete_icon).SetStyle("width: 2em; height: 2em; display:block;") const deleteDialog = new ClickableToggle( new Combine([deleteButton, cancelButton]).SetClass("flex flex-col background-black"), openDelete diff --git a/src/UI/OpeningHours/OpeningHoursRange.ts b/src/UI/OpeningHours/OpeningHoursRange.ts index edf8347f6..45e210cd2 100644 --- a/src/UI/OpeningHours/OpeningHoursRange.ts +++ b/src/UI/OpeningHours/OpeningHoursRange.ts @@ -1,12 +1,13 @@ /** * A single opening hours range, shown on top of the OH-picker table */ -import Svg from "../../Svg" import { Utils } from "../../Utils" import Combine from "../Base/Combine" import { OH, OpeningHour } from "./OpeningHours" import BaseUIElement from "../BaseUIElement" import { FixedUiElement } from "../Base/FixedUiElement" +import SvelteUIElement from "../Base/SvelteUIElement" +import Delete_icon from "../../assets/svg/Delete_icon.svelte" export default class OpeningHoursRange extends BaseUIElement { private _oh: OpeningHour @@ -30,7 +31,7 @@ export default class OpeningHoursRange extends BaseUIElement { Utils.TwoDigits(oh.endHour) + ":" + Utils.TwoDigits(oh.endMinutes) ) - const deleteRange = Svg.delete_icon_svg() + const deleteRange = new SvelteUIElement(Delete_icon) .SetClass("rounded-full w-6 h-6 block bg-black pointer-events-auto ") .onClick(() => { this._onDelete() diff --git a/src/UI/Popup/ImportButtons/ImportFlow.svelte b/src/UI/Popup/ImportButtons/ImportFlow.svelte index 9b5062dfe..4614ab601 100644 --- a/src/UI/Popup/ImportButtons/ImportFlow.svelte +++ b/src/UI/Popup/ImportButtons/ImportFlow.svelte @@ -16,11 +16,10 @@ import TagHint from "../TagHint.svelte" import { TagsFilter } from "../../../Logic/Tags/TagsFilter" import { Store } from "../../../Logic/UIEventSource" - import Svg from "../../../Svg" - import ToSvelte from "../../Base/ToSvelte.svelte" import { EyeIcon, EyeOffIcon } from "@rgossiaux/svelte-heroicons/solid" import FilteredLayer from "../../../Models/FilteredLayer" import Confirm from "../../../assets/svg/Confirm.svelte" + import Layers from "../../../assets/svg/Layers.svelte" export let importFlow: ImportFlow let state = importFlow.state @@ -77,7 +76,7 @@ state.guistate.openFilterView(filteredLayer.layerDef) }} > - +
@@ -120,7 +119,7 @@ state.guistate.openFilterView(filteredLayer.layerDef) }} > - +
diff --git a/src/UI/Popup/LoginButton.ts b/src/UI/Popup/LoginButton.ts index d47f22b13..846a5f4f1 100644 --- a/src/UI/Popup/LoginButton.ts +++ b/src/UI/Popup/LoginButton.ts @@ -1,6 +1,5 @@ import { SubtleButton } from "../Base/SubtleButton" import BaseUIElement from "../BaseUIElement" -import Svg from "../../Svg" import { OsmConnection, OsmServiceState } from "../../Logic/Osm/OsmConnection" import { VariableUiElement } from "../Base/VariableUIElement" import Loading from "../Base/Loading" @@ -8,6 +7,9 @@ import Translations from "../i18n/Translations" import { ImmutableStore, Store } from "../../Logic/UIEventSource" import Combine from "../Base/Combine" import { Translation } from "../i18n/Translation" +import SvelteUIElement from "../Base/SvelteUIElement" +import Login from "../../assets/svg/Login.svelte" +import Invalid from "../../assets/svg/Invalid.svelte" class LoginButton extends SubtleButton { constructor( @@ -17,7 +19,7 @@ class LoginButton extends SubtleButton { }, icon?: BaseUIElement | string ) { - super(icon ?? Svg.login_svg(), text) + super(icon ?? new SvelteUIElement(Login), text) this.onClick(() => { state.osmConnection?.AttemptLogin() }) @@ -65,7 +67,7 @@ export class LoginToggle extends VariableUiElement { const apiTranslation = offlineModes[apiState] if (apiTranslation !== undefined) { return new Combine([ - Svg.invalid_svg().SetClass("w-8 h-8 m-2 shrink-0"), + new SvelteUIElement(Invalid).SetClass("w-8 h-8 m-2 shrink-0"), apiTranslation, ]).SetClass("flex items-center alert max-w-64") } @@ -84,7 +86,7 @@ export class LoginToggle extends VariableUiElement { return new LoginButton( Translations.t.general.loginFailed, state, - Svg.invalid_svg() + new SvelteUIElement(Invalid) ) }, [state.featureSwitchUserbadge, state.osmConnection?.apiIsOnline] diff --git a/src/UI/Popup/Notes/CreateNewNote.svelte b/src/UI/Popup/Notes/CreateNewNote.svelte index 648e2e6dd..01c660173 100644 --- a/src/UI/Popup/Notes/CreateNewNote.svelte +++ b/src/UI/Popup/Notes/CreateNewNote.svelte @@ -13,13 +13,12 @@ import LoginToggle from "../../Base/LoginToggle.svelte" import FilteredLayer from "../../../Models/FilteredLayer" import NewPointLocationInput from "../../BigComponents/NewPointLocationInput.svelte" - import ToSvelte from "../../Base/ToSvelte.svelte" - import Svg from "../../../Svg" import Layers from "../../../assets/svg/Layers.svelte" import AddSmall from "../../../assets/svg/AddSmall.svelte" import type { OsmTags } from "../../../Models/OsmFeature" import Loading from "../../Base/Loading.svelte" import NextButton from "../../Base/NextButton.svelte" + import Note from "../../../assets/svg/Note.svelte" export let coordinate: UIEventSource<{ lon: number; lat: number }> export let state: SpecialVisualizationState @@ -124,7 +123,7 @@
- +
diff --git a/src/UI/Popup/SendEmail.svelte b/src/UI/Popup/SendEmail.svelte index 02584949f..c7d197dc0 100644 --- a/src/UI/Popup/SendEmail.svelte +++ b/src/UI/Popup/SendEmail.svelte @@ -1,7 +1,5 @@