s434730/RandomSec
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

polishing usability of the scatterfacet

Browse Source 
git-svn-id: http://google-refine.googlecode.com/svn/trunk@496 7d457c2a-affb-35e4-300a-418c747d4874
This commit is contained in:
Stefano Mazzocchi 2010-04-17 19:21:39 +00:00
parent d61473e989
commit a115251992
2 changed files with 40 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/main/webapp/externals/imgareaselect/jquery.imgareaselect.js vendored
View File

@ -55,7 +55,7 @@ $.imgAreaSelect = function (img, options) {
scaleX, scaleY, scaleX, scaleY,
resizeMargin = 10, resizeMargin = 6,
resize, resize,

61
src/main/webapp/scripts/facets/scatterplot-facet.js
View File

@ -12,7 +12,8 @@ ScatterplotFacet.prototype.reset = function() {
delete this._config.from_y; delete this._config.from_y;
delete this._config.to_x; delete this._config.to_x;
delete this._config.to_y; delete this._config.to_y;
this._plotImg.imgAreaSelect({ hide : true}); this._plotAreaSelector.setOptions({ hide : true });
this._plotAreaSelector.update();
}; };
ScatterplotFacet.reconstruct = function(div, uiState) { ScatterplotFacet.reconstruct = function(div, uiState) {
@ -73,39 +74,55 @@ ScatterplotFacet.prototype._initializeUI = function() {
this._plotBaseImg = $('<img>') this._plotBaseImg = $('<img>')
.addClass("facet-scatterplot-image") .addClass("facet-scatterplot-image")
.attr("src", this._formulateImageUrl({}, "DDDDFF")) .attr("src", this._formulateImageUrl({},{ color: "888888", dot : this._config.dot * 0.9 }))
.attr("width", this._config.l) .attr("width", this._config.l)
.attr("height", this._config.l) .attr("height", this._config.l)
.appendTo(this._plotDiv); .appendTo(this._plotDiv);
this._plotImg = $('<img>') this._plotImg = $('<img>')
.addClass("facet-scatterplot-image") .addClass("facet-scatterplot-image")
.attr("src", this._formulateCurrentImageUrl()) .attr("src", this._formulateCurrentImageUrl({ color: "ff0000" }))
.attr("width", this._config.l) .attr("width", this._config.l)
.attr("height", this._config.l) .attr("height", this._config.l)
.imgAreaSelect({ .appendTo(this._plotDiv);
handles: false,
fadeSpeed: 70, var ops = {
onSelectEnd: function(elmt, selection) { instance: true,
if (selection.height == 0 || selection.width == 0) { handles: false,
self.reset(); fadeSpeed: 70,
} else { onSelectEnd: function(elmt, selection) {
self._config.from_x = selection.x1; if (selection.height == 0 || selection.width == 0) {
self._config.to_x = selection.x2 - 2; self.reset();
self._config.from_y = self._config.l - selection.y2 + 2; } else {
self._config.to_y = self._config.l - selection.y1 - 1; self._config.from_x = selection.x1;
} self._config.to_x = selection.x2 - 2;
self._updateRest(); self._config.from_y = self._config.l - selection.y2 + 2;
self._config.to_y = self._config.l - selection.y1 - 1;
} }
}).appendTo(this._plotDiv); self._updateRest();
}
};
if (this.hasSelection()) {
ops.x1 = this._config.from_x;
ops.y1 = this._config.from_y;
ops.x2 = this._config.to_x;
ops.y2 = this._config.to_y;
}
this._plotAreaSelector = this._plotImg.imgAreaSelect(ops);
this._statusDiv = $('<div>').addClass("facet-scatterplot-status").appendTo(bodyDiv); this._statusDiv = $('<div>').addClass("facet-scatterplot-status").appendTo(bodyDiv);
}; };
ScatterplotFacet.prototype._formulateCurrentImageUrl = function() { ScatterplotFacet.prototype._formulateCurrentImageUrl = function(conf) {
return this._formulateImageUrl(ui.browsingEngine.getJSON(false, this), "444488") return this._formulateImageUrl(ui.browsingEngine.getJSON(false, this), conf);
}; };
ScatterplotFacet.prototype._formulateImageUrl = function(engineConfig, color) { ScatterplotFacet.prototype._formulateImageUrl = function(engineConfig, conf) {
this._config.color = color; for (var p in conf) {
this._config[p] = conf[p];
}
var params = { var params = {
project: theProject.id, project: theProject.id,
engine: JSON.stringify(engineConfig), engine: JSON.stringify(engineConfig),
@ -161,7 +178,7 @@ ScatterplotFacet.prototype.render = function() {
this._plotDiv.show(); this._plotDiv.show();
this._statusDiv.show(); this._statusDiv.show();
this._plotImg.attr("src", this._formulateCurrentImageUrl()); this._plotImg.attr("src", this._formulateCurrentImageUrl({ color: "ff0000" }));
}; };
ScatterplotFacet.prototype._remove = function() { ScatterplotFacet.prototype._remove = function() {