gui prototype: cleanup, generate list of tools from dream configuration

DREAM/dream/dream/platform/static/index.html

@@ -11,31 +11,6 @@
 		<div id="headerWrapper"><div id="header"></div></div>		
       <div id="tools">
         Tools
-      <div id="Dream.Source" class="tool">
-        Source
-        <ul>
-        </ul>
-      </div>
-      <div id="Dream.Machine" class="tool">
-        Machine
-        <ul>
-        </ul>
-      </div>
-      <div id="Dream.Queue" class="tool">
-        Queue
-        <ul>
-        </ul>
-      </div>
-      <div id="Dream.Exit" class="tool">
-        Exit
-        <ul>
-        </ul>
-      </div>
-      <div id="Dream.Repairman" class="tool">
-        Repairman
-        <ul>
-        </ul>
-      </div>
       </div>
         <div id="main">
 			<div id="render"></div>

DREAM/dream/dream/platform/static/src/dream.js

@@ -11,84 +11,6 @@
       return "/";
     };
 
-    priv.initDialog = function() {
-      // code to allow changing values on connections. For now we assume
-      // that it is throughput. But we will need more generic code
-      var throughput = $( "#throughput" ),
-        allFields = $( [] ).add( throughput ),
-        tips = $( ".validateTips" );
-
-      function updateTips( t ) {
-        tips
-          .text( t )
-          .addClass( "ui-state-highlight" );
-        setTimeout(function() {
-          tips.removeClass( "ui-state-highlight", 1500 );
-        }, 500 );
-      }
-
-      function checkLength( o, n, min, max ) {
-        if ( o.val().length > max || o.val().length < min ) {
-          o.addClass( "ui-state-error" );
-          updateTips( "Length of " + n + " must be between " +
-            min + " and " + max + "." );
-          return false;
-        } else {
-          return true;
-        }
-      }
-
-      function checkRegexp( o, regexp, n ) {
-        if ( !( regexp.test( o.val() ) ) ) {
-          o.addClass( "ui-state-error" );
-          updateTips( n );
-          return false;
-        } else {
-          return true;
-        }
-      }    
-
-      $( "#dialog-form" ).dialog({
-        autoOpen: false,
-        height: 300,
-        width: 350,
-        modal: true,
-        buttons: {
-          "Validate": function() {
-            var bValid = true, i, i_length, box;
-            allFields.removeClass( "ui-state-error" );
-  
-            bValid = bValid && checkRegexp( throughput, /^([0-9])+$/, "Througput must be integer." );
-  
-            if ( bValid ) {
-              // Update the model with new value
-              i_length = model.box_list.length;
-              for (i = 0; i < i_length; i++) {
-                box = model.box_list[i];
-                if (box.id === priv.box_id) {
-                  box.throughput = parseInt(throughput.val(), 10);
-                }
-              }
-              priv.updateModel();
-              $( this ).dialog( "close" );
-            }
-          },
-          Cancel: function() {
-            $( this ).dialog( "close" );
-          }
-        },
-        close: function() {
-          allFields.val( "" ).removeClass( "ui-state-error" );
-        }
-      });
-    };
-
-    // Prevent enter key to do nasty things
-    $('#dialog-form :input').on("keypress", function(e) {
-      console.log("keyup, e", e);
-      return e.keyCode !== 13;
-    });
-
     // Utility function to update the style of a box
     priv.updateBoxStyle = function (box_id, style) {
       var box;
@@ -110,12 +32,21 @@
       box.html(html_string);
     };
 
+    priv.displayTool = function() {
+      var render_element = $("[id=tools]");
+      _.each(_.pairs(configuration), function(value, key, list) {
+        render_element.append('<div id="' + value[0] + '" class="tool">' +
+                    value[0].split('-')[1] +
+                    "<ul/></div>");
+      });
+    };
+
     Object.defineProperty(that, "newElement", {
       configurable: false,
       enumerable: false,
       writable: false,
       value: function (element) {
-        var element_id = "Dream." + element.id.split('_')[0];
+        var element_id = element.id.split('_')[0]
         priv.plumb.newElement(element, configuration[element_id]);
       }
     });
@@ -127,15 +58,16 @@
       value: function () {
         priv.plumb = jsonPlumb.newJsonPlumb();
         priv.plumb.start();
+        priv.displayTool();
       }
     });
 
-    Object.defineProperty(that, "setSimulationParameters", {
+    Object.defineProperty(that, "connect", {
       configurable: false,
       enumerable: false,
       writable: false,
-      value: function (simulation_parameters) {
-        priv.setSimulationParameters(simulation_parameters);
+      value: function (source_id, target_id) {
+        priv.plumb.connect(source_id, target_id);
       }
     });
 

DREAM/dream/dream/platform/static/src/dream_launcher.js

@@ -6,34 +6,35 @@
     jio = new jIO.newJio({type: "local", username: "dream", applicationname: "dream"});
     var window_id = 1;
     var element_id;
-    var id_container = {};
+    var id_container = {}; // to allow generating next ids, like Machine_1, Machine_2, etc
+    var configuration = {
+      "Dream-Source": { anchor: {RightMiddle: {}}},
+      "Dream-Machine": { anchor: {RightMiddle: {}, LeftMiddle: {}, TopCenter: {}, BottomCenter: {}}},
+      "Dream-Queue": { anchor: {RightMiddle: {}, LeftMiddle: {}}},
+      "Dream-Exit": { anchor: {LeftMiddle: {}}},
+      "Dream-Repairman": { anchor: {TopCenter: {}, BottomCenter: {}}},
+    }
+    dream_instance = DREAM.newDream(configuration)
+    dream_instance.start();
     $( ".tool" ).draggable({ opacity: 0.7, helper: "clone",
                              stop: function(tool) {
                                      var box_top, box_left;
                                      box_top = tool.clientY;
                                      box_left = tool.clientX;
                                      id_container[tool.target.id] = (id_container[tool.target.id] || 0) + 1
-                                     dream_instance.newElement({id : tool.target.id.split(".")[1] + "_" + id_container[tool.target.id],
+                                     dream_instance.newElement({id : tool.target.id + "_" + id_container[tool.target.id],
                                                                coordinate: {y: box_top, x: box_left},
                                        class: tool.target.id,
                                      });
                                      window_id += 1;
                                   },
-    }
-    );
-    var configuration = {
-      "Dream.Source": { anchor: {RightMiddle: {}}},
-      "Dream.Machine": { anchor: {RightMiddle: {}, LeftMiddle: {}, TopCenter: {}, BottomCenter: {}}},
-      "Dream.Queue": { anchor: {RightMiddle: {}, LeftMiddle: {}}},
-      "Dream.Exit": { anchor: {LeftMiddle: {}}},
-      "Dream.Repairman": { anchor: {TopCenter: {}, BottomCenter: {}}},
-    }
-    dream_instance = DREAM.newDream(configuration)
-    dream_instance.start();
+    });
+
     // Check if there is already data when we first load the page, if yes, then build graph from it
     jio.get({_id: "dream_demo"}, function(err, response) {
       console.log("jio get:", response);
       if (response !== undefined && response.data !== undefined) {
+        // Add all elements
         _.each(response.data.element, function(value, key, list) {
           console.log("value", value);
           var element_id = value.id;
@@ -44,6 +45,22 @@
           console.log("going to add newElement", value);
           dream_instance.newElement(value);
         });
+        // Now link elements between them and update id_container
+        _.each(response.data.element, function(value, key, list) {
+          var element_id = value.id, prefix, suffix, splitted_element_id,
+              successor_list = value.successorList || [];
+          splitted_element_id = element_id.split("_");
+          prefix = splitted_element_id[0];
+          suffix = splitted_element_id[1];
+          console.log("suffix", suffix);
+          id_container[prefix] = Math.max((id_container[prefix] || 0), parseInt(suffix, 10));
+          console.log("id_container", id_container);
+          if (successor_list.length > 0) {
+            _.each(successor_list, function(successor_value, successor_key, list) {
+              dream_instance.connect(value.id, successor_value);
+            });
+          }
+        });
       }
       // once the data is read, we can subscribe to every changes
       $.subscribe("Dream.Gui.onDataChange", function(event, data) {

DREAM/dream/dream/platform/static/src/jsonPlumb.js

@@ -9,11 +9,13 @@
 
     priv.initJsPlumb = function () {
       jsPlumb.setRenderMode(jsPlumb.SVG);
+      var color = "#00f";
+      var gradient_color = "#09098e";
       jsPlumb.importDefaults({
         // default drag options
         DragOptions : { cursor: 'pointer', zIndex:2000 },
         EndpointStyles : [{ fillStyle:'#225588' }, { fillStyle:'#558822' }],
-        PaintStyle : {strokeStyle:"#736AFF", lineWidth:2 },
+        //PaintStyle : {strokeStyle:"#736AFF", lineWidth:2 },
         HoverPaintStyle : {strokeStyle:"#42a62c", lineWidth: 4},
         Endpoint : [ "Dot", {radius:2} ],
         ConnectionOverlays : [
@@ -24,6 +26,12 @@
                       foldback:0.8
           } ],
         ],
+        PaintStyle : {
+            gradient:{stops:[[0, color], [0.5, gradient_color], [1, color]]},
+            lineWidth:5,
+            strokeStyle:color,
+            dashstyle:"2 2"
+          },
         Anchor: "Continuous",
         Connector: ["StateMachine", { curviness:20 }],
       });     
@@ -80,9 +88,6 @@
     priv.updateElementCoordinate = function(element_id, x, y) {
       var selection = priv.selection_container[element_id] || {};
       var coordinate = selection.coordinate || {};
-      //var main_div_offset = $("#main").offset();
-      //coordinate.x = x - main_div_offset.left;
-      //coordinate.y = y - main_div_offset.top;
       coordinate.x = x;
       coordinate.y = y;
       console.log("jsonPlumb, updateElementCoordinate, selection", priv.selection_container);
@@ -214,6 +219,16 @@
       }
     });
 
+    Object.defineProperty(that, "connect", {
+      configurable: false,
+      enumerable: false,
+      writable: false,
+      value: function (source_id, target_id) {
+        console.log("jsonPlumb.connect", source_id, target_id);
+        jsPlumb.connect({source: source_id, target: target_id});
+      }
+    });
+
     Object.defineProperty(that, "newElement", {
       configurable: false,
       enumerable: false,
@@ -267,12 +282,12 @@
           paintStyle:{ width:25, height:21, fillStyle:color },
           isSource:true,
           scope:"blue rectangle",
-          connectorStyle : {
+          /*connectorStyle : {
             gradient:{stops:[[0, color], [0.5, gradient_color], [1, color]]},
             lineWidth:5,
             strokeStyle:color,
             dashstyle:"2 2"
-          },
+          },*/
           //connector: ["Bezier", { curviness:63 } ],
           maxConnections:3,
           isTarget:true,
@@ -281,6 +296,7 @@
         _.each(_.pairs(option.anchor), function(value, key, list) {
           var anchor = value[0],
               endpoint_configuration = value[1];
+          console.log("jsonPlub, addEntPoint", element.id, anchor, endpoint);
           jsPlumb.addEndpoint(element.id, { anchor: anchor }, endpoint);
         })
         priv.addElementToContainer(element, option);