Refactoring: remove last of old SVG-bundling

2024-07-10 11:40:00 +02:00 · 2024-07-10 11:40:00 +02:00 · 3bb73425e3
commit 3bb73425e3
parent 195e9b140f
8 changed files with 38 additions and 153 deletions
--- 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 =
-            '<script>\nexport let color = "#000000"\n</script>\n' +
+            "<script>\nexport let color = \"#000000\"\n</script>\n" +
            svg
                .replace(
                    "<svg ",
-                    "<svg {...$$$$restProps} on:click on:mouseover on:mouseenter on:mouseleave on:keydown "
+                    "<svg {...$$$$restProps} on:click on:mouseover on:mouseenter on:mouseleave on:keydown ",
                )
-                .replace(/\\"/g, '"')
+                .replace(/\\"/g, "\"")
                .replace(/(rgb\(0%,0%,0%\)|#000000|#000)/g, "{color}")
        fs.writeFileSync("./src/assets/svg/" + nameUC + ".svelte", svelteCode, "utf8")

-        if (blacklist.some((item) => path.toLowerCase().endsWith(item + ".svg"))) {
-            continue
    }
-        if (dryrun) {
-            svg = "<omitting svg - dryrun>"
-        }
-
-        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<void> {
+        genImages()
+
+    }
+}
+
+new GenerateIncludedImages().run()
--- 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,
--- 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
--- 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()
--- 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<ImportFlowArguments>
  let state = importFlow.state
@ -77,7 +76,7 @@
          state.guistate.openFilterView(filteredLayer.layerDef)
        }}
      >
-        <ToSvelte construct={Svg.layers_svg().SetClass("w-12")} />
+        <Layers class="w-12"/>
        <Tr t={Translations.t.general.add.openLayerControl} />
      </button>

@ -120,7 +119,7 @@
          state.guistate.openFilterView(filteredLayer.layerDef)
        }}
      >
-        <ToSvelte construct={Svg.layers_svg().SetClass("w-12")} />
+        <Layers class="w-12"/>
        <Tr t={Translations.t.general.add.openLayerControl} />
      </button>
    </div>
--- 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]
--- 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 @@
        <div class="h-56 w-full">
          <NewPointLocationInput value={coordinate} {state}>
            <div class="h-20 w-full pb-10" slot="image">
-              <ToSvelte construct={Svg.note_svg().SetClass("h-10 w-full")} />
+              <Note class="h-10 w-full"/>
            </div>
          </NewPointLocationInput>
        </div>
--- a/src/UI/Popup/SendEmail.svelte
+++ b/src/UI/Popup/SendEmail.svelte
@ -1,7 +1,5 @@
 <script lang="ts">
  import type { OsmTags } from "../../Models/OsmFeature"
-  import Svg from "../../Svg"
-  import ToSvelte from "../Base/ToSvelte.svelte"
  import { Utils } from "../../Utils"
  import { Store } from "../../Logic/UIEventSource"
  import Envelope from "../../assets/svg/Envelope.svelte"