Drag zoom #3136

wants to merge 4 commits into


None yet

4 participants


This is something we still want -- rebasing @danmane's original pr

dandelionmane and others added some commits Sep 22, 2015
@dandelionmane dandelionmane dragzoom stuff 9b76dc0
@dandelionmane dandelionmane Minor code and testing improvements d948b25
@dandelionmane dandelionmane Move 'numeric' into interfaces c9a4975
Calvin Fernandez rebasing
@CalvinFernandez CalvinFernandez referenced this pull request Dec 9, 2016

Add DragZoomLayer #2796

+ * Usage: Construct the selection box layer and attach x and y scales, and then add the layer
+ * over the plot you are zooming on using a Component Group.
+ */
+ constructor(xScale: QuantitativeScale<Numeric>,
themadcreator Jan 5, 2017 Collaborator

now that Category scales support pan/zoom maybe we could instead pass a panzoominteraction here? Or pass in TransformableScale types?

+ if (!this.isZoomed) {
+ this.isZoomed = true;
+ this.xDomainToRestore = this.xScale().domain();
+ this.yDomainToRestore = this.yScale().domain();
themadcreator Jan 5, 2017 Collaborator

Is it possible the domain will change after the scale is zoomed? These may become out of date

+ this.yDomainToRestore[0], this.yDomainToRestore[1]);
+ }
+ // If we are zooming, disable interactions, to avoid contention
themadcreator Jan 5, 2017 Collaborator

Cool, but will other interactions contend as well?

+ let y0 = interpolator(y0s, y0f, p);
+ let y1 = interpolator(y1s, y1f, p);
+ this.xScale().domain([x0, x1]);
+ this.yScale().domain([y0, y1]);
themadcreator Jan 5, 2017 Collaborator

This doesn't respect max zoom extents. Could we instead use the PanZoomInteraction now that we expose the .zoom method?

@@ -72,4 +72,7 @@ export interface Entity<C extends Component> {
selection: d3.Selection<any>;
component: C;
+export type Numeric = number | {valueOf(): number};
hellochar Jan 5, 2017 Collaborator

I'm guessing the point of having this type is to accept number or Date objects? I dug around a lot but couldn't find a clear answer.

+ dragging = false;
+ });
+ this._doubleClickInteraction.onDoubleClick(() => this.unzoom());
hellochar Jan 5, 2017 Collaborator

this adds double-click to unzoom; we should call that out

+ };
+ this.isZooming(true);
+ let start = Date.now();
+ let draw = () => {
hellochar Jan 5, 2017 Collaborator

Wonder if we should be implementing our own animation logic here instead of using a Plottable.Animator

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment