Skip to content

Commit 660f3d4

Browse files
SamMorrowDrumsSamMorrowDrums
committed
Add onPan and onZoom to the PanZoom interaction
1 parent 5672976 commit 660f3d4

File tree

5 files changed

+378
-0
lines changed

5 files changed

+378
-0
lines changed

‎plottable-npm.d.ts‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4577,6 +4577,8 @@ declare namespace Plottable.Interactions {
45774577
}
45784578
}
45794579
declare namespace Plottable.Interactions {
4580+
type PanCallback = (e: Event) => void;
4581+
type ZoomCallback = (e: Event) => void;
45804582
class PanZoom extends Interaction {
45814583
/**
45824584
* The number of pixels occupied in a line.
@@ -4595,6 +4597,8 @@ declare namespace Plottable.Interactions {
45954597
private _touchCancelCallback;
45964598
private _minDomainExtents;
45974599
private _maxDomainExtents;
4600+
private _panCallbacks;
4601+
private _zoomCallbacks;
45984602
/**
45994603
* A PanZoom Interaction updates the domains of an x-scale and/or a y-scale
46004604
* in response to the user panning or zooming.
@@ -4707,6 +4711,34 @@ declare namespace Plottable.Interactions {
47074711
* @returns {Interactions.PanZoom} The calling PanZoom Interaction.
47084712
*/
47094713
maxDomainExtent<D>(quantitativeScale: QuantitativeScale<D>, maxDomainExtent: D): this;
4714+
/**
4715+
* Adds a callback to be called when panning ends.
4716+
*
4717+
* @param {PanCallback} callback
4718+
* @returns {Event} The calling PanZoom Interaction.
4719+
*/
4720+
onPan(callback: PanCallback): this;
4721+
/**
4722+
* Removes a callback that would be called when panning ends.
4723+
*
4724+
* @param {PanCallback} callback
4725+
* @returns {Event} The calling PanZoom Interaction.
4726+
*/
4727+
offPan(callback: PanCallback): this;
4728+
/**
4729+
* Adds a callback to be called when zooming ends.
4730+
*
4731+
* @param {ZoomCallback} callback
4732+
* @returns {Event} The calling PanZoom Interaction.
4733+
*/
4734+
onZoom(callback: ZoomCallback): this;
4735+
/**
4736+
* Removes a callback that would be called when zooming ends.
4737+
*
4738+
* @param {ZoomCallback} callback
4739+
* @returns {Event} The calling PanZoom Interaction.
4740+
*/
4741+
offZoom(callback: ZoomCallback): this;
47104742
}
47114743
}
47124744
declare namespace Plottable {

‎plottable.d.ts‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4576,6 +4576,8 @@ declare namespace Plottable.Interactions {
45764576
}
45774577
}
45784578
declare namespace Plottable.Interactions {
4579+
type PanCallback = (e: Event) => void;
4580+
type ZoomCallback = (e: Event) => void;
45794581
class PanZoom extends Interaction {
45804582
/**
45814583
* The number of pixels occupied in a line.
@@ -4594,6 +4596,8 @@ declare namespace Plottable.Interactions {
45944596
private _touchCancelCallback;
45954597
private _minDomainExtents;
45964598
private _maxDomainExtents;
4599+
private _panCallbacks;
4600+
private _zoomCallbacks;
45974601
/**
45984602
* A PanZoom Interaction updates the domains of an x-scale and/or a y-scale
45994603
* in response to the user panning or zooming.
@@ -4706,6 +4710,34 @@ declare namespace Plottable.Interactions {
47064710
* @returns {Interactions.PanZoom} The calling PanZoom Interaction.
47074711
*/
47084712
maxDomainExtent<D>(quantitativeScale: QuantitativeScale<D>, maxDomainExtent: D): this;
4713+
/**
4714+
* Adds a callback to be called when panning ends.
4715+
*
4716+
* @param {PanCallback} callback
4717+
* @returns {Event} The calling PanZoom Interaction.
4718+
*/
4719+
onPan(callback: PanCallback): this;
4720+
/**
4721+
* Removes a callback that would be called when panning ends.
4722+
*
4723+
* @param {PanCallback} callback
4724+
* @returns {Event} The calling PanZoom Interaction.
4725+
*/
4726+
offPan(callback: PanCallback): this;
4727+
/**
4728+
* Adds a callback to be called when zooming ends.
4729+
*
4730+
* @param {ZoomCallback} callback
4731+
* @returns {Event} The calling PanZoom Interaction.
4732+
*/
4733+
onZoom(callback: ZoomCallback): this;
4734+
/**
4735+
* Removes a callback that would be called when zooming ends.
4736+
*
4737+
* @param {ZoomCallback} callback
4738+
* @returns {Event} The calling PanZoom Interaction.
4739+
*/
4740+
offZoom(callback: ZoomCallback): this;
47094741
}
47104742
}
47114743
declare namespace Plottable {

‎plottable.js‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11222,6 +11222,8 @@ var Plottable;
1122211222
this._touchMoveCallback = function (ids, idToPoint, e) { return _this._handlePinch(ids, idToPoint, e); };
1122311223
this._touchEndCallback = function (ids, idToPoint, e) { return _this._handleTouchEnd(ids, idToPoint, e); };
1122411224
this._touchCancelCallback = function (ids, idToPoint, e) { return _this._handleTouchEnd(ids, idToPoint, e); };
11225+
this._panCallbacks = new Plottable.Utils.CallbackSet();
11226+
this._zoomCallbacks = new Plottable.Utils.CallbackSet();
1122511227
this._xScales = new Plottable.Utils.Set();
1122611228
this._yScales = new Plottable.Utils.Set();
1122711229
this._dragInteraction = new Interactions.Drag();
@@ -11335,6 +11337,9 @@ var Plottable;
1133511337
ids.forEach(function (id) {
1133611338
_this._touchIds.remove(id.toString());
1133711339
});
11340+
if (this._touchIds.size() > 0) {
11341+
this._zoomCallbacks.callCallbacks(e);
11342+
}
1133811343
};
1133911344
PanZoom.prototype._magnifyScale = function (scale, magnifyAmount, centerValue) {
1134011345
var magnifyTransform = function (rangeValue) { return scale.invert(centerValue - (centerValue - rangeValue) * magnifyAmount); };
@@ -11363,6 +11368,7 @@ var Plottable;
1136311368
this.yScales().forEach(function (yScale) {
1136411369
_this._magnifyScale(yScale, zoomAmount_1, translatedP.y);
1136511370
});
11371+
this._zoomCallbacks.callCallbacks(e);
1136611372
}
1136711373
};
1136811374
PanZoom.prototype._constrainedZoomAmount = function (scale, zoomAmount) {
@@ -11395,6 +11401,7 @@ var Plottable;
1139511401
});
1139611402
lastDragPoint = endPoint;
1139711403
});
11404+
this._dragInteraction.onDragEnd(function (e) { return _this._panCallbacks.callCallbacks(e); });
1139811405
};
1139911406
PanZoom.prototype._nonLinearScaleWithExtents = function (scale) {
1140011407
return this.minDomainExtent(scale) != null && this.maxDomainExtent(scale) != null &&
@@ -11508,6 +11515,46 @@ var Plottable;
1150811515
this._maxDomainExtents.set(quantitativeScale, maxDomainExtent);
1150911516
return this;
1151011517
};
11518+
/**
11519+
* Adds a callback to be called when panning ends.
11520+
*
11521+
* @param {PanCallback} callback
11522+
* @returns {Event} The calling PanZoom Interaction.
11523+
*/
11524+
PanZoom.prototype.onPan = function (callback) {
11525+
this._panCallbacks.add(callback);
11526+
return this;
11527+
};
11528+
/**
11529+
* Removes a callback that would be called when panning ends.
11530+
*
11531+
* @param {PanCallback} callback
11532+
* @returns {Event} The calling PanZoom Interaction.
11533+
*/
11534+
PanZoom.prototype.offPan = function (callback) {
11535+
this._panCallbacks.delete(callback);
11536+
return this;
11537+
};
11538+
/**
11539+
* Adds a callback to be called when zooming ends.
11540+
*
11541+
* @param {ZoomCallback} callback
11542+
* @returns {Event} The calling PanZoom Interaction.
11543+
*/
11544+
PanZoom.prototype.onZoom = function (callback) {
11545+
this._zoomCallbacks.add(callback);
11546+
return this;
11547+
};
11548+
/**
11549+
* Removes a callback that would be called when zooming ends.
11550+
*
11551+
* @param {ZoomCallback} callback
11552+
* @returns {Event} The calling PanZoom Interaction.
11553+
*/
11554+
PanZoom.prototype.offZoom = function (callback) {
11555+
this._zoomCallbacks.delete(callback);
11556+
return this;
11557+
};
1151111558
/**
1151211559
* The number of pixels occupied in a line.
1151311560
*/

‎src/interactions/panZoomInteraction.ts‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
namespace Plottable.Interactions {
2+
3+
export type PanCallback = (e: Event) => void;
4+
export type ZoomCallback = (e: Event) => void;
5+
26
export class PanZoom extends Interaction {
37
/**
48
* The number of pixels occupied in a line.
@@ -22,6 +26,9 @@ namespace Plottable.Interactions {
2226
private _minDomainExtents: Utils.Map<QuantitativeScale<any>, any>;
2327
private _maxDomainExtents: Utils.Map<QuantitativeScale<any>, any>;
2428

29+
private _panCallbacks = new Utils.CallbackSet<PanCallback>();
30+
private _zoomCallbacks = new Utils.CallbackSet<ZoomCallback>();
31+
2532
/**
2633
* A PanZoom Interaction updates the domains of an x-scale and/or a y-scale
2734
* in response to the user panning or zooming.
@@ -171,6 +178,10 @@ namespace Plottable.Interactions {
171178
ids.forEach((id) => {
172179
this._touchIds.remove(id.toString());
173180
});
181+
182+
if (this._touchIds.size() > 0) {
183+
this._zoomCallbacks.callCallbacks(e);
184+
}
174185
}
175186

176187
private _magnifyScale<D>(scale: QuantitativeScale<D>, magnifyAmount: number, centerValue: number) {
@@ -205,6 +216,7 @@ namespace Plottable.Interactions {
205216
this.yScales().forEach((yScale) => {
206217
this._magnifyScale(yScale, zoomAmount, translatedP.y);
207218
});
219+
this._zoomCallbacks.callCallbacks(e);
208220
}
209221
}
210222

@@ -242,6 +254,7 @@ namespace Plottable.Interactions {
242254
});
243255
lastDragPoint = endPoint;
244256
});
257+
this._dragInteraction.onDragEnd((e) => this._panCallbacks.callCallbacks(e));
245258
}
246259

247260
private _nonLinearScaleWithExtents(scale: QuantitativeScale<any>) {
@@ -424,5 +437,49 @@ namespace Plottable.Interactions {
424437
this._maxDomainExtents.set(quantitativeScale, maxDomainExtent);
425438
return this;
426439
}
440+
441+
/**
442+
* Adds a callback to be called when panning ends.
443+
*
444+
* @param {PanCallback} callback
445+
* @returns {Event} The calling PanZoom Interaction.
446+
*/
447+
public onPan(callback: PanCallback) {
448+
this._panCallbacks.add(callback);
449+
return this;
450+
}
451+
452+
/**
453+
* Removes a callback that would be called when panning ends.
454+
*
455+
* @param {PanCallback} callback
456+
* @returns {Event} The calling PanZoom Interaction.
457+
*/
458+
public offPan(callback: PanCallback) {
459+
this._panCallbacks.delete(callback);
460+
return this;
461+
}
462+
463+
/**
464+
* Adds a callback to be called when zooming ends.
465+
*
466+
* @param {ZoomCallback} callback
467+
* @returns {Event} The calling PanZoom Interaction.
468+
*/
469+
public onZoom(callback: ZoomCallback) {
470+
this._zoomCallbacks.add(callback);
471+
return this;
472+
}
473+
474+
/**
475+
* Removes a callback that would be called when zooming ends.
476+
*
477+
* @param {ZoomCallback} callback
478+
* @returns {Event} The calling PanZoom Interaction.
479+
*/
480+
public offZoom(callback: ZoomCallback) {
481+
this._zoomCallbacks.delete(callback);
482+
return this;
483+
}
427484
}
428485
}

0 commit comments

Comments
 (0)