From 6d1c9770ae1c67c87d45d49e0c842bd76a75ca58 Mon Sep 17 00:00:00 2001
From: Joshua Rodriguez <ewized@gmail.com>
Date: Thu, 16 Jan 2020 08:17:03 -0800
Subject: [PATCH] Set positon cords from input field

---
 .../src/main/webroot/js/libs/Controls.js      |  8 ++--
 .../main/webroot/js/libs/modules/Position.js  | 40 +++++++++++++++----
 .../main/webroot/style/modules/position.scss  | 21 ++++++++++
 BlueMapCore/src/main/webroot/style/style.scss | 27 +------------
 4 files changed, 58 insertions(+), 38 deletions(-)
 create mode 100644 BlueMapCore/src/main/webroot/style/modules/position.scss

diff --git a/BlueMapCore/src/main/webroot/js/libs/Controls.js b/BlueMapCore/src/main/webroot/js/libs/Controls.js
index 4008accb..6705af6a 100644
--- a/BlueMapCore/src/main/webroot/js/libs/Controls.js
+++ b/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;
 	}
 }
diff --git a/BlueMapCore/src/main/webroot/js/libs/modules/Position.js b/BlueMapCore/src/main/webroot/js/libs/modules/Position.js
index c3202928..455b1ff7 100644
--- a/BlueMapCore/src/main/webroot/js/libs/modules/Position.js
+++ b/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);
+			}
+		}
+	};
 }
diff --git a/BlueMapCore/src/main/webroot/style/modules/position.scss b/BlueMapCore/src/main/webroot/style/modules/position.scss
new file mode 100644
index 00000000..9185d2a7
--- /dev/null
+++ b/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)':';
+  }
+}
+
diff --git a/BlueMapCore/src/main/webroot/style/style.scss b/BlueMapCore/src/main/webroot/style/style.scss
index d33d9a47..99b09d94 100644
--- a/BlueMapCore/src/main/webroot/style/style.scss
+++ b/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:";
-}