Skip to content

Commit

Permalink
Plot Zoom and Pan rewritten in TypeScript (#7693)
Browse files Browse the repository at this point in the history 
* #5560 rewrite the plot zooming in TypeScript

* #5560 rewrite boxZooming in TypeScript

* #5560 rewrite defaultFocus

* #5560 move focu to PlotFocus.ts

* #5560 add setFocus method

* #5560 use getFocus method instead of direct reference

* #5560 move lastTransK to PlotZoom

* #5560 add PlotModel to combined plot
  • Loading branch information
@LeeTZ
Mariusz Jurowicz authored and LeeTZ committed Jul 17, 2018
1 parent 20cc55e commit a584718
Show file tree
Hide file tree
Showing 39 changed files with 1,327 additions and 881 deletions.
1 change: 1 addition & 0 deletions js/notebook/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@
"@jupyter-widgets/base": "^1.1.10",
"@jupyter-widgets/controls": "^1.2.1",
"@types/chai": "^4.1.1",
"@types/d3": "^5.0.0",
"@types/jquery": "^3.3.0",
"@types/mocha": "^2.2.46",
"@types/node": "^10.3.1",
Expand Down
2 changes: 1 addition & 1 deletion js/notebook/src/plot/auxes/plotAuxBox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ define([
};

PlotAuxBox.prototype.prepare = function(scope, gid) {
var focus = scope.focus;
var focus = scope.plotFocus.getFocus();
var eles = this.elements,
eleprops = this.elementProps;
var mapX = scope.data2scrXi,
Expand Down
2 changes: 1 addition & 1 deletion js/notebook/src/plot/auxes/plotAuxRiver.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ define([
};

PlotAuxRiver.prototype.prepare = function(scope, gid) {
var focus = scope.focus;
var focus = scope.plotFocus.getFocus();
var eles = this.elements,
eleprops = this.elementProps;
var mapX = scope.data2scrXi,
Expand Down
2 changes: 1 addition & 1 deletion js/notebook/src/plot/auxes/plotAuxStem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ define([
};

PlotAuxStem.prototype.prepare = function(scope, gid) {
var focus = scope.focus;
var focus = scope.plotFocus.getFocus();
var eles = this.elements,
eleprops = this.elementProps;
var mapX = scope.data2scrXi,
Expand Down
2 changes: 1 addition & 1 deletion js/notebook/src/plot/chartExtender.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@ define([
y: 10
};

scope.locateBox = null;
scope.plotZoom.boxZoom.resetLocateBox();
scope.cursor = {
x: -1,
y: -1
Expand Down
155 changes: 15 additions & 140 deletions js/notebook/src/plot/combinedPlotScope.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@
* limitations under the License.
*/

var PlotModel = require("./models/PlotModel").default;

define([
'underscore',
'jquery',
Expand All @@ -36,6 +38,7 @@ define([
PlotScope
) {
var bkUtils = require('./../shared/bkUtils').default;
var PlotFocus = require('./zoom/PlotFocus').default;
var CombinedPlotScopeUtils = CombinedPlotScopeUtilsModule.default;

function CombinedPlotScope(wrapperId) {
Expand All @@ -44,6 +47,7 @@ define([
this.childScopeNo = 1;
this.scopes = [];
this.saveAsMenuContainer = null;
this.plotFocus = new PlotFocus(this);

this.model = {
model: {},
Expand Down Expand Up @@ -73,17 +77,6 @@ define([
};
};

CombinedPlotScope.prototype.prepareSavedState = function(state) {
var self = this;
state.focus = self.calcRange();
self.width = self.stdmodel.plotSize.width;
};

CombinedPlotScope.prototype.applySavedState = function(state) {
this.state = state;
this.width = state.width;
};

CombinedPlotScope.prototype.preparePlotModels = function() {
var self = this;
var models = [];
Expand All @@ -96,107 +89,11 @@ define([

plotmodel.xAxis.showGridlineLabels = self.model.getCellModel().x_tickLabels_visible;
plotmodel.yAxis.showGridlineLabels = self.model.getCellModel().y_tickLabels_visible;

plotmodel.plotIndex = i;
var pl = {
model : plotmodel,
state : { },
disableContextMenu: true,
getCellModel : function() {
return this.model;
},
getDumpState: function() {
return this.state;
},
setDumpState: function(s) {
this.state = s;
if (self.model.setDumpState !== undefined) {
self.model.setDumpState(self.dumpState());
}
},
resetShareMenuItems : function() {
},
getFocus : function() {
return self.focus;
},
updateFocus : function(focus) {
self.focus = {};
_.extend(self.focus, focus);
// self.$apply();
this.setDumpState(self.dumpState());

self.updateModels('focus');
},
getSaveAsMenuContainer: function() {
return self.saveAsMenuContainer;
},
updateWidth : function(width, useMinWidth) {
self.width = useMinWidth ? self.getMinScopesWidth() : width;
self.element.find("#combplotTitle").css("width", width);

self.updateModels('width');
},
updateMargin : function() {
// if any of plots has left-positioned legend we should update left margin (with max value)
// for all plots (to adjust vertical position)
var plots = self.element.find(".plot-plotcontainer");
var maxMargin = 0;

plots.each(function() {
var value = parseFloat($(this).css('margin-left'));
maxMargin = _.max([value, maxMargin]);
});
plots.css("margin-left", maxMargin);
for (var i = 0; i < self.stdmodel.plots.length; i++) {
self.stdmodel.plots[i].updateLegendPosition();
}
},
getWidth : function() {
return self.width;
},
onClick: function(plotIndex, item, e) {
for (var i = 0; i < self.stdmodel.plots.length; i++) {
var subplot = self.stdmodel.plots[i];
if (plotIndex === subplot.plotIndex) {
self.sendEvent(
'onclick',
plotIndex,
item.uid,
plotUtils.getActionObject(self.model.getCellModel().type, e, i)
);
break;
}
}
},
onKey: function(key, plotIndex, item, e) {
for (var i = 0; i < self.stdmodel.plots.length; i++) {
var subplot = self.stdmodel.plots[i];
if (plotIndex === subplot.plotIndex) {
var params = plotUtils.getActionObject(self.model.getCellModel().type, e, i);

params.key = key;
self.sendEvent('onkey', plotIndex, item.uid, params);
break;
}
}
},
setActionDetails: function(plotIndex, item, e) {
for (var i = 0; i < self.stdmodel.plots.length; i++) {
var subplot = self.stdmodel.plots[i];

if (plotIndex === subplot.plotIndex) {
var params = plotUtils.getActionObject(self.model.getCellModel().type, e, i);
params.actionType = 'onclick';
params.tag = item.clickTag;

self.sendEvent('actiondetails', plotIndex, item.uid, params);
break;
}
}
}
};
models.push(pl);

models.push(new PlotModel(plotmodel, self));
}

self.models = models;
};

Expand Down Expand Up @@ -237,7 +134,10 @@ define([
var plots = self.stdmodel.plots;
for (var i = 0; i < plots.length; i++) {
var plotmodel = plots[i]; // models are already standardized at this point
var ret = plotUtils.getDefaultFocus(plotmodel);
var ret = PlotFocus.getDefault(plotmodel);

self.plotFocus.setDefault(ret.defaultFocus);

xl = Math.min(xl, ret.defaultFocus.xl);
xr = Math.max(xr, ret.defaultFocus.xr);
}
Expand All @@ -250,7 +150,7 @@ define([
CombinedPlotScope.prototype.dumpState = function() {
var self = this;
var ret = { };
ret.focus = self.focus;
ret.focus = self.plotFocus.getFocus();
ret.width = self.width;
ret.subplots = [];
for (var i = 0; i < self.models.length; i++) {
Expand Down Expand Up @@ -294,9 +194,9 @@ define([
self.models[i].state = savedstate.subplots[i];
}
self.width = savedstate.width;
self.focus = savedstate.focus;
self.plotFocus.setFocus(savedstate.focus);
} else if (self.models !== undefined) {
self.focus = self.calcRange();
self.plotFocus.setFocus(self.calcRange());
for (var i = 0; i < self.models.length; i++) {
self.models[i].state = { };
}
Expand All @@ -307,31 +207,6 @@ define([
}
};

// if (self.model.getDumpState !== undefined) {
// self.getDumpState = function() {
// return self.model.getDumpState();
// };
// }
// self.init();
// if (self.model.getDumpState !== undefined) {
// self.$watch('getDumpState()', function(result) {
// if (result !== undefined && result.subplots === undefined && self.models !== undefined) {
// for (var i = 0; i < self.models.length; i++) {
// self.models[i].state = { };
// }
// if (self.model.setDumpState !== undefined) {
// self.model.setDumpState(self.dumpState());
// }
// }
// });
// }
// self.$watch('getCellModel()', function() {
// self.init();
// });
// self.$on('$destroy', function() {
// $.contextMenu('destroy', { selector: '#' + self.id});
// });

CombinedPlotScope.prototype.getCellModel = function() {
return this.model.getCellModel();
};
Expand Down Expand Up @@ -396,7 +271,7 @@ define([

this.scopes.forEach(function(scope) {
if (updateType === 'focus') {
scope.onModelFucusUpdate(self.focus);
scope.onModelFucusUpdate(self.plotFocus.getFocus());
} else if (updateType === 'width') {
scope.updateModelWidth(self.width);
}
Expand Down
2 changes: 1 addition & 1 deletion js/notebook/src/plot/lod/plotLodBox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ define([
};

PlotLodBox.prototype.prepare = function(scope, gid) {
var focus = scope.focus;
var focus = scope.plotFocus.getFocus();
var eles = this.elements,
eleprops = this.elementProps;
var mapX = scope.data2scrXi,
Expand Down
2 changes: 1 addition & 1 deletion js/notebook/src/plot/lod/plotLodLine.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ define([
};

PlotLodLine.prototype.prepare = function(scope, gid) {
var focus = scope.focus;
var focus = scope.plotFocus.getFocus();
var eleprops = this.elementProps;
var mapX = scope.data2scrXi,
mapY = scope.data2scrYi;
Expand Down
2 changes: 1 addition & 1 deletion js/notebook/src/plot/lod/plotLodPoint.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ define([
};

PlotLodPoint.prototype.prepare = function(scope, gid) {
var focus = scope.focus;
var focus = scope.plotFocus.getFocus();
var eles = this.elementSamples,
eleprops = this.elementProps;
var mapX = scope.data2scrXi,
Expand Down
2 changes: 1 addition & 1 deletion js/notebook/src/plot/lod/plotLodRiver.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ define([
};

PlotLodRiver.prototype.prepare = function(scope, gid) {
var focus = scope.focus;
var focus = scope.plotFocus.getFocus();
var eles = this.elements,
eleprops = this.elementProps;
var mapX = scope.data2scrXi,
Expand Down
4 changes: 2 additions & 2 deletions js/notebook/src/plot/lod/plotLodStem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,10 +68,10 @@ define([
};

PlotLodStem.prototype.prepare = function(scope, gid) {
var focus = scope.focus;
var focus = scope.plotFocus.getFocus();
var eles = this.elements,
eleprops = this.elementProps;
var mapX = scope.data2scrXi,
var mapX = scope.plotFocus.data2scrXi,
mapY = scope.data2scrYi;
var fixed = scope.renderFixed;

Expand Down
2 changes: 1 addition & 1 deletion js/notebook/src/plot/lodloader/plotAreaLodLoader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -236,7 +236,7 @@ define([
PlotAreaLodLoader.prototype.sample = function(scope) {
var xAxis = this.xAxis,
yAxis = this.yAxis;
var xl = scope.focus.xl, xr = scope.focus.xr;
var xl = scope.plotFocus.focus.xl, xr = scope.plotFocus.focus.xr;

if (this.sampleStep === -1) {
var pixelWidth = scope.plotSize.width;
Expand Down
2 changes: 1 addition & 1 deletion js/notebook/src/plot/lodloader/plotBarLodLoader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -242,7 +242,7 @@ define([
PlotBarLodLoader.prototype.sample = function(scope) {
var xAxis = this.xAxis,
yAxis = this.yAxis;
var xl = scope.focus.xl, xr = scope.focus.xr;
var xl = scope.plotFocus.focus.xl, xr = scope.plotFocus.focus.xr;

if (this.sampleStep === -1) {
var pixelWidth = scope.plotSize.width;
Expand Down
2 changes: 1 addition & 1 deletion js/notebook/src/plot/lodloader/plotLineLodLoader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -216,7 +216,7 @@ define([

var xAxis = this.xAxis,
yAxis = this.yAxis;
var xl = scope.focus.xl, xr = scope.focus.xr;
var xl = scope.plotFocus.focus.xl, xr = scope.plotFocus.focus.xr;

if (this.sampleStep === -1) {
var pixelWidth = scope.plotSize.width;
Expand Down
2 changes: 1 addition & 1 deletion js/notebook/src/plot/lodloader/plotPointLodLoader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -213,7 +213,7 @@ define([
PlotPointLodLoader.prototype.sample = function(scope) {
var xAxis = this.xAxis,
yAxis = this.yAxis;
var xl = scope.focus.xl, xr = scope.focus.xr;
var xl = scope.plotFocus.focus.xl, xr = scope.plotFocus.focus.xr;

if (this.sampleStep === -1) {
var pixelWidth = scope.plotSize.width;
Expand Down
2 changes: 1 addition & 1 deletion js/notebook/src/plot/lodloader/plotStemLodLoader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -255,7 +255,7 @@ define([
PlotStemLodLoader.prototype.sample = function(scope) {
var xAxis = this.xAxis,
yAxis = this.yAxis;
var xl = scope.focus.xl, xr = scope.focus.xr;
var xl = scope.plotFocus.focus.xl, xr = scope.plotFocus.focus.xr;

if (this.sampleStep === -1) {
var pixelWidth = scope.plotSize.width;
Expand Down

0 comments on commit a584718

Please sign in to comment.