yellow team mailing list archive

[Matthew Scott <matthew.scott@xxxxxxxxxxxxx>]

Matthew Scott has proposed merging lp:~makyo/juju-gui/add-rel-improvements into lp:juju-gui.

Requested reviews:
  Juju GUI Hackers (juju-gui)

For more details, see:
https://code.launchpad.net/~makyo/juju-gui/add-rel-improvements/+merge/131542

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
Your team Juju GUI Hackers is requested to review the proposed merge of lp:~makyo/juju-gui/add-rel-improvements into lp:juju-gui.

=== 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:56:22 +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);

=== 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:56:22 +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);