Merge pull request #14 from davidpiegza/add-grunt-and-js-lint

Add grunt and js lint

Author: davidpiegza

.gitignore

@@ -1 +1,2 @@
-.DS_Store
+.DS_Store
+node_modules

Graph.js

@@ -21,16 +21,16 @@
 
   Edges:
   Connects to nodes together.
-  
+
   Example:
   edge = new Edge(node1, node2);
 
   An edge can also be extended with the data attribute. E.g. set a
-  type like "friends", different types can then be draw in differnt ways. 
+  type like "friends", different types can then be draw in differnt ways.
 
 
   Graph:
-  
+
   Parameters:
   options = {
     limit: <int>, maximum number of nodes
@@ -43,7 +43,7 @@
   addEdge(node1, node2) - adds an edge for node1 and node2. Returns true if the
                           edge has been added, otherwise false (e.g.) when the
                           edge between these nodes already exist.
-  
+
   reached_limit() - returns true if the limit has been reached, otherwise false
 
  */
@@ -53,11 +53,11 @@ function Graph(options) {
   this.nodeSet = {};
   this.nodes = [];
   this.edges = [];
-  this.layout;
+  this.layout = undefined;
 }
 
 Graph.prototype.addNode = function(node) {
-  if(this.nodeSet[node.id] == undefined && !this.reached_limit()) {
+  if(this.nodeSet[node.id] === undefined && !this.reached_limit()) {
     this.nodeSet[node.id] = node;
     this.nodes.push(node);
     return true;
@@ -79,7 +79,7 @@ Graph.prototype.addEdge = function(source, target) {
 };
 
 Graph.prototype.reached_limit = function() {
-  if(this.options.limit != undefined)
+  if(this.options.limit !== undefined)
     return this.options.limit <= this.nodes.length;
   else
     return false;

Gruntfile.js

@@ -0,0 +1,23 @@
+module.exports = function(grunt) {
+  grunt.initConfig({
+    pkg: grunt.file.readJSON('package.json'),
+    jshint: {
+      all: ['Gruntfile.js', 'Graph.js', 'drawings/*.js', 'layouts/*.js', 'utils/Label.js', 'utils/ObjectSelection.js']
+    },
+    uglify: {
+      options: {
+        banner: '/*! <%= pkg.name %> <%= pkg.version %> */\n'
+      },
+      graphVisualization: {
+        files: {
+          'build/graph.min.js': ['Graph.js', 'webgl-frameworks/three.min.js', 'utils/*.js', 'layouts/*.js', 'drawings/*.js']
+        }
+      }
+    }
+  });
+
+  grunt.loadNpmTasks('grunt-contrib-jshint');
+  grunt.loadNpmTasks('grunt-contrib-uglify');
+
+  grunt.registerTask('default', ['jshint', 'uglify']);
+};

README.markdown

@@ -1,28 +1,26 @@
-Graph-Visualization
-===================
+# Graph-Visualization
 
 This project is about 3D graph visualization with WebGL. The aim of this project is to evaluate the possibilities of graph drawing in WebGL.
 
 This project uses Three.js for drawing and currently supports a force directed layout.
 
 
-### Run the example ###
+### Run the example
 
 1. Clone or download the project
 2. Open the index_sample.html in a WebGL-compatible browser
 
 You may copy the index_sample.html to index.html and customize it.
 
-Project Description
--------------------
+## Project Description
 
 The project consists of
 
   - a graph structure
   - a graph layout implementation
   - and a graph drawing implementation
 
-### Graph Structure ###
+### Graph Structure
 
 This is implemented in graph-visualization/Graph.js.
 
@@ -47,7 +45,7 @@ A node has the properties
 
 For more details have a look at the [source code](https://github.com/davidpiegza/Graph-Visualization/blob/master/Graph.js).
 
-### Graph Layout ###
+### Graph Layout
 
 A graph layout has the basic structure:
 
@@ -71,7 +69,20 @@ The graph layout may extend the nodes and edges with custom properties in the da
 See [force-based-layout.js](https://github.com/davidpiegza/Graph-Visualization/blob/master/layouts/force-based-layout.js) for example usage.
 
 
-Changelog
--------------------
+## Contribution
+
+This project uses [Grunt](http://gruntjs.com/) to run several tasks in development. You should have `npm` and `grunt` installed. To install `grunt` run
+
+    npm install -g grunt-cli
+
+And to install all dependencies run
+
+    npm install
+
+For more info check the [Grunt - Getting started guide](http://gruntjs.com/getting-started).
+
+If you added some changes, run `grunt` to check the code.
+
+## Changelog
 
 See [releases](https://github.com/davidpiegza/Graph-Visualization/releases).

build/graph.min.js

@@ -49,7 +49,7 @@
 var Drawing = Drawing || {};
 
 Drawing.SimpleGraph = function(options) {
-  var options = options || {};
+  options = options || {};
 
   this.layout = options.layout || "2d";
   this.layout_options = options.graphLayout || {};
@@ -115,7 +115,7 @@ Drawing.SimpleGraph = function(options) {
         domElement: renderer.domElement,
         selected: function(obj) {
           // display info
-          if(obj != null) {
+          if(obj !== null) {
             info_text.select = "Object " + obj.id;
           } else {
             delete info_text.select;
@@ -163,8 +163,8 @@ Drawing.SimpleGraph = function(options) {
     nodes.push(node);
 
     var steps = 1;
-    while(nodes.length != 0 && steps < that.nodes_count) {
-      var node = nodes.shift();
+    while(nodes.length !== 0 && steps < that.nodes_count) {
+      node = nodes.shift();
 
       var numEdges = randomFromTo(1, that.edges_count);
       for(var i=1; i <= numEdges; i++) {
@@ -198,12 +198,13 @@ Drawing.SimpleGraph = function(options) {
    */
   function drawNode(node) {
     var draw_object = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( {  color: Math.random() * 0xffffff, opacity: 0.5 } ) );
+    var label_object;
 
     if(that.show_labels) {
-      if(node.data.title != undefined) {
-        var label_object = new THREE.Label(node.data.title);
+      if(node.data.title !== undefined) {
+        label_object = new THREE.Label(node.data.title);
       } else {
-        var label_object = new THREE.Label(node.id);
+        label_object = new THREE.Label(node.id);
       }
       node.data.label_object = label_object;
       scene.add( node.data.label_object );
@@ -259,6 +260,8 @@ Drawing.SimpleGraph = function(options) {
 
 
   function render() {
+    var i, length, node;
+
     // Generate layout if not finished
     if(!graph.layout.finished) {
       info_text.calc = "<span style='color: red'>Calculating layout...</span>";
@@ -268,37 +271,38 @@ Drawing.SimpleGraph = function(options) {
     }
 
     // Update position of lines (edges)
-    for(var i=0; i<geometries.length; i++) {
+    for(i=0; i<geometries.length; i++) {
       geometries[i].verticesNeedUpdate = true;
     }
 
 
     // Show labels if set
     // It creates the labels when this options is set during visualization
     if(that.show_labels) {
-      var length = graph.nodes.length;
-      for(var i=0; i<length; i++) {
-        var node = graph.nodes[i];
-        if(node.data.label_object != undefined) {
+      length = graph.nodes.length;
+      for(i=0; i<length; i++) {
+        node = graph.nodes[i];
+        if(node.data.label_object !== undefined) {
           node.data.label_object.position.x = node.data.draw_object.position.x;
           node.data.label_object.position.y = node.data.draw_object.position.y - 100;
           node.data.label_object.position.z = node.data.draw_object.position.z;
           node.data.label_object.lookAt(camera.position);
         } else {
-          if(node.data.title != undefined) {
-            var label_object = new THREE.Label(node.data.title, node.data.draw_object);
+          var label_object;
+          if(node.data.title !== undefined) {
+            label_object = new THREE.Label(node.data.title, node.data.draw_object);
           } else {
-            var label_object = new THREE.Label(node.id, node.data.draw_object);
+            label_object = new THREE.Label(node.id, node.data.draw_object);
           }
           node.data.label_object = label_object;
           scene.add( node.data.label_object );
         }
       }
     } else {
-      var length = graph.nodes.length;
-      for(var i=0; i<length; i++) {
-        var node = graph.nodes[i];
-        if(node.data.label_object != undefined) {
+      length = graph.nodes.length;
+      for(i=0; i<length; i++) {
+        node = graph.nodes[i];
+        if(node.data.label_object !== undefined) {
           scene.remove( node.data.label_object );
           node.data.label_object = undefined;
         }
@@ -325,7 +329,7 @@ Drawing.SimpleGraph = function(options) {
   function printInfo(text) {
     var str = '';
     for(var index in info_text) {
-      if(str != '' && info_text[index] != '') {
+      if(str !== '' && info_text[index] !== '') {
         str += " - ";
       }
       str += info_text[index];
@@ -341,5 +345,5 @@ Drawing.SimpleGraph = function(options) {
   // Stop layout calculation
   this.stop_calculating = function() {
     graph.layout.stop_calculating();
-  }
-}
+  };
+};

drawings/simple_graph.js

@@ -50,7 +50,7 @@
 var Drawing = Drawing || {};
 
 Drawing.SphereGraph = function(options) {
-  var options = options || {};
+  options = options || {};
 
   this.layout = options.layout || "2d";
   this.show_stats = options.showStats || false;
@@ -93,7 +93,7 @@ Drawing.SphereGraph = function(options) {
     controls.zoomSpeed = 5.2;
     controls.panSpeed = 1;
 
-    controls.noZoom = false
+    controls.noZoom = false;
     controls.noPan = false;
 
     controls.staticMoving = false;
@@ -120,7 +120,7 @@ Drawing.SphereGraph = function(options) {
         domElement: renderer.domElement,
         selected: function(obj) {
           // display info
-          if(obj != null) {
+          if(obj !== null) {
             info_text.select = "Object " + obj.id;
           } else {
             delete info_text.select;
@@ -164,8 +164,8 @@ Drawing.SphereGraph = function(options) {
     nodes.push(node);
 
     var steps = 1;
-    while(nodes.length != 0 && steps < that.nodes_count) {
-      var node = nodes.shift();
+    while(nodes.length !== 0 && steps < that.nodes_count) {
+      node = nodes.shift();
 
       var numEdges = randomFromTo(1, that.edges_count);
       for(var i=1; i <= numEdges; i++) {
@@ -229,7 +229,7 @@ Drawing.SphereGraph = function(options) {
 
     draw_object.id = node.id;
     node.data.draw_object = draw_object;
-    node.layout = {}
+    node.layout = {};
     node.layout.max_X = 90;
     node.layout.min_X = -90;
     node.layout.max_Y = 180;
@@ -271,6 +271,8 @@ Drawing.SphereGraph = function(options) {
 
 
   function render() {
+    var i;
+
     // Generate layout if not finished
     if(!graph.layout.finished) {
       info_text.calc = "<span style='color: red'>Calculating layout...</span>";
@@ -280,12 +282,12 @@ Drawing.SphereGraph = function(options) {
     }
 
     // Update position of lines (edges)
-    for(var i=0; i<geometries.length; i++) {
+    for(i=0; i<geometries.length; i++) {
       geometries[i].verticesNeedUpdate = true;
     }
 
     // set lookat of nodes to camera
-    for(var i=0; i<graph.nodes.length; i++) {
+    for(i=0; i<graph.nodes.length; i++) {
       graph.nodes[i].data.draw_object.lookAt(camera.position);
     }
 
@@ -310,7 +312,7 @@ Drawing.SphereGraph = function(options) {
   function printInfo(text) {
     var str = '';
     for(var index in info_text) {
-      if(str != '' && info_text[index] != '') {
+      if(str !== '' && info_text[index] !== '') {
         str += " - ";
       }
       str += info_text[index];
@@ -327,5 +329,5 @@ Drawing.SphereGraph = function(options) {
   // Stop layout calculation
   this.stop_calculating = function() {
     graph.layout.stop_calculating();
-  }
-}
+  };
+};