disabled zoom during brushing

src/coordinate-grid-chart.js

@@ -49,6 +49,15 @@ dc.coordinateGridChart = function (_chart) {
 
     var _zoomScale = [-10, 100];  // -10 to allow zoom out of the original domain
     var _zoomOutRestrict = true; // restrict zoomOut to the original domain?
+    var _zoomed = function () {
+        dc.events.trigger(function () {
+            _chart.focus(_chart.x().domain());
+            _chart._invokeZoomedListener();
+            updateRangeSelChart();
+        });
+    };
+    var _zoom = d3.behavior.zoom().on("zoom", _zoomed);
+    var _nullZoom = d3.behavior.zoom().on("zoom", null);
 
     var _rangeChart;
     var _focusChart;
@@ -648,6 +657,8 @@ dc.coordinateGridChart = function (_chart) {
 
         if (_brushOn) {
             _brush.on("brush", _chart._brushing);
+            _brush.on("brushstart", function () { _chart.root().call(_nullZoom); });
+            _brush.on("brushend", configureMouseZoom);
 
             var gBrush = g.append("g")
                 .attr("class", "brush")
@@ -778,21 +789,18 @@ dc.coordinateGridChart = function (_chart) {
 
         _chart.renderBrush(_chart.g());
 
-        enableMouseZoom();
+        configureMouseZoom();
 
         return _chart;
     };
 
-    function enableMouseZoom() {
+    function configureMouseZoom () {
         if (_mouseZoomable) {
-            _chart.root().call(d3.behavior.zoom()
-                .x(_chart.x())
-                .scaleExtent(_zoomScale)
-                .on("zoom", function () {
-                    _chart.focus(_chart.x().domain());
-                    _chart._invokeZoomedListener();
-                    updateRangeSelChart();
-                }));
+            _zoom.x(_chart.x()).scaleExtent(_zoomScale);
+            _chart.root().call(_zoom);
+        }
+        else {
+            _chart.root().call(_nullZoom);
         }
     }
 

test/coordinate-grid-chart-test.js

@@ -40,6 +40,82 @@ suite.addBatch({
     }
 });
 
-suite.export(module);
+suite.addBatch({
+    'mouse zooming': {
+        topic: function () {
+            d3.select("body").append("div").attr("id", "ele");
+            var chart = dc.coordinateGridChart({})
+                .anchor("#ele")
+                .dimension(valueDimension)
+                .group(valueGroup)
+                .x(d3.scale.linear().domain([0,1]));
+            // Define plotData to allow rendering
+            chart.plotData = function () {};
+            sinon.spy(chart.root(), "call");
+            return chart;
+        },
+        'when zoom is enabled': {
+            'a zoom behavior that does something should be applied on render': function (chart) {
+                chart.mouseZoomable(true);
+                chart.render();
+                var zooms = chart.root().call.args.filter(function (a) { return a[0].name === "zoom"; });
+                assert.equal(zooms.length, 1);
+                assert.typeOf(zooms[0][0].on('zoom'), 'function');
+            },
 
+            'zooming should be disabled during brushing and enabled afterwards': function (chart) {
+                chart.mouseZoomable(true);
+                chart.render();
+                chart.root().call.reset();
+                chart.brush().event(chart.root());
+                var zooms = chart.root().call.args.filter(function (a) { return a[0].name === "zoom"; });
+                var firstZoom = zooms[0][0];
+                var lastZoom = zooms[zooms.length-1][0];
+                assert.equal(firstZoom.on('zoom'), undefined);
+                assert.typeOf(lastZoom.on('zoom'), 'function');
+            }
+        },
 
+        'when zoom is disabled': {
+            topic: function () {
+                d3.select("body").append("div").attr("id", "ele");
+                var chart = dc.coordinateGridChart({})
+                    .anchor("#ele")
+                    .dimension(valueDimension)
+                    .group(valueGroup)
+                    .x(d3.scale.linear().domain([0,1]));
+                // Define plotData to allow rendering
+                chart.plotData = function () {};
+                chart.mouseZoomable(false);
+                sinon.spy(chart.root(), "call");
+                chart.render();
+                return chart;
+            },
+
+            'a do-nothing null zoom behavior should be applied on render': function (chart) {
+                var callArgs = chart.root().call.args;
+                var zooms = chart.root().call.args.filter(function (a) { return a[0].name === "zoom"; });
+                assert.equal(zooms.length, 1);
+                assert.equal(zooms[0][0].on('zoom'), undefined);
+            },
+
+            'zooming should be disabled both during brushing and afterwards': function (chart) {
+                chart.root().call.reset();
+                chart.brush().event(chart.root());
+                var zooms = chart.root().call.args.filter(function (a) { return a[0].name === "zoom"; });
+                var firstZoom = zooms[0];
+                var lastZoom = zooms[zooms.length-1];
+                assert.equal(firstZoom[0].on('zoom'), undefined);
+                assert.equal(lastZoom[0].on('zoom'), undefined);
+            }
+        },
+    },
+
+    teardown: function (topic) {
+        resetAllFilters();
+        resetBody();
+        dc.chartRegistry.clear();
+    }
+});
+
+suite.export(module);