josh/lifeEngine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added zoom/drag controls, control panel minimizer

Browse Source
This commit is contained in:
MaxRobinsonTheGreat
2020-07-23 15:27:44 -06:00
parent 8fb471025e
commit b0af739747
7 changed files with 131 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/Controllers/CanvasController.js
View File

@@ -22,37 +22,20 @@ class CanvasController{
defineEvents() {
this.canvas.addEventListener('mousemove', e => {
var prev_cell = this.cur_cell;
var prev_org = this.cur_org;
this.mouse_x = e.offsetX;
this.mouse_y = e.offsetY;
var colRow = this.env.grid_map.xyToColRow(this.mouse_x, this.mouse_y);
this.mouse_c = colRow[0];
this.mouse_r = colRow[1];
this.cur_cell = this.env.grid_map.cellAt(this.mouse_c, this.mouse_r);
this.cur_org = this.cur_cell.owner;
if (this.cur_org != prev_org || this.cur_cell != prev_cell) {
this.env.renderer.clearAllHighlights(true);
if (this.cur_org != null && this.highlight_org) {
this.env.renderer.highlightOrganism(this.cur_org);
}
else if (this.cur_cell != null) {
this.env.renderer.highlightCell(this.cur_cell, true);
}
}
this.updateMouseLocation(e.offsetX, e.offsetY)
this.mouseMove();
});
this.canvas.addEventListener('mouseup', function(evt) {
evt.preventDefault();
this.updateMouseLocation(evt.offsetX, evt.offsetY)
this.left_click=false;
this.right_click=false;
}.bind(this));
this.canvas.addEventListener('mousedown', function(evt) {
evt.preventDefault();
this.updateMouseLocation(evt.offsetX, evt.offsetY)
if (evt.button == 0) {
this.left_click = true;
}
@@ -73,6 +56,29 @@ class CanvasController{
}
updateMouseLocation(offsetX, offsetY) {
var prev_cell = this.cur_cell;
var prev_org = this.cur_org;
this.mouse_x = offsetX;
this.mouse_y = offsetY;
var colRow = this.env.grid_map.xyToColRow(this.mouse_x, this.mouse_y);
this.mouse_c = colRow[0];
this.mouse_r = colRow[1];
this.cur_cell = this.env.grid_map.cellAt(this.mouse_c, this.mouse_r);
this.cur_org = this.cur_cell.owner;
if (this.cur_org != prev_org || this.cur_cell != prev_cell) {
this.env.renderer.clearAllHighlights(true);
if (this.cur_org != null && this.highlight_org) {
this.env.renderer.highlightOrganism(this.cur_org);
}
else if (this.cur_cell != null) {
this.env.renderer.highlightCell(this.cur_cell, true);
}
}
}
mouseMove() {
alert("mouse move must be overriden");
}

3
src/Controllers/ControlModes.js
View File

@@ -5,7 +5,8 @@ const Modes = {
ClickKill: 3,
Select: 4,
Edit: 5,
Clone: 6
Clone: 6,
Drag: 7
}
module.exports = Modes;

20
src/Controllers/ControlPanel.js
View File

@@ -5,6 +5,7 @@ const CellTypes = require("../Organism/Cell/CellTypes");
class ControlPanel {
constructor(engine) {
this.engine = engine;
this.defineMinMaxControls();
this.defineEngineSpeedControls();
this.defineGridSizeControls();
this.defineTabNavigation();
@@ -18,6 +19,19 @@ class ControlPanel {
this.editor_controller.setControlPanel(this);
}
defineMinMaxControls(){
$('#minimize').click ( function() {
console.log('hello')
$('.control-panel').css('display', 'none');
$('#maximize').css('display', 'block');
});
$('#maximize').click ( function() {
$('.control-panel').css('display', 'grid');
$('#maximize').css('display', 'none');
});
}
defineEngineSpeedControls(){
this.slider = document.getElementById("slider");
this.slider.oninput = function() {
@@ -197,12 +211,18 @@ class ControlPanel {
self.setMode(Modes.Clone);
self.env_controller.org_to_clone = self.engine.organism_editor.getCopyOfOrg();
break;
case "drag-view":
self.setMode(Modes.Drag);
}
$('.edit-mode-btn').css('background-color', '#9099c2');
$('#'+this.id).css('background-color', '#81d2c7');
});
$('#reset-view').click( function(){
this.env_controller.resetView();
}.bind(this));
var env = this.engine.env;
$('#reset-env').click( function() {
this.engine.env.reset();

44
src/Controllers/EnvironmentController.js
View File

@@ -8,8 +8,42 @@ const Cell = require("../Organism/Cell/Cell");
class EnvironmentController extends CanvasController{
constructor(env, canvas) {
super(env, canvas);
this.mode = Modes.None;
this.mode = Modes.Drag;
this.org_to_clone = null;
this.defineZoomControls();
this.prev_x;
this.prev_y;
this.scale = 1;
}
defineZoomControls() {
var scale = 1;
var zoom_speed = 0.5;
const el = document.querySelector('#env-canvas');
el.onwheel = function zoom(event) {
event.preventDefault();
var sign = -1*Math.sign(event.deltaY);
// Restrict scale
scale = Math.max(0.5, scale+(sign*zoom_speed));
// Apply scale transform
el.style.transform = `scale(${scale})`;
this.scale = scale;
}.bind(this);
}
resetView() {
$('#env-canvas').css('transform', 'scale(1)');
$('#env-canvas').css('top', '0px');
$('#env-canvas').css('left', '0px');
this.scale = 1;
}
updateMouseLocation(offsetX, offsetY){
this.prev_x = this.mouse_x;
this.prev_y = this.mouse_y;
super.updateMouseLocation(offsetX, offsetY);
}
mouseMove() {
@@ -68,6 +102,14 @@ class EnvironmentController extends CanvasController{
}
}
break;
case Modes.Drag:
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.prev_y)*this.scale);
var new_left = (cur_left + (this.mouse_x - this.prev_x)*this.scale);
$('#env-canvas').css('top', new_top+'px');
$('#env-canvas').css('left', new_left+'px');
break;
}
}
}