Quality of life changes

- Hotkeys for all UI buttons
- Consistent zooming
- Better handling of mouse enter/leave
- Middle-click for drag
- Fixed bug where the hotbar buttons wouldn't light up when selecting a control mode
This commit is contained in:
Chris Gallegos
2021-11-23 23:58:24 -08:00
parent 2ef721682a
commit 549b11ad12
4 changed files with 164 additions and 53 deletions

View File

@@ -28,22 +28,33 @@ class EnvironmentController extends CanvasController{
// Restrict scale
scale = Math.max(0.5, this.scale+(sign*zoom_speed));
if (scale != 0.5) {
//if (scale != 0.5) {
var cur_top = parseInt($('#env-canvas').css('top'));
var cur_left = parseInt($('#env-canvas').css('left'));
var diff_x = (this.canvas.width/2 - this.mouse_x) * (scale - this.scale);
var diff_y = (this.canvas.height/2 - this.mouse_y) * (scale - this.scale);
/* -- Original Zoom procedure
if (sign == 1) {
// If we're zooming in, zoom towards wherever the mouse is
var diff_x = ((this.canvas.width/2-cur_left/this.scale) - this.mouse_x)*this.scale/1.5;
var diff_y = ((this.canvas.height/2-cur_top/this.scale) - this.mouse_y)*this.scale/1.5;
var diff_x = ((this.canvas.width/2-cur_left/this.scale) - this.mouse_x)*scale/1.5;
var diff_y = ((this.canvas.height/2-cur_top/this.scale) - this.mouse_y)*scale/1.5;
}
else {
// If we're zooming out, zoom out towards the center
var diff_x = -cur_left/scale;
var diff_y = -cur_top/scale;
var new_left = cur_left - cur_left / scale;
var new_top = cur_top - cur_top / scale;
}
*/
$('#env-canvas').css('top', (cur_top+diff_y)+'px');
$('#env-canvas').css('left', (cur_left+diff_x)+'px');
}
//}
// Apply scale transform
el.style.transform = `scale(${scale})`;
@@ -149,6 +160,15 @@ class EnvironmentController extends CanvasController{
break;
}
}
else if (this.middle_click) {
//drag on middle click
var cur_top = parseInt($('#env-canvas').css('top'), 10);
var cur_left = parseInt($('#env-canvas').css('left'), 10);
var new_top = cur_top + ((this.mouse_y - this.start_y)*this.scale);
var new_left = cur_left + ((this.mouse_x - this.start_x)*this.scale);
$('#env-canvas').css('top', new_top+'px');
$('#env-canvas').css('left', new_left+'px');
}
}
dropCellType(col, row, state, killBlocking=false) {