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

Closure typing cleanup, added grid and simple ability to clean to render cells

This commit is contained in:
Lewis Hemens 2014-01-11 16:40:01 +00:00
parent 7d69f037f1
commit d51221f089
6 changed files with 98 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
compile.sh
View File

@ -1 +1 @@
../closure-library/closure/bin/build/closurebuilder.py --root=../closure-library/ --root=js-lib/ --namespace="ascii.launch" --compiler_flags="--warning_level=VERBOSE" --compiler_flags="--formatting=PRETTY_PRINT" --compiler_flags="--compilation_level=ADVANCED_OPTIMIZATIONS" --compiler_flags="--externs=jquery-1.9-externs.js" --output_mode=compiled --compiler_jar=closure-compiler.jar > js-compiled.js
../closure-library/closure/bin/build/closurebuilder.py --root=../closure-library/ --root=js-lib/ --namespace="ascii.launch" --compiler_flags="--warning_level=VERBOSE" --compiler_flags="--formatting=PRETTY_PRINT" --compiler_flags="--language_in=ECMASCRIPT5" --compiler_flags="--compilation_level=ADVANCED_OPTIMIZATIONS" --compiler_flags="--externs=jquery-1.9-externs.js" --output_mode=compiled --compiler_jar=closure-compiler.jar > js-compiled.js

22
js-lib/common.js
View File

@ -1,17 +1,33 @@
/**
* Common classes.
*/
goog.provide('ascii.Position');
goog.provide('ascii.Vector');
/**
* @constructor
*/
ascii.Position = function(x, y) {
ascii.Vector = function(x, y) {
/** type {Number} */ this.x = x;
/** type {Number} */ this.y = y;
};
ascii.Position.prototype.equals = function(other) {
/** @return {boolean} */
ascii.Vector.prototype.equals = function(other) {
return (this.x == other.x)
&& (this.y == other.y);
};
/** @return {ascii.Vector} */
ascii.Vector.prototype.subtract = function(other) {
return new ascii.Vector(this.x - other.x, this.y - other.y);
};
/** @return {ascii.Vector} */
ascii.Vector.prototype.add = function(other) {
return new ascii.Vector(this.x + other.x, this.y + other.y);
};
/** @return {number} */
ascii.Vector.prototype.length = function() {
return Math.sqrt(this.x * this.x + this.y * this.y);
};

28
js-lib/controller.js
View File

@ -4,40 +4,42 @@
*/
goog.provide('ascii.Controller');
goog.require('ascii.Position');
goog.require('ascii.Vector');
goog.require('ascii.View');
/**
* @constructor
*/
ascii.Controller = function(view) {
/** type {ascii.View} */ this.view = view;
/** type {ascii.StateControler */ this.stateController;
/** type {ascii.Position} */ this.pressPosition;
ascii.Controller = function(view, state) {
/** @type {ascii.View} */ this.view = view;
/** @type {ascii.State} */ this.state = state;
/** @type {ascii.Vector} */ this.pressVector;
this.installDesktopBindings();
};
ascii.Controller.prototype.handlePress = function(x, y) {
this.pressPosition = new ascii.Position(x, y);
this.pressVector = new ascii.Vector(x, y);
};
ascii.Controller.prototype.handleMove = function(x, y) {
if (this.clickPosition) {
if (this.pressVector != null) {
// Drag has started.
this.view.offset.x -= (x - this.pressPosition.x)/this.view.zoom;
this.view.offset.y -= (y - this.pressPosition.y)/this.view.zoom;
this.clickPosition = new ascii.Position(x, y);
this.view.offset.x -= (x - this.pressVector.x)/this.view.zoom;
this.view.offset.y -= (y - this.pressVector.y)/this.view.zoom;
this.pressVector = new ascii.Vector(x, y);
}
};
ascii.Controller.prototype.handleRelease = function(x, y) {
if (this.pressPosition.equals(new ascii.Position(x, y))) {
var position = new ascii.Vector(x, y);
if (this.pressVector.equals(position)) {
// We should handle this as a 'click' as there was no dragging involved.
// Hand off to the state controller, as this will initiate a modification of the diagram itself.
// TODO: Work out how to pass off work into state-controller.
this.state.getCell(this.view.screenToFrame(position)).value = 'P';
}
this.pressPosition = null;
this.pressVector = null;
};
ascii.Controller.prototype.handleZoom = function(delta) {

2
js-lib/launch.js
View File

@ -13,7 +13,7 @@ goog.require('ascii.View');
ascii.launch = function() {
var state = new ascii.State();
var view = new ascii.View(state);
var controller = new ascii.Controller(view);
var controller = new ascii.Controller(view, state);
view.animate();
};

20
js-lib/state.js
View File

@ -3,6 +3,8 @@
*/
goog.provide('ascii.State');
/** @const */ ascii.MAX_GRID_SIZE = 1000;
/**
* @constructor
*/
@ -20,22 +22,20 @@ ascii.Cell.prototype.setValue = function(value) {
*/
ascii.State = function() {
/** @type {Array.<Array.<ascii.Cell>>} */
this.cells = new Array(ascii.State.MAX_SIZE);
this.cells = new Array(ascii.MAX_GRID_SIZE);
for (var i = 0; i < this.cells.length; i++) {
this.cells[i] = new Array(ascii.State.MAX_SIZE);
this.cells[i] = new Array(ascii.MAX_GRID_SIZE);
for (var j = 0; j < this.cells[i].length; j++) {
this.cells[i][j] = new ascii.Cell();
// Hack: Just fill image with random stuff for now.
if ((i % 10 == 0) && (j % 10 == 0)) {
var jstr = ("" + j);
this.cells[i][j].setValue(jstr.substring(jstr.length-1,jstr.length));
}
}
}
};
/** @const */ ascii.State.MAX_SIZE = 1000;
ascii.State.prototype.blah = function() {
/**
* @param {ascii.Vector} vector
* @return {ascii.Cell}
*/
ascii.State.prototype.getCell = function(vector) {
return this.cells[Math.round((vector.x-7.5)/15)][Math.round((vector.y+7.5)/15)];
};

62
js-lib/view.js
View File

@ -3,17 +3,19 @@
*/
goog.provide('ascii.View');
goog.require('ascii.Position');
goog.require('ascii.Vector');
/** @const */ ascii.CHARACTER_PIXELS = 15;
/**
* @constructor
*/
ascii.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 {ascii.Position} */ this.offset = new ascii.Position(0, 0);
/** 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(2000, 2000);
/** @type {ascii.State} */ this.state = state;
this.resizeCanvas();
};
@ -36,21 +38,61 @@ ascii.View.prototype.render = function() {
this.context.scale(this.zoom, this.zoom);
this.context.translate(this.canvas.width/2/this.zoom, this.canvas.height/2/this.zoom);
// Render the grid.
this.context.lineWidth="1";
this.context.strokeStyle="#DDDDDD";
this.context.beginPath();
for (var i = 0; i < this.state.cells.length; i++) {
this.context.moveTo(
i*ascii.CHARACTER_PIXELS - this.offset.x,
0 - this.offset.y);
this.context.lineTo(
i*ascii.CHARACTER_PIXELS - this.offset.x,
ascii.MAX_GRID_SIZE*ascii.CHARACTER_PIXELS - this.offset.y);
}
for (var j = 0; j < this.state.cells[0].length; j++) {
this.context.moveTo(
0 - this.offset.x,
j*ascii.CHARACTER_PIXELS - this.offset.y);
this.context.lineTo(
ascii.MAX_GRID_SIZE*ascii.CHARACTER_PIXELS - this.offset.x,
j*ascii.CHARACTER_PIXELS - this.offset.y);
}
this.context.stroke();
// Render cells.
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) {
this.context.fillText(this.state.cells[i][j].value, i*15 - this.offset.x, j*15 - this.offset.y);
this.context.fillText(this.state.cells[i][j].value,
i*ascii.CHARACTER_PIXELS - this.offset.x,
j*ascii.CHARACTER_PIXELS - this.offset.y);
}
}
}
};
/**
* Given a screen coordinate, find the integer cell position that it relates to.
* Given a screen coordinate, find the frame coordinates.
* @param {ascii.Vector} vector
* @return {ascii.Vector}
*/
ascii.View.prototype.getCell = function(x, y) {
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);
};