From a8ec660ffdf56a4a41c3769ec403dd3b88f318d0 Mon Sep 17 00:00:00 2001
From: James Lyne <jim+github@not-null.co.uk>
Date: Mon, 24 May 2021 16:42:32 +0100
Subject: [PATCH] Map context menu

---
 package.json                             |  2 +-
 src/components/Map.vue                   | 10 ++++++++-
 src/components/sidebar/WorldListItem.vue |  1 +
 src/main.ts                              |  3 ++-
 src/scss/style.scss                      | 27 ++++++++++++++++++++++++
 5 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 86baeea..e7fa8d3 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@types/clipboard": "^2.0.1",
+    "@soerenmartius/vue3-clipboard": "^0.1.2",
     "@types/leaflet": "^1.7.0",
     "@typescript-eslint/eslint-plugin": "^4.23.0",
     "@typescript-eslint/parser": "^4.23.0",
diff --git a/src/components/Map.vue b/src/components/Map.vue
index 960fe13..c56714d 100644
--- a/src/components/Map.vue
+++ b/src/components/Map.vue
@@ -25,6 +25,7 @@
 		<LinkControl v-if="linkControlEnabled" :leaflet="leaflet"></LinkControl>
 		<ClockControl v-if="clockControlEnabled" :leaflet="leaflet"></ClockControl>
 		<ChatControl v-if="chatBoxEnabled" :leaflet="leaflet"></ChatControl>
+		<MapContextMenu :leaflet="leaflet" v-if="leaflet"></MapContextMenu>
 	</div>
 </template>
 
@@ -45,9 +46,11 @@ import {Coordinate, DynmapPlayer} from "@/dynmap";
 import {ActionTypes} from "@/store/action-types";
 import DynmapMap from "@/leaflet/DynmapMap";
 import {LoadingControl} from "@/leaflet/control/LoadingControl";
+import MapContextMenu from "@/components/map/MapContextMenu.vue";
 
 export default defineComponent({
 	components: {
+		MapContextMenu,
 		MapLayer,
 		PlayersLayer,
 		MarkerSetLayer,
@@ -90,20 +93,24 @@ export default defineComponent({
 			maps,
 			markerSets,
 			configuration,
+
 			playerMarkersEnabled,
 			coordinatesControlEnabled,
 			clockControlEnabled,
 			linkControlEnabled,
 			chatBoxEnabled,
+
 			logoControls,
 			followTarget,
 			panTarget,
 			mapBackground,
+
 			currentWorld,
 			currentMap,
 			currentProjection,
+
 			scheduledPan,
-			scheduledZoom
+			scheduledZoom,
 		}
 	},
 
@@ -277,5 +284,6 @@ export default defineComponent({
 		height: 100%;
 		background: transparent;
 		z-index: 0;
+		cursor: default;
 	}
 </style>
\ No newline at end of file
diff --git a/src/components/sidebar/WorldListItem.vue b/src/components/sidebar/WorldListItem.vue
index 3b5844f..4253f99 100644
--- a/src/components/sidebar/WorldListItem.vue
+++ b/src/components/sidebar/WorldListItem.vue
@@ -106,6 +106,7 @@ export default defineComponent({
 			margin-left: auto;
 			padding-left: 1rem;
 			padding-right: 0.2rem;
+			list-style: none;
 		}
 	}
 
diff --git a/src/main.ts b/src/main.ts
index d18dc70..414153d 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -23,6 +23,7 @@ import 'normalize-scss/sass/normalize/_import-now.scss';
 import '@/scss/style.scss';
 import {MutationTypes} from "@/store/mutation-types";
 import {validateConfiguration} from "@/util";
+import { VueClipboard } from '@soerenmartius/vue3-clipboard'
 
 const splash = document.getElementById('splash'),
 	splashSpinner = document.getElementById('splash__spinner'),
@@ -109,7 +110,7 @@ try {
 		store.commit(MutationTypes.SET_CURRENT_SERVER, config.keys().next().value);
 	}
 
-	const app = createApp(App).use(store);
+	const app = createApp(App).use(store).use(VueClipboard);
 
 	// app.config.performance = true;
 	app.mount('#app');
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 01a6f01..94e03cf 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -139,6 +139,33 @@ input {
 	}
 }
 
+.menu {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	font-size: 1.6rem;
+
+	ul {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+	}
+
+	> li {
+		display: flex;
+		padding: 0.8rem 0.8rem 0.7rem;
+		margin: 0 !important;
+
+		> button {
+			margin: -0.8rem -0.8rem -0.7rem;
+			padding: 0.8rem 0.8rem 0.7rem;
+			text-align: left;
+			flex-grow: 1;
+			min-height: 3.2rem;
+		}
+	}
+}
+
 #app .map .tile img, img {
     image-rendering: pixelated;
 }