Add onPan and onZoom to the PanZoom interaction

plottable-npm.d.ts

@@ -4577,6 +4577,8 @@ declare namespace Plottable.Interactions {
     }
 }
 declare namespace Plottable.Interactions {
+    type PanCallback = () => void;
+    type ZoomCallback = () => 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 _panEndCallbacks;
+        private _zoomEndCallbacks;
         /**
          * 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 {this} The calling PanZoom Interaction.
+         */
+        onPanEnd(callback: PanCallback): this;
+        /**
+         * Removes a callback that would be called when panning ends.
+         *
+         * @param {PanCallback} callback
+         * @returns {this} The calling PanZoom Interaction.
+         */
+        offPanEnd(callback: PanCallback): this;
+        /**
+         * Adds a callback to be called when zooming ends.
+         *
+         * @param {ZoomCallback} callback
+         * @returns {this} The calling PanZoom Interaction.
+         */
+        onZoomEnd(callback: ZoomCallback): this;
+        /**
+         * Removes a callback that would be called when zooming ends.
+         *
+         * @param {ZoomCallback} callback
+         * @returns {this} The calling PanZoom Interaction.
+         */
+        offZoomEnd(callback: ZoomCallback): this;
     }
 }
 declare namespace Plottable {

plottable.d.ts

@@ -4576,6 +4576,8 @@ declare namespace Plottable.Interactions {
     }
 }
 declare namespace Plottable.Interactions {
+    type PanCallback = () => void;
+    type ZoomCallback = () => 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 _panEndCallbacks;
+        private _zoomEndCallbacks;
         /**
          * 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 {this} The calling PanZoom Interaction.
+         */
+        onPanEnd(callback: PanCallback): this;
+        /**
+         * Removes a callback that would be called when panning ends.
+         *
+         * @param {PanCallback} callback
+         * @returns {this} The calling PanZoom Interaction.
+         */
+        offPanEnd(callback: PanCallback): this;
+        /**
+         * Adds a callback to be called when zooming ends.
+         *
+         * @param {ZoomCallback} callback
+         * @returns {this} The calling PanZoom Interaction.
+         */
+        onZoomEnd(callback: ZoomCallback): this;
+        /**
+         * Removes a callback that would be called when zooming ends.
+         *
+         * @param {ZoomCallback} callback
+         * @returns {this} The calling PanZoom Interaction.
+         */
+        offZoomEnd(callback: ZoomCallback): this;
     }
 }
 declare namespace Plottable {

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._panEndCallbacks = new Plottable.Utils.CallbackSet();
+                this._zoomEndCallbacks = 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._zoomEndCallbacks.callCallbacks();
+                }
             };
             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._zoomEndCallbacks.callCallbacks();
                 }
             };
             PanZoom.prototype._constrainedZoomAmount = function (scale, zoomAmount) {
@@ -11395,6 +11401,7 @@ var Plottable;
                     });
                     lastDragPoint = endPoint;
                 });
+                this._dragInteraction.onDragEnd(function () { return _this._panEndCallbacks.callCallbacks(); });
             };
             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 {this} The calling PanZoom Interaction.
+             */
+            PanZoom.prototype.onPanEnd = function (callback) {
+                this._panEndCallbacks.add(callback);
+                return this;
+            };
+            /**
+             * Removes a callback that would be called when panning ends.
+             *
+             * @param {PanCallback} callback
+             * @returns {this} The calling PanZoom Interaction.
+             */
+            PanZoom.prototype.offPanEnd = function (callback) {
+                this._panEndCallbacks.delete(callback);
+                return this;
+            };
+            /**
+             * Adds a callback to be called when zooming ends.
+             *
+             * @param {ZoomCallback} callback
+             * @returns {this} The calling PanZoom Interaction.
+             */
+            PanZoom.prototype.onZoomEnd = function (callback) {
+                this._zoomEndCallbacks.add(callback);
+                return this;
+            };
+            /**
+             * Removes a callback that would be called when zooming ends.
+             *
+             * @param {ZoomCallback} callback
+             * @returns {this} The calling PanZoom Interaction.
+             */
+            PanZoom.prototype.offZoomEnd = function (callback) {
+                this._zoomEndCallbacks.delete(callback);
+                return this;
+            };
             /**
              * The number of pixels occupied in a line.
              */

src/interactions/panZoomInteraction.ts

@@ -1,4 +1,8 @@
 namespace Plottable.Interactions {
+
+  export type PanCallback = () => void;
+  export type ZoomCallback = () => 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 _panEndCallbacks = new Utils.CallbackSet<PanCallback>();
+    private _zoomEndCallbacks = 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._zoomEndCallbacks.callCallbacks();
+      }
     }
 
     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._zoomEndCallbacks.callCallbacks();
       }
     }
 
@@ -242,6 +254,7 @@ namespace Plottable.Interactions {
         });
         lastDragPoint = endPoint;
       });
+      this._dragInteraction.onDragEnd(() => this._panEndCallbacks.callCallbacks());
     }
 
     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 {this} The calling PanZoom Interaction.
+     */
+    public onPanEnd(callback: PanCallback) {
+      this._panEndCallbacks.add(callback);
+      return this;
+    }
+
+    /**
+     * Removes a callback that would be called when panning ends.
+     *
+     * @param {PanCallback} callback
+     * @returns {this} The calling PanZoom Interaction.
+     */
+    public offPanEnd(callback: PanCallback) {
+      this._panEndCallbacks.delete(callback);
+      return this;
+    }
+
+    /**
+     * Adds a callback to be called when zooming ends.
+     *
+     * @param {ZoomCallback} callback
+     * @returns {this} The calling PanZoom Interaction.
+     */
+    public onZoomEnd(callback: ZoomCallback) {
+      this._zoomEndCallbacks.add(callback);
+      return this;
+    }
+
+    /**
+     * Removes a callback that would be called when zooming ends.
+     *
+     * @param {ZoomCallback} callback
+     * @returns {this} The calling PanZoom Interaction.
+     */
+    public offZoomEnd(callback: ZoomCallback) {
+      this._zoomEndCallbacks.delete(callback);
+      return this;
+    }
   }
 }