Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add onPan and onZoom to the PanZoom interaction #3087

Merged
merged 3 commits into from
Jul 21, 2016
Merged

Add onPan and onZoom to the PanZoom interaction #3087

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
660f3d4
Add onPan and onZoom to the PanZoom interaction
SamMorrowDrums Jul 14, 2016
cf951ab
Update API to panEnd and zoomEnd events
SamMorrowDrums Jul 14, 2016
6f8394a
Update typing and documentation
SamMorrowDrums Jul 15, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 32 additions & 0 deletions plottable-npm.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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.
Expand Down Expand Up @@ -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.
*/
onPanEnd(callback: PanCallback): this;
/**
* Removes a callback that would be called when panning ends.
*
* @param {PanCallback} callback
* @returns {Event} The calling PanZoom Interaction.
*/
offPanEnd(callback: PanCallback): this;
/**
* Adds a callback to be called when zooming ends.
*
* @param {ZoomCallback} callback
* @returns {Event} The calling PanZoom Interaction.
*/
onZoomEnd(callback: ZoomCallback): this;
/**
* Removes a callback that would be called when zooming ends.
*
* @param {ZoomCallback} callback
* @returns {Event} The calling PanZoom Interaction.
*/
offZoomEnd(callback: ZoomCallback): this;
}
}
declare namespace Plottable {
Expand Down
32 changes: 32 additions & 0 deletions plottable.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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.
Expand Down Expand Up @@ -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.
*/
onPanEnd(callback: PanCallback): this;
/**
* Removes a callback that would be called when panning ends.
*
* @param {PanCallback} callback
* @returns {Event} The calling PanZoom Interaction.
*/
offPanEnd(callback: PanCallback): this;
/**
* Adds a callback to be called when zooming ends.
*
* @param {ZoomCallback} callback
* @returns {Event} The calling PanZoom Interaction.
*/
onZoomEnd(callback: ZoomCallback): this;
/**
* Removes a callback that would be called when zooming ends.
*
* @param {ZoomCallback} callback
* @returns {Event} The calling PanZoom Interaction.
*/
offZoomEnd(callback: ZoomCallback): this;
}
}
declare namespace Plottable {
Expand Down
47 changes: 47 additions & 0 deletions plottable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -11335,6 +11337,9 @@ var Plottable;
ids.forEach(function (id) {
_this._touchIds.remove(id.toString());
});
if (this._touchIds.size() > 0) {
this._zoomEndCallbacks.callCallbacks(e);
}
};
PanZoom.prototype._magnifyScale = function (scale, magnifyAmount, centerValue) {
var magnifyTransform = function (rangeValue) { return scale.invert(centerValue - (centerValue - rangeValue) * magnifyAmount); };
Expand Down Expand Up @@ -11363,6 +11368,7 @@ var Plottable;
this.yScales().forEach(function (yScale) {
_this._magnifyScale(yScale, zoomAmount_1, translatedP.y);
});
this._zoomEndCallbacks.callCallbacks(e);
}
};
PanZoom.prototype._constrainedZoomAmount = function (scale, zoomAmount) {
Expand Down Expand Up @@ -11395,6 +11401,7 @@ var Plottable;
});
lastDragPoint = endPoint;
});
this._dragInteraction.onDragEnd(function (e) { return _this._panEndCallbacks.callCallbacks(e); });
};
PanZoom.prototype._nonLinearScaleWithExtents = function (scale) {
return this.minDomainExtent(scale) != null && this.maxDomainExtent(scale) != null &&
Expand Down Expand Up @@ -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.onPanEnd = function (callback) {
this._panEndCallbacks.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.offPanEnd = function (callback) {
this._panEndCallbacks.delete(callback);
return this;
};
/**
* Adds a callback to be called when zooming ends.
*
* @param {ZoomCallback} callback
* @returns {Event} 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 {Event} The calling PanZoom Interaction.
*/
PanZoom.prototype.offZoomEnd = function (callback) {
this._zoomEndCallbacks.delete(callback);
return this;
};
/**
* The number of pixels occupied in a line.
*/
Expand Down
57 changes: 57 additions & 0 deletions src/interactions/panZoomInteraction.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
namespace Plottable.Interactions {

export type PanCallback = (e: Event) => void;
export type ZoomCallback = (e: Event) => void;
Copy link
Contributor

@jtlan jtlan Jul 14, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure these callbacks should take Events -- that's sort of atypical if you compare to the callbacks passed to Click, Drag, and Pointer Interactions. I would expect the final domains of the Scales or something like that.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I was a little unsure as to what to return, but you can take multiple
scales right, so would it be an array of domains returned?

On Thu, 14 Jul 2016, 19:27 jtlan, notifications@github.com wrote:

In src/interactions/panZoomInteraction.ts
#3087 (comment):

@@ -1,4 +1,8 @@
namespace Plottable.Interactions {
+

  • export type PanCallback = (e: Event) => void;
  • export type ZoomCallback = (e: Event) => void;

Not sure these callbacks should take Events -- that's sort of atypical if
you compare to the callbacks passed to Click, Drag, and Pointer
Interactions. I would expect the final domains of the scales or something
like that.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/palantir/plottable/pull/3087/files/cf951aba815a4c8d2526d68def596f8869c1ed41#r70857970,
or mute the thread
https://github.com/notifications/unsubscribe/AElqXol0-UeMq4VU9_qldkW-AYz-FEfmks5qVn-bgaJpZM4JMMcF
.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ideally it would be something like:

{
  xDomains: Map<Scale, X[]>;
  yDomains: Map<Scale, Y[]>;
}

but the typing on PanZoom doesn't allow for that since it's not generic on <X, Y> (also object-keyed Map isn't standard yet). For now we might want the callback to pass nothing (but still keep it type-defined), since the users can retrieve the domain information from the Scales directly.


export class PanZoom extends Interaction {
/**
* The number of pixels occupied in a line.
Expand All @@ -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.
Expand Down Expand Up @@ -171,6 +178,10 @@ namespace Plottable.Interactions {
ids.forEach((id) => {
this._touchIds.remove(id.toString());
});

if (this._touchIds.size() > 0) {
this._zoomEndCallbacks.callCallbacks(e);
}
}

private _magnifyScale<D>(scale: QuantitativeScale<D>, magnifyAmount: number, centerValue: number) {
Expand Down Expand Up @@ -205,6 +216,7 @@ namespace Plottable.Interactions {
this.yScales().forEach((yScale) => {
this._magnifyScale(yScale, zoomAmount, translatedP.y);
});
this._zoomEndCallbacks.callCallbacks(e);
}
}

Expand Down Expand Up @@ -242,6 +254,7 @@ namespace Plottable.Interactions {
});
lastDragPoint = endPoint;
});
this._dragInteraction.onDragEnd((e) => this._panEndCallbacks.callCallbacks(e));
}

private _nonLinearScaleWithExtents(scale: QuantitativeScale<any>) {
Expand Down Expand Up @@ -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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This and other registration calls should return {this} not {Event}.

*/
public onPanEnd(callback: PanCallback) {
this._panEndCallbacks.add(callback);
return this;
}

/**
* Removes a callback that would be called when panning ends.
*
* @param {PanCallback} callback
* @returns {Event} 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 {Event} 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 {Event} The calling PanZoom Interaction.
*/
public offZoomEnd(callback: ZoomCallback) {
this._zoomEndCallbacks.delete(callback);
return this;
}
}
}
Loading