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

Jump to bottom

PanZoom: Expose Zoom and Pan Api #3146

Merged
merged 3 commits into from Jan 5, 2017
Merged

PanZoom: Expose Zoom and Pan Api #3146

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
40e4506
PanZoom: Expose Zoom and Pan Api
Jan 5, 2017
ff4c1c5
Merging TransformableScale changes
themadcreator Jan 5, 2017
39069f4
Rename TransformableScale methods to pan/zoom
themadcreator Jan 5, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
35 changes: 27 additions & 8 deletions plottable-npm.d.ts
View file
Open in desktop
Expand Up @@ -683,13 +683,13 @@ declare namespace Plottable.Scales {
* @param {number} [centerValue] The coordinate of the mouse in screen
* space.
*/
magnify(magnifyAmount: number, centerValue: number): void;
zoom(magnifyAmount: number, centerValue: number): void;
/**
* Translates the scale by a number of pixels.
*
* @param {number} [translateAmount] The translation amount in screen space
*/
translate(translateAmount: number): void;
pan(translateAmount: number): void;
/**
* Returns value in *screen space* for the given domain value.
*/
Expand Down Expand Up @@ -902,8 +902,8 @@ declare namespace Plottable {
*/
domainMax(domainMax: D): this;
extentOfValues(values: D[]): D[];
magnify(magnifyAmount: number, centerValue: number): void;
translate(translateAmount: number): void;
zoom(magnifyAmount: number, centerValue: number): void;
pan(translateAmount: number): void;
scaleTransformation(value: number): number;
getTransformationDomain(): [number, number];
protected _setDomain(values: D[]): void;
Expand Down Expand Up @@ -1130,8 +1130,8 @@ declare namespace Plottable.Scales {
*/
outerPadding(outerPadding: number): this;
scale(value: string): number;
magnify(magnifyAmount: number, centerValue: number): void;
translate(translateAmount: number): void;
zoom(magnifyAmount: number, centerValue: number): void;
pan(translateAmount: number): void;
scaleTransformation(value: number): number;
getTransformationDomain(): [number, number];
protected _getDomain(): string[];
Expand Down Expand Up @@ -4740,7 +4740,7 @@ declare namespace Plottable.Interactions {
* `zoom` argument about the point defined by the `center` argument.
*/
function zoomAt(value: number, zoom: number, center: number): number;
type TransformableScale = Plottable.Scales.TransformableScale;
type TransformableScale = Plottable.Scale<any, number> & Plottable.Scales.TransformableScale;
class PanZoom extends Interaction {
/**
* The number of pixels occupied in a line.
Expand Down Expand Up @@ -4772,11 +4772,30 @@ declare namespace Plottable.Interactions {
* @param {TransformableScale} [yScale] The y-scale to update on panning/zooming.
*/
constructor(xScale?: TransformableScale, yScale?: TransformableScale);
/**
* Pans the chart by a specified amount
*
* @param {Plottable.Point} [translateAmount] The amount by which to translate the x and y scales.
*/
pan(translateAmount: Plottable.Point): void;
/**
* Zooms the chart by a specified amount around a specific point
*
* @param {number} [maginfyAmount] The percentage by which to zoom the x and y scale.
* A value of 0.9 zooms in by 10%. A value of 1.1 zooms out by 10%. A value of 1 has
* no effect.
* @param {Plottable.Point} [centerValue] The center in pixels around which to zoom.
* By default, `centerValue` is the center of the x and y range of each scale.
*/
zoom(zoomAmount: number, centerValue?: Plottable.Point): void;
protected _anchor(component: Component): void;
protected _unanchor(): void;
private _handleTouchStart(ids, idToPoint, e);
private _handlePinch(ids, idToPoint, e);
private static _centerPoint(point1, point2);
static centerPoint(point1: Point, point2: Point): {
x: number;
y: number;
};
private static _pointDistance(point1, point2);
private _handleTouchEnd(ids, idToPoint, e);
private _handleWheelEvent(p, e);
Expand Down
35 changes: 27 additions & 8 deletions plottable.d.ts
View file
Open in desktop
Expand Up @@ -682,13 +682,13 @@ declare namespace Plottable.Scales {
* @param {number} [centerValue] The coordinate of the mouse in screen
* space.
*/
magnify(magnifyAmount: number, centerValue: number): void;
zoom(magnifyAmount: number, centerValue: number): void;
/**
* Translates the scale by a number of pixels.
*
* @param {number} [translateAmount] The translation amount in screen space
*/
translate(translateAmount: number): void;
pan(translateAmount: number): void;
/**
* Returns value in *screen space* for the given domain value.
*/
Expand Down Expand Up @@ -901,8 +901,8 @@ declare namespace Plottable {
*/
domainMax(domainMax: D): this;
extentOfValues(values: D[]): D[];
magnify(magnifyAmount: number, centerValue: number): void;
translate(translateAmount: number): void;
zoom(magnifyAmount: number, centerValue: number): void;
pan(translateAmount: number): void;
scaleTransformation(value: number): number;
getTransformationDomain(): [number, number];
protected _setDomain(values: D[]): void;
Expand Down Expand Up @@ -1129,8 +1129,8 @@ declare namespace Plottable.Scales {
*/
outerPadding(outerPadding: number): this;
scale(value: string): number;
magnify(magnifyAmount: number, centerValue: number): void;
translate(translateAmount: number): void;
zoom(magnifyAmount: number, centerValue: number): void;
pan(translateAmount: number): void;
scaleTransformation(value: number): number;
getTransformationDomain(): [number, number];
protected _getDomain(): string[];
Expand Down Expand Up @@ -4739,7 +4739,7 @@ declare namespace Plottable.Interactions {
* `zoom` argument about the point defined by the `center` argument.
*/
function zoomAt(value: number, zoom: number, center: number): number;
type TransformableScale = Plottable.Scales.TransformableScale;
type TransformableScale = Plottable.Scale<any, number> & Plottable.Scales.TransformableScale;
class PanZoom extends Interaction {
/**
* The number of pixels occupied in a line.
Expand Down Expand Up @@ -4771,11 +4771,30 @@ declare namespace Plottable.Interactions {
* @param {TransformableScale} [yScale] The y-scale to update on panning/zooming.
*/
constructor(xScale?: TransformableScale, yScale?: TransformableScale);
/**
* Pans the chart by a specified amount
*
* @param {Plottable.Point} [translateAmount] The amount by which to translate the x and y scales.
*/
pan(translateAmount: Plottable.Point): void;
/**
* Zooms the chart by a specified amount around a specific point
*
* @param {number} [maginfyAmount] The percentage by which to zoom the x and y scale.
* A value of 0.9 zooms in by 10%. A value of 1.1 zooms out by 10%. A value of 1 has
* no effect.
* @param {Plottable.Point} [centerValue] The center in pixels around which to zoom.
* By default, `centerValue` is the center of the x and y range of each scale.
*/
zoom(zoomAmount: number, centerValue?: Plottable.Point): void;
protected _anchor(component: Component): void;
protected _unanchor(): void;
private _handleTouchStart(ids, idToPoint, e);
private _handlePinch(ids, idToPoint, e);
private static _centerPoint(point1, point2);
static centerPoint(point1: Point, point2: Point): {
x: number;
y: number;
};
private static _pointDistance(point1, point2);
private _handleTouchEnd(ids, idToPoint, e);
private _handleWheelEvent(p, e);
Expand Down
79 changes: 57 additions & 22 deletions plottable.js
View file
Open in desktop
Expand Up @@ -1730,12 +1730,12 @@ var Plottable;
return extent;
}
};
QuantitativeScale.prototype.magnify = function (magnifyAmount, centerValue) {
QuantitativeScale.prototype.zoom = function (magnifyAmount, centerValue) {
var _this = this;
var magnifyTransform = function (rangeValue) { return _this.invert(Plottable.Interactions.zoomAt(rangeValue, magnifyAmount, centerValue)); };
this.domain(this.range().map(magnifyTransform));
};
QuantitativeScale.prototype.translate = function (translateAmount) {
QuantitativeScale.prototype.pan = function (translateAmount) {
var _this = this;
var translateTransform = function (rangeValue) { return _this.invert(rangeValue + translateAmount); };
this.domain(this.range().map(translateTransform));
Expand Down Expand Up @@ -2149,15 +2149,15 @@ var Plottable;
// Convert to screen space
return this._d3TransformationScale(untransformed);
};
Category.prototype.magnify = function (magnifyAmount, centerValue) {
Category.prototype.zoom = function (magnifyAmount, centerValue) {
var _this = this;
var magnifyTransform = function (rangeValue) {
return _this._d3TransformationScale.invert(Plottable.Interactions.zoomAt(rangeValue, magnifyAmount, centerValue));
};
this._d3TransformationScale.domain(this._d3TransformationScale.range().map(magnifyTransform));
this._dispatchUpdate();
};
Category.prototype.translate = function (translateAmount) {
Category.prototype.pan = function (translateAmount) {
var _this = this;
var translateTransform = function (rangeValue) {
return _this._d3TransformationScale.invert(rangeValue + translateAmount);
Expand Down Expand Up @@ -11486,6 +11486,45 @@ var Plottable;
this.addYScale(yScale);
}
}
/**
* Pans the chart by a specified amount
*
* @param {Plottable.Point} [translateAmount] The amount by which to translate the x and y scales.
*/
PanZoom.prototype.pan = function (translateAmount) {
var _this = this;
this.xScales().forEach(function (xScale) {
xScale.pan(_this._constrainedTranslation(xScale, translateAmount.x));
});
this.yScales().forEach(function (yScale) {
yScale.pan(_this._constrainedTranslation(yScale, translateAmount.y));
});
};
/**
* Zooms the chart by a specified amount around a specific point
*
* @param {number} [maginfyAmount] The percentage by which to zoom the x and y scale.
* A value of 0.9 zooms in by 10%. A value of 1.1 zooms out by 10%. A value of 1 has
* no effect.
* @param {Plottable.Point} [centerValue] The center in pixels around which to zoom.
* By default, `centerValue` is the center of the x and y range of each scale.
*/
PanZoom.prototype.zoom = function (zoomAmount, centerValue) {
this.xScales().forEach(function (xScale) {
var range = xScale.range();
var xCenter = centerValue === undefined
? (range[1] - range[0]) / 2
: centerValue.x;
xScale.zoom(zoomAmount, xCenter);
});
this.yScales().forEach(function (yScale) {
var range = yScale.range();
var yCenter = centerValue === undefined
? (range[1] - range[0]) / 2
: centerValue.y;
yScale.zoom(zoomAmount, yCenter);
});
};
PanZoom.prototype._anchor = function (component) {
_super.prototype._anchor.call(this, component);
this._dragInteraction.attachTo(component);
Expand Down Expand Up @@ -11542,7 +11581,7 @@ var Plottable;
var normalizedPointDiffs = points.map(function (point, i) {
return { x: (point.x - oldPoints[i].x) / magnifyAmount, y: (point.y - oldPoints[i].y) / magnifyAmount };
});
var oldCenterPoint = PanZoom._centerPoint(oldPoints[0], oldPoints[1]);
var oldCenterPoint = PanZoom.centerPoint(oldPoints[0], oldPoints[1]);
var centerX = oldCenterPoint.x;
var centerY = oldCenterPoint.y;
this.xScales().forEach(function (xScale) {
Expand All @@ -11561,18 +11600,14 @@ var Plottable;
y: normalizedPointDiffs[i].y * magnifyAmount + oldPoint.y,
};
});
var translateAmountX = centerX - ((constrainedPoints[0].x + constrainedPoints[1].x) / 2);
this.xScales().forEach(function (xScale) {
xScale.magnify(magnifyAmount, centerX);
xScale.translate(_this._constrainedTranslation(xScale, translateAmountX));
});
var translateAmountY = centerY - ((constrainedPoints[0].y + constrainedPoints[1].y) / 2);
this.yScales().forEach(function (yScale) {
yScale.magnify(magnifyAmount, centerY);
yScale.translate(_this._constrainedTranslation(yScale, translateAmountY));
});
var translateAmount = {
x: centerX - ((constrainedPoints[0].x + constrainedPoints[1].x) / 2),
y: centerY - ((constrainedPoints[0].y + constrainedPoints[1].y) / 2)
};
this.zoom(magnifyAmount, { x: centerX, y: centerY });
this.pan(translateAmount);
};
PanZoom._centerPoint = function (point1, point2) {
PanZoom.centerPoint = function (point1, point2) {
var leftX = Math.min(point1.x, point2.x);
var rightX = Math.max(point1.x, point2.x);
var topY = Math.min(point1.y, point2.y);
Expand Down Expand Up @@ -11614,8 +11649,7 @@ var Plottable;
centerY_1 = constrained.centerPoint;
zoomAmount_1 = constrained.zoomAmount;
});
this.xScales().forEach(function (xScale) { return xScale.magnify(zoomAmount_1, centerX_1); });
this.yScales().forEach(function (yScale) { return yScale.magnify(zoomAmount_1, centerY_1); });
this.zoom(zoomAmount_1, { x: centerX_1, y: centerY_1 });
this._zoomEndCallbacks.callCallbacks();
}
};
Expand Down Expand Up @@ -11709,10 +11743,11 @@ var Plottable;
if (_this._touchIds.size() >= 2) {
return;
}
var translateAmountX = (lastDragPoint == null ? startPoint.x : lastDragPoint.x) - endPoint.x;
_this.xScales().forEach(function (xScale) { return xScale.translate(_this._constrainedTranslation(xScale, translateAmountX)); });
var translateAmountY = (lastDragPoint == null ? startPoint.y : lastDragPoint.y) - endPoint.y;
_this.yScales().forEach(function (yScale) { return yScale.translate(_this._constrainedTranslation(yScale, translateAmountY)); });
var translateAmount = {
x: (lastDragPoint == null ? startPoint.x : lastDragPoint.x) - endPoint.x,
y: (lastDragPoint == null ? startPoint.y : lastDragPoint.y) - endPoint.y
};
_this.pan(translateAmount);
lastDragPoint = endPoint;
});
this._dragInteraction.onDragEnd(function () { return _this._panEndCallbacks.callCallbacks(); });
Expand Down