improve graph editor UI.

dream/platform/static/css/demo-new.css

@@ -268,8 +268,43 @@ path, ._jsPlumb_endpoint { cursor:pointer; }
   font-style:italic;
   padding-top:0.9em;
   font-size:0.9em;
+  z-index:4;
+  cursor:move;
+  background-color:white;
+  font-size:11px;
+  -webkit-transition:background-color 0.1s ease-in;
+  -moz-transition:background-color 0.1s ease-in;
+  transition:background-color 0.1s ease-in;
+}
+
+.window:hover {
+  background-color: #5c96bc;
+  color:white;
 }
 
 #debug textarea {
   width:100%;
 }
+
+.ep {
+  position:absolute;
+  bottom:37%;
+  right:5px;
+  width:1em;
+  height:1em;
+  background-color:orange;
+  cursor:pointer;
+  box-shadow: 0px 0px 2px black;
+  -webkit-transition:-webkit-box-shadow 0.25s ease-in;
+  -moz-transition:-moz-box-shadow 0.25s ease-in;
+  transition:box-shadow 0.25s ease-in;
+}
+
+._jsPlumb_source_hover, ._jsPlumb_target_hover, .dragHover {
+  background-color:#1e8151;
+  color:white;
+}
+
+path {
+  cursor:pointer;
+}

dream/platform/static/src/dream.js

@@ -181,7 +181,7 @@
     that.newElement = function (element) {
       var element_type = element._class.replace('.', '-');
       element.element_id = that.generateElementId();
-      if (! element.id) {
+      if (!element.id) {
         element.id = that.generateNodeId(element_type);
       }
       priv.super_newElement(element, configuration[element_type]);

dream/platform/static/src/dream_launcher.js

@@ -158,74 +158,40 @@
 
     var configuration = {
       "Dream-Source": {
-        anchor: {
-          RightMiddle: {}
-        },
-        /* TODO: make anchor not a configuration option and allow to connect from everywhere */
         property_list: [property_container["interarrivalTime"],
           property_container["entity"]
         ],
         _class: 'Dream.Source'
       },
       "Dream-Machine": {
-        anchor: {
-          RightMiddle: {},
-          LeftMiddle: {},
-          TopCenter: {},
-          BottomCenter: {}
-        },
         property_list: [property_container["processingTime"],
           property_container["failures"]
         ],
         _class: 'Dream.Machine'
       },
       "Dream-Queue": {
-        anchor: {
-          RightMiddle: {},
-          LeftMiddle: {}
-        },
         property_list: [property_container["capacity"], property_container[
           "isDummy"]],
         _class: 'Dream.Queue'
       },
       "Dream-Exit": {
-        anchor: {
-          LeftMiddle: {}
-        },
         _class: 'Dream.Exit'
       },
       "Dream-MachineJobShop": {
-        anchor: {
-          RightMiddle: {},
-          LeftMiddle: {},
-          TopCenter: {},
-          BottomCenter: {}
-        },
         property_list: [property_container["processingTime"],
           property_container["failures"]
         ],
         _class: 'Dream.MachineJobShop'
       },
       "Dream-QueueJobShop": {
-        anchor: {
-          RightMiddle: {},
-          LeftMiddle: {}
-        },
         property_list: [property_container["capacity"], property_container[
           "isDummy"]],
         _class: 'Dream.QueueJobShop'
       },
       "Dream-ExitJobShop": {
-        anchor: {
-          LeftMiddle: {}
-        },
         _class: 'Dream.ExitJobShop'
       },
       "Dream-Repairman": {
-        anchor: {
-          TopCenter: {},
-          BottomCenter: {}
-        },
         property_list: [property_container["capacity"]],
         _class: 'Dream.Repairman'
       },
@@ -246,7 +212,10 @@
     $(".tool").draggable({
       opacity: 0.7,
       helper: "clone",
-      cursorAt: {top: 0, left: 0},
+      cursorAt: {
+        top: 0,
+        left: 0
+      },
       stop: function (tool) {
         var box_top, box_left, _class;
         var offset = $("#render").offset();

dream/platform/static/src/jsonPlumb.js

@@ -57,20 +57,9 @@
       jsPlumb.setRenderMode(jsPlumb.SVG);
       var color = "#00f";
       jsPlumb.importDefaults({
-        // default drag options
-        DragOptions: {
-          cursor: 'pointer',
-          zIndex: 2000
-        },
-        EndpointStyles: [{
-          fillStyle: '#225588'
-        }, {
-          fillStyle: '#558822'
-        }],
-        //PaintStyle : {strokeStyle:"#736AFF", lineWidth:2 },
         HoverPaintStyle: {
-          strokeStyle: "#42a62c",
-          lineWidth: 4
+          strokeStyle: "#1e8151",
+          lineWidth: 2
         },
         Endpoint: ["Dot", {
           radius: 2
@@ -80,18 +69,10 @@
             location: 1,
             id: "arrow",
             length: 14,
-            width: 12,
             foldback: 0.8
           }]
         ],
-        PaintStyle: {
-          lineWidth: 2,
-          strokeStyle: color
-        },
-        Anchor: "Continuous",
-        Connector: ["StateMachine", {
-          curviness: 20
-        }]
+        Container: "render"
       });
 
       // listen for clicks on connections, and offer to change values on click.
@@ -107,13 +88,6 @@
 
       jsPlumb.bind("connectionDragStop", function (connection) {});
 
-      jsPlumb.makeTarget(jsPlumb.getSelector(".w"), {
-        dropOptions: {
-          hoverClass: "dragHover"
-        },
-        anchor: "Continuous"
-      });
-
       var updateConnectionData = function (connection, remove) {
         if (remove) {
           delete(priv.edge_container[connection.id]);
@@ -236,10 +210,33 @@
       var stop = function (element) {
         priv.updateElementCoordinate(that.getNodeId(element.target.id));
       };
+
       jsPlumb.draggable(jsPlumb.getSelector(".window"), {
         grid: [10, 10],
         stop: stop
       });
+
+      jsPlumb.makeSource(jsPlumb.getSelector(".window"), {
+        filter: ".ep",
+        anchor: "Continuous",
+        connector: ["StateMachine", {
+          curviness: 20
+        }],
+        connectorStyle: {
+          strokeStyle: "#5c96bc",
+          lineWidth: 2,
+          outlineColor: "transparent",
+          outlineWidth: 4
+        },
+      });
+
+      jsPlumb.makeTarget(jsPlumb.getSelector(".window"), {
+        dropOptions: {
+          hoverClass: "dragHover"
+        },
+        anchor: "Continuous"
+      });
+
     };
     priv.addElementToContainer = function (element) {
       // Now update the container of elements
@@ -419,7 +416,7 @@
         coordinate = priv.updateElementCoordinate(element.id, coordinate);
       }
       render_element.append('<div class="window ' + element._class.replace('.', '-') + '" id="' +
-        element.element_id + '">' + (element.name || element.id) + '</div>');
+        element.element_id + '">' + (element.name || element.id) + '<div class="ep"></div></div>');
       box = $("#" + element.element_id);
       var absolute_position = priv.convertToAbsolutePosition(
         coordinate.left, coordinate.top);
@@ -447,11 +444,6 @@
         scope: "blue rectangle",
         isTarget: true
       };
-      for (var key in option.anchor) {
-        jsPlumb.addEndpoint(element.element_id, {
-          anchor: key
-        }, endpoint);
-      }
       priv.onDataChange();
     };