make ID modifiable.

dream/platform/static/src/dream.js

@@ -77,11 +77,14 @@
 
       // Render fields for that particular element
       var fieldset = $("#dialog-fieldset");
-      $("#dialog-fieldset").children().remove();
-      var element_id_prefix = element_id.split("_")[0];
-      var property_list = configuration[element_id_prefix].property_list || [];
       var previous_data = that.getData()["nodes"];
+      $("#dialog-fieldset").children().remove();
+      var element_type = previous_data[element_id]._class.replace('.', '-');
+      var property_list = configuration[element_type].property_list || [];
 
+      fieldset.append(
+        '<label>ID</label><input type="text" name="id" id="id" value="' +
+        element_id + '" class="text ui-widget-content ui-corner-all"/>');
       var element_name = previous_data[element_id]['name'] || element_id;
       fieldset.append(
         '<label>Name</label><input type="text" name="name" id="name" value="' +
@@ -156,7 +159,8 @@
             updateDataPropertyList(property_list, data);
             that.updateElementData(element_id, {
               data: data,
-              name: $("#name").val() || element_id
+              name: $("#name").val() || element_id,
+              id: $("#id").val() || element_id
             });
 
             $(this).dialog("close");
@@ -170,15 +174,15 @@
 
     priv.super_newElement = that.newElement;
     that.newElement = function (element) {
-      var element_prefix = element.id.split('_')[0];
-      priv.super_newElement(element, configuration[element_prefix]);
+      var element_type = element._class.replace('.', '-');
+      priv.super_newElement(element, configuration[element_type]);
       $("#" + element.id).bind('click', function () {
         $("#dialog-form").dialog("destroy");
         priv.prepareDialogForElement(element.id, element.id);
         $("#dialog-form").dialog("open");
       });
       // Store default values
-      var data = {}, property_list = configuration[element_prefix][
+      var data = {}, property_list = configuration[element_type][
           "property_list"
         ] || [];
       var updateDefaultData = function (data, property_list) {

dream/platform/static/src/jsonPlumb.js

@@ -188,7 +188,7 @@
       var element_data = {
         _class: element._class,
         id: element.id,
-        name: element.id
+        name: element.name
       };
       priv.node_container[element.id] = element_data;
       priv.onDataChange();
@@ -283,6 +283,22 @@
       if (data['name']) {
         $("#" + element_id).text(data["name"]);
       }
+      var new_id = data['id'];
+      if (new_id && new_id !== element_id) {
+	priv.node_container[new_id] = priv.node_container[element_id];
+	priv.node_container[new_id]['id'] = new_id;
+	delete(priv.node_container[element_id]);
+	$.each(priv.edge_container, function (k, v) {
+	  if (v[0] === element_id) {
+	    v[0] = new_id;
+	  }
+	  if (v[1] === element_id) {
+	    v[1] = new_id;
+	  }
+	});
+	priv.preference_container['coordinates'][new_id] = priv.preference_container['coordinates'][element_id];
+	delete(priv.preference_container['coordinates'][element_id]);
+      }
       priv.onDataChange();
     };
 
@@ -334,7 +350,7 @@
         coordinate = priv.updateElementCoordinate(element.id, coordinate);
       }
       render_element.append('<div class="window ' + element._class.replace('.', '-') + '" id="' +
-        element.id + '">' + element.id + '</div>');
+        element.id + '">' + (element.name || element.id) + '</div>');
       box = $("#" + element.id);
       var absolute_position = priv.convertToAbsolutePosition(
         coordinate.left, coordinate.top);