diff --git a/quicktests/selection-quicktest.html b/quicktests/selection-quicktest.html index a32845393c..92193d38bd 100644 --- a/quicktests/selection-quicktest.html +++ b/quicktests/selection-quicktest.html @@ -31,7 +31,7 @@ .center(renderGroup) .renderTo("#xy-test"); cb = function(xy) {console.log("XY drag area: ", xy);} - new Plottable.XYDragBoxInteraction(renderGroup).callback(cb).registerWithComponent(); + window.xy = new Plottable.XYDragBoxInteraction(renderGroup).callback(cb).registerWithComponent(); } function xdrag() { var dataseries = makeRandomData(20, 0.3); @@ -65,7 +65,7 @@ .renderTo("#x-test"); cb = function(x) {console.log("X drag area: ", x);} - new Plottable.XDragBoxInteraction(renderGroup).callback(cb).registerWithComponent(); + window.x = new Plottable.XDragBoxInteraction(renderGroup).callback(cb).registerWithComponent(); } diff --git a/src/interactions/drag/dragBoxInteraction.ts b/src/interactions/drag/dragBoxInteraction.ts index 3b4430a858..13dfc1eb12 100644 --- a/src/interactions/drag/dragBoxInteraction.ts +++ b/src/interactions/drag/dragBoxInteraction.ts @@ -4,9 +4,13 @@ module Plottable { export class DragBoxInteraction extends DragInteraction { private static CLASS_DRAG_BOX = "drag-box"; public dragBox: D3.Selection; + public boxIsDrawn = false; public _dragstart() { super._dragstart(); + if (this.callbackToCall != null && this.boxIsDrawn) { + this.callbackToCall(null); + } this.clearBox(); } @@ -17,6 +21,17 @@ module Plottable { */ public clearBox() { this.dragBox.attr("height", 0).attr("width", 0); + this.boxIsDrawn = false; + return this; + } + + public setBox(x0: number, x1: number, y0: number, y1: number) { + var w = Math.abs(x0 - x1); + var h = Math.abs(y0 - y1); + var xo = Math.min(x0, x1); + var yo = Math.min(y0, y1); + this.dragBox.attr({x: xo, y: yo, width: w, height: h}); + this.boxIsDrawn = (w > 0 && h > 0); return this; } diff --git a/src/interactions/drag/xDragBoxInteraction.ts b/src/interactions/drag/xDragBoxInteraction.ts index 91c6618b0e..9e40cd3158 100644 --- a/src/interactions/drag/xDragBoxInteraction.ts +++ b/src/interactions/drag/xDragBoxInteraction.ts @@ -4,11 +4,7 @@ module Plottable { export class XDragBoxInteraction extends DragBoxInteraction { public _drag(){ super._drag(); - var width = Math.abs(this.origin[0] - this.location[0]); - var height = this.componentToListenTo.availableHeight; - var x = Math.min(this.origin[0] , this.location[0]); - var y = 0 - this.dragBox.attr({x: x, y: y, height: height, width: width}); + this.setBox(this.origin[0], this.location[0]); } public _doDragend(){ @@ -20,5 +16,10 @@ module Plottable { var pixelArea = {xMin: xMin, xMax: xMax}; this.callbackToCall(pixelArea); } + + public setBox(x0: number, x1: number) { + super.setBox(x0, x1, 0, this.componentToListenTo.availableHeight); + return this; + } } } diff --git a/src/interactions/drag/xyDragBoxInteraction.ts b/src/interactions/drag/xyDragBoxInteraction.ts index f39b1d9381..14b1be4d18 100644 --- a/src/interactions/drag/xyDragBoxInteraction.ts +++ b/src/interactions/drag/xyDragBoxInteraction.ts @@ -4,18 +4,13 @@ module Plottable { export class XYDragBoxInteraction extends DragBoxInteraction { public _drag(){ super._drag(); - var width = Math.abs(this.origin[0] - this.location[0]); - var height = Math.abs(this.origin[1] - this.location[1]); - var x = Math.min(this.origin[0] , this.location[0]); - var y = Math.min(this.origin[1] , this.location[1]); - this.dragBox.attr({x: x, y: y, height: height, width: width}); + this.setBox(this.origin[0], this.location[0], this.origin[1], this.location[1]); } public _doDragend(){ if (this.callbackToCall == null) { return; } - var xMin = Math.min(this.origin[0], this.location[0]); var xMax = Math.max(this.origin[0], this.location[0]); var yMin = Math.min(this.origin[1], this.location[1]);