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 @@
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
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" --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 @@
1
+/**
2
+ * Handles user input events and modifies state.
3
+ * Core logic comes through this class.
4
+ */
5
+goog.provide('asciiflow.Controller');
6
+
7
+goog.require('asciiflow.View');
8
+
9
+/**
10
+ * @constructor
11
+ */
12
+asciiflow.Controller = function(view) {
13
+  /** type {asciiflow.View} */
14
+  this.view = view;
15
+
16
+  this.installDesktopBindings();
17
+};
18
+
19
+asciiflow.Controller.prototype.handlePress = function(x, y) {
20
+  
21
+};
22
+
23
+asciiflow.Controller.prototype.handleZoom = function(delta) {
24
+  this.view.zoom *= delta > 0 ? 1.1 : 0.9;
25
+  this.view.zoom = Math.max(Math.min(this.view.zoom, 5), 0.2);
26
+  this.view.drawState();
27
+};
28
+
29
+asciiflow.Controller.prototype.handlePan = function(deltaX, deltaY) {
30
+  this.view.offsetX += deltaX;
31
+  this.view.offsetY += deltaY;
32
+  this.view.drawState();
33
+};
34
+
35
+asciiflow.Controller.prototype.installDesktopBindings = function() {
36
+  var controller = this;
37
+  $(this.view.canvas).bind('mousewheel', function(e) {
38
+      controller.handleZoom(e.originalEvent.wheelDelta);
39
+  });
40
+  $(document).keydown(function(e) {
41
+      if (e.keyCode == 37) { controller.handlePan(-10, 0); }
42
+      if (e.keyCode == 38) { controller.handlePan(0, -10); }
43
+      if (e.keyCode == 39) { controller.handlePan(10, 0); }
44
+      if (e.keyCode == 40) { controller.handlePan(0, 10); }
45
+  });
46
+};

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

@@ -1,15 +1,18 @@
1 1
 /**
2
- * 
2
+ * Application main entry point.
3 3
  */
4 4
 
5 5
 goog.provide('asciiflow.launch');
6
+
7
+goog.require('asciiflow.Controller');
8
+goog.require('asciiflow.State');
6 9
 goog.require('asciiflow.View');
7 10
 
8 11
 asciiflow.launch = function() {
9
-    var view = new asciiflow.View();
10
-    var context = view.getContext();
11
-    context.font = 'italic 10pt Calibri';
12
-    context.fillText('Hello World!', 150, 100);
12
+    var state = new asciiflow.State();
13
+    var view = new asciiflow.View(state);
14
+    var controller = new asciiflow.Controller(view);
15
+    view.drawState();
13 16
 };
14 17
 
15 18
 asciiflow.launch();

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

@@ -3,23 +3,44 @@
3 3
  */
4 4
 goog.provide('asciiflow.View');
5 5
 
6
-goog.require('asciiflow.constants');
7
-
8 6
 /**
9 7
  * @constructor
10 8
  */
11
-asciiflow.View = function() {
12
-    this.canvasElem = document.getElementById('ascii-canvas');
13
-
14
-    this.resizeCanvas();
15
-    // Setup view-port size monitoring.
9
+asciiflow.View = function(state) {
10
+  /** type {Element} */ this.canvas = document.getElementById('ascii-canvas');
11
+  /** type {Object} */ this.context = this.canvas.getContext('2d');
12
+  /** type {number} */ this.zoom = 1;
13
+  /** type {number} */ this.offsetX = 0;
14
+  /** type {number} */ this.offsetY = 0;
15
+  /** type {asciiflow.State} */ this.state = state;
16
+  this.resizeCanvas();
16 17
 };
17 18
 
18 19
 asciiflow.View.prototype.resizeCanvas = function() {
19
-    this.canvasElem.width = document.documentElement.clientWidth;
20
-    this.canvasElem.height = document.documentElement.clientHeight;
20
+  this.canvas.width = document.documentElement.clientWidth;
21
+  this.canvas.height = document.documentElement.clientHeight;
21 22
 };
22 23
 
23 24
 asciiflow.View.prototype.getContext = function() {
24
-    return this.canvasElem.getContext('2d');
25
-};
25
+  return this.context;
26
+};
27
+
28
+asciiflow.View.prototype.drawState = function() {
29
+  this.context.setTransform(1, 0, 0, 1, 0, 0);
30
+  // Clear the visible area.
31
+  this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
32
+
33
+  this.context.translate(-this.offsetX/this.zoom, -this.offsetY/this.zoom);
34
+  this.context.scale(this.zoom, this.zoom);
35
+  this.context.translate(this.canvas.width/2/this.zoom, this.canvas.height/2/this.zoom);
36
+
37
+  this.context.font = '15px Courier New';
38
+  for (var i = 0; i < this.state.cells.length; i++) {
39
+    for (var j = 0; j < this.state.cells[i].length; j++) {
40
+      if (this.state.cells[i][j].value != null) {
41
+        this.context.fillText(this.state.cells[i][j].value, i*15, j*15);
42
+      }
43
+    }
44
+  }
45
+};
46
+ 

+ 2
- 1
root.html View File

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

Loading…
Cancel
Save