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 protected] +New revision: [email protected] 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); -- 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. -- Mailing list: https://launchpad.net/~yellow Post to : [email protected] Unsubscribe : https://launchpad.net/~yellow More help : https://help.launchpad.net/ListHelp
