GraphViewer: Implemented UI Button creation for the EdgeShaper

html/admin/js/graphViewer/jasmine_test/runnerAll.html

@@ -6,6 +6,7 @@
 
   <link rel="shortcut icon" type="image/png" href="lib/jasmine-1.3.1/jasmine_favicon.png">
   <link rel="stylesheet" type="text/css" href="lib/jasmine-1.3.1/jasmine.css">
+  <link rel="stylesheet" type="text/css" href="../style/bootstrap.min.css">
   <script type="text/javascript" src="lib/jasmine-1.3.1/jasmine.js"></script>
   <script type="text/javascript" src="lib/jasmine-1.3.1/jasmine-html.js"></script>
   <script type="text/javascript" src="lib/jslint.js"></script>
@@ -14,6 +15,7 @@
   <script type="text/javascript" src="../../lib/d3.v3.min.js"></script>
   <script type="text/javascript" src="../../lib/underscore.js"></script>
   <script type="text/javascript" src="../../lib/jquery-1.8.3.js"></script>
+  <script type="text/javascript" src="../../lib/bootstrap.js"></script>
   <script type="text/javascript" src="../../lib/jquery.livequery.js"></script>
   
   <script type="text/javascript" src="helper/eventHelper.js"></script>

html/admin/js/graphViewer/jasmine_test/runnerEdgeShaper.html

@@ -6,6 +6,7 @@
 
   <link rel="shortcut icon" type="image/png" href="lib/jasmine-1.3.1/jasmine_favicon.png">
   <link rel="stylesheet" type="text/css" href="lib/jasmine-1.3.1/jasmine.css">
+  <link rel="stylesheet" type="text/css" href="../style/bootstrap.min.css">
   <script type="text/javascript" src="lib/jasmine-1.3.1/jasmine.js"></script>
   <script type="text/javascript" src="lib/jasmine-1.3.1/jasmine-html.js"></script>
   <script type="text/javascript" src="lib/jslint.js"></script>
@@ -14,6 +15,7 @@
   <script type="text/javascript" src="../../lib/d3.v3.min.js"></script>
   <script type="text/javascript" src="../../lib/underscore.js"></script>
   <script type="text/javascript" src="../../lib/jquery-1.8.3.js"></script>
+  <script type="text/javascript" src="../../lib/bootstrap.js"></script>
   <script type="text/javascript" src="../../lib/jquery.livequery.js"></script>
   
   <script type="text/javascript" src="helper/eventHelper.js"></script>

html/admin/js/graphViewer/jasmine_test/specEdgeShaper/edgeShaperUISpec.js

@@ -115,7 +115,7 @@
       });
       
       waitsFor(function() {
-        return $("#control_rect_modal").length === 0;
+        return $("#control_label_modal").length === 0;
       }, 2000, "The modal dialog should disappear.");
       
     });

html/admin/js/graphViewer/jasmine_test/specNodeShaper/nodeShaperUISpec.js

@@ -150,7 +150,7 @@
       });
       
       waitsFor(function() {
-        return $("#control_rect_modal").length === 0;
+        return $("#control_label_modal").length === 0;
       }, 2000, "The modal dialog should disappear.");
       
     });

html/admin/js/graphViewer/ui/edgeShaperControls.js

@@ -28,112 +28,60 @@
 /// @author Michael Hackstein
 /// @author Copyright 2011-2013, triAGENS GmbH, Cologne, Germany
 ////////////////////////////////////////////////////////////////////////////////
-function NodeShaperControls(list, shaper) {
+function EdgeShaperControls(list, shaper) {
   "use strict";
   
   if (list === undefined) {
     throw "A list element has to be given.";
   }
   if (shaper === undefined) {
-    throw "The NodeShaper has to be given.";
+    throw "The EdgeShaper has to be given.";
   }
-  var self = this,
+  var self = this;
   
-  createModalDialog = function(title, idprefix, objects, callback) {
-    var table =  modalDialogHelper.modalDivTemplate(title, idprefix, callback);
+  this.addControlOpticShapeNone = function() {
+    var prefix = "control_none",
+    idprefix = prefix + "_",
+    callback = function() {
+      shaper.changeTo({
+        shape: {
+          type: EdgeShaper.shapes.NONE
+        }
+      });
+    },
+    button = document.createElement("li");
+    button.className = "graph_control " + prefix;
+    button.id = prefix;
+    button.appendChild(document.createTextNode("None"));
+    list.appendChild(button);
+    button.onclick = callback;
+  };
+  
+  this.addControlOpticShapeArrow = function() {
+    var prefix = "control_arrow",
+    idprefix = prefix + "_",
+    callback = function() {
+      shaper.changeTo({
+        shape: {
+          type: EdgeShaper.shapes.ARROW
+        }
+      });
+    },
+    button = document.createElement("li");
+    button.className = "graph_control " + prefix;
+    button.id = prefix;
+    button.appendChild(document.createTextNode("Arrow"));
+    list.appendChild(button);
+    button.onclick = callback;
+  };
+  
+
     
-    _.each(objects, function(o) {
-      var tr = document.createElement("tr"),
-      labelTh = document.createElement("th"),
-      contentTh = document.createElement("th"),
-      input;
-      
-      table.appendChild(tr);
-      tr.appendChild(labelTh);
-      labelTh.className = "collectionTh capitalize";
-      labelTh.appendChild(document.createTextNode(o.id + ":"));
-      tr.appendChild(contentTh);
-      contentTh.className = "collectionTh";
-      switch(o.type) {
-        case "text":
-          input = document.createElement("input");
-          input.type = "text";
-          input.id = idprefix + o.id;
-          contentTh.appendChild(input);
-          break;
-        default:
-          //Sorry unknown
-          table.removeChild(tr);
-          break;
-      }
-    });
-    $("#" + idprefix + "modal").modal('show');
-  };
-  
-  this.addControlOpticShapeCircle = function() {
-    var prefix = "control_circle",
-    idprefix = prefix + "_",
-    callback = function() {
-      createModalDialog("Switch to Circle",
-        idprefix, [{
-          type: "text",
-          id: "radius"
-        }], function () {
-          var r = $("#" + idprefix + "radius").attr("value");
-          shaper.changeTo({
-            shape: {
-              type: NodeShaper.shapes.CIRCLE,
-              radius: r
-            }
-          });
-        }
-      );
-    },
-    button = document.createElement("li");
-    button.className = "graph_control " + prefix;
-    button.id = prefix;
-    button.appendChild(document.createTextNode("Circle"));
-    list.appendChild(button);
-    button.onclick = callback;
-  };
-  
-  this.addControlOpticShapeRect = function() {
-    var prefix = "control_rect",
-    idprefix = prefix + "_",
-    callback = function() {
-      createModalDialog("Switch to Rectangle",
-        idprefix, [{
-          type: "text",
-          id: "width"
-        },{
-          type: "text",
-          id: "height"
-        }], function () {
-          var w = $("#" + idprefix + "width").attr("value"),
-          h = $("#" + idprefix + "height").attr("value");
-          shaper.changeTo({
-            shape: {
-              type: NodeShaper.shapes.RECT,
-              width: w,
-              height: h
-            }
-          });
-        }
-      );
-    },
-    button = document.createElement("li");
-    button.className = "graph_control " + prefix;
-    button.id = prefix;
-    button.appendChild(document.createTextNode("Rectangle"));
-    list.appendChild(button);
-    button.onclick = callback;
-  };
-  
   this.addControlOpticLabel = function() {
     var prefix = "control_label",
     idprefix = prefix + "_",
     callback = function() {
-      createModalDialog("Switch Label Attribute",
+      modalDialogHelper.createModalDialog("Switch Label Attribute",
         idprefix, [{
           type: "text",
           id: "key"
@@ -154,8 +102,8 @@ function NodeShaperControls(list, shaper) {
   };
   
   this.addAllOptics = function () {
-    self.addControlOpticShapeCircle();
-    self.addControlOpticShapeRect();
+    self.addControlOpticShapeNone();
+    self.addControlOpticShapeArrow();
     self.addControlOpticLabel();
   };