2014-01-05 00:24:48 +00:00
|
|
|
/**
|
|
|
|
* Functions relating to view operations and management of the screen.
|
|
|
|
*/
|
|
|
|
goog.provide('asciiflow.View');
|
|
|
|
|
|
|
|
/**
|
|
|
|
* @constructor
|
|
|
|
*/
|
2014-01-07 22:49:54 +00:00
|
|
|
asciiflow.View = function(state) {
|
|
|
|
/** type {Element} */ this.canvas = document.getElementById('ascii-canvas');
|
|
|
|
/** type {Object} */ this.context = this.canvas.getContext('2d');
|
|
|
|
/** type {number} */ this.zoom = 1;
|
|
|
|
/** type {number} */ this.offsetX = 0;
|
|
|
|
/** type {number} */ this.offsetY = 0;
|
|
|
|
/** type {asciiflow.State} */ this.state = state;
|
|
|
|
this.resizeCanvas();
|
2014-01-05 00:24:48 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
asciiflow.View.prototype.resizeCanvas = function() {
|
2014-01-07 22:49:54 +00:00
|
|
|
this.canvas.width = document.documentElement.clientWidth;
|
|
|
|
this.canvas.height = document.documentElement.clientHeight;
|
2014-01-05 00:24:48 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
asciiflow.View.prototype.getContext = function() {
|
2014-01-07 22:49:54 +00:00
|
|
|
return this.context;
|
|
|
|
};
|
|
|
|
|
|
|
|
asciiflow.View.prototype.drawState = function() {
|
|
|
|
this.context.setTransform(1, 0, 0, 1, 0, 0);
|
|
|
|
// Clear the visible area.
|
|
|
|
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
|
|
|
|
|
|
|
this.context.scale(this.zoom, this.zoom);
|
|
|
|
this.context.translate(this.canvas.width/2/this.zoom, this.canvas.height/2/this.zoom);
|
|
|
|
|
|
|
|
this.context.font = '15px Courier New';
|
|
|
|
for (var i = 0; i < this.state.cells.length; i++) {
|
|
|
|
for (var j = 0; j < this.state.cells[i].length; j++) {
|
|
|
|
if (this.state.cells[i][j].value != null) {
|
2014-01-08 22:02:47 +00:00
|
|
|
this.context.fillText(this.state.cells[i][j].value, i*15 - this.offsetX, j*15 - this.offsetY);
|
2014-01-07 22:49:54 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|