Add a context menu in webmap

core/src/main/java/net/pl3x/map/core/configuration/Lang.java

@@ -218,7 +218,7 @@ public final class Lang extends AbstractConfig {
     @Key("ui.contextmenu.label")
     public static String UI_CONTEXTMENU_LABEL = "ContextMenu";
     @Key("ui.contextmenu.copy-coords")
-    public static String UI_CONTEXTMENU_COPY_COORDS = "Copy coordinates";
+    public static String UI_CONTEXTMENU_COPY_COORDS = "X: <x> Y: <y> Z: <z>";
     @Key("ui.contextmenu.copy-link")
     public static String UI_CONTEXTMENU_COPY_LINK = "Copy link to here";
     @Key("ui.contextmenu.center-map")

core/src/main/java/net/pl3x/map/core/configuration/WorldConfig.java

@@ -134,29 +134,45 @@ public final class WorldConfig extends AbstractConfig {
 
     @Key("ui.context-menu.items")
     @Comment("""
-            Items to show in the context menu. Leave empty for custom html.
+            Items to show in the context menu.
             Available items are:
             copy-coords, copy-link, center-map""")
     public List<@NotNull String> UI_CONTEXT_MENU_ITEMS = new ArrayList<>() {{
         add("copy-coords");
         add("copy-link");
         add("center-map");
     }};
-
-    @Key("ui.context-menu.custom-html.enabled")
-    @Comment("""
-            Use custom html for the context menu.""")
-    public boolean UI_CONTEXT_MENU_CUSTOM_HTML_ENABLED = false;
-
-    @Key("ui.context-menu.custom-html.html")
-    @Comment("""
-            Custom html for the context menu.""")
-    public String UI_CONTEXT_MENU_CUSTOM_HTML_HTML = "";
-
-    @Key("ui.context-menu.custom-html.css")
+
+    @Key("ui.context-menu.css")
     @Comment("""
             Custom css for the context menu.""")
-    public String UI_CONTEXT_MENU_CUSTOM_HTML_CSS = "";
+    public static String UI_CONTEXT_MENU_CSS = """
+            .leaflet-control-contextmenu {
+              display: none;
+              position: absolute;
+              flex-direction: column;
+              font-family: monospace;
+              top: 0;
+              left: 0;
+              text-align: left;
+              white-space: pre;
+              background-color: var(--ui-background);
+              border: var(--ui-border);
+              border-radius: var(--ui-border-radius);
+              overflow: hidden;
+              z-index: 10000; /* Ensure the menu appears over other map controls */
+            }
+
+            .leaflet-control-contextmenu-item {
+              padding: 5px;
+              color: var(--ui-text);
+              transition: background-color 0.3s ease-in-out;
+
+              &:hover {
+                background-color: var(--ui-background-hover);
+                color: var(--ui-text-hover);
+              }
+            }""";
 
     @Key("center.x")
     @Comment("""

core/src/main/java/net/pl3x/map/core/renderer/task/UpdateSettingsData.java

@@ -127,11 +127,7 @@ public void run() {
             ui.put("contextMenu", Map.of(
                     "enabled", config.UI_CONTEXT_MENU_ENABLED,
                     "items", config.UI_CONTEXT_MENU_ITEMS,
-                    "customHtml", Map.of(
-                            "enabled", config.UI_CONTEXT_MENU_CUSTOM_HTML_ENABLED,
-                            "html", config.UI_CONTEXT_MENU_CUSTOM_HTML_HTML,
-                            "css", config.UI_CONTEXT_MENU_CUSTOM_HTML_CSS
-                    )
+                    "css", config.UI_CONTEXT_MENU_CSS
             ));
 
             Map<String, Object> settings = new LinkedHashMap<>();

core/src/main/resources/locale/lang-pl.yml

@@ -118,7 +118,7 @@ ui:
       biome: Nieznany biom
   contextmenu:
     label: ContextMenu
-    copy-coords: Skopiuj współrzędne
+    copy-coords: 'X: <x> Y: <y> Z: <z>'
     copy-link: Skopiuj link do tego miejsca
     center-map: Wyśrodkuj mapę w tym miejscu
   coords:

webmap/src/Pl3xMap.ts

@@ -3,7 +3,6 @@ import {ControlManager} from "./control/ControlManager";
 import {PlayerManager} from "./player/PlayerManager";
 import {WorldManager} from "./world/WorldManager";
 import {getJSON} from "./util/Util";
-import ContextMenuControl from "./control/ContextMenuControl";
 import SidebarControl from "./control/SidebarControl";
 import Pl3xMapLeafletMap from "./map/Pl3xMapLeafletMap";
 import "./scss/styles.scss";

webmap/src/control/ContextMenuControl.ts

@@ -1,17 +1,18 @@
 import * as L from "leaflet";
 import {Pl3xMap} from "../Pl3xMap";
-import {ContextMenuCustomHtml, ContextMenuItemType} from "../settings/WorldSettings";
+import {ContextMenuItemType} from "../settings/WorldSettings";
+import {insertCss, removeCss} from "../util/Util";
+import Pl3xMapLeafletMap from "../map/Pl3xMapLeafletMap";
 
 export default class ContextMenuControl extends L.Control {
     private readonly _pl3xmap: Pl3xMap;
     private _dom: HTMLDivElement = L.DomUtil.create('div');
-    private _customHtml: ContextMenuCustomHtml;
+    private _id: string = 'pl3xmap-content-menu';
 
 
     constructor(pl3xmap: Pl3xMap) {
         super();
         this._pl3xmap = pl3xmap;
-        this._customHtml = pl3xmap.worldManager.currentWorld?.settings.ui.contextMenu.customHtml ?? new ContextMenuCustomHtml();
         if (this._pl3xmap.worldManager.currentWorld?.settings.ui.contextMenu.enabled) {
             this._init();
         }
@@ -20,42 +21,63 @@ export default class ContextMenuControl extends L.Control {
     private _init(): void {
         this._pl3xmap.map.on('contextmenu', this._show, this);
         this._pl3xmap.map.on('click', this._hide, this);
-        if (this._customHtml.enabled) {
-            const style = L.DomUtil.create('style', 'leaflet-control-contextmenu-custom-style', document.head);
-            style.innerHTML = this._customHtml.css;
+
+        const css = this._pl3xmap.worldManager.currentWorld?.settings.ui.contextMenu.css;
+        if (css !== undefined) {
+            insertCss(css, this._id);
         }
     }
 
     onAdd(): HTMLDivElement {
         this._dom = L.DomUtil.create('div', 'leaflet-control leaflet-control-contextmenu');
         this._dom.dataset.label = this._pl3xmap.settings!.lang.contextMenu.label;
-        if (this._customHtml.enabled) {
-            this._dom.innerHTML = this._customHtml.html;
-        }
         return this._dom;
     }
 
+
+    onRemove(): void {
+        removeCss(this._id);
+    }
+
     private _show(event: L.LeafletMouseEvent): void {
-        L.DomEvent.stopPropagation(event);
-        if (!this._customHtml.enabled) {
-            this._dom.innerHTML = '';
-            this._getItems(event).forEach((item) => {
-                const menuItem = L.DomUtil.create('div', 'leaflet-control-contextmenu-item', this._dom);
-                menuItem.innerHTML = item.label;
-                L.DomEvent.on(menuItem, 'click', (e) => {
-                    L.DomEvent.stopPropagation(e);
-                    item.callback();
-                    this._hide();
-                });
-            });
+        // Ignore right-clicks on controls (https://github.com/JLyne/LiveAtlas/blob/0819cdf2728b49d361f9adfda09ff08311a59337/src/components/map/MapContextMenu.vue#L188-L194)
+        if(event.originalEvent.target && (event.originalEvent.target as HTMLElement).closest('.leaflet-control')) {
+            return;
         }
-        this._dom.style.display = 'block';
-        this._dom.style.left = event.containerPoint.x + 'px';
-        this._dom.style.top = event.containerPoint.y + 'px';
+
+        event.originalEvent.stopImmediatePropagation();
+        event.originalEvent.preventDefault();
+
+        this._dom.style.visibility = 'visible';
+
+        this._dom.innerHTML = '';
+        this._getItems(event).forEach((item) => {
+            const menuItem = L.DomUtil.create('button', 'leaflet-control-contextmenu-item', this._dom);
+            menuItem.innerHTML = item.label;
+            L.DomEvent.on(menuItem, 'click', (e) => {
+                L.DomEvent.stopPropagation(e);
+                item.callback();
+                this._hide();
+            });
+        });
+
+        // Don't position offscreen (https://github.com/JLyne/LiveAtlas/blob/0819cdf2728b49d361f9adfda09ff08311a59337/src/components/map/MapContextMenu.vue#L123-L135)
+        const x = Math.min(
+                window.innerWidth - this._dom.offsetWidth - 10,
+                event.originalEvent.clientX
+            ),
+            y = Math.min(
+                window.innerHeight - this._dom.offsetHeight - 10,
+                event.originalEvent.clientY
+            );
+
+        this._dom.style.display = 'flex';
+        this._dom.style.transform = `translate(${x}px, ${y}px)`;
     }
 
     private _hide(): void {
-        this._dom.style.display = 'none';
+        this._dom.style.visibility = 'hidden';
+        this._dom.style.left = '-1000';
     }
 
     private _getItems(e: L.LeafletMouseEvent): Map<string, { label: string, callback: () => void }> {
@@ -69,7 +91,10 @@ export default class ContextMenuControl extends L.Control {
             switch (item) {
                 case ContextMenuItemType.copyCoords:
                     items.set('copyCoords', {
-                        label: `${this._pl3xmap.settings!.lang.contextMenu.copyCoords} ${coords}`,
+                        label: this._pl3xmap.settings!.lang.contextMenu.copyCoords
+                            .replace(/<x>/g, "" + x)
+                            .replace(/<y>/g, "" + y)
+                            .replace(/<z>/g, "" + z),
                         callback: () => navigator.clipboard.writeText(coords),
                     });
                     break;
@@ -79,8 +104,7 @@ export default class ContextMenuControl extends L.Control {
                         callback: () => navigator.clipboard.writeText(
                             window.location.href +
                             this._pl3xmap.controlManager.linkControl?.getUrlFromCoords(
-                                x,
-                                z,
+                                x, z,
                                 this._pl3xmap.map.getCurrentZoom(),
                                 world
                             )

webmap/src/scss/styles.scss

@@ -229,26 +229,3 @@ img.leaflet-tile {
     }
   }
 }
-
-.leaflet-control-contextmenu {
-  display: none;
-  position: absolute;
-  background-color: var(--ui-background);
-  border: var(--ui-border);
-  border-radius: var(--ui-border-radius);
-  overflow: hidden;
-  z-index: 10000; /* Ensure the menu appears over other map controls */
-}
-
-.leaflet-control-contextmenu-item {
-  padding: 5px;
-  font-size: 12px;
-  color: var(--ui-text);
-  cursor: pointer;
-  transition: background-color 0.3s ease-in-out;
-
-  &:hover {
-    background-color: var(--ui-background-hover);
-    color: var(--ui-text-hover);
-  }
-}

webmap/src/settings/Lang.ts

@@ -95,7 +95,6 @@ export class BlockInfoUnknown {
     private readonly _block: string;
     private readonly _biome: string;
 
-
     constructor(block: string, biome: string) {
         this._block = block;
         this._biome = biome;
@@ -146,7 +145,7 @@ export class ContextMenu {
     get copyCoords(): string {
         return this._copyCoords;
     }
-    
+
     get copyLink(): string {
         return this._copyLink;
     }

webmap/src/settings/WorldSettings.ts

@@ -188,8 +188,8 @@ export class ContextMenuSettings {
         ContextMenuItemType.copyLink,
         ContextMenuItemType.centerMap,
     ];
-    private _customHtml: ContextMenuCustomHtml = new ContextMenuCustomHtml();
-    
+    private _css: string = '';
+
     get enabled(): boolean {
         return this._enabled;
     }
@@ -205,13 +205,13 @@ export class ContextMenuSettings {
     set items(value: ContextMenuItemType[]) {
         this._items = value;
     }
-    
-    get customHtml(): ContextMenuCustomHtml {
-        return this._customHtml;
+
+    get css(): string {
+        return this._css;
     }
-    
-    set customHtml(value: ContextMenuCustomHtml) {
-        this._customHtml = value;
+
+    set css(value: string) {
+        this._css = value;
     }
 }
 
@@ -224,41 +224,6 @@ export enum ContextMenuItemType {
     centerMap = 'center-map',
 }
 
-/**
- * Represents a world's context menu custom HTML.
- */
-export class ContextMenuCustomHtml {
-    private _enabled: boolean = false;
-    private _html: string = '';
-    private _css: string = '';
-
-    get enabled(): boolean {
-        return this._enabled;
-    }
-
-    set enabled(value: boolean) {
-        this._enabled = value;
-    }
-
-    get html(): string {
-        return this._html;
-    }
-
-    set html(value: string) {
-        this._html = value;
-    }
-
-    get css(): string {
-        return this._css;
-    }
-
-    set css(value: string) {
-        this._css = value;
-    }
-}
-
-
-
 /**
  * Represents a world's zoom settings.
  */