Migrate LogoControl to vue

src/components/MapUI.vue

@@ -22,6 +22,7 @@
 
 		<div id="ui__top-left" class="ui__section section--vertical">
 			<div class="ui__toolbar toolbar--vertical">
+				<LogoControl v-for="logo in logoControls" :key="JSON.stringify(logo)" :options="logo"></LogoControl>
 				<LoadingControl :leaflet="leaflet" :delay="500"></LoadingControl>
 			</div>
 		</div>

src/components/map/control/LogoControl.vue

@@ -14,45 +14,47 @@
   - limitations under the License.
   -->
 
+<template>
+	<div class="ui__element ui__button logo">
+		<a v-if="options.url" :href="options.url" :aria-label="options.text">
+			<img v-if="options.image" :src="options.image" :alt="options.text" />
+			<template v-else>{{ options.text }}</template>
+		</a>
+		<template v-else>
+			<img v-if="options.image" :src="options.image" :alt="options.text" />
+			<template v-else>{{ options.text }}</template>
+		</template>
+	</div>
+</template>
+
 <script lang="ts">
 import {defineComponent} from "@vue/runtime-core";
-import {LogoControl, LogoControlOptions} from "@/leaflet/control/LogoControl";
+import {LogoControlOptions} from "@/index";
-import LiveAtlasLeafletMap from "@/leaflet/LiveAtlasLeafletMap";
 
 export default defineComponent({
 	props: {
 		options: {
 			type: Object as () => LogoControlOptions,
 			required: true,
-		},
-		leaflet: {
-			type: Object as () => LiveAtlasLeafletMap,
-			required: true,
 		}
-	},
-
-	setup(props) {
-		const control = new LogoControl(props.options);
-
-		return {
-			control,
 	}
-	},
+});
-
-	mounted() {
-		this.leaflet.addControl(this.control);
-	},
-
-	unmounted() {
-		this.leaflet.removeControl(this.control);
-	},
-
-	render() {
-		return null;
-	}
-})
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+	.logo {
+		flex-shrink: 0;
+		width: auto;
+		min-width: var(--ui-button-size);
+		padding: 0;
 
+		a {
+			box-sizing: border-box;
+			height: 100%;
+			padding: 0.8rem 0.8rem 0.7rem;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+	}
 </style>

src/index.d.ts

@@ -26,7 +26,6 @@ import {
 	PointTuple,
 	PolylineOptions
 } from "leaflet";
-import {LogoControlOptions} from "@/leaflet/control/LogoControl";
 import {globalMessages, serverMessages} from "../messages";
 import {LiveAtlasMarkerType} from "@/util/markers";
 import {LiveAtlasTileLayer, LiveAtlasTileLayerOptions} from "@/leaflet/tileLayer/LiveAtlasTileLayer";
@@ -303,6 +302,12 @@ export interface CoordinatesControlOptions extends ControlOptions {
 	label: string;
 }
 
+export interface LogoControlOptions extends ControlOptions {
+	url?: string;
+	image?: string;
+	text: string;
+}
+
 interface LiveAtlasPartialComponentConfig {
 	markers?: {
 		showLabels: boolean;

src/leaflet/control/LogoControl.ts

@@ -1,59 +0,0 @@
-/*
- * Copyright 2022 James Lyne
- *
- * Some portions of this file were taken from https://github.com/webbukkit/dynmap.
- * These portions are Copyright 2020 Dynmap Contributors.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import {Control, ControlOptions, DomUtil} from 'leaflet';
-
-export interface LogoControlOptions extends ControlOptions {
-	url?: string;
-	image?: string;
-	text: string;
-}
-
-/**
- * Leaflet map control which displays an arbitrary image or text with an optional link
- * Intended for use for dynmap logo components
- */
-export class LogoControl extends Control {
-	declare options: LogoControlOptions;
-
-	constructor(options: LogoControlOptions) {
-		super(options);
-	}
-
-	onAdd() {
-		const container = DomUtil.create('div', 'leaflet-control-logo');
-		let link;
-
-		if (this.options.url) {
-			link = DomUtil.create('a', '', container) as HTMLAnchorElement;
-			link.href = this.options.url;
-			link.setAttribute('aria-label', this.options.text);
-		}
-
-		if (this.options.image) {
-			const image = DomUtil.create('img', '', link) as HTMLImageElement;
-			image.src = this.options.image;
-			image.alt = this.options.text;
-		} else {
-			container.textContent = this.options.text;
-		}
-
-		return container;
-	}
-}

src/scss/leaflet/_controls.scss

@@ -139,18 +139,6 @@
 	}
 }
 
-.leaflet-control-logo {
-	flex-shrink: 0;
-
-	a {
-		height: 100%;
-		width: 100%;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-}
-
 .leaflet-top, .leaflet-bottom,
 .leaflet-left, .leaflet-right {
 	display: flex;