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

Refactoring: remove last of old SVG-bundling

Browse source
This commit is contained in:
Pieter Vander Vennet 2024-07-10 11:40:00 +02:00
parent 195e9b140f
commit 3bb73425e3
8 changed files with 38 additions and 153 deletions
Download patch file Download diff file Expand all files Collapse all files

151
scripts/generateIncludedImages.ts
View file

@ -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()

6
src/UI/Base/Loading.ts
View file

@ -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,

5
src/UI/Image/DeleteImage.ts
View file

@ -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

5
src/UI/OpeningHours/OpeningHoursRange.ts
View file

@ -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()

7
src/UI/Popup/ImportButtons/ImportFlow.svelte
View file

@ -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>

10
src/UI/Popup/LoginButton.ts
View file

@ -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]

5
src/UI/Popup/Notes/CreateNewNote.svelte
View file

@ -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>

2
src/UI/Popup/SendEmail.svelte
View file

@ -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"