Browse Source

jQUery externs installed, some progress made on view transformations and basic controller introduced

master
Lewis Hemens 5 years ago
parent
commit
cd144e7d63
7 changed files with 2276 additions and 18 deletions
  1. 1
    1
      compile.sh
  2. 2182
    0
      jquery-1.9-externs.js
  3. 5
    0
      jquery-1.9.1.min.js
  4. 46
    0
      js-lib/input-controller.js
  5. 8
    5
      js-lib/launch.js
  6. 32
    11
      js-lib/view.js
  7. 2
    1
      root.html

+ 1
- 1
compile.sh View File

@@ -1 +1 @@
../closure-library/closure/bin/build/closurebuilder.py --root=../closure-library/ --root=js-lib/ --namespace="asciiflow.launch" --compiler_flags="--warning_level=VERBOSE" --compiler_flags="--formatting=PRETTY_PRINT" --compiler_flags="--compilation_level=ADVANCED_OPTIMIZATIONS" --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="asciiflow.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

+ 2182
- 0
jquery-1.9-externs.js
File diff suppressed because it is too large
View File


+ 5
- 0
jquery-1.9.1.min.js
File diff suppressed because it is too large
View File


+ 46
- 0
js-lib/input-controller.js View File

@@ -0,0 +1,46 @@
/**
* Handles user input events and modifies state.
* Core logic comes through this class.
*/
goog.provide('asciiflow.Controller');

goog.require('asciiflow.View');

/**
* @constructor
*/
asciiflow.Controller = function(view) {
/** type {asciiflow.View} */
this.view = view;

this.installDesktopBindings();
};

asciiflow.Controller.prototype.handlePress = function(x, y) {
};

asciiflow.Controller.prototype.handleZoom = function(delta) {
this.view.zoom *= delta > 0 ? 1.1 : 0.9;
this.view.zoom = Math.max(Math.min(this.view.zoom, 5), 0.2);
this.view.drawState();
};

asciiflow.Controller.prototype.handlePan = function(deltaX, deltaY) {
this.view.offsetX += deltaX;
this.view.offsetY += deltaY;
this.view.drawState();
};

asciiflow.Controller.prototype.installDesktopBindings = function() {
var controller = this;
$(this.view.canvas).bind('mousewheel', function(e) {
controller.handleZoom(e.originalEvent.wheelDelta);
});
$(document).keydown(function(e) {
if (e.keyCode == 37) { controller.handlePan(-10, 0); }
if (e.keyCode == 38) { controller.handlePan(0, -10); }
if (e.keyCode == 39) { controller.handlePan(10, 0); }
if (e.keyCode == 40) { controller.handlePan(0, 10); }
});
};

+ 8
- 5
js-lib/launch.js View File

@@ -1,15 +1,18 @@
/**
*
* Application main entry point.
*/

goog.provide('asciiflow.launch');

goog.require('asciiflow.Controller');
goog.require('asciiflow.State');
goog.require('asciiflow.View');

asciiflow.launch = function() {
var view = new asciiflow.View();
var context = view.getContext();
context.font = 'italic 10pt Calibri';
context.fillText('Hello World!', 150, 100);
var state = new asciiflow.State();
var view = new asciiflow.View(state);
var controller = new asciiflow.Controller(view);
view.drawState();
};

asciiflow.launch();

+ 32
- 11
js-lib/view.js View File

@@ -3,23 +3,44 @@
*/
goog.provide('asciiflow.View');

goog.require('asciiflow.constants');

/**
* @constructor
*/
asciiflow.View = function() {
this.canvasElem = document.getElementById('ascii-canvas');

this.resizeCanvas();
// Setup view-port size monitoring.
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();
};

asciiflow.View.prototype.resizeCanvas = function() {
this.canvasElem.width = document.documentElement.clientWidth;
this.canvasElem.height = document.documentElement.clientHeight;
this.canvas.width = document.documentElement.clientWidth;
this.canvas.height = document.documentElement.clientHeight;
};

asciiflow.View.prototype.getContext = function() {
return this.canvasElem.getContext('2d');
};
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.translate(-this.offsetX/this.zoom, -this.offsetY/this.zoom);
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) {
this.context.fillText(this.state.cells[i][j].value, i*15, j*15);
}
}
}
};

+ 2
- 1
root.html View File

@@ -6,6 +6,7 @@
</head>
<body>
<canvas id="ascii-canvas" style="position:absolute; left:0px; top:0px;"></canvas>
<script src="jquery-1.9.1.min.js"></script>
<script src="js-compiled.js"></script>
</body>
</html>
</html>

Loading…
Cancel
Save