Add onPan and onZoom to the PanZoom interaction

palantir · Jul 14, 2016 · 660f3d4 · 660f3d4
1 parent 5672976
commit 660f3d4
Show file tree

Hide file tree

Showing 5 changed files with 378 additions and 0 deletions.
diff --git a/plottable-npm.d.ts b/plottable-npm.d.ts
@@ -4577,6 +4577,8 @@ declare namespace Plottable.Interactions {
     }
 }
 declare namespace Plottable.Interactions {
+    type PanCallback = (e: Event) => void;
+    type ZoomCallback = (e: Event) => void;
     class PanZoom extends Interaction {
         /**
          * The number of pixels occupied in a line.
@@ -4595,6 +4597,8 @@ declare namespace Plottable.Interactions {
         private _touchCancelCallback;
         private _minDomainExtents;
         private _maxDomainExtents;
+        private _panCallbacks;
+        private _zoomCallbacks;
         /**
          * A PanZoom Interaction updates the domains of an x-scale and/or a y-scale
          * in response to the user panning or zooming.
@@ -4707,6 +4711,34 @@ declare namespace Plottable.Interactions {
          * @returns {Interactions.PanZoom} The calling PanZoom Interaction.
          */
         maxDomainExtent<D>(quantitativeScale: QuantitativeScale<D>, maxDomainExtent: D): this;
+        /**
+         * Adds a callback to be called when panning ends.
+         *
+         * @param {PanCallback} callback
+         * @returns {Event} The calling PanZoom Interaction.
+         */
+        onPan(callback: PanCallback): this;
+        /**
+         * Removes a callback that would be called when panning ends.
+         *
+         * @param {PanCallback} callback
+         * @returns {Event} The calling PanZoom Interaction.
+         */
+        offPan(callback: PanCallback): this;
+        /**
+         * Adds a callback to be called when zooming ends.
+         *
+         * @param {ZoomCallback} callback
+         * @returns {Event} The calling PanZoom Interaction.
+         */
+        onZoom(callback: ZoomCallback): this;
+        /**
+         * Removes a callback that would be called when zooming ends.
+         *
+         * @param {ZoomCallback} callback
+         * @returns {Event} The calling PanZoom Interaction.
+         */
+        offZoom(callback: ZoomCallback): this;
     }
 }
 declare namespace Plottable {

diff --git a/plottable.d.ts b/plottable.d.ts
@@ -4576,6 +4576,8 @@ declare namespace Plottable.Interactions {
     }
 }
 declare namespace Plottable.Interactions {
+    type PanCallback = (e: Event) => void;
+    type ZoomCallback = (e: Event) => void;
     class PanZoom extends Interaction {
         /**
          * The number of pixels occupied in a line.
@@ -4594,6 +4596,8 @@ declare namespace Plottable.Interactions {
         private _touchCancelCallback;
         private _minDomainExtents;
         private _maxDomainExtents;
+        private _panCallbacks;
+        private _zoomCallbacks;
         /**
          * A PanZoom Interaction updates the domains of an x-scale and/or a y-scale
          * in response to the user panning or zooming.
@@ -4706,6 +4710,34 @@ declare namespace Plottable.Interactions {
          * @returns {Interactions.PanZoom} The calling PanZoom Interaction.
          */
         maxDomainExtent<D>(quantitativeScale: QuantitativeScale<D>, maxDomainExtent: D): this;
+        /**
+         * Adds a callback to be called when panning ends.
+         *
+         * @param {PanCallback} callback
+         * @returns {Event} The calling PanZoom Interaction.
+         */
+        onPan(callback: PanCallback): this;
+        /**
+         * Removes a callback that would be called when panning ends.
+         *
+         * @param {PanCallback} callback
+         * @returns {Event} The calling PanZoom Interaction.
+         */
+        offPan(callback: PanCallback): this;
+        /**
+         * Adds a callback to be called when zooming ends.
+         *
+         * @param {ZoomCallback} callback
+         * @returns {Event} The calling PanZoom Interaction.
+         */
+        onZoom(callback: ZoomCallback): this;
+        /**
+         * Removes a callback that would be called when zooming ends.
+         *
+         * @param {ZoomCallback} callback
+         * @returns {Event} The calling PanZoom Interaction.
+         */
+        offZoom(callback: ZoomCallback): this;
     }
 }
 declare namespace Plottable {

diff --git a/plottable.js b/plottable.js
@@ -11222,6 +11222,8 @@ var Plottable;
                 this._touchMoveCallback = function (ids, idToPoint, e) { return _this._handlePinch(ids, idToPoint, e); };
                 this._touchEndCallback = function (ids, idToPoint, e) { return _this._handleTouchEnd(ids, idToPoint, e); };
                 this._touchCancelCallback = function (ids, idToPoint, e) { return _this._handleTouchEnd(ids, idToPoint, e); };
+                this._panCallbacks = new Plottable.Utils.CallbackSet();
+                this._zoomCallbacks = new Plottable.Utils.CallbackSet();
                 this._xScales = new Plottable.Utils.Set();
                 this._yScales = new Plottable.Utils.Set();
                 this._dragInteraction = new Interactions.Drag();
@@ -11335,6 +11337,9 @@ var Plottable;
                 ids.forEach(function (id) {
                     _this._touchIds.remove(id.toString());
                 });
+                if (this._touchIds.size() > 0) {
+                    this._zoomCallbacks.callCallbacks(e);
+                }
             };
             PanZoom.prototype._magnifyScale = function (scale, magnifyAmount, centerValue) {
                 var magnifyTransform = function (rangeValue) { return scale.invert(centerValue - (centerValue - rangeValue) * magnifyAmount); };
@@ -11363,6 +11368,7 @@ var Plottable;
                     this.yScales().forEach(function (yScale) {
                         _this._magnifyScale(yScale, zoomAmount_1, translatedP.y);
                     });
+                    this._zoomCallbacks.callCallbacks(e);
                 }
             };
             PanZoom.prototype._constrainedZoomAmount = function (scale, zoomAmount) {
@@ -11395,6 +11401,7 @@ var Plottable;
                     });
                     lastDragPoint = endPoint;
                 });
+                this._dragInteraction.onDragEnd(function (e) { return _this._panCallbacks.callCallbacks(e); });
             };
             PanZoom.prototype._nonLinearScaleWithExtents = function (scale) {
                 return this.minDomainExtent(scale) != null && this.maxDomainExtent(scale) != null &&
@@ -11508,6 +11515,46 @@ var Plottable;
                 this._maxDomainExtents.set(quantitativeScale, maxDomainExtent);
                 return this;
             };
+            /**
+             * Adds a callback to be called when panning ends.
+             *
+             * @param {PanCallback} callback
+             * @returns {Event} The calling PanZoom Interaction.
+             */
+            PanZoom.prototype.onPan = function (callback) {
+                this._panCallbacks.add(callback);
+                return this;
+            };
+            /**
+             * Removes a callback that would be called when panning ends.
+             *
+             * @param {PanCallback} callback
+             * @returns {Event} The calling PanZoom Interaction.
+             */
+            PanZoom.prototype.offPan = function (callback) {
+                this._panCallbacks.delete(callback);
+                return this;
+            };
+            /**
+             * Adds a callback to be called when zooming ends.
+             *
+             * @param {ZoomCallback} callback
+             * @returns {Event} The calling PanZoom Interaction.
+             */
+            PanZoom.prototype.onZoom = function (callback) {
+                this._zoomCallbacks.add(callback);
+                return this;
+            };
+            /**
+             * Removes a callback that would be called when zooming ends.
+             *
+             * @param {ZoomCallback} callback
+             * @returns {Event} The calling PanZoom Interaction.
+             */
+            PanZoom.prototype.offZoom = function (callback) {
+                this._zoomCallbacks.delete(callback);
+                return this;
+            };
             /**
              * The number of pixels occupied in a line.
              */

diff --git a/src/interactions/panZoomInteraction.ts b/src/interactions/panZoomInteraction.ts
@@ -1,4 +1,8 @@
 namespace Plottable.Interactions {
+
+  export type PanCallback = (e: Event) => void;
+  export type ZoomCallback = (e: Event) => void;
+
   export class PanZoom extends Interaction {
     /**
      * The number of pixels occupied in a line.
@@ -22,6 +26,9 @@ namespace Plottable.Interactions {
     private _minDomainExtents: Utils.Map<QuantitativeScale<any>, any>;
     private _maxDomainExtents: Utils.Map<QuantitativeScale<any>, any>;
 
+    private _panCallbacks = new Utils.CallbackSet<PanCallback>();
+    private _zoomCallbacks = new Utils.CallbackSet<ZoomCallback>();
+
     /**
      * A PanZoom Interaction updates the domains of an x-scale and/or a y-scale
      * in response to the user panning or zooming.
@@ -171,6 +178,10 @@ namespace Plottable.Interactions {
       ids.forEach((id) => {
         this._touchIds.remove(id.toString());
       });
+
+      if (this._touchIds.size() > 0) {
+        this._zoomCallbacks.callCallbacks(e);
+      }
     }
 
     private _magnifyScale<D>(scale: QuantitativeScale<D>, magnifyAmount: number, centerValue: number) {
@@ -205,6 +216,7 @@ namespace Plottable.Interactions {
         this.yScales().forEach((yScale) => {
           this._magnifyScale(yScale, zoomAmount, translatedP.y);
         });
+        this._zoomCallbacks.callCallbacks(e);
       }
     }
 
@@ -242,6 +254,7 @@ namespace Plottable.Interactions {
         });
         lastDragPoint = endPoint;
       });
+      this._dragInteraction.onDragEnd((e) => this._panCallbacks.callCallbacks(e));
     }
 
     private _nonLinearScaleWithExtents(scale: QuantitativeScale<any>) {
@@ -424,5 +437,49 @@ namespace Plottable.Interactions {
       this._maxDomainExtents.set(quantitativeScale, maxDomainExtent);
       return this;
     }
+
+    /**
+     * Adds a callback to be called when panning ends.
+     *
+     * @param {PanCallback} callback
+     * @returns {Event} The calling PanZoom Interaction.
+     */
+    public onPan(callback: PanCallback) {
+      this._panCallbacks.add(callback);
+      return this;
+    }
+
+    /**
+     * Removes a callback that would be called when panning ends.
+     *
+     * @param {PanCallback} callback
+     * @returns {Event} The calling PanZoom Interaction.
+     */
+    public offPan(callback: PanCallback) {
+      this._panCallbacks.delete(callback);
+      return this;
+    }
+
+    /**
+     * Adds a callback to be called when zooming ends.
+     *
+     * @param {ZoomCallback} callback
+     * @returns {Event} The calling PanZoom Interaction.
+     */
+    public onZoom(callback: ZoomCallback) {
+      this._zoomCallbacks.add(callback);
+      return this;
+    }
+
+    /**
+     * Removes a callback that would be called when zooming ends.
+     *
+     * @param {ZoomCallback} callback
+     * @returns {Event} The calling PanZoom Interaction.
+     */
+    public offZoom(callback: ZoomCallback) {
+      this._zoomCallbacks.delete(callback);
+      return this;
+    }
   }
 }