Toolbox gadget for new json format

 - Use json data to define possible nodes
 - Use json data to configure node style
 - get rid of handlebars
 - pass json data in the drag context

dream/platform/src/dream/Input_viewProductionLine.js

@@ -86,7 +86,7 @@
     })
 
     .declareMethod("render", function (options) {
-      var jio_key = options.id, gadget = this;
+      var jio_key = options.id, gadget = this, data;
       gadget.props.jio_key = jio_key;
       return new RSVP.Queue()
         .push(function () {
@@ -98,13 +98,14 @@
             }), gadget.getDeclaredGadget("productionline_graph") ]);
         })
         .push(function (result_list) {
-          return result_list[1].render(result_list[0]);
+          data = result_list[0];
+          return result_list[1].render(data);
         })
         .push(function () {
           return gadget.getDeclaredGadget("productionline_toolbox");
         })
         .push(function (toolbox_gadget) {
-          toolbox_gadget.render();
+          toolbox_gadget.render(data);
         });
     })
 

dream/platform/src/jsplumb/jsplumb.js

@@ -729,7 +729,7 @@
           g.props.main = g.props.element.querySelector('#main');
           initJsPlumb(g);
           g.props.nodes_click_monitor = RSVP.Monitor();
-          $.each(g.props.data.nodes, function (key, value) {
+          $.each(g.props.data.graph.main_graph.node, function (key, value) {
             if (coordinates === undefined || coordinates[key] === undefined) {
               value.coordinate = {
                 'top': 0.0,
@@ -746,7 +746,7 @@
               });
             }
           });
-          $.each(g.props.data.edges, function (key, value) {
+          $.each(g.props.data.graph.main_graph.edge, function (key, value) {
             addEdge(g, key, value);
           });
         })

dream/platform/src/toolbox/index.html

@@ -5,21 +5,8 @@
     <link rel="stylesheet" href="../<%= curl.jqueryuicss.relative_dest %>">
     <link rel="stylesheet" href="toolbox.css">
 
-    <script src="../<%= curl.jquery.relative_dest %>"></script>
-    <script src="../<%= curl.jqueryuijs.relative_dest %>"></script>
     <script src="../<%= copy.rsvp.relative_dest %>"></script>
     <script src="../<%= copy.renderjs.relative_dest %>"></script>
-    <script src="../<%= copy.handlebars.relative_dest%>"></script>
-
-    <script id="tool-template" type="text/x-handlebars-template">
-      <div id="{{key}}"
-           class="tool {{key}}"
-           draggable="true">
-        {{name}}
-        <ul/>
-      </div>
-    </script>
-
     <script src="../dream/mixin_gadget.js"></script>
     <script src="../dream/mixin_promise.js"></script>
 

dream/platform/src/toolbox/toolbox.js

-/*global window, document, RSVP, rJS, Handlebars, initGadgetMixin*/
-(function (window, document, RSVP, rJS, Handlebars, initGadgetMixin) {
+/*global window, document, RSVP, rJS, initGadgetMixin*/
+(function (window, document, RSVP, rJS, initGadgetMixin) {
   "use strict";
-  /*jslint nomen: true*/
-  var gadget_klass = rJS(window),
-    tool_template_source = gadget_klass.__template_element
-      .getElementById('tool-template').innerHTML,
-    tool_template = Handlebars.compile(tool_template_source);
 
+   // XXX use a renderjs utility function for that
+  /*jslint nomen: true*/
+  var gadget_klass = rJS(window);
   function waitForDragstart(tool) {
     var callback;
 
@@ -20,7 +18,8 @@
 
       callback = function (evt) {
         try {
-          evt.dataTransfer.setData('text/html', tool.outerHTML);
+          evt.dataTransfer.setData('application/json',
+            tool.dataset.class_definition);
         } catch (e) {
           reject(e);
         }
@@ -34,26 +33,31 @@
   initGadgetMixin(gadget_klass);
   gadget_klass
 
-    .declareAcquiredMethod("getConfigurationDict", "getConfigurationDict")
-
-    .declareMethod("render", function () {
-      var g = this;
-      return g.getConfigurationDict()
-        .push(function (config_dict) {
-          var tools_container = document.createElement('div');
-          tools_container.className = 'tools-container';
-          Object.keys(config_dict).forEach(function (key) {
-            var name = config_dict[key].name || key.split('-')[1];
-            if (key !== 'Dream-Configuration') {
-              tools_container.innerHTML += tool_template({
-                key: key,
-                name: name
-              });
-            }
+    // XXX errors not reported
+    .declareMethod("render", function (json_data) {
+      var data = JSON.parse(json_data),
+        tools_container = document.createElement('div');
+      /* display all nodes in the palette.
+       */
+      tools_container.className = 'tools-container';
+      Object.keys(data.class_definition).forEach(function (key) {
+        var _class = data.class_definition[key], tool;
+        if (_class._class === 'node') {
+          tool = document.createElement('div');
+          // XXX maybe allow to configure the class name ?
+          tool.className = "tool " + key;
+          tool.textContent = _class.name || key;
+          tool.draggable = true;
+          tool.dataset.class_definition = JSON.stringify(_class);
+          Object.keys(_class.css || {}).forEach(function (k) {
+            tool.style[k] = _class.css[k];
           });
-          g.props.element.querySelector('.tools')
-            .appendChild(tools_container);
-        });
+          tools_container.appendChild(tool);
+        }
+      });
+
+      this.props.element.querySelector('.tools')
+        .appendChild(tools_container);
     })
 
     .declareMethod('startService', function () {
@@ -64,4 +68,4 @@
         });
       return RSVP.all(promiseArray);
     });
-}(window, document, RSVP, rJS, Handlebars, initGadgetMixin));
+}(window, document, RSVP, rJS, initGadgetMixin));