Map context menu

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

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>

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;
 		}
 	}
 

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');

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;
 }