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 = $('
0
').appendTo(parent);
- //this.elementY = $('0
').appendTo(parent);
- this.elementZ = $('0
').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 = $(``)
+ .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:";
-}