gui: fixed some issues with element positions

after moving some elements, after a refresh of the page they where
not exactly at the same place. This is now fixed

dream/platform/static/src/dream.js

@@ -186,7 +186,7 @@
 
     priv.super_newElement = that.newElement;
     that.newElement = function (element) {
-      var element_prefix = element.id.split('_')[0]
+      var element_prefix = element.id.split('_')[0];
       priv.super_newElement(element, configuration[element_prefix]);
       $("#" + element.id).bind('click', function() {
         console.log("bind click on window", $(this));

dream/platform/static/src/dream_launcher.js

@@ -89,12 +89,13 @@
     $( ".tool" ).draggable({ opacity: 0.7, helper: "clone",
                              stop: function(tool) {
                                      var box_top, box_left, _class;
-                                     box_top = tool.clientY;
-                                     box_left = tool.clientX;
+                                     var offset = $("[id=render]").offset();
+                                     box_top = tool.clientY - offset.top + "px";
+                                     box_left = tool.clientX - offset.left + "px";
                                      id_container[tool.target.id] = (id_container[tool.target.id] || 0) + 1;
                                      _class = tool.target.id.replace('-', '.'); // XXX - vs .
                                      dream_instance.newElement({id : tool.target.id + "_" + id_container[tool.target.id],
-                                                               coordinate: {y: box_top, x: box_left},
+                                                               coordinate: {top: box_top, left: box_left},
                                        _class: _class,
                                      });
                                      window_id += 1;

dream/platform/static/src/jsonPlumb.js

@@ -101,11 +101,14 @@
       priv.draggable();
     };
 
-    priv.updateElementCoordinate = function(element_id, x, y) {
-      var preference = priv.preference_container[element_id] || {};
-      var coordinate = preference.coordinate || {};
-      coordinate.x = x;
-      coordinate.y = y;
+    priv.updateElementCoordinate = function(element_id, coordinate) {
+      var preference = priv.preference_container[element_id] || {}, element;
+      if (coordinate === undefined) {
+        coordinate = {};
+        element = $("#" + element_id);
+        coordinate.top = element.css("top");
+        coordinate.left = element.css("left");
+      }
       preference["coordinate"] = coordinate;
       priv.preference_container[element_id] = preference;
       priv.onDataChange();
@@ -116,7 +119,7 @@
       // make all the window divs draggable
       var stop = function(el) {
         var element_id = el.target.id;
-        priv.updateElementCoordinate(element_id, el.clientX, el.clientY);
+        priv.updateElementCoordinate(element_id);
       }
       jsPlumb.draggable(jsPlumb.getSelector(".window"), { grid: [20, 20] ,
                                                           stop: stop,
@@ -188,29 +191,18 @@
     };
 
     that.newElement = function (element, option) {
-      var render_element, style_string="", coordinate = {};
+      var render_element, style_string="", coordinate=element.coordinate,
+          box;
       render_element = $("[id=render]");
-      if (element.coordinate !== undefined) {
-        priv.updateElementCoordinate(element.id, element.coordinate.x, element.coordinate.y)
-        var main_div_offset = $("#main").offset();
-        coordinate.x = element.coordinate.x - main_div_offset.left;
-        coordinate.y = element.coordinate.y - main_div_offset.top;
-
-        _.each(coordinate, function(value, key, list) {
-          if (key === "x") {
-            key = "left";
-          } else {
-            key = "top";
-          }
-          style_string = style_string + key + ':' + value + 'px;';
-        })
-      }
-      if (style_string.length > 0) {
-        style_string = 'style="' + style_string + '"';
+      if (coordinate !== undefined) {
+        coordinate = priv.updateElementCoordinate(element.id, coordinate)
       }
       render_element.append('<div class="window" id="' +
-                        element.id + '" ' + style_string + '">'
-                        + element.id + '</div>');
+                        element.id + '">' + element.id + '</div>');
+      box = $("#" + element.id);
+      box.css("top", coordinate.top);
+      box.css("left", coordinate.left);
+
       // Initial DEMO code : make all the window divs draggable
       priv.draggable();