diff --git a/src/coordinate-grid-chart.js b/src/coordinate-grid-chart.js index 3acc0221c..c6ba58704 100644 --- a/src/coordinate-grid-chart.js +++ b/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); } } diff --git a/test/coordinate-grid-chart-test.js b/test/coordinate-grid-chart-test.js index fd1ae0cc5..9fc38b827 100644 --- a/test/coordinate-grid-chart-test.js +++ b/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);