Added data manipulation functionality

almende · Feb 5, 2014 · 12669bc · 12669bc
1 parent a41fb80
commit 12669bc
Show file tree

Hide file tree

Showing 20 changed files with 1,516 additions and 679 deletions.
diff --git a/dist/img/acceptDeleteIcon.png b/dist/img/acceptDeleteIcon.png
diff --git a/dist/img/editIcon.png b/dist/img/editIcon.png
diff --git a/dist/vis.js b/dist/vis.js
diff --git a/dist/vis.min.js b/dist/vis.min.js
diff --git a/examples/graph/02_random_nodes.html b/examples/graph/02_random_nodes.html
@@ -94,19 +94,8 @@
       graph = new vis.Graph(container, data, options);
 
       // add event listeners
-<<<<<<< HEAD
-<<<<<<< HEAD
-      vis.events.addListener(graph, 'select', function(params) {
-        document.getElementById('selection').innerHTML =
-            'Selection: ' + JSON.stringify(graph.getSelection());
-=======
       graph.on('select', function(params) {
         document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
->>>>>>> develop
-=======
-      graph.on('select', function(params) {
-        document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
->>>>>>> origin/gh-pages
       });
     }
   </script>

diff --git a/examples/graph/18_fully_random_nodes_clustering.html b/examples/graph/18_fully_random_nodes_clustering.html
@@ -64,19 +64,8 @@
             graph = new vis.Graph(container, data, options);
 
             // add event listeners
-<<<<<<< HEAD
-<<<<<<< HEAD
-            vis.events.addListener(graph, 'select', function(params) {
-                document.getElementById('selection').innerHTML =
-                        'Selection: ' + JSON.stringify(graph.getSelection());
-=======
             graph.on('select', function(params) {
                 document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
->>>>>>> develop
-=======
-            graph.on('select', function(params) {
-                document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
->>>>>>> origin/gh-pages
             });
         }
     </script>

diff --git a/examples/graph/19_scale_free_graph_clustering.html b/examples/graph/19_scale_free_graph_clustering.html
@@ -100,19 +100,8 @@
       graph = new vis.Graph(container, data, options);
 
       // add event listeners
-<<<<<<< HEAD
-<<<<<<< HEAD
-      vis.events.addListener(graph, 'select', function(params) {
-        document.getElementById('selection').innerHTML =
-                'Selection: ' + JSON.stringify(graph.getSelection());
-=======
       graph.on('select', function(params) {
         document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
->>>>>>> develop
-=======
-      graph.on('select', function(params) {
-        document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
->>>>>>> origin/gh-pages
       });
     }
   </script>

diff --git a/examples/graph/20_navigation.html b/examples/graph/20_navigation.html
@@ -31,7 +31,6 @@
     div.table_description {
       width:100px;
     }
-
   </style>
 
   <script type="text/javascript" src="../../dist/vis.js"></script>

diff --git a/examples/graph/20_UI_example.html → examples/graph/21_data_manipulation.html b/examples/graph/20_UI_example.html → examples/graph/21_data_manipulation.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <html>
 <head>
-  <title>Graph | Random nodes</title>
+  <title>Graph | Navigation</title>
 
   <style type="text/css">
     body {
@@ -13,24 +13,25 @@
       border: 1px solid lightgray;
     }
     table.legend_table {
-        font-size: 11px;
-        border-width:1px;
-        border-color:#d3d3d3;
-        border-style:solid;
+      font-size: 11px;
+      border-width:1px;
+      border-color:#d3d3d3;
+      border-style:solid;
     }
     table.legend_table,td {
-        border-width:1px;
-        border-color:#d3d3d3;
-        border-style:solid;
-        padding: 2px;
+      border-width:1px;
+      border-color:#d3d3d3;
+      border-style:solid;
+      padding: 2px;
     }
     div.table_content {
-        width:80px;
-        text-align:center;
+      width:80px;
+      text-align:center;
     }
     div.table_description {
-        width:100px;
+      width:100px;
     }
+
     div.graph-manipulationDiv {
         border-width:0px;
         border-bottom: 1px;
@@ -51,10 +52,12 @@
     }
 
     span.manipulationUI {
+        font-family: verdana;
+        font-size: 12px;
         -moz-border-radius: 15px;
         border-radius: 15px;
         display:inline-block;
-        background-position: 4px 0px;
+        background-position: 0px 0px;
         background-repeat:no-repeat;
         height:24px;
         margin: -14px 0px 0px 10px;
@@ -88,31 +91,55 @@
     span.manipulationUI.none:active {
         box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
     }
+    span.manipulationUI.none {
+        padding: 0px 0px 0px 0px;
+    }
+    span.manipulationUI.notification{
+        margin: 2px;
+        font-weight: bold;
+    }
 
     span.manipulationUI.add {
         background-image: url("../../dist/img/addNodeIcon.png");
     }
 
+    span.manipulationUI.edit {
+        background-image: url("../../dist/img/editIcon.png");
+    }
+
     span.manipulationUI.connect {
         background-image: url("../../dist/img/connectIcon.png");
     }
 
     span.manipulationUI.delete {
         background-image: url("../../dist/img/deleteIcon.png");
     }
+    span.manipulationUI.acceptDelete {
+        background-image: url("../../dist/img/acceptDeleteIcon.png");
+    }
     /* top right bottom left */
     span.manipulationLabel {
-        margin: 0px 0px 0px 25px;
+        margin: 0px 0px 0px 23px;
         line-height: 25px;
     }
-
     div.seperatorLine {
         display:inline-block;
         width:1px;
         height:20px;
         background-color: #bdbdbd;
         margin: 5px 7px 0px 15px;
-
+    }
+    input.manipulatorInput[type="text"] {
+        width:80px;
+        height:15px;
+        font-size:11px;
+        margin: 2px 0px 0px 0px;
+    }
+    input.manipulatorInput[type="button"] {
+        width:80px;
+        height:22px;
+        font-size:12px;
+        margin: 2px 0px 0px 10px;
     }
 
   </style>
@@ -177,78 +204,76 @@
         nodes: nodes,
         edges: edges
       };
-        /*
+      /*
+       var options = {
+       nodes: {
+       shape: 'circle'
+       },
+       edges: {
+       length: 50
+       },
+       stabilize: false
+       };
+       */
       var options = {
-        nodes: {
-          shape: 'circle'
-        },
         edges: {
           length: 50
         },
-        stabilize: false
+        stabilize: false,
+        clustering:true,
+        navigation: true,
+        keyboard: true,
+        dataManipulationToolbar: true
       };
-      */
-    var options = {
-    edges: {
-        length: 50
-    },
-    stabilize: false,
-    navigationUI: {
-        enabled: true
-    },
-    keyboardNavigation: {
-        enabled: true
-    }
-    };
       graph = new vis.Graph(container, data, options);
 
       // add event listeners
-      vis.events.addListener(graph, 'select', function(params) {
-        document.getElementById('selection').innerHTML =
-                'Selection: ' + JSON.stringify(graph.getSelection());
+      graph.on('select', function(params) {
+        document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
       });
     }
   </script>
 </head>
 
 <body onload="draw();">
-<h2>UI - User Interface and Keyboad Navigation</h2>
+<h2>Navigation controls and keyboad navigation</h2>
 <div style="width: 700px; font-size:14px;">
-    This example is the same as example 2, except for the UI that has been activated. The UI icons are described below. <br /><br />
-    <table class="legend_table">
-        <tr>
-            <td>Icons: </td>
-            <td><div class="table_content"><img src="../../dist/img/uparrow.png" />     </div></td>
-            <td><div class="table_content"><img src="../../dist/img/downarrow.png" />   </div></td>
-            <td><div class="table_content"><img src="../../dist/img/leftarrow.png" />   </div></td>
-            <td><div class="table_content"><img src="../../dist/img/rightarrow.png" />  </div></td>
-            <td><div class="table_content"><img src="../../dist/img/plus.png" />        </div></td>
-            <td><div class="table_content"><img src="../../dist/img/minus.png" />       </div></td>
-            <td><div class="table_content"><img src="../../dist/img/zoomExtends.png" /> </div></td>
-        </tr>
-        <tr>
-            <td><div class="table_description">Keyboard shortcuts:</div></td>
-            <td><div class="table_content">Up arrow</div></td>
-            <td><div class="table_content">Down arrow</div></td>
-            <td><div class="table_content">Left arrow</div></td>
-            <td><div class="table_content">Right arrow</div></td>
-            <td><div class="table_content">=<br />[<br />Page up</div></td>
-            <td><div class="table_content">-<br />]<br />Page down</div></td>
-            <td><div class="table_content">None</div></td>
-        </tr>
-            <td><div class="table_description">Description:</div></td>
-            <td><div class="table_content">Move up</div></td>
-            <td><div class="table_content">Move down</div></td>
-            <td><div class="table_content">Move left</div></td>
-            <td><div class="table_content">Move right</div></td>
-            <td><div class="table_content">Zoom in</div></td>
-            <td><div class="table_content">Zoom out</div></td>
-            <td><div class="table_content">Zoom extends</div></td>
-        </tr>
-    </table>
-    <br />
-    Apart from clicking the icons, you can also navigate using the keyboard. The buttons are in table above.
-    Zoom Extends changes the zoom and position of the camera to encompass all visible nodes.
+  This example is the same as example 2, except for the navigation controls that has been activated. The navigation controls are described below. <br /><br />
+  <table class="legend_table">
+    <tr>
+      <td>Icons: </td>
+      <td><div class="table_content"><img src="../../dist/img/uparrow.png" />     </div></td>
+      <td><div class="table_content"><img src="../../dist/img/downarrow.png" />   </div></td>
+      <td><div class="table_content"><img src="../../dist/img/leftarrow.png" />   </div></td>
+      <td><div class="table_content"><img src="../../dist/img/rightarrow.png" />  </div></td>
+      <td><div class="table_content"><img src="../../dist/img/plus.png" />        </div></td>
+      <td><div class="table_content"><img src="../../dist/img/minus.png" />       </div></td>
+      <td><div class="table_content"><img src="../../dist/img/zoomExtends.png" /> </div></td>
+    </tr>
+    <tr>
+      <td><div class="table_description">Keyboard shortcuts:</div></td>
+      <td><div class="table_content">Up arrow</div></td>
+      <td><div class="table_content">Down arrow</div></td>
+      <td><div class="table_content">Left arrow</div></td>
+      <td><div class="table_content">Right arrow</div></td>
+      <td><div class="table_content">=<br />[<br />Page up</div></td>
+      <td><div class="table_content">-<br />]<br />Page down</div></td>
+      <td><div class="table_content">None</div></td>
+    </tr>
+    <tr>
+      <td><div class="table_description">Description:</div></td>
+      <td><div class="table_content">Move up</div></td>
+      <td><div class="table_content">Move down</div></td>
+      <td><div class="table_content">Move left</div></td>
+      <td><div class="table_content">Move right</div></td>
+      <td><div class="table_content">Zoom in</div></td>
+      <td><div class="table_content">Zoom out</div></td>
+      <td><div class="table_content">Zoom extends</div></td>
+    </tr>
+  </table>
+  <br />
+  Apart from clicking the icons, you can also navigate using the keyboard. The buttons are in table above.
+  Zoom Extends changes the zoom and position of the camera to encompass all visible nodes.
 
 
 </div>

diff --git a/examples/graph/index.html b/examples/graph/index.html
@@ -32,6 +32,7 @@ <h1>vis.js graph examples</h1>
   <p><a href="18_fully_random_nodes_clustering.html">18_fully_random_nodes_clustering.html</a></p>
   <p><a href="19_scale_free_graph_clustering.html">19_scale_free_graph_clustering.html</a></p>
   <p><a href="20_navigation.html">20_navigation.html</a></p>
+  <p><a href="21_data_manipulation.html">21_data_manipulation.html</a></p>
   <p><a href="graphviz/graphviz_gallery.html">graphviz_gallery.html</a></p>
 
 </div>