Zoom out mirroring map.zoom.extra, and context menu to copy coord for TP command + zoom in/out

.gitignore

@@ -15,6 +15,10 @@ out/
 plugin/bin/
 api/bin/
 
+#VScode
+.vscode/
+*.code-workspace
+
 # Compiled class file
 *.class
 

common/src/main/java/xyz/jpenilla/squaremap/common/config/WorldConfig.java

@@ -62,11 +62,13 @@ private void waterSettings() {
     public int ZOOM_MAX = 3;
     public int ZOOM_DEFAULT = 3;
     public int ZOOM_EXTRA = 2;
+    public int ZOOM_EXTRA_OUT = 0;
 
     private void zoomSettings() {
         this.ZOOM_MAX = this.getInt("map.zoom.maximum", this.ZOOM_MAX);
         this.ZOOM_DEFAULT = this.getInt("map.zoom.default", this.ZOOM_DEFAULT);
         this.ZOOM_EXTRA = this.getInt("map.zoom.extra", this.ZOOM_EXTRA);
+        this.ZOOM_EXTRA_OUT = this.getInt("map.zoom.extra-out", this.ZOOM_EXTRA_OUT);
     }
 
     public boolean BACKGROUND_RENDER_ENABLED = true;

common/src/main/java/xyz/jpenilla/squaremap/common/task/UpdateWorldData.java

@@ -131,6 +131,7 @@ private void writeWorldSettings(
         zoom.put("max", worldConfig.ZOOM_MAX);
         zoom.put("def", worldConfig.ZOOM_DEFAULT);
         zoom.put("extra", worldConfig.ZOOM_EXTRA);
+        zoom.put("extra_out", worldConfig.ZOOM_EXTRA_OUT);
 
         final Map<String, Object> settings = new HashMap<>();
         settings.put("spawn", spawn);

web/src/css/styles.css

@@ -191,3 +191,34 @@ div.leaflet-control-layers.coordinates {
     background: rgba(128, 0, 0, 0.5);
     border: 1px solid rgba(128, 0, 0, 0.75);
 }
+#context-menu {
+    display: none;
+    position: absolute;
+    z-index: 10001;
+    min-width: 200px;
+    padding: 4px 0;
+    background-color: rgba(0, 0, 0, 0.75);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 3px;
+    font:
+        12px/1.5 "Helvetica Neue",
+        Arial,
+        Helvetica,
+        sans-serif;
+    color: #ffffff;
+    -webkit-user-select: none;
+    user-select: none;
+}
+.context-menu-item {
+    display: block;
+    padding: 6px 12px;
+    cursor: pointer;
+    white-space: nowrap;
+}
+.context-menu-item:hover {
+    background-color: rgba(255, 255, 255, 0.15);
+}
+.context-menu-separator {
+    margin: 4px 0;
+    border-top: 1px solid rgba(255, 255, 255, 0.2);
+}

web/src/js/ContextMenu.js

@@ -0,0 +1,107 @@
+import { S } from "./Squaremap.js";
+
+class ContextMenu {
+    /** @type {HTMLDivElement} */
+    menu;
+    /** @type {L.LatLng | null} */
+    latlng;
+    /** @type {L.Point | null} */
+    point;
+
+    constructor() {
+        this.menu = document.createElement("div");
+        this.menu.id = "context-menu";
+        S.map.getContainer().appendChild(this.menu);
+
+        this.addItem("Zoom in", () => this.zoom(1));
+        this.addItem("Zoom out", () => this.zoom(-1));
+        this.addSeparator();
+        this.addItem("Copy coordinates", () => this.copyCoordinates());
+        this.addItem("Copy coordinates (Y: 150)", () => this.copyCoordinates(150));
+
+        S.map.on("contextmenu", (e) => {
+            this.latlng = e.latlng;
+            this.point = S.toPoint(e.latlng);
+            this.open(e.containerPoint);
+        });
+        S.map.on("movestart zoomstart click", () => this.close());
+        document.addEventListener("keydown", (e) => {
+            if (e.key === "Escape") {
+                this.close();
+            }
+        });
+        document.addEventListener("click", (e) => {
+            if (!this.menu.contains(e.target)) {
+                this.close();
+            }
+        });
+    }
+
+    /**
+     * @param {string} label
+     * @param {() => void} onClick
+     */
+    addItem(label, onClick) {
+        const item = document.createElement("div");
+        item.className = "context-menu-item";
+        item.textContent = label;
+        item.addEventListener("click", () => {
+            onClick();
+            this.close();
+        });
+        this.menu.appendChild(item);
+    }
+
+    addSeparator() {
+        const separator = document.createElement("div");
+        separator.className = "context-menu-separator";
+        this.menu.appendChild(separator);
+    }
+
+    /**
+     * @param {number} delta
+     */
+    zoom(delta) {
+        if (this.latlng == null) {
+            return;
+        }
+        S.map.setZoomAround(this.latlng, S.map.getZoom() + delta);
+    }
+
+    /**
+     * @param {number} [y]
+     */
+    async copyCoordinates(y) {
+        if (this.point == null) {
+            return;
+        }
+        const x = Math.floor(this.point.x);
+        const z = Math.floor(this.point.y);
+        const text = y == null ? `${x} ${z}` : `${x} ${y} ${z}`;
+        await navigator.clipboard.writeText(text);
+    }
+
+    /**
+     * @param {L.Point} containerPoint
+     */
+    open(containerPoint) {
+        this.menu.style.display = "block";
+        const mapSize = S.map.getSize();
+        let x = containerPoint.x;
+        let y = containerPoint.y;
+        if (x + this.menu.offsetWidth > mapSize.x) {
+            x -= this.menu.offsetWidth;
+        }
+        if (y + this.menu.offsetHeight > mapSize.y) {
+            y -= this.menu.offsetHeight;
+        }
+        this.menu.style.left = `${x}px`;
+        this.menu.style.top = `${y}px`;
+    }
+
+    close() {
+        this.menu.style.display = "none";
+    }
+}
+
+export { ContextMenu };

web/src/js/LayerControl.js

@@ -114,6 +114,7 @@ class LayerControl {
     createTileLayer(world) {
         return new SquaremapTileLayer(`tiles/${world.name}/{z}/{x}_{y}.png`, {
             tileSize: 512,
+            minZoom: 0 - (world.zoom.extra_out ?? 0),
             minNativeZoom: 0,
             maxNativeZoom: world.zoom.max,
             errorTileUrl: "images/clear.png",

web/src/js/Squaremap.js

@@ -4,6 +4,7 @@ import { WorldList } from "./WorldList.js";
 import { UICoordinates } from "./UICoordinates.js";
 import { UILink } from "./UILink.js";
 import { LayerControl } from "./LayerControl.js";
+import { ContextMenu } from "./ContextMenu.js";
 import L from "leaflet";
 import "./addons/Ellipse.js";
 import "./addons/RotateMarker.js";
@@ -29,6 +30,8 @@ class SquaremapMap {
     coordinates;
     /** @type {UILink} */
     uiLink;
+    /** @type {ContextMenu} */
+    contextMenu;
     /** @type {number} */
     tick_count;
     /** @type {boolean} */
@@ -91,6 +94,7 @@ class SquaremapMap {
                     this.getUrlParam("show_coordinates", "true") === "true",
                 );
                 this.uiLink = new UILink(json.ui.link, this.getUrlParam("show_link_button", "true") === "true");
+                this.contextMenu = new ContextMenu();
 
                 this.showControls = this.getUrlParam("show_controls", "true") === "true";
                 if (!this.showControls) {

web/src/js/types.ts

@@ -62,6 +62,7 @@ export interface WorldSettings_Zoom {
     max: number;
     def: number;
     extra: number;
+    extra_out: number;
 }
 
 export interface WorldSettings {

web/src/js/util/World.js

@@ -92,7 +92,7 @@ class World {
 
                 // set center and zoom
                 S.centerOn(this.spawn.x, this.spawn.z, this.zoom.def)
-                    .setMinZoom(0) // extra zoom out doesn't work :(
+                    .setMinZoom(0 - (this.zoom.extra_out ?? 0))
                     .setMaxZoom(this.zoom.max + this.zoom.extra);
 
                 // update page title