Graph Editor: use CSS defined in the json and define box-sizing to have proper ratio

dream/platform/src/jsplumb/jsplumb.css

@@ -74,8 +74,9 @@ path, ._jsPlumb_endpoint {
 
 .window, .dummy_window {
     border:1px solid lightgray;
-    width:100px;
-    height:64px;
+    width: 80px;
+    height: 80px;
+    box-sizing: border-box;
     position:absolute;
     color:black;
     font-family:serif;

dream/platform/src/jsplumb/jsplumb.js

@@ -149,7 +149,7 @@
   }
 
   function convertToAbsolutePosition(gadget, x, y) {
-    var zoom_level = gadget.props.zoom_level * 1.1111,
+    var zoom_level = gadget.props.zoom_level,
       canvas_size_x = $(gadget.props.main).width(),
       canvas_size_y = $(gadget.props.main).height(),
       size_x = $(gadget.props.element).find('.dummy_window').width() *
@@ -162,7 +162,7 @@
   }
 
   function convertToRelativePosition(gadget, x, y) {
-    var zoom_level = gadget.props.zoom_level * 1.1111,
+    var zoom_level = gadget.props.zoom_level,
       canvas_size_x = $(gadget.props.main).width(),
       canvas_size_y = $(gadget.props.main).height(),
       size_x = $(gadget.props.element).find('.dummy_window').width() *
@@ -240,11 +240,11 @@
   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,
+    var zoom_level = gadget.props.zoom_level,
       element = $(gadget.props.element).find("#" + element_id),
       new_value;
     $.each(gadget.props.style_attr_list, function (i, j) {
-      new_value = $(gadget.props.element).find('.dummy_window').css(j)
+      new_value = element.css(j)
         .replace('px', '') * zoom_level + 'px';
       element.css(j, new_value);
     });
@@ -734,7 +734,6 @@
       coordinate
     );
 
-    // XXX make node template an option, or use CSS from class_definition
     /*jslint nomen: true*/
     domElement = domParser.parseFromString(
       node_template({
@@ -755,6 +754,9 @@
       coordinate.left,
       coordinate.top
     );
+    if (class_definition.css) {
+      box.css(class_definition.css);
+    }
     box.css("top", absolute_position[1]);
     box.css("left", absolute_position[0]);
     updateNodeStyle(gadget, dom_element_id);

dream/platform/src/toolbox/toolbox.css

@@ -17,7 +17,8 @@
   border: 1px solid lightgray;
   box-shadow: 1px 1px 2px #aaa;
   min-width:7em;
-  height:3em;
+  min-height:6em;
+  box-sizing: border-box;
   z-index: 10001;
   color: gray;
   font-family:serif;
@@ -30,45 +31,3 @@
   padding-top: 1.3em;
   cursor: move;
 }
-
-.Dream-Source, .Dream-BatchSource {
-  border: 1px solid #bbc;
-  background-color:#ffe;
-  background-image: linear-gradient(to bottom, #ffe 0%, #dde 100%);
-}
-
-.Dream-Machine, .Dream-MachineJobShop, .Dream-BatchScrapMachine, .Dream-MachineManagedJob, .Dream-MouldAssembly {
-  border: 1px solid #cbc;
-  background-color: #fef;
-  background-image: linear-gradient(to bottom, #fef 0%, #ede 100%);
-}
-
-.Dream-Queue, .Dream-QueueJobShop, .Dream-LineClearance, .Dream-QueueManagedJob, .Dream-ConditionalBuffer, .Dream-OrderDecomposition, .Dream-MouldAssemblyBuffer {
-  border: 1px solid #bcc;
-  background-color:#eff;
-  background-image: linear-gradient(to bottom, #eff 0%, #dee 100%);
-}
-
-.Dream-Exit, .Dream-ExitJobShop {
-  border: 1px solid #ccb;
-  background-color:#eef;
-  background-image: linear-gradient(to bottom, #eef 0%, #dde 100%);
-}
-
-.Dream-EventGenerator {
-  border: 1px solid #cba;
-  background-color:#fdc;
-  background-image: linear-gradient(to bottom, #fdc 0%, #ecb 100%);
-}
-
-.Dream-BatchDecomposition, .Dream-BatchDecompositionStartTime, .Dream-BatchReassembly {
-  border: 1px solid #bcb;
-  background-color:#dfd;
-  background-image: linear-gradient(to bottom, #dfd 0%, #cec 100%);
-}
-
-.Dream-Repairman {
-  border: 1px solid #cbb;
-  background-color:#fdd;
-  background-image: linear-gradient(to bottom, #fdd 0%, #dcc 100%);
-}
\ No newline at end of file