Set positon cords from input field

BlueMapCore/src/main/webroot/js/libs/Controls.js

@@ -101,10 +101,10 @@ export default class Controls {
 		window.addEventListener('contextmenu', event => {
 			event.preventDefault();
 		}, false);
-		canvas.addEventListener('mousedown', this.onMouseDown, false);
 		window.addEventListener('mousemove', this.onMouseMove, false);
-		window.addEventListener('mouseup', this.onMouseUp, false);
-		canvas.addEventListener('wheel', this.onMouseWheel, false);
+		canvas.addEventListener('mousedown', this.onMouseDown, false);
+		canvas.addEventListener('mouseup', this.onMouseUp, false);
+		canvas.addEventListener('wheel', this.onMouseWheel, { passive: true });
 		window.addEventListener('keydown', this.onKeyDown, false);
 		window.addEventListener('keyup', this.onKeyUp, false);
 
@@ -291,7 +291,7 @@ export default class Controls {
 		this.keyStates[event.keyCode] = true;
 	}
 
-	onKeyUp = e => {
+	onKeyUp = event => {
 		this.keyStates[event.keyCode] = false;
 	}
 }

BlueMapCore/src/main/webroot/js/libs/modules/Position.js

@@ -29,19 +29,43 @@ import { getTopLeftElement } from './Module.js';
 export default class Position {
 	constructor(blueMap) {
 		this.blueMap = blueMap;
-		const parent = getTopLeftElement(blueMap);
 
 		$('.bluemap-position').remove();
-		this.elementX = $('<div class="bluemap-position pos-x">0</div>').appendTo(parent);
-		//this.elementY = $('<div class="bluemap-position pos-y">0</div>').appendTo(parent);
-		this.elementZ = $('<div class="bluemap-position pos-z">0</div>').appendTo(parent);
+		this.elements = [
+			this.createPositionElement('x'),
+			null,//this.elementY = this.createPositionElement('y');
+			this.createPositionElement('z'),
+		];
 
 		$(document).on('bluemap-update-frame', this.onBlueMapUpdateFrame);
 	}
 
-	onBlueMapUpdateFrame = () => {
-		this.elementX.html(Math.floor(this.blueMap.controls.targetPosition.x));
-		//this.elementY.html(this.blueMap.controls.targetPosition.y === 0 ? '-' : Math.floor(this.blueMap.controls.targetPosition.y));
-		this.elementZ.html(Math.floor(this.blueMap.controls.targetPosition.z));
+	/** Creates the position display */
+	createPositionElement(type) {
+		const parent = getTopLeftElement(this.blueMap);
+		const element = $(`<div class="bluemap-position" data-pos="${type}"><input type="number" value="0" /></div>`)
+			.appendTo(parent)
+			.children()
+			.first();
+		element.on('input', this.onInput(type));
+		return element;
 	}
+
+	onInput = type => event => {
+		const value = Number(event.target.value);
+		if (!isNaN(value)) {
+			this.blueMap.controls.targetPosition[type] = value;
+		}
+	};
+
+	onBlueMapUpdateFrame = () => {
+		const { x, y, z } = this.blueMap.controls.targetPosition;
+		const values = [ z, y, x ];
+		for (let element of this.elements) {
+			const value = Math.floor(values.pop());
+			if (element) {
+				element.val(value);
+			}
+		}
+	};
 }

BlueMapCore/src/main/webroot/style/modules/position.scss

@@ -0,0 +1,21 @@
+.bluemap-position {
+  position: relative;
+
+  input {
+    width: 60px;
+    height: 30px;
+    border: none;
+    outline: none;
+    background: transparent;
+    padding: 0 5px 0 25px;
+    font-family: Verdana,Helvetica,Arial,sans-serif;
+  }
+
+  &[data-pos]::before {
+    position: absolute;
+    left: 7px;
+    color: #888888;
+    content: attr(data-pos)':';
+  }
+}
+

BlueMapCore/src/main/webroot/style/style.scss

@@ -2,6 +2,7 @@
 @import "./modules/compass.scss";
 @import "./modules/info.scss";
 @import "./modules/mapmenu.scss";
+@import "./modules/position.scss";
 @import "./modules/settings.scss";
 
 html, body {
@@ -125,29 +126,3 @@ html, body {
 #bluemap-topleft > *:not(:last-child) {
     border-right: solid 1px #dddddd;
 }
-
-.bluemap-position {
-    position: relative;
-
-    width: 60px;
-    height: 30px;
-    padding: 0 5px 0 25px;
-}
-
-.bluemap-position::before {
-    position: absolute;
-    left: 7px;
-    color: #888888;
-}
-
-.bluemap-position.pos-x::before {
-    content: "x:";
-}
-
-.bluemap-position.pos-y::before {
-    content: "y:";
-}
-
-.bluemap-position.pos-z::before {
-    content: "z:";
-}