lots of cleanups

dream/platform/src/dream/Input_viewProductionLine.js

@@ -3,9 +3,9 @@
   "use strict";
   var gadget_klass = rJS(window);
 
+// TODO: save on parent gadget
   function saveGraph(evt) {
-    var gadget = this,
-      graph_data;
+    var gadget = this;
     return new RSVP.Queue()
       .push(function () {
         // Prevent double click
@@ -18,11 +18,10 @@
         return graph_gadget.getContent();
       })
       .push(function (body) {
-        console.log("saving", JSON.parse(body));
         return gadget.aq_putAttachment({
           "_id": gadget.props.jio_key,
           "_attachment": "body.json",
-          "_data": body, //JSON.stringify(data, null, 2),
+          "_data": JSON.stringify(JSON.parse(body), null, 2),
           "_mimetype": "application/json"
         });
       })
@@ -44,6 +43,7 @@
 
   gadget_klass
 
+    // TODO Mixin
     .ready(function (g) {
       g.props = {};
     })

dream/platform/src/fieldset/fieldset.js

@@ -17,15 +17,17 @@
   initGadgetMixin(gadget_klass);
   gadget_klass
 
-    .declareMethod("render", function (property_list, data, key) {
+    .declareMethod("render", function (options, node_id) {
+      // XXX node_id is added like a property so that one can change the node
+      // id
       var gadget = this,
         queue,
-        value,
         property;
 
-      gadget.key = key; // used for recursive fieldsets
+      gadget.props.key = options.key; // used for recursive fieldsets
       gadget.props.field_gadget_list = [];
-      function addField(property, value) {
+
+      function addField(property_id, property_definition, value) {
         var sub_gadget;
         queue
           .push(function () {
@@ -34,39 +36,29 @@
             gadget.props.element.insertAdjacentHTML(
               'beforeend',
               label_template({
-                "for": property.id,
-                "name": (property.name || property.id)
+                "for": property_id,
+                "name": (property_definition.name || property_id)
               })
             );
-            if (property._class === "Dream.PropertyList") {
+            if (property_definition.type === "object") {
               // Create a recursive fieldset for this key.
               return gadget.declareGadget("../fieldset/index.html");
             }
-            if (property.type === "number") {
+            if (property_definition.type === "number") {
               return gadget.declareGadget("../number_field/index.html");
             }
-            if (property.choice) {
+            if (property_definition.enum) {
               return gadget.declareGadget("../list_field/index.html");
             }
             return gadget.declareGadget("../string_field/index.html");
           })
           .push(function (gg) {
             sub_gadget = gg;
-            var choice = property.choice || [],
-              default_opt = choice[0] ? [choice[0][1]] : [""];
-            value = (data[property.id] === undefined ?
-                      value : data[property.id]);
-            if (gg.__title === 'Fieldset') {
-              // XXX there must be a better way instead of using __title ?
-              return gg.render(property.property_list, value, property.id);
-            }
-            return sub_gadget.render({field_json: {
-              title: (property.description || ''),
-              key: property.id,
+            return sub_gadget.render({
+              key: property_id,
               value: value,
-              items: choice,
-              default: default_opt
-            }});
+              property_definition: property_definition
+            });
           })
           .push(function () {
             return sub_gadget.getElement();
@@ -79,13 +71,21 @@
 
       queue = new RSVP.Queue()
         .push(function () {
-          Object.keys(property_list).forEach(function (i) {
-            property = property_list[i];
-            value = property._default === undefined ? "" : property._default;
-            addField(property, value);
+          if (node_id) {
+            addField('id', {'type': 'string'}, node_id);
+          }
+          Object.keys(options.property_definition.properties
+            ).forEach(function (property_name) {
+            var property_definition =
+              options.property_definition.properties[property_name],
+              value = (options.value || {})[property_name] === undefined 
+              ? property_definition._default : options.value[property_name];
+            // XXX some properties are not editable
+            if (property_name !== 'coordinate' && property_name !== '_class') {
+              addField(property_name, property_definition, value);
+            }
           });
         });
-
       return queue;
     })
 
@@ -99,8 +99,8 @@
         .push(function () { return RSVP.all(promise_list); })
         .push(function (result_list) {
           var name, result = {}, content = result;
-          if (gadget.key) {
-            content = result[gadget.key] = {};
+          if (gadget.props.key) {
+            content = result[gadget.props.key] = {};
           }
           for (i = 0; i < result_list.length; i += 1) {
             for (name in result_list[i]) {

dream/platform/src/jsplumb/jsplumb.js

@@ -19,16 +19,15 @@
 
 /*global RSVP, rJS, $, jsPlumb, Handlebars, initGadgetMixin,
   loopEventListener, promiseEventListener, DOMParser, confirm */
-/*jslint unparam: true */
+/*jslint unparam: true todo: true */
 (function (RSVP, rJS, $, jsPlumb, Handlebars, initGadgetMixin,
            loopEventListener, promiseEventListener, DOMParser) {
   "use strict";
 
   /*jslint nomen: true */
   /* TODO:
-   *  - make node edit a gadget ?
-   *  - add function to turn event handlers in promise. Or just use event
-   *  handlers ? XXX understand the diff with example
+   *  - make node edition popup a gadget ?
+   *  - add function to turn event handlers in promise ?
    * 
    * tests:
    *   - loading
@@ -67,7 +66,8 @@
       }
       cancelResolver();
     }
-    function itsANonResolvableTrap(resolve, reject) {
+
+    function resolver(resolve, reject) {
 
       handle_event_callback = function () {
         var args = arguments;
@@ -86,13 +86,14 @@
 
       jsplumb_instance.bind(type, handle_event_callback);
     }
-    return new RSVP.Promise(itsANonResolvableTrap, canceller);
+    return new RSVP.Promise(resolver, canceller);
   }
 
-  function getNodeId(node_container, element_id) {
+  function getNodeId(gadget, element_id) {
+    // returns the ID of the node in the graph from its DOM element id
     var node_id;
-    $.each(node_container, function (k, v) {
-      if (v.element_id === element_id) {
+    $.each(gadget.props.node_id_to_dom_element_id, function (k, v) {
+      if (v === element_id) {
         node_id = k;
         return false;
       }
@@ -100,23 +101,19 @@
     return node_id;
   }
 
-  function getElementId(gadget, node_id) {
-    // TODO: inline
-    return gadget.props.dom_element_id_container[node_id];
-  }
-
   function generateNodeId(gadget, element) {
+    // Generate a node id
     var n = 1,
       class_def = gadget.props.data.class_definition[element._class],
       id = class_def.short_id || element._class;
-    console.log("gni", element, class_def);
     while (gadget.props.node_container[id + n] !== undefined) {
       n += 1;
     }
     return id + n;
   }
 
-  function generateElementId(gadget_element) {
+  function generateDomElementId(gadget_element) {
+    // Generate a probably unique DOM element ID.
     var n = 1;
     while ($(gadget_element).find('#DreamNode_' + n).length > 0) {
       n += 1;
@@ -129,10 +126,8 @@
       delete gadget.props.data.graph.main_graph.edge[connection.id];
     } else {
       edge_data = edge_data || {'_class': 'Dream.Edge'};
-      edge_data.source = getNodeId(gadget.props.node_container,
-                                      connection.sourceId);
-      edge_data.destination = getNodeId(gadget.props.node_container,
-                                      connection.targetId);
+      edge_data.source = getNodeId(gadget, connection.sourceId);
+      edge_data.destination = getNodeId(gadget, connection.targetId);
       gadget.props.data.graph.main_graph.edge[connection.id] = edge_data;
     }
     gadget.notifyDataChanged();
@@ -192,21 +187,23 @@
   }
 
   function updateElementCoordinate(gadget, node_id, coordinate) {
-    var element_id = gadget.props.dom_element_id_container[node_id],
+    var element_id = gadget.props.node_id_to_dom_element_id[node_id],
       element,
       relative_position;
+
     if (coordinate === undefined) {
-      coordinate = {};
       element = $(gadget.props.element).find("#" + element_id);
       relative_position = convertToRelativePosition(
         gadget,
         element.css('left'),
         element.css('top')
       );
-      coordinate.top = relative_position[1];
-      coordinate.left = relative_position[0];
+      coordinate = {
+        left: relative_position[0],
+        top: relative_position[1]
+      };
     }
-    console.log("uec", node_id, gadget.props.node_container);
+
     gadget.props.node_container[node_id].coordinate = coordinate;
     gadget.notifyDataChanged();
     return coordinate;
@@ -215,10 +212,7 @@
   function draggable(gadget) {
     var jsplumb_instance = gadget.props.jsplumb_instance,
       stop = function (element) {
-        updateElementCoordinate(gadget, getNodeId(
-          gadget.props.node_container,
-          element.target.id
-        ));
+        updateElementCoordinate(gadget, getNodeId(gadget, element.target.id));
       };
 
     jsplumb_instance
@@ -294,6 +288,8 @@
   }
 
   function updateNodeStyle(gadget, element_id) {
+    // Update node size according to the zoom level
+    // XXX does nothing for now
     var zoom_level = gadget.props.zoom_level * 1.1111,
       element = $(gadget.props.element).find("#" + element_id),
       new_value;
@@ -304,22 +300,6 @@
     });
   }
 
-  function addElementToContainer(node_container, element) {
-    // Now update the container of elements
-    /*jslint nomen: true*/
-    var element_data = {
-      _class: element._class,
-      name: element.name,
-      element_id: element.element_id
-    };
-    Object.keys(element).forEach(function (k) {
-      if (k !== '_class' && k !== 'name' && k !== 'element_id') {
-        element_data[k] = element[k];
-      }
-    });
-    node_container[element.id] = element_data;
-  }
-
   // function redraw(gadget) {
   //   var coordinates = gadget.props.preference_container.coordinates || {},
   //     absolute_position,
@@ -331,7 +311,7 @@
   //       v.top
   //     );
   //     element = $(gadget.props.element).find(
-  //       '#' + getElementId(gadget.props.node_container, node_id)
+  //       '#' + gadget.props.node_id_to_dom_element_id[node_id];
   //     );
   //     element.css('top', absolute_position[1]);
   //     element.css('left', absolute_position[0]);
@@ -381,8 +361,10 @@
   }
 
   function updateElementData(gadget, node_id, data) {
-    var element_id = gadget.props.dom_element_id_container[node_id];
+  // XXX should probably not use data.data
+    var element_id = gadget.props.node_id_to_dom_element_id[node_id],
       new_id = data.id;
+    console.log('ued', node_id, data);
     if (data.data.name) {
       $(gadget.props.element).find("#" + element_id).text(data.data.name)
         .append('<div class="ep"></div></div>');
@@ -419,8 +401,8 @@
     }
 
     connection = gadget.props.jsplumb_instance.connect({
-      source: getElementId(gadget, edge_data.source),
-      target: getElementId(gadget, edge_data.destination),
+      source: gadget.props.node_id_to_dom_element_id[edge_data.source],
+      target: gadget.props.node_id_to_dom_element_id[edge_data.destination],
       Connector: [ "Bezier", {curviness: 75} ],
       overlays: overlays
     });
@@ -428,12 +410,38 @@
     connection.id = edge_id;
   }
 
-  function openNodeDialog(gadget, element, config_dict) {
-    var node_id = getNodeId(gadget.props.node_container, element.id),
+  function expandSchema(class_definition, full_schema) {
+    // minimal expanding of json schema, supports merging allOf and $ref
+    // references
+    var name, property, referenced, i,
+      expanded_class_definition = {properties:
+        class_definition.properties || {}};
+    if (class_definition.allOf) {
+      for (i = 0; i < class_definition.allOf.length; i += 1) {
+        referenced = class_definition.allOf[i];
+        if (referenced.$ref) {
+          referenced = expandSchema(
+            full_schema.class_definition[
+              referenced.$ref.substr(1, referenced.$ref.length)
+            ],
+            full_schema);
+        }
+        for (property in (referenced.properties || [])) {
+          if (referenced.properties[property].type) {
+            expanded_class_definition.properties[property] 
+              = referenced.properties[property];
+          }
+        }
+      }
+    }
+    return expanded_class_definition;
+  }
+
+  function openNodeDialog(gadget, element, class_definition) {
+    var node_id = getNodeId(gadget, element.id),
       node_data = gadget.props.node_container[node_id],
-      element_type = node_data._class.replace('.', '-'),
-      property_list = config_dict[element_type].property_list || [],
       node_edit_popup = $(gadget.props.element).find('#popup-edit-template'),
+      schema = expandSchema(class_definition, gadget.props.data),
       fieldset_element,
       delete_promise;
 
@@ -450,23 +458,7 @@
     fieldset_element = node_edit_popup.find('fieldset')[0];
     node_edit_popup.popup();
 
-    node_data.id = node_id;
-    if (property_list.length === 0 || property_list[0].id !== "id") {
-     // XXX name & id should not be handled differently in form.
-      property_list.unshift({
-        "_class": "Dream.Property",
-        "id": "name",
-        "name": "Name",
-        "type": "string"
-      });
-
-      property_list.unshift({
-        "_class": "Dream.Property",
-        "id": 'id',
-        "name": "ID",
-        "type": "string"
-      });
-    }
+    node_data.id = node_id; // XXX
 
     function save_promise(fieldset_gadget, node_id) {
       return RSVP.Queue()
@@ -509,7 +501,9 @@
       .push(function (fieldset_gadget) {
        // XXX those promises can probably be merged
         return RSVP.all([fieldset_gadget,
-                fieldset_gadget.render(property_list, node_data)]);
+                         fieldset_gadget.render({value: node_data, 
+                                          property_definition: schema},
+                                          node_id)]);
       })
       .push(function (fieldset_gadget) {
         node_edit_popup.enhanceWithin();
@@ -541,20 +535,16 @@
     var render_element = $(gadget.props.element).find("#main"),
       class_definition = gadget.props.data.class_definition[node_data._class],
       coordinate = node_data.coordinate,
+      dom_element_id,
       box,
       absolute_position,
       domElement;
-    console.log("adding", node_id, gadget.props.dom_element_id_container);
-    gadget.props.dom_element_id_container[node_id] = 
-        generateElementId(gadget.props.element);
-    /*
-    if (!element.id) {
-      element.id = generateNodeId(gadget, element);
-    }
-    */
-    // element.name = element.name || element.class_definition.name;
+
+    dom_element_id = generateDomElementId(gadget.props.element);
+    gadget.props.node_id_to_dom_element_id[node_id] = dom_element_id;
+
     node_data.name = node_data.name || class_definition.name;
-    addElementToContainer(gadget.props.node_container, node_data);
+    gadget.props.node_container[node_id] = node_data;
 
     if (coordinate !== undefined) {
       node_data.coordinate = updateElementCoordinate(
@@ -564,12 +554,12 @@
       );
     }
 
-    // XXX stop using handlebars
+    // XXX make this an option, or use CSS from class_definition
     /*jslint nomen: true*/
     domElement = domParser.parseFromString(
       node_template({
         "class": node_data._class.replace('.', '-'),
-        "element_id": node_data.element_id,
+        "element_id": dom_element_id,
         "title": node_data.name || node_data.id,
         "name": node_data.name || node_data.id
       }),
@@ -578,7 +568,8 @@
     render_element.append(domElement);
 
     waitForNodeClick(gadget, domElement, class_definition);
-    box = $(gadget.props.element).find("#" + node_data.element_id);
+
+    box = $(gadget.props.element).find("#" + dom_element_id);
     absolute_position = convertToAbsolutePosition(
       gadget,
       coordinate.left,
@@ -586,7 +577,7 @@
     );
     box.css("top", absolute_position[1]);
     box.css("left", absolute_position[0]);
-    updateNodeStyle(gadget, node_data.element_id);
+    updateNodeStyle(gadget, dom_element_id);
     draggable(gadget);
     gadget.notifyDataChanged();
   }
@@ -603,32 +594,25 @@
 
   function waitForDrop(gadget) {
     var callback;
-
     function canceller() {
       if (callback !== undefined) {
         gadget.props.main.removeEventListener('drop', callback, false);
       }
     }
-
     /*jslint unparam: true*/
-    function itsANonResolvableTrap(resolve, reject) {
+    function resolver(resolve, reject) {
       // XXX name this function seriously
       callback = function (evt) {
         try {
-          var class_name_and_class_definition = JSON.parse(
+          var class_name = JSON.parse(
               evt.dataTransfer.getData('application/json')
             ),
-            class_name = class_name_and_class_definition[0],
-            class_definition = class_name_and_class_definition[1],
             offset = $(gadget.props.main).offset(),
-            box_top = evt.clientY - offset.top + "px",
-            box_left = evt.clientX - offset.left + "px",
             relative_position = convertToRelativePosition(
               gadget,
-              box_left,
-              box_top
+              evt.clientX - offset.left + "px",
+              evt.clientY - offset.top + "px"
             );
-
           addNode(gadget,
             generateNodeId(gadget, {_class: class_name}),
             {
@@ -646,18 +630,17 @@
       gadget.props.main.addEventListener('drop', callback, false);
     }
 
-    return new RSVP.Promise(itsANonResolvableTrap, canceller);
+    return new RSVP.Promise(resolver, canceller);
   }
 
   initGadgetMixin(gadget_klass);
   gadget_klass
 
-    .declareAcquiredMethod('getConfigurationDict', 'getConfigurationDict')
     .declareAcquiredMethod('notifyDataChanged', 'notifyDataChanged')
 
     .ready(function (g) {
-      g.props.edge_container = {};
-      g.props.dom_element_id_container = {};
+      g.props.edge_container = {}; // XXX remove
+      g.props.node_id_to_dom_element_id = {};
       g.props.zoom_level = 1.0;
       g.props.style_attr_list = [
         'width',
@@ -669,13 +652,12 @@
 
     .declareMethod('render', function (data) {
       this.props.data = JSON.parse(data);
-      console.log("render", this.props.data);
       this.props.node_container = this.props.data.graph.main_graph.node;
       this.props.jsplumb_instance = jsPlumb.getInstance();
     })
 
     .declareMethod('getContent', function () {
-      return JSON.stringify(this.props.data)
+      return JSON.stringify(this.props.data);
     })
 
     .declareMethod('startService', function () {

dream/platform/src/list_field/listfield.js

@@ -28,18 +28,18 @@
       var select = this.element.getElementsByTagName('select')[0],
         i,
         template,
-        field_json = options.field_json,
         tmp = '';
-      select.setAttribute('name', field_json.key);
-      for (i = 0; i < field_json.items.length; i += 1) {
-        if (field_json.items[i][1] === field_json.value) {
+      select.setAttribute('name', options.key);
+      for (i = 0; i < options.property_definition.enum.length; i += 1) {
+        if (options.property_definition.enum[i] === options.value) {
           template = selected_option_template;
         } else {
           template = option_template;
         }
+        // XXX value and text are always same in json schema
         tmp += template({
-          value: field_json.items[i][1],
-          text: field_json.items[i][0]
+          value: options.property_definition.enum[i],
+          text: options.property_definition.enum[i]
         });
       }
       select.innerHTML += tmp;

dream/platform/src/number_field/numberfield.js

@@ -10,11 +10,10 @@
         });
     })
     .declareMethod('render', function (options) {
-      var input = this.element.querySelector('input'),
-        field_json = options.field_json || {};
-      input.setAttribute('value', field_json.value);
-      input.setAttribute('name', field_json.key);
-      input.setAttribute('title', field_json.title);
+      var input = this.element.querySelector('input');
+      input.setAttribute('value', options.value);
+      input.setAttribute('name', options.key);
+      input.setAttribute('title', options.title || options.key);
     })
 
     .declareMethod('getContent', function () {

dream/platform/src/string_field/stringfield.js

@@ -10,11 +10,10 @@
         });
     })
     .declareMethod('render', function (options) {
-      var input = this.element.querySelector('input'),
-        field_json = options.field_json || {};
-      input.setAttribute('value', field_json.value || "");
-      input.setAttribute('name', field_json.key);
-      input.setAttribute('title', field_json.title);
+      var input = this.element.querySelector('input');
+      input.setAttribute('value', options.value || "");
+      input.setAttribute('name', options.key);
+      input.setAttribute('title', options.title || options.key);
     })
 
     .declareMethod('getContent', function () {

dream/platform/src/toolbox/toolbox.js

@@ -2,7 +2,6 @@
 (function (window, document, RSVP, rJS, initGadgetMixin) {
   "use strict";
 
-   // XXX use a renderjs utility function for that
   /*jslint nomen: true*/
   var gadget_klass = rJS(window);
   function waitForDragstart(tool) {
@@ -19,7 +18,7 @@
       callback = function (evt) {
         try {
           evt.dataTransfer.setData('application/json',
-            tool.dataset.class_definition);
+            tool.dataset.class_name);
         } catch (e) {
           reject(e);
         }
@@ -49,7 +48,7 @@
           tool.className = "tool " + key;
           tool.textContent = _class.name || key;
           tool.draggable = true;
-          tool.dataset.class_definition = JSON.stringify([key, _class]);
+          tool.dataset.class_name = JSON.stringify(key);
           Object.keys(_class.css || {}).forEach(function (k) {
             tool.style[k] = _class.css[k];
           });