haskal
/
asciiflow2
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added dragging view mode

This commit is contained in:
Lewis Hemens 2014-01-08 23:06:08 +00:00
parent 8e144daa82
commit 2cba724224
3 changed files with 49 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
js-lib/common.js Normal file
View File

@ -0,0 +1,12 @@
/**
* Common classes.
*/
goog.provide('asciiflow.common');
/**
* @constructor
*/
asciiflow.common.Position = function(x, y) {
/** type {Number} */ this.x = x;
/** type {Number} */ this.y = y;
};

34
js-lib/controller.js
View File

@ -12,12 +12,27 @@ goog.require('asciiflow.View');
asciiflow.Controller = function(view) { asciiflow.Controller = function(view) {
/** type {asciiflow.View} */ /** type {asciiflow.View} */
this.view = view; this.view = view;
/** type {asciiflow.common.Position} */
this.clickPosition;
this.installDesktopBindings(); this.installDesktopBindings();
}; };
asciiflow.Controller.prototype.handlePress = function(x, y) { asciiflow.Controller.prototype.handlePress = function(x, y) {
this.clickPosition = new asciiflow.common.Position(x, y);
};
asciiflow.Controller.prototype.handleMove = function(x, y) {
if (this.clickPosition) {
// Drag has started.
this.view.offset.x -= (x - this.clickPosition.x)/this.view.zoom;
this.view.offset.y -= (y - this.clickPosition.y)/this.view.zoom;
this.clickPosition = new asciiflow.common.Position(x, y);
}
};
asciiflow.Controller.prototype.handleRelease = function(x, y) {
this.clickPosition = null;
}; };
asciiflow.Controller.prototype.handleZoom = function(delta) { asciiflow.Controller.prototype.handleZoom = function(delta) {
@ -25,20 +40,19 @@ asciiflow.Controller.prototype.handleZoom = function(delta) {
this.view.zoom = Math.max(Math.min(this.view.zoom, 5), 0.2); this.view.zoom = Math.max(Math.min(this.view.zoom, 5), 0.2);
}; };
asciiflow.Controller.prototype.handlePan = function(deltaX, deltaY) {
this.view.offsetX += deltaX;
this.view.offsetY += deltaY;
};
asciiflow.Controller.prototype.installDesktopBindings = function() { asciiflow.Controller.prototype.installDesktopBindings = function() {
var controller = this; var controller = this;
$(this.view.canvas).bind('mousewheel', function(e) { $(this.view.canvas).bind('mousewheel', function(e) {
controller.handleZoom(e.originalEvent.wheelDelta); controller.handleZoom(e.originalEvent.wheelDelta);
}); });
$(document).keydown(function(e) { $(this.view.canvas).mousedown(function(e) {
if (e.keyCode == 37) { controller.handlePan(-10, 0); } controller.handlePress(e.clientX, e.clientY);
if (e.keyCode == 38) { controller.handlePan(0, -10); } });
if (e.keyCode == 39) { controller.handlePan(10, 0); } $(this.view.canvas).mouseup(function(e) {
if (e.keyCode == 40) { controller.handlePan(0, 10); } controller.handleRelease(e.clientX, e.clientY);
});
$(this.view.canvas).mousemove(function(e) {
controller.handleMove(e.clientX, e.clientY);
}); });
}; };

17
js-lib/view.js
View File

@ -3,6 +3,8 @@
*/ */
goog.provide('asciiflow.View'); goog.provide('asciiflow.View');
goog.require('asciiflow.common');
/** /**
* @constructor * @constructor
*/ */
@ -10,8 +12,7 @@ asciiflow.View = function(state) {
/** type {Element} */ this.canvas = document.getElementById('ascii-canvas'); /** type {Element} */ this.canvas = document.getElementById('ascii-canvas');
/** type {Object} */ this.context = this.canvas.getContext('2d'); /** type {Object} */ this.context = this.canvas.getContext('2d');
/** type {number} */ this.zoom = 1; /** type {number} */ this.zoom = 1;
/** type {number} */ this.offsetX = 0; /** type {asciiflow.common.Position} */ this.offset = new asciiflow.common.Position(0, 0);
/** type {number} */ this.offsetY = 0;
/** type {asciiflow.State} */ this.state = state; /** type {asciiflow.State} */ this.state = state;
this.resizeCanvas(); this.resizeCanvas();
}; };
@ -39,9 +40,17 @@ asciiflow.View.prototype.render = function() {
for (var i = 0; i < this.state.cells.length; i++) { for (var i = 0; i < this.state.cells.length; i++) {
for (var j = 0; j < this.state.cells[i].length; j++) { for (var j = 0; j < this.state.cells[i].length; j++) {
if (this.state.cells[i][j].value != null) { if (this.state.cells[i][j].value != null) {
this.context.fillText(this.state.cells[i][j].value, i*15 - this.offsetX, j*15 - this.offsetY); this.context.fillText(this.state.cells[i][j].value, i*15 - this.offset.x, j*15 - this.offset.y);
} }
} }
} }
}; };
/**
* Given a screen coordinate, find the integer cell position that it relates to.
*/
asciiflow.View.prototype.getCell = function(x, y) {
};