Migrate LinkControl to vue

src/components/MapUI.vue

@@ -30,7 +30,7 @@
 				<ChatControl v-if="chatBoxEnabled"></ChatControl>
 			</div>
 			<div class="ui__toolbar">
-				<LinkControl v-if="linkControlEnabled" :leaflet="leaflet"></LinkControl>
+				<LinkControl v-if="linkControlEnabled"></LinkControl>
 				<CoordinatesControl v-if="coordinatesControlEnabled" :leaflet="leaflet"></CoordinatesControl>
 			</div>
 		</div>

src/components/map/control/LinkControl.vue

@@ -13,31 +13,34 @@
   - See the License for the specific language governing permissions and
   - limitations under the License.
   -->
+<template>
+	<button class="ui__element ui__button" type="button" :title="linkTitle"
+	        v-clipboard:copy="url" v-clipboard:success="copySuccess" v-clipboard:error="copyError">
+		<SvgIcon name="link"></SvgIcon>
+	</button>
+</template>
 
 <script lang="ts">
-import {defineComponent, onMounted, onUnmounted} from "@vue/runtime-core";
+import {computed, defineComponent} from "@vue/runtime-core";
-import {LinkControl} from "@/leaflet/control/LinkControl";
+import SvgIcon from "@/components/SvgIcon.vue";
-import LiveAtlasLeafletMap from "@/leaflet/LiveAtlasLeafletMap";
+import {useStore} from "@/store";
+import {clipboardError, clipboardSuccess} from "@/util";
+import '@/assets/icons/link.svg';
 
 export default defineComponent({
-	props: {
+	components: {SvgIcon},
-		leaflet: {
+
-			type: Object as () => LiveAtlasLeafletMap,
+	setup() {
-			required: true,
+		const store = useStore(),
+			linkTitle = computed(() => store.state.messages.linkTitle),
+			url = computed(() => window.location.href.split("#")[0] + store.getters.url);
+
+		return {
+			copySuccess: clipboardSuccess(store),
+			copyError: clipboardError(store),
+			linkTitle,
+			url
 		}
 	},
-
-	setup(props) {
-		const control = new LinkControl({
-			position: 'bottomleft',
-		});
-
-		onMounted(() => props.leaflet.addControl(control));
-		onUnmounted(() => props.leaflet.removeControl(control));
-	},
-
-	render() {
-		return null;
-	}
 })
 </script>

src/leaflet/control/LinkControl.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';
-import {useStore} from "@/store";
-import '@/assets/icons/link.svg';
-import { toClipboard } from '@soerenmartius/vue3-clipboard';
-import {clipboardError, clipboardSuccess} from "@/util";
-
-/**
- * Leaflet map control providing a button for copying a link for the current map view to the clipboard
- */
-export class LinkControl extends Control {
-	declare options: ControlOptions
-
-	constructor(options: ControlOptions) {
-		super(options);
-	}
-
-	onAdd() {
-		const store = useStore(),
-			linkButton = DomUtil.create('button',
-				'leaflet-control-button leaflet-control-link') as HTMLButtonElement,
-			copySuccess = clipboardSuccess(store),
-			copyError = clipboardError(store);
-
-		linkButton.type = 'button';
-		linkButton.title = store.state.messages.linkTitle;
-		linkButton.innerHTML = `
-		<svg class="svg-icon" aria-hidden="true">
-		  <use xlink:href="#icon--link" />
-		</svg>`;
-
-		linkButton.addEventListener('click', e => {
-			e.preventDefault();
-			toClipboard(window.location.href.split("#")[0] + store.getters.url)
-				.then(copySuccess)
-				.catch(copyError)
-		});
-
-		return linkButton;
-	}
-}