mongo3 0.0.1

data/lib/public/javascripts/Jit/Examples/RGraph/example2.js

@@ -0,0 +1,356 @@
+var Log = {
+    elem: false,
+    write: function(text){
+        if (!this.elem) 
+            this.elem = document.getElementById('log');
+        this.elem.innerHTML = text;
+        this.elem.style.left = (500 - this.elem.offsetWidth / 2) + 'px';
+    }
+};
+
+function addEvent(obj, type, fn) {
+    if (obj.addEventListener) obj.addEventListener(type, fn, false);
+    else obj.attachEvent('on' + type, fn);
+};
+
+
+function init(){
+    var infovis = document.getElementById('infovis');
+    var w = infovis.offsetWidth, h = infovis.offsetHeight;
+    //init data
+    //If a node in this JSON structure
+    //has the "$type" or "$dim" parameters
+    //defined it will override the "type" and
+    //"dim" parameters globally defined in the
+    //RGraph constructor.
+    var json = [{
+        "id": "node0",
+        "name": "node0 name",
+        "data": {
+            "$dim": 16.759175934208628,
+            "some other key": "some other value"
+        },
+        "adjacencies": [{
+            "nodeTo": "node1",
+            "data": {
+                "weight": 3
+            }
+        }, {
+            "nodeTo": "node2",
+            "data": {
+                "weight": 3
+            }
+        }, {
+            "nodeTo": "node3",
+            "data": {
+                "weight": 3
+            }
+        }, {
+            "nodeTo": "node4",
+            "data": {
+                "$type":"arrow",
+                "$color":"#dd99dd",
+                "$dim":25,
+                "weight": 1
+            }
+        }, {
+            "nodeTo": "node5",
+            "data": {
+                "weight": 1
+            }
+        }]
+    }, {
+        "id": "node1",
+        "name": "node1 name",
+        "data": {
+            "$dim": 13.077119090372014,
+            "$type": "square",
+            "some other key": "some other value"
+        },
+        "adjacencies": [{
+            "nodeTo": "node0",
+            "data": {
+                "weight": 3
+            }
+        }, {
+            "nodeTo": "node2",
+            "data": {
+                "weight": 1
+            }
+        }, {
+            "nodeTo": "node3",
+            "data": {
+                "weight": 3
+            }
+        }, {
+            "nodeTo": "node4",
+            "data": {
+                "weight": 1
+            }
+        }, {
+            "nodeTo": "node5",
+            "data": {
+                "weight": 1
+            }
+        }]
+    }, {
+        "id": "node2",
+        "name": "node2 name",
+        "data": {
+            "$dim": 24.937383149648717,
+            "$type": "triangle",
+            "some other key": "some other value"
+        },
+        "adjacencies": [{
+            "nodeTo": "node0",
+            "data": {
+                "weight": 3
+            }
+        }, {
+            "nodeTo": "node1",
+            "data": {
+                "weight": 1
+            }
+        }, {
+            "nodeTo": "node3",
+            "data": {
+                "weight": 3
+            }
+        }, {
+            "nodeTo": "node4",
+            "data": {
+                "weight": 3
+            }
+        }, {
+            "nodeTo": "node5",
+            "data": {
+                "weight": 1
+            }
+        }]
+    }, {
+        "id": "node3",
+        "name": "node3 name",
+        "data": {
+            "$dim": 10.53272740718869,
+            "some other key": "some other value"
+        },
+        "adjacencies": [{
+            "nodeTo": "node0",
+            "data": {
+                "weight": 3
+            }
+        }, {
+            "nodeTo": "node1",
+            "data": {
+                "weight": 3
+            }
+        }, {
+            "nodeTo": "node2",
+            "data": {
+                "weight": 3
+            }
+        }, {
+            "nodeTo": "node4",
+            "data": {
+                "$type":"arrow",
+                "$direction": ["node4", "node3"],
+                "$dim":25,
+                "$color":"#dd99dd",
+                "weight": 1
+            }
+        }, {
+            "nodeTo": "node5",
+            "data": {
+                "weight": 3
+            }
+        }]
+    }, {
+        "id": "node4",
+        "name": "node4 name",
+        "data": {
+            "$dim": 5.3754347037767345,
+            "$type":"triangle",
+            "some other key": "some other value"
+        },
+        "adjacencies": [{
+            "nodeTo": "node0",
+            "data": {
+                "weight": 1
+            }
+        }, {
+            "nodeTo": "node1",
+            "data": {
+                "weight": 1
+            }
+        }, {
+            "nodeTo": "node2",
+            "data": {
+                "weight": 3
+            }
+        }, {
+            "nodeTo": "node3",
+            "data": {
+                "weight": 1
+            }
+        }, {
+            "nodeTo": "node5",
+            "data": {
+                "weight": 3
+            }
+        }]
+    }, {
+        "id": "node5",
+        "name": "node5 name",
+        "data": {
+            "$dim": 32.26403873194912,
+            "$type": "star",
+            "some other key": "some other value"
+        },
+        "adjacencies": [{
+            "nodeTo": "node0",
+            "data": {
+                "weight": 1
+            }
+        }, {
+            "nodeTo": "node1",
+            "data": {
+                "weight": 1
+            }
+        }, {
+            "nodeTo": "node2",
+            "data": {
+                "weight": 1
+            }
+        }, {
+            "nodeTo": "node3",
+            "data": {
+                "weight": 3
+            }
+        }, {
+            "nodeTo": "node4",
+            "data": {
+                "weight": 3
+            }
+        }]
+    }];
+    //end
+    //init canvas
+    //Create a new canvas instance.
+    var canvas = new Canvas('mycanvas', {
+        'injectInto': 'infovis',
+        'width': w,
+        'height': h,
+        //Optional: Add a background canvas
+        //that draws some concentric circles.
+        'backgroundCanvas': {
+            'styles': {
+                'strokeStyle': '#444'
+            },
+            'impl': {
+                'init': function(){},
+                'plot': function(canvas, ctx){
+                    var times = 6, d = 200;
+                    var pi2 = Math.PI * 2;
+                    for (var i = 1; i <= times; i++) {
+                        ctx.beginPath();
+                        ctx.arc(0, 0, i * d, 0, pi2, true);
+                        ctx.stroke();
+                        ctx.closePath();
+                    }
+                }
+            }
+        }
+    });
+    //end
+    //init RGraph
+    var rgraph = new RGraph(canvas, {
+        //Nodes and Edges parameters
+        //can be overriden if defined in 
+        //the JSON input data.
+
+        //This way we can define different node
+        //types individually.
+
+        Node: {
+            'overridable': true,
+             'color': '#cc0000'
+
+        },
+        Edge: {
+            'overridable': true,
+            'color': '#cccc00'
+        },
+
+        //Set polar interpolation.
+        //Default's linear.
+        interpolation: 'polar',
+        
+        //Change the transition effect from linear
+        //to elastic.
+        transition: Trans.Elastic.easeOut,
+        //Change other animation parameters.
+        duration:3500,
+        fps: 30,
+        //Change father-child distance.
+        levelDistance: 200,
+        
+        //This method is called right before plotting
+        //an edge. This method is useful to change edge styles
+        //individually.
+        onBeforePlotLine: function(adj){
+            //Add some random lineWidth to each edge.
+            if (!adj.data.$lineWidth) 
+                adj.data.$lineWidth = Math.random() * 5 + 1;
+        },
+        
+        onBeforeCompute: function(node){
+            Log.write("centering " + node.name + "...");
+            
+            //Make right column relations list.
+            var html = "<h4>" + node.name + "</h4><b>Connections:</b>";
+            html += "<ul>";
+            Graph.Util.eachAdjacency(node, function(adj){
+                var child = adj.nodeTo;
+                html += "<li>" + child.name + "</li>";
+            });
+            html += "</ul>";
+            document.getElementById('inner-details').innerHTML = html;
+        },
+        
+        //Add node click handler and some styles.
+        //This method is called only once for each node/label crated.
+        onCreateLabel: function(domElement, node){
+            domElement.innerHTML = node.name;
+            domElement.onclick = function () {
+                rgraph.onClick(node.id, { hideLabels: false });
+            };
+            var style = domElement.style;
+            style.cursor = 'pointer';
+            style.fontSize = "0.8em";
+            style.color = "#fff";
+        },
+        //This method is called when rendering/moving a label.
+        //This is method is useful to make some last minute changes
+        //to node labels like adding some position offset.
+        onPlaceLabel: function(domElement, node){
+            var style = domElement.style;
+            var left = parseInt(style.left);
+            var w = domElement.offsetWidth;
+            style.left = (left - w / 2) + 'px';
+        },
+        
+        onAfterCompute: function(){
+            Log.write("done");
+        }
+        
+    });
+    //load graph.
+    rgraph.loadJSON(json, 1);
+    
+    //compute positions and plot
+    rgraph.refresh();
+    //end
+    rgraph.controller.onBeforeCompute(rgraph.graph.getNode(rgraph.root));
+    rgraph.controller.onAfterCompute();
+    
+}

data/lib/public/javascripts/Jit/Examples/RGraph/example3.html

@@ -0,0 +1,199 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>RGraph - Graph Operations</title>
+
+<!-- CSS Files -->
+<link type="text/css" href="../css/base.css" rel="stylesheet" />
+<link type="text/css" href="../css/RGraph.css" rel="stylesheet" />
+
+<!--[if IE]><script language="javascript" type="text/javascript" src="../../Extras/excanvas.js"></script><![endif]-->
+
+<!-- JIT Library File -->
+<script language="javascript" type="text/javascript" src="../../jit.js"></script>
+
+<!-- Example File -->
+<script language="javascript" type="text/javascript" src="example3.js"></script>
+</head>
+
+<body onload="init();">
+<div id="container">
+
+<div id="left-container">
+
+
+
+<div class="text">
+<h4>
+Graph Operations    
+</h4> 
+
+            You can do the following operations with the RGraph<br /><br />
+            1.- Removing subtrees or nodes<br /><br />
+            2.- Removing edges<br /><br />
+            3.- Adding another graph, also called sum<br /><br />
+            4.- Morphing (or transforming) the graph into another one<br />
+            
+</div>
+
+<div id="id-list"></div>
+
+
+<div style="text-align:center;"><a href="example3.js">See the Example Code</a></div>            
+</div>
+
+<div id="center-container">
+    <div id="infovis"></div>    
+</div>
+
+<div id="right-container">
+
+<h4>Global Options</h4>
+
+<table>
+    <tr>
+        <td>
+            duration:
+        </td>
+        <td>
+            <select id="select-duration">
+                <option>1000</option>
+                <option>1500</option>
+            </select>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            fps:
+        </td>
+        <td>
+            <select id="select-fps">
+                <option>10</option>
+                <option selected="selected">30</option>
+                <option>60</option>
+            </select>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            hide labels:
+        </td>
+        <td>
+            <input type="checkbox" checked="checked" id="hide-labels" />
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <input type="button" value="Refresh" onclick="window.location = window.location" />
+        </td>
+    </tr>
+</table>
+
+<h4>1.- Remove Nodes</h4>
+
+<table>
+    <tr>
+        <td>
+            type:
+        </td>
+        <td>
+            <select id="select-type-remove-nodes">
+                <option>fade:seq</option>
+                <option>fade:con</option>
+                <option>iter</option>
+                <option>replot</option>
+            </select>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <input type="button" value="Remove" id="remove-nodes" />    
+        </td>
+        <td>
+            <input type="button" value="Refresh" onclick="window.location = window.location" />
+        </td>
+    </tr>
+</table>
+
+<h4>2.- Remove Edges</h4>
+
+<table>
+    <tr>
+        <td>
+            type:
+        </td>
+        <td>
+            <select id="select-type-remove-edges">
+                <option>fade:seq</option>
+                <option>fade:con</option>
+                <option>iter</option>
+                <option>replot</option>
+            </select>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <input type="button" value="Remove" id="remove-edges" />    
+        </td>
+        <td>
+            <input type="button" value="Refresh" onclick="window.location = window.location" />
+        </td>
+    </tr>
+</table>
+
+<h4>3.- Add Graph (Sum)</h4>
+
+<table>
+    <tr>
+        <td>
+            type:
+        </td>
+        <td>
+            <select id="select-type-sum">
+                <option>fade:seq</option>
+                <option>fade:con</option>
+                <option>replot</option>
+            </select>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <input type="button" value="Sum" id="sum" />    
+        </td>
+        <td>
+            <input type="button" value="Refresh" onclick="window.location = window.location" />
+        </td>
+    </tr>
+</table>
+
+<h4>4.- Morph</h4>
+
+<table>
+    <tr>
+        <td>
+            type:
+        </td>
+        <td>
+            <select id="select-type-morph">
+                <option>fade:con</option>
+                <option>replot</option>
+            </select>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <input type="button" value="Morph" id="morph" />    
+        </td>
+        <td>
+            <input type="button" value="Refresh" onclick="window.location = window.location" />
+        </td>
+    </tr>
+</table>
+
+</div>
+
+<div id="log"></div>
+</div>
+</body>
+</html>