zhangyuheng/BlueMap
1
0
Fork 0
forked from mirror/BlueMap
Code Pull Requests Activity

Little styling additions and QoL, also only load hires-tiles when zoomed in - closes #16

Browse Source
This commit is contained in:
Blue (Lukas Rieger) 2020-01-18 16:04:46 +01:00
parent 3b5393202f
commit 5ea1fbb4c5
10 changed files with 58 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -20,6 +20,9 @@ bin/*
.project
*/.project
.idea
*/.idea
node_modules/
package-lock.json

26
BlueMapCore/src/main/webroot/js/libs/BlueMap.js
View File

@ -205,7 +205,9 @@ export default class BlueMap {
setTimeout(this.update, 1000);
this.lowresTileManager.setPosition(this.controls.targetPosition);
this.hiresTileManager.setPosition(this.controls.targetPosition);
if (this.camera.position.y < 400) {
this.hiresTileManager.setPosition(this.controls.targetPosition);
}
this.locationHash =
'#' + this.map
@ -239,7 +241,7 @@ export default class BlueMap {
this.renderer.clearDepth();
this.renderer.render(this.hiresScene, this.camera, this.renderer.getRenderTarget(), false);
}
}
};
handleContainerResize = () => {
this.camera.aspect = this.element.clientWidth / this.element.clientHeight;
@ -254,7 +256,7 @@ export default class BlueMap {
.css('height', this.element.clientHeight);
this.updateFrame = true;
}
};
async loadSettings() {
return new Promise(resolve => {
@ -455,20 +457,29 @@ export default class BlueMap {
// ###### UI ######
alert(content) {
toggleAlert(id, content) {
let alertBox = $('#alert-box');
if (alertBox.length === 0){
alertBox = $('<div id="alert-box"></div>').appendTo(this.element);
}
let displayAlert = () => {
let alert = $(`<div class="alert box" style="display: none;"><div class="alert-close-button"></div>${content}</div>`).appendTo(alertBox);
let alert = $(`<div class="alert box" data-alert-id="${id}" style="display: none;"><div class="alert-close-button"></div>${content}</div>`).appendTo(alertBox);
alert.find('.alert-close-button').click(() => {
alert.fadeOut(200, () => alert.remove());
});
alert.fadeIn(200);
};
let sameAlert = alertBox.find(`.alert[data-alert-id=${id}]`);
if (sameAlert.length > 0){
alertBox.fadeOut(200, () => {
alertBox.html('');
alertBox.show();
});
return;
}
let oldAlerts = alertBox.find('.alert');
if (oldAlerts.length > 0){
alertBox.fadeOut(200, () => {
@ -476,8 +487,9 @@ export default class BlueMap {
alertBox.show();
displayAlert();
});
} else {
displayAlert();
return;
}
displayAlert();
}
}

18
BlueMapCore/src/main/webroot/js/libs/Controls.js
View File

@ -103,7 +103,7 @@ export default class Controls {
}, false);
window.addEventListener('mousemove', this.onMouseMove, false);
canvas.addEventListener('mousedown', this.onMouseDown, false);
canvas.addEventListener('mouseup', this.onMouseUp, false);
window.addEventListener('mouseup', this.onMouseUp, false); //this is on the window instead of the canvas, so if we drag out of the canvas and release the mouse it actually gets released
canvas.addEventListener('wheel', this.onMouseWheel, { passive: true });
window.addEventListener('keydown', this.onKeyDown, false);
window.addEventListener('keyup', this.onKeyUp, false);
@ -197,7 +197,7 @@ export default class Controls {
this.minHeight = intersects[0].point.y;
}
}
};
}
updateMouseMoves = () => {
this.deltaMouse.set(this.lastMouse.x - this.mouse.x, this.lastMouse.y - this.mouse.y);
@ -249,7 +249,7 @@ export default class Controls {
if (this.targetDistance < this.settings.zoom.min) this.targetDistance = this.settings.zoom.min;
if (this.targetDistance > this.settings.zoom.max) this.targetDistance = this.settings.zoom.max;
}
};
onMouseMove = event => {
this.mouse.set(event.clientX, event.clientY);
@ -257,11 +257,13 @@ export default class Controls {
if (this.state !== Controls.STATES.NONE){
event.preventDefault();
}
}
};
onMouseDown = event => {
if (this.state !== Controls.STATES.NONE) return;
$(":focus").blur();
switch (event.button) {
case Controls.KEYS.MOVE :
this.state = Controls.STATES.MOVE;
@ -272,7 +274,7 @@ export default class Controls {
event.preventDefault();
break;
}
}
};
onMouseUp = event => {
if (this.state === Controls.STATES.NONE) return;
@ -285,13 +287,13 @@ export default class Controls {
if (this.state === Controls.STATES.ORBIT) this.state = Controls.STATES.NONE;
break;
}
}
};
onKeyDown = event => {
this.keyStates[event.keyCode] = true;
}
};
onKeyUp = event => {
this.keyStates[event.keyCode] = false;
}
};
}

4
BlueMapCore/src/main/webroot/js/libs/modules/Compass.js
View File

@ -42,12 +42,12 @@ export default class Compass {
onBlueMapUpdateFrame = () => {
this.needle.css('transform', `rotate(${this.blueMap.controls.direction}rad)`);
}
};
onClick = () => {
this.blueMap.controls.targetDirection = 0;
this.blueMap.controls.direction = this.blueMap.controls.direction % (Math.PI * 2);
if (this.blueMap.controls.direction < -Math.PI) this.blueMap.controls.direction += Math.PI * 2;
if (this.blueMap.controls.direction > Math.PI) this.blueMap.controls.direction -= Math.PI * 2;
}
};
}

4
BlueMapCore/src/main/webroot/js/libs/modules/Info.js
View File

@ -36,7 +36,7 @@ export default class Info {
}
onClick = () => {
this.blueMap.alert(
this.blueMap.toggleAlert('bluemap-info',
'<h1>Info</h1>' +
'Visit BlueMap on <a href="https://github.com/BlueMap-Minecraft">GitHub</a>!<br>' +
'BlueMap works best with <a href="https://www.google.com/chrome/">Chrome</a>.<br>' +
@ -45,5 +45,5 @@ export default class Info {
'Rightclick-drag with your mouse to rotate your view.<br>' +
'Scroll to zoom.<br>'
);
}
};
}

4
BlueMapCore/src/main/webroot/js/libs/modules/MapMenu.js
View File

@ -53,11 +53,11 @@ export default class MapMenu {
onMapClick = event => {
const map = $(event.target).attr('map');
this.bluemap.changeMap(map);
}
};
onBlueMapMapChange = () => {
this.maplist.find('li').show();
this.maplist.find('li[map=' + this.bluemap.map + ']').hide();
this.element.find('.selection').html(this.bluemap.settings[this.bluemap.map].name);
}
};
}

14
BlueMapCore/src/main/webroot/js/libs/modules/Settings.js
View File

@ -43,13 +43,13 @@ export default class Settings {
this.elementQuality = $(
'<div id="bluemap-settings-quality" class="dropdown-container"><span class="selection">Quality: <span>Normal</span></span><div class="dropdown"><ul>' +
'<li quality="2">High</li>' +
'<li quality="1" style="display: none">Normal</li>' +
'<li quality="0.75">Fast</li>' +
'<li data-quality="2">High</li>' +
'<li data-quality="1" style="display: none">Normal</li>' +
'<li data-quality="0.75">Fast</li>' +
'</ul></div></div>'
).prependTo(this.elementMenu);
this.elementQuality.find('li[quality]').click(this.onQualityClick);
this.elementQuality.find('li[data-quality]').click(this.onQualityClick);
this.elementRenderDistance = $('<div id="bluemap-settings-render-distance" class="dropdown-container"></div>').prependTo(this.elementMenu);
this.init();
@ -84,10 +84,10 @@ export default class Settings {
onQualityClick = (event) => {
const target = event.target
const desc = $(target).html();
this.blueMap.quality = parseFloat($(target).attr('quality'));
this.blueMap.quality = parseFloat($(target).attr('data-quality'));
this.elementQuality.find('li').show();
this.elementQuality.find(`li[quality="${this.blueMap.quality}"]`).hide();
this.elementQuality.find(`li[data-quality="${this.blueMap.quality}"]`).hide();
this.elementQuality.find('.selection > span').html(desc);
@ -104,7 +104,7 @@ export default class Settings {
this.elementMenu.animate({
width: 'toggle'
}, 200);
}
};
pctToRenderDistance(value, defaultValue) {
let max = defaultValue * 5;

4
BlueMapCore/src/main/webroot/style/modules/alertbox.scss
View File

@ -45,10 +45,6 @@
padding: 10px;
.alert-close-button {
/*position: absolute;
top: 5px;
right: 5px;
*/
margin: -10px -10px 0px 0px;
padding: 0 0 5px 5px;
float: right;

1
BlueMapCore/src/main/webroot/style/modules/mapmenu.scss
View File

@ -1,5 +1,6 @@
#bluemap-mapmenu {
width: 200px;
cursor: pointer;
.selection, .dropdown li {
padding-left: 10px;

13
BlueMapCore/src/main/webroot/style/modules/position.scss
View File

@ -8,7 +8,18 @@
outline: none;
background: transparent;
padding: 0 5px 0 25px;
font-family: inherit;
font: inherit;
color: inherit;
// remove number spinner firefox
-moz-appearance:textfield;
// remove number spinner webkit
&::-webkit-inner-spin-button,
&::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
}
&[data-pos]::before {