Reviewers: mp+131542_code.launchpad.net,

Message:
Please take a look.

Description:
Add-relation improvements

UX improvements per Jovan: draglines should start with the long-click as
an indicator that the user will be dragging a line; draglines should be
on top of all services/lines, as they are currently the most important
thing the user is working with; and draglines should be used when adding
a relation from the service menu as well, showing that a relation will
be created.

https://code.launchpad.net/~makyo/juju-gui/add-rel-improvements/+merge/131542

(do not edit description out of merge proposal)


Please review this at https://codereview.appspot.com/6786050/

Affected files:
   A [revision details]
   M app/views/environment.js
   M test/test_environment_view.js


Index: [revision details]
=== added file '[revision details]'
--- [revision details]	2012-01-01 00:00:00 +0000
+++ [revision details]	2012-01-01 00:00:00 +0000
@@ -0,0 +1,2 @@
+Old revision: <email address hidden>
+New revision: <email address hidden>

Index: test/test_environment_view.js
=== modified file 'test/test_environment_view.js'
--- test/test_environment_view.js	2012-10-20 18:16:19 +0000
+++ test/test_environment_view.js	2012-10-26 07:54:00 +0000
@@ -339,6 +339,9 @@
           container.all('.selectable-service')
                 .size()
                 .should.equal(2);
+         container.all('.dragline')
+               .size()
+               .should.equal(1);
           service.next().simulate('click');
           container.all('.selectable-service').size()
              .should.equal(0);


Index: app/views/environment.js
=== modified file 'app/views/environment.js'
--- app/views/environment.js	2012-10-26 06:35:16 +0000
+++ app/views/environment.js	2012-10-26 07:48:26 +0000
@@ -33,6 +33,8 @@
                var box = this.get('active_service'),
                    service = this.serviceForBox(box),
                    context = this.get('active_context');
+              this.addRelationDragStart.call(this, box, context);
+              this.clickAddRelation = true;
                this.service_click_actions
                          .toggleControlPanel(box, this, context);
                this.service_click_actions
@@ -81,6 +83,12 @@
                if (!d.containsPoint(mouse_coords, self.zoom)) {
                  return;
                }
+
+              // Do not fire if we're on the same service.
+              if (d === self.get('addRelationStart_service')) {
+                return;
+              }
+
                self.set('potential_drop_point_service', d);
                self.set('potential_drop_point_rect', rect);
                self.addSVGClass(rect, 'hover');
@@ -162,6 +170,17 @@
                 
container.all('.environment-menu.active').removeClass('active');
                self.service_click_actions.toggleControlPanel(null, self);
                self.cancelRelationBuild();
+            },
+            mousemove: function(d, self) {
+              // If we're clicking to add a relation, make sure a dragline
+              // follows the mouse cursor.
+              if (self.clickAddRelation) {
+                var mouse = d3.mouse(this);
+                d3.event.x = mouse[0];
+                d3.event.y = mouse[1];
+                self.addRelationDrag
+                  .call(self, self.get('addRelationStart_service'), this);
+              }
              }
            }
          },
@@ -1031,22 +1050,25 @@

          addRelationDragStart: function(d, context) {
            // Create a pending drag-line behind services.
-          var dragline = this.vis.insert('line', '.service')
+          var dragline = this.vis.append('line')
                .attr('class', 'relation pending-relation dragline  
dragging'),
                self = this;

-          // Start the line in the middle of the service.
-          var point = d.getCenter();
-          dragline.attr('x1', point[0])
-              .attr('y1', point[1])
-              .attr('x2', point[0])
-              .attr('y2', point[1]);
+          // Start the line between the cursor and the nearest connector
+          // point on the service.
+          var mouse = d3.mouse(Y.one('svg').getDOMNode());
+          self.cursorBox = views.BoundingBox();
+          self.cursorBox.pos = {x: mouse[0], y: mouse[1], w: 0, h: 0};
+          var point = self.cursorBox.getConnectorPair(d);
+          dragline.attr('x1', point[0][0])
+              .attr('y1', point[0][1])
+              .attr('x2', point[1][0])
+              .attr('y2', point[1][1]);
            self.dragline = dragline;
-          self.cursorBox = views.BoundingBox();

            // Start the add-relation process.
            self.service_click_actions
-          .addRelationStart(d, self, context);
+            .addRelationStart(d, self, context);
          },

          addRelationDrag: function(d, context) {
@@ -1143,6 +1165,7 @@
              this.dragline.remove();
              this.dragline = null;
            }
+          this.clickAddRelation = null;
            this.set('currentServiceClickAction', 'toggleControlPanel');
            this.show(this.vis.selectAll('.service'))
                    .classed('selectable-service', false);