gui prototype: store in memory list of elemenent's coordinates + some cleanup

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

@@ -170,4 +170,4 @@
     value: DreamNamespace
   });
 
-}(window, jQuery, jsPlumb, console, _));
+}(window, jQuery, jsPlumb, console, _));
\ No newline at end of file

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

 (function($, _) {
   "use strict";
   jsPlumb.bind("ready", function() {
-    var graph_data = {}, dream_instance, available_people = {}, people_list,
+    var dream_instance, available_people = {}, people_list,
         i, i_length, updateWorkerCount, json_plumb_configuration = {}, jio;
-    graph_data.throughput = 0;
-    graph_data.box_list = [
-        {id: 'window1', title: 'attach1', throughput: 30, target_list: ['window2'], coordinate: {top: 5, left: 5}},
-        {id: 'window2', title: 'attach2', throughput: 21, target_list: ['window3'], coordinate: {top: 5, left: 15}},
-        {id: 'window3', title: 'attach3', throughput: 29, target_list: ['window7'], coordinate: {top: 5, left: 25}},
-        {id: 'window4', title: 'attach1', throughput: 22, target_list: ['window5'], coordinate: {top: 20, left: 5}},
-        {id: 'window5', title: 'attach2', throughput: 27, target_list: ['window6'], coordinate: {top: 20, left: 15}},
-        {id: 'window6', title: 'attach3', throughput: 26, target_list: ['window7'], coordinate: {top: 20, left: 25}},
-        {id: 'window7', title: 'Moulding', throughput: 40, target_list: ['window8', 'window10'], coordinate: {top: 12, left: 35}},
-        {id: 'window8', title: 'tests', throughput: 23, target_list: ['window9'], coordinate: {top: 5, left: 45}},
-        {id: 'window9', title: 'packaging', throughput: 25, coordinate: {top: 5, left: 55}},
-        {id: 'window10', title: 'tests', throughput: 28, target_list: ['window11'], coordinate: {top: 20, left: 45}},
-        {id: 'window11', title: 'packaging', throughput: 27, coordinate: {top: 20, left: 55}},
-    ];
     jio = new jIO.newJio({type: "local", username: "dream", applicationname: "dream"});
-    /*json_plumb_configuration["Dream.Queue"] = {
-        "id": "DummyQ",
-        "name": "DummyQ",
-        "isDummy": "1",
-        "capacity": "1",
-        "predecessorList": ["S1"],
-        "successorList": ["M1"]
-        };*/
-    //dream_instance = DREAM.newDream(graph_data);
-    //dream_instance.start();
-    var main_div_offset = $("#main").offset();
     var window_id = 1;
     var element_id;
     var id_container = {};
     $( ".tool" ).draggable({ opacity: 0.7, helper: "clone",
                              stop: function(tool) {
                                      var box_top, box_left;
-                                     box_top = (tool.clientY - main_div_offset.top);
-                                     box_left = (tool.clientX - main_div_offset.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],
-                                                               coordinate: {top: box_top, left: box_left},
+                                                               coordinate: {y: box_top, x: box_left},
                                        class: tool.target.id,
                                      });
                                      window_id += 1;
                                   },
     }
     );
-    //dream_instance = jsonPlumb.newJsonPlumb();
-    //dream_instance.start();
     var configuration = {
       "Dream.Source": { anchor: {RightMiddle: {}}},
       "Dream.Machine": { anchor: {RightMiddle: {}, LeftMiddle: {}, TopCenter: {}, BottomCenter: {}}},

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

@@ -38,9 +38,6 @@
         init(connInfo.connection);
       });     
             
-      // make all the window divs draggable           
-      jsPlumb.draggable(jsPlumb.getSelector(".window"), { grid: [20, 20] });
-
       // listen for clicks on connections, and offer to change values on click.
       jsPlumb.bind("click", function(conn, originalEvent) {
         console.log("user click connection", conn);
@@ -77,13 +74,36 @@
       jsPlumb.bind("connectionDetached", function(info, originalEvent) {
         updateConnectionData(info.connection, true);
       });
+      priv.draggable();
     };
 
     priv.updateJsonOutput = function() {
       //temporary method to display json on the screen (for debugging)
-      $("#json_output")[0].value = JSON.stringify(priv.element_container, null, " ");
+      $("#json_output")[0].value = JSON.stringify(priv.element_container, null, " ") + JSON.stringify(priv.selection_container, null, " ");
+    };
+
+    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;
+      console.log("jsonPlumb, updateElementCoordinate, selection", priv.selection_container);
+      selection["coordinate"] = coordinate;
+      priv.selection_container[element_id] = selection;
+      return coordinate;
     };
 
+    priv.draggable = function() {
+      // make all the window divs draggable
+      var stop = function(el) {
+        var element_id = el.target.id;
+        priv.updateElementCoordinate(element_id, el.clientX, el.clientY);
+      }
+      jsPlumb.draggable(jsPlumb.getSelector(".window"), { grid: [20, 20] ,
+                                                          stop: stop,
+      });
+    };
     priv.addElementToGraphData = function(element, option) {
       // Now update the container of elements
       var element_data = {_class: element.class,
@@ -163,7 +183,7 @@
       writable: false,
       value: function () {
         priv.element_container = {};
-        priv.graph_selection = {};
+        priv.selection_container = {};
         priv.initJsPlumb();
         priv.initDialog();
       }
@@ -179,15 +199,30 @@
       }
     });
 
+    Object.defineProperty(that, "getData", {
+      configurable: false,
+      enumerable: false,
+      writable: false,
+      value: function () {
+        return {"element": priv.element_container, "selection": priv.selection_container};
+      }
+    });
+
     Object.defineProperty(that, "newElement", {
       configurable: false,
       enumerable: false,
       writable: false,
       value: function (element, option) {
-        var render_element, style_string="";
+        var render_element, style_string="", coordinate;
         render_element = $("[id=render]");
         if (element.coordinate !== undefined) {
-          _.each(element.coordinate, function(value, key, list) {
+          coordinate = priv.updateElementCoordinate(element.id, element.coordinate.x, element.coordinate.y)
+          _.each(coordinate, function(value, key, list) {
+            if (key === "x") {
+              key = "left";
+            } else {
+              key = "top";
+            }
             style_string = style_string + key + ':' + value + 'px;';
           })
         }
@@ -198,7 +233,7 @@
                           element.id + '" ' + style_string + '">'
                           + element.id + '</div>');
         // Initial DEMO code : make all the window divs draggable
-        jsPlumb.draggable(jsPlumb.getSelector(".window"), { grid: [20, 20] });
+        priv.draggable();
         
         console.log("window selector", jsPlumb.getSelector(".window"));
         jsPlumb.getSelector("#" + element.id).bind('click', function() {