Fade lasso in and out

js/id/ui/lasso.js

@@ -8,21 +8,18 @@ iD.ui.lasso = function() {
     function lasso(selection) {
 
         group = selection.append('g')
-            .attr('class', 'lasso')
-            .attr('opacity', 0);
+            .attr('class', 'lasso hide');
 
         box = group.append('rect')
             .attr('class', 'lasso-box');
 
-        group.transition()
-            .style('opacity', 1);
+        group.call(iD.ui.toggle(true));
 
     }
 
     // top-left
     function topLeft(d) {
-        return 'translate(' +
-            [Math.min(d[0][0], d[1][0]), Math.min(d[0][1], d[1][1])].join(',') + ')';
+        return 'translate(' + Math.min(d[0][0], d[1][0]) + ',' + Math.min(d[0][1], d[1][1]) + ')';
     }
 
     function width(d) { return Math.abs(d[0][0] - d[1][0]); }
@@ -53,9 +50,9 @@ iD.ui.lasso = function() {
 
     lasso.close = function(selection) {
         if (group) {
-            group.transition()
-                .attr('opacity', 0)
-                .remove();
+            group.call(iD.ui.toggle(false, function() {
+                d3.select(this).remove();
+            }));
         }
     };
 

js/id/ui/toggle.js

@@ -2,7 +2,7 @@
 // hide class, which sets display=none, and a d3 transition for opacity.
 // this will cause blinking when called repeatedly, so check that the
 // value actually changes between calls.
-iD.ui.toggle = function(show) {
+iD.ui.toggle = function(show, callback) {
     return function(selection) {
         selection.style('opacity', show ? 0 : 1)
             .classed('hide', false)
@@ -10,6 +10,7 @@ iD.ui.toggle = function(show) {
             .style('opacity', show ? 1 : 0)
             .each('end', function() {
                 d3.select(this).classed('hide', !show);
+                if (callback) callback.apply(this);
             });
     };
 };