rubrowser 0.1.1 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 66b465f4952d44dbd2141eb12066017e16a65a2d
-  data.tar.gz: da121cdfe98febb25db3bc057e55d4c9a200179a
+  metadata.gz: 3d1e814cf21c8e6a89504e7087deeded72c8d4a3
+  data.tar.gz: b77604a0c9f9417bc3fa61021f3c313ee41fa8c4
 SHA512:
-  metadata.gz: ca739a897ac010919307c214e7b5c7d824f04003f7f228b5d13137ce4b2091cb24d667b9b0c2ce39a66ffee4781d4302fe8b48c1bb6be8515a195e26777b8640
-  data.tar.gz: 7f70f2724171b73abb3d82391da021015b1d6f235868046a204e33e50036f947dc31cb93ae28404a6d4804813cc5a6277a0a7088354fca85abfdb18b4787fd2c
+  metadata.gz: da0b7cdfc663e971e3cfc393e319fd60d3bdeab3991411d4d6a75ec386d05749495385be38bd245ca84ba6a443faac12b08cbed7e1d330301efd2fafc0773858
+  data.tar.gz: 0e2e9037a14236096589596408fedfe50fb2500d2a8e8cce8241056fbc257cb40abf041da00a3babf11ef23fdfd0095793b0a3b0d8c5ac492ba472d69e97a49c

data/lib/rubrowser.rb

@@ -1,3 +1,3 @@
 module Rubrowser
-  VERSION = '0.1.1'.freeze
+  VERSION = '0.1.2'.freeze
 end

data/public/css/application.css

@@ -25,7 +25,7 @@ circle {
   stroke-width: 1.5px;
 }
 
-.fixed {
+.fixed circle {
   fill: #f00;
 }
 

data/public/javascript/application.js

@@ -6,25 +6,24 @@ var ParseGraph = function(){
     return false;
   }
 
-
   var width = $svg.width(),
       height = $svg.height(),
       constants = JSON.parse(svg.attr('data-constants')),
-      occurences = JSON.parse(svg.attr('data-occurences'));
-  var color = d3.scaleOrdinal(d3.schemeCategory20);
-
-  var drag = d3.drag()
+      occurences = JSON.parse(svg.attr('data-occurences')),
+      drag = d3.drag()
         .on("start", dragstarted)
         .on("drag", dragged)
         .on("end", dragended);
 
+  var zoom = d3.zoom()
+        .on("zoom", function () {
+          container.attr("transform", d3.event.transform);
+        });
 
-  svg.call(d3.zoom().on("zoom", function () {
-    container.attr("transform", d3.event.transform);
-  }));
-
-  container = svg.append('g');
+  svg.call(zoom)
+    .on("dblclick.zoom", null);
 
+  var container = svg.append('g');
 
   var simulation = d3.forceSimulation()
         .force("link", d3.forceLink().id(function(d) { return d.id; }))
@@ -32,6 +31,13 @@ var ParseGraph = function(){
         .force("center", d3.forceCenter(width / 2, height / 2))
         .force("forceCollide", d3.forceCollide(function(){ return 80; }));
 
+  simulation
+    .nodes(constants)
+    .on("tick", ticked);
+
+  simulation.force("link")
+    .links(occurences);
+
   var link = container.append("g")
         .attr("class", "links")
         .selectAll("path")
@@ -40,16 +46,20 @@ var ParseGraph = function(){
         .attr("class", 'link')
         .attr("marker-end", "url(#occurence)");
 
-  var circle = container.append("g").selectAll("circle")
+  var node = container.append("g")
+        .attr("class", "nodes")
+        .selectAll("g")
         .data(constants)
-        .enter().append("circle")
-        .attr("r", 6)
-        .on("dblclick", dblclick)
-        .call(drag);
+        .enter().append("g")
+        .call(drag)
+        .on("dblclick", dblclick);
 
-  var text = container.append("g").selectAll("text")
-        .data(constants)
-        .enter().append("text")
+  var circle = node
+        .append("circle")
+        .attr("r", 6);
+
+  var text = node
+        .append("text")
         .attr("x", 8)
         .attr("y", ".31em")
         .text(function(d) { return d.id; });
@@ -67,29 +77,21 @@ var ParseGraph = function(){
     .append("path")
     .attr("d", "M0,-5L10,0L0,5");
 
-  simulation
-      .nodes(constants)
-      .on("tick", ticked);
-
-  simulation.force("link")
-      .links(occurences);
-
   function ticked() {
     link.attr("d", linkArc);
-    circle.attr("transform", transform);
-    text.attr("transform", transform);
+    node.attr("transform", transform);
   }
 
   function linkArc(d) {
     var dx = d.target.x - d.source.x,
         dy = d.target.y - d.source.y,
-        dr =  0; // Math.sqrt(dx * dx + dy * dy);
+        dr =  0;
     return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
   }
 
   function dragstarted(d) {
     if (!d3.event.active) simulation.alphaTarget(0.3).restart();
-    d3.select(this).classed("fixed", true );
+    d3.select(this).classed("fixed", true);
     d.fx = d.x;
     d.fy = d.y;
   }
@@ -104,8 +106,7 @@ var ParseGraph = function(){
   }
 
   function dblclick(d) {
-    var node = d3.select(this);
-    node.classed("fixed", false);
+    d3.select(this).classed("fixed", false);
     d.fx = null;
     d.fy = null;
   }
@@ -114,6 +115,32 @@ var ParseGraph = function(){
     return "translate(" + d.x + "," + d.y + ")";
   }
 
+
+  node.on('mouseover', function(d) {
+    var relatives = [];
+    link.style('opacity', function(l) {
+      if (d === l.source || d === l.target){
+        relatives.push(l.source);
+        relatives.push(l.target);
+        return 1;
+      }else{
+        return 0.1;
+      }
+    });
+    node.style('opacity', function(n) {
+      if( n == d || relatives.indexOf(n) > -1 ){
+        return 1;
+      }else{
+        return 0.1;
+      }
+    });
+  });
+
+  node.on('mouseout', function() {
+    link.style('opacity', 1);
+    node.style('opacity', 1);
+  });
+
   return true;
 
 };

data/readme.md

@@ -14,7 +14,7 @@ the idea is that the project opens every `.rb` file and parse it with `parser` g
 * if you reference a class that is not defined in your project it won't be in the graph, we only display the graph of classes/modules you defined
 * the server analyze your code once upon the script starts if you changed your code you'll have to restart rubrowser
 * it statically analyze the code so meta programming is out of question in here
-* rails associations are meta programming to forget it :smile:
+* rails associations are meta programming so forget it :smile:
 
 ## Usage
 
@@ -30,6 +30,7 @@ it'll analyze the project and open port 9000, so you can access the graph from `
 * interactive graph, you can pull any node to fix it to some position
 * to release node double click on it
 * zoom and pan with mouse or touch pad
+* highlight node and all related nodes, it'll make it easier for you to see what depends and dependencies of certain class
 
 
 ## Tests?

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: rubrowser
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.1.2
 platform: ruby
 authors:
 - Emad Elsaid
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-08-25 00:00:00.000000000 Z
+date: 2016-08-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sinatra