Merge pull request #362 from palantir/refactor-drag-interaction

Refactor drag interaction
palantir · Apr 29, 2014 · 630e691 · 630e691
2 parents a36043d + b725c3c
commit 630e691
Show file tree

Hide file tree

Showing 8 changed files with 252 additions and 110 deletions.
diff --git a/quicktests/quicktest-selection.html b/quicktests/quicktest-selection.html
@@ -0,0 +1,79 @@
+<html>
+  <head>
+    <title>Selection Quicktest</title>
+    <link rel="stylesheet" type="text/css" href="../../plottable.css">
+    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+    <script src="../../build/plottable.js"></script>
+    <script src="../../build/exampleUtil.js"></script>
+
+    <script>
+      window.onload = function() {
+
+        xdrag();
+        xydrag();
+      }
+
+      function xydrag() {
+        var dataseries = makeRandomData(20);
+
+        var xScale = new Plottable.LinearScale();
+        var xAxis = new Plottable.XAxis(xScale, "bottom");
+
+        var yScale = new Plottable.LinearScale();
+        var yAxis = new Plottable.YAxis(yScale, "left");
+
+        var renderAreaD1 = new Plottable.CircleRenderer(dataseries, xScale, yScale);
+        var gridlines = new Plottable.Gridlines(xScale, yScale);
+        var renderGroup = gridlines.merge(renderAreaD1);
+
+        new Plottable.StandardChart()
+                      .xAxis(xAxis).yAxis(yAxis)
+                      .center(renderGroup)
+                      .renderTo("#xy-test");
+        cb = function(xy) {console.log("XY drag area: ", xy);}
+        new Plottable.XYDragBoxInteraction(renderGroup).callback(cb).registerWithComponent();
+      }
+      function xdrag() {
+        var dataseries = makeRandomData(20, 0.3);
+        var dataseries_top = makeRandomData(20, 0.3);
+        for (var i = 0; i < 20; ++i) {
+          dataseries_top[i].x = dataseries[i].x;
+          dataseries_top[i].y += dataseries[i].y;
+        }
+
+        var xScale = new Plottable.LinearScale();
+        var xAxis = new Plottable.XAxis(xScale, "bottom");
+
+        var yScale = new Plottable.LinearScale();
+        var yAxis = new Plottable.YAxis(yScale, "left");
+
+        var y0Accessor = function(d, i) { return dataseries[i].y; }
+
+        var renderAreaD1 = new Plottable.AreaRenderer(dataseries, xScale, yScale);
+        var renderAreaD2 = new Plottable.AreaRenderer(dataseries_top, xScale, yScale, "x", "y", y0Accessor);
+
+        var fillAccessor = function() { return "steelblue"; }
+        var fillAccessorTop = function() { return "pink"; }
+        renderAreaD1.project("fill", fillAccessor)
+        renderAreaD2.project("fill", fillAccessorTop)
+
+        var gridlines = new Plottable.Gridlines(xScale, yScale);
+        var renderGroup = new Plottable.ComponentGroup([gridlines, renderAreaD1, renderAreaD2]);
+
+        var chart = new Plottable.StandardChart()
+                        .center(renderGroup).xAxis(xAxis).yAxis(yAxis)
+                        .renderTo("#x-test");
+
+        cb = function(x) {console.log("X drag area: ", x);}
+        new Plottable.XDragBoxInteraction(renderGroup).callback(cb).registerWithComponent();
+      }
+
+
+    </script>
+  </head>
+  <body>
+    <svg id="xy-test" width="480" height="320"></svg>
+    <svg id="x-test" width="480" height="320"></svg>
+  </body>
+
+</html>
diff --git a/src/interactions/areaInteraction.ts b/src/interactions/areaInteraction.ts
diff --git a/src/interactions/drag/dragBoxInteraction.ts b/src/interactions/drag/dragBoxInteraction.ts
@@ -0,0 +1,31 @@
+///<reference path="../../reference.ts" />
+
+module Plottable {
+  export class DragBoxInteraction extends DragInteraction {
+    private static CLASS_DRAG_BOX = "drag-box";
+    public dragBox: D3.Selection;
+
+    public _dragstart() {
+      super._dragstart();
+      this.clearBox();
+    }
+
+    /**
+     * Clears the highlighted drag-selection box drawn by the AreaInteraction.
+     *
+     * @returns {AreaInteraction} The calling AreaInteraction.
+     */
+    public clearBox() {
+      this.dragBox.attr("height", 0).attr("width", 0);
+      return this;
+    }
+
+    public _anchor(hitBox: D3.Selection) {
+      super._anchor(hitBox);
+      var cname = DragBoxInteraction.CLASS_DRAG_BOX;
+      var background = this.componentToListenTo.backgroundContainer;
+      this.dragBox = background.append("rect").classed(cname, true).attr("x", 0).attr("y", 0);
+      return this;
+    }
+  }
+}
diff --git a/src/interactions/drag/dragInteraction.ts b/src/interactions/drag/dragInteraction.ts
@@ -0,0 +1,77 @@
+///<reference path="../../reference.ts" />
+
+module Plottable {
+  export class DragInteraction extends Interaction {
+    private dragInitialized = false;
+    private dragBehavior: D3.Behavior.Drag;
+    public origin = [0,0];
+    public location = [0,0];
+    private constrainX: (n: number) => number;
+    private constrainY: (n: number) => number;
+    public callbackToCall: (dragInfo: any) => any;
+
+    /**
+     * Creates a DragInteraction.
+     *
+     * @param {Component} componentToListenTo The component to listen for interactions on.
+     */
+    constructor(componentToListenTo: Component) {
+      super(componentToListenTo);
+      this.dragBehavior = d3.behavior.drag();
+      this.dragBehavior.on("dragstart", () => this._dragstart());
+      this.dragBehavior.on("drag",      () => this._drag     ());
+      this.dragBehavior.on("dragend",   () => this._dragend  ());
+    }
+
+    /**
+     * Adds a callback to be called when the AreaInteraction triggers.
+     *
+     * @param {(a: SelectionArea) => any} cb The function to be called. Takes in a SelectionArea in pixels.
+     * @returns {AreaInteraction} The calling AreaInteraction.
+     */
+    public callback(cb?: (a: any) => any) {
+      this.callbackToCall = cb;
+      return this;
+    }
+
+    public _dragstart(){
+      var availableWidth  = this.componentToListenTo.availableWidth;
+      var availableHeight = this.componentToListenTo.availableHeight;
+      // the constraint functions ensure that the selection rectangle will not exceed the hit box
+      var constraintFunction = (min: number, max: number) => (x: number) => Math.min(Math.max(x, min), max);
+      this.constrainX = constraintFunction(0, availableWidth);
+      this.constrainY = constraintFunction(0, availableHeight);
+    }
+
+    public _drag(){
+      if (!this.dragInitialized) {
+        this.origin = [d3.event.x, d3.event.y];
+        this.dragInitialized = true;
+      }
+
+      this.location = [this.constrainX(d3.event.x), this.constrainY(d3.event.y)];
+    }
+
+    public _dragend(){
+      if (!this.dragInitialized) {
+        return;
+      }
+      this.dragInitialized = false;
+      this._doDragend();
+    }
+
+    public _doDragend() {
+      // seperated out so it can be over-ridden by dragInteractions that want to pass out diff information
+      // eg just x values for an xSelectionInteraction
+      if (this.callbackToCall != null) {
+        this.callbackToCall([this.origin, this.location]);
+      }
+    }
+
+    public _anchor(hitBox: D3.Selection) {
+      super._anchor(hitBox);
+      hitBox.call(this.dragBehavior);
+      return this;
+    }
+  }
+}
diff --git a/src/interactions/drag/xDragBoxInteraction.ts b/src/interactions/drag/xDragBoxInteraction.ts
@@ -0,0 +1,24 @@
+///<reference path="../../reference.ts" />
+
+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});
+    }
+
+    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 pixelArea = {xMin: xMin, xMax: xMax};
+      this.callbackToCall(pixelArea);
+    }
+  }
+}
diff --git a/src/interactions/drag/xyDragBoxInteraction.ts b/src/interactions/drag/xyDragBoxInteraction.ts
@@ -0,0 +1,27 @@
+///<reference path="../../reference.ts" />
+
+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});
+    }
+
+    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]);
+      var yMax = Math.max(this.origin[1], this.location[1]);
+      var pixelArea = {xMin: xMin, xMax: xMax, yMin: yMin, yMax: yMax};
+      this.callbackToCall(pixelArea);
+    }
+  }
+}
diff --git a/src/reference.ts b/src/reference.ts
@@ -33,10 +33,13 @@
 
 /// <reference path="interactions/keyEventListener.ts" />
 /// <reference path="interactions/interaction.ts" />
-/// <reference path="interactions/areaInteraction.ts" />
 /// <reference path="interactions/clickInteraction.ts" />
 /// <reference path="interactions/mousemoveInteraction.ts" />
 /// <reference path="interactions/keyInteraction.ts" />
 /// <reference path="interactions/panZoomInteraction.ts" />
+/// <reference path="interactions/drag/dragInteraction.ts" />
+/// <reference path="interactions/drag/dragBoxInteraction.ts" />
+/// <reference path="interactions/drag/xDragBoxInteraction.ts" />
+/// <reference path="interactions/drag/xyDragBoxInteraction.ts" />
 
 /// <reference path="templates/standardChart.ts" />