268 lines
8.4 KiB
JavaScript
268 lines
8.4 KiB
JavaScript
/**
|
|
* Handles view operations, state and management of the screen.
|
|
*
|
|
* @constructor
|
|
* @param {ascii.State} state
|
|
*/
|
|
ascii.View = function(state) {
|
|
/** @type {ascii.State} */ this.state = state;
|
|
|
|
/** @type {Element} */ this.canvas = document.getElementById('ascii-canvas');
|
|
/** @type {Object} */ this.context = this.canvas.getContext('2d');
|
|
|
|
/** @type {number} */ this.zoom = 1;
|
|
/** @type {ascii.Vector} */ this.offset = new ascii.Vector(
|
|
MAX_GRID_WIDTH * CHAR_PIXELS_H / 2,
|
|
MAX_GRID_HEIGHT * CHAR_PIXELS_V / 2);
|
|
|
|
/** @type {boolean} */ this.dirty = true;
|
|
// TODO: Should probably save this setting in a cookie or something.
|
|
/** @type {boolean} */ this.useLines = false;
|
|
|
|
this.resizeCanvas();
|
|
};
|
|
|
|
/**
|
|
* Resizes the canvas, should be called if the viewport size changes.
|
|
*/
|
|
ascii.View.prototype.resizeCanvas = function() {
|
|
this.canvas.width = document.documentElement.clientWidth;
|
|
this.canvas.height = document.documentElement.clientHeight;
|
|
this.dirty = true;
|
|
};
|
|
|
|
/**
|
|
* Starts the animation loop for the canvas. Should only be called once.
|
|
*/
|
|
ascii.View.prototype.animate = function() {
|
|
if (this.dirty || this.state.dirty) {
|
|
this.dirty = false;
|
|
this.state.dirty = false;
|
|
this.render();
|
|
}
|
|
var view = this;
|
|
window.requestAnimationFrame(function() { view.animate(); });
|
|
};
|
|
|
|
/**
|
|
* Renders the given state to the canvas.
|
|
* TODO: Room for efficiency here still. Drawing should be incremental,
|
|
* however performance is currently very acceptable on test devices.
|
|
*/
|
|
ascii.View.prototype.render = function() {
|
|
var context = this.context;
|
|
|
|
context.setTransform(1, 0, 0, 1, 0, 0);
|
|
// Clear the visible area.
|
|
context.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
|
|
|
context.scale(this.zoom, this.zoom);
|
|
context.translate(
|
|
this.canvas.width / 2 / this.zoom,
|
|
this.canvas.height / 2 / this.zoom);
|
|
|
|
// Only render grid lines and cells that are visible.
|
|
var startOffset = this.screenToCell(new ascii.Vector(
|
|
0,
|
|
0))
|
|
.subtract(new ascii.Vector(
|
|
RENDER_PADDING_CELLS, RENDER_PADDING_CELLS));
|
|
var endOffset = this.screenToCell(new ascii.Vector(
|
|
this.canvas.width,
|
|
this.canvas.height))
|
|
.add(new ascii.Vector(
|
|
RENDER_PADDING_CELLS, RENDER_PADDING_CELLS));
|
|
|
|
startOffset.x = Math.max(0, Math.min(startOffset.x, MAX_GRID_WIDTH));
|
|
endOffset.x = Math.max(0, Math.min(endOffset.x, MAX_GRID_WIDTH));
|
|
startOffset.y = Math.max(0, Math.min(startOffset.y, MAX_GRID_HEIGHT));
|
|
endOffset.y = Math.max(0, Math.min(endOffset.y, MAX_GRID_HEIGHT));
|
|
|
|
// Render the grid.
|
|
context.lineWidth = '1';
|
|
context.strokeStyle = '#EEEEEE';
|
|
context.beginPath();
|
|
for (var i = startOffset.x; i < endOffset.x; i++) {
|
|
context.moveTo(
|
|
i * CHAR_PIXELS_H - this.offset.x,
|
|
0 - this.offset.y);
|
|
context.lineTo(
|
|
i * CHAR_PIXELS_H - this.offset.x,
|
|
this.state.cells.length * CHAR_PIXELS_V - this.offset.y);
|
|
}
|
|
for (var j = startOffset.y; j < endOffset.y; j++) {
|
|
context.moveTo(
|
|
0 - this.offset.x,
|
|
j * CHAR_PIXELS_V - this.offset.y);
|
|
context.lineTo(
|
|
this.state.cells.length * CHAR_PIXELS_H - this.offset.x,
|
|
j * CHAR_PIXELS_V - this.offset.y);
|
|
}
|
|
this.context.stroke();
|
|
this.renderText(context, startOffset, endOffset, !this.useLines);
|
|
if (this.useLines) {
|
|
this.renderCellsAsLines(context, startOffset, endOffset);
|
|
}
|
|
};
|
|
|
|
ascii.View.prototype.renderText = function(context, startOffset, endOffset, drawSpecials) {
|
|
// Render cells.
|
|
context.font = '15px Courier New';
|
|
for (var i = startOffset.x; i < endOffset.x; i++) {
|
|
for (var j = startOffset.y; j < endOffset.y; j++) {
|
|
var cell = this.state.getCell(new ascii.Vector(i, j));
|
|
// Highlight the cell if it is special (grey) or it is part
|
|
// of a visible edit (blue).
|
|
if (cell.isSpecial() ||
|
|
(cell.hasScratch() && cell.getRawValue() != ' ')) {
|
|
this.context.fillStyle = cell.hasScratch() ? '#DEF' : '#F5F5F5';
|
|
context.fillRect(
|
|
i * CHAR_PIXELS_H - this.offset.x,
|
|
(j - 1) * CHAR_PIXELS_V - this.offset.y,
|
|
CHAR_PIXELS_H, CHAR_PIXELS_V);
|
|
}
|
|
var cellValue = this.state.getDrawValue(new ascii.Vector(i, j));
|
|
if (cellValue != null && (!cell.isSpecial() || drawSpecials)) {
|
|
this.context.fillStyle = '#000000';
|
|
context.fillText(cellValue,
|
|
i * CHAR_PIXELS_H - this.offset.x,
|
|
j * CHAR_PIXELS_V - this.offset.y - 3);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
ascii.View.prototype.renderCellsAsLines = function(context, startOffset, endOffset) {
|
|
context.lineWidth = '1';
|
|
context.strokeStyle = '#000000';
|
|
context.beginPath();
|
|
for (var i = startOffset.x; i < endOffset.x; i++) {
|
|
var startY = false;
|
|
for (var j = startOffset.y; j < endOffset.y; j++) {
|
|
var cell = this.state.getCell(new ascii.Vector(i, j));
|
|
if ((!cell.isSpecial() || j == endOffset.y - 1) && startY) {
|
|
context.moveTo(
|
|
i * CHAR_PIXELS_H - this.offset.x + CHAR_PIXELS_H/2,
|
|
startY * CHAR_PIXELS_V - this.offset.y - CHAR_PIXELS_V/2);
|
|
context.lineTo(
|
|
i * CHAR_PIXELS_H - this.offset.x + CHAR_PIXELS_H/2,
|
|
(j - 1) * CHAR_PIXELS_V - this.offset.y - CHAR_PIXELS_V/2);
|
|
startY = false;
|
|
}
|
|
if (cell.isSpecial() && !startY) {
|
|
startY = j;
|
|
}
|
|
}
|
|
}
|
|
for (var j = startOffset.y; j < endOffset.y; j++) {
|
|
var startX = false;
|
|
for (var i = startOffset.x; i < endOffset.x; i++) {
|
|
var cell = this.state.getCell(new ascii.Vector(i, j));
|
|
if ((!cell.isSpecial() || i == endOffset.x - 1) && startX) {
|
|
context.moveTo(
|
|
startX * CHAR_PIXELS_H - this.offset.x + CHAR_PIXELS_H/2,
|
|
j * CHAR_PIXELS_V - this.offset.y - CHAR_PIXELS_V/2);
|
|
context.lineTo(
|
|
(i -1) * CHAR_PIXELS_H - this.offset.x + CHAR_PIXELS_H/2,
|
|
j * CHAR_PIXELS_V - this.offset.y - CHAR_PIXELS_V/2);
|
|
startX = false;
|
|
}
|
|
if (cell.isSpecial() && !startX) {
|
|
startX = i;
|
|
}
|
|
}
|
|
}
|
|
this.context.stroke();
|
|
};
|
|
|
|
/**
|
|
* @param {number} zoom
|
|
*/
|
|
ascii.View.prototype.setZoom = function(zoom) {
|
|
this.zoom = zoom;
|
|
this.dirty = true;
|
|
};
|
|
|
|
/**
|
|
* @param {ascii.Vector} offset
|
|
*/
|
|
ascii.View.prototype.setOffset = function(offset) {
|
|
this.offset = offset;
|
|
this.dirty = true;
|
|
};
|
|
|
|
/**
|
|
* @param {boolean} useLines
|
|
*/
|
|
ascii.View.prototype.setUseLines = function(useLines) {
|
|
this.useLines = useLines;
|
|
this.dirty = true;
|
|
};
|
|
|
|
/**
|
|
* Given a screen coordinate, find the frame coordinates.
|
|
* @param {ascii.Vector} vector
|
|
* @return {ascii.Vector}
|
|
*/
|
|
ascii.View.prototype.screenToFrame = function(vector) {
|
|
return new ascii.Vector(
|
|
(vector.x - this.canvas.width / 2) / this.zoom + this.offset.x,
|
|
(vector.y - this.canvas.height / 2) / this.zoom + this.offset.y);
|
|
};
|
|
|
|
/**
|
|
* Given a frame coordinate, find the screen coordinates.
|
|
* @param {ascii.Vector} vector
|
|
* @return {ascii.Vector}
|
|
*/
|
|
ascii.View.prototype.frameToScreen = function(vector) {
|
|
return new ascii.Vector(
|
|
(vector.x - this.offset.x) * this.zoom + this.canvas.width / 2,
|
|
(vector.y - this.offset.y) * this.zoom + this.canvas.height / 2);
|
|
};
|
|
|
|
/**
|
|
* Given a frame coordinate, return the indices for the nearest cell.
|
|
* @param {ascii.Vector} vector
|
|
* @return {ascii.Vector}
|
|
*/
|
|
ascii.View.prototype.frameToCell = function(vector) {
|
|
// We limit the edges in a bit, as most drawing needs a full context to work.
|
|
return new ascii.Vector(
|
|
Math.min(Math.max(1,
|
|
Math.round((vector.x - CHAR_PIXELS_H / 2) / CHAR_PIXELS_H)),
|
|
MAX_GRID_WIDTH - 2),
|
|
Math.min(Math.max(1,
|
|
Math.round((vector.y + CHAR_PIXELS_V / 2) / CHAR_PIXELS_V)),
|
|
MAX_GRID_HEIGHT - 2));
|
|
};
|
|
|
|
/**
|
|
* Given a cell coordinate, return the frame coordinates.
|
|
* @param {ascii.Vector} vector
|
|
* @return {ascii.Vector}
|
|
*/
|
|
ascii.View.prototype.cellToFrame = function(vector) {
|
|
return new ascii.Vector(
|
|
Math.round(vector.x * CHAR_PIXELS_H),
|
|
Math.round(vector.y * CHAR_PIXELS_V));
|
|
};
|
|
|
|
/**
|
|
* Given a screen coordinate, return the indices for the nearest cell.
|
|
* @param {ascii.Vector} vector
|
|
* @return {ascii.Vector}
|
|
*/
|
|
ascii.View.prototype.screenToCell = function(vector) {
|
|
return this.frameToCell(this.screenToFrame(vector));
|
|
};
|
|
|
|
/**
|
|
* Given a cell coordinate, return the on screen coordinates.
|
|
* @param {ascii.Vector} vector
|
|
* @return {ascii.Vector}
|
|
*/
|
|
ascii.View.prototype.cellToScreen = function(vector) {
|
|
return this.frameToScreen(this.cellToFrame(vector));
|
|
};
|