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

fixed relative positioning of the scatterfacet tints

Browse Source 
git-svn-id: http://google-refine.googlecode.com/svn/trunk@558 7d457c2a-affb-35e4-300a-418c747d4874
This commit is contained in:
Stefano Mazzocchi 2010-04-27 21:02:29 +00:00
parent ca2bc0a304
commit 8651eaaafb
3 changed files with 94 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -353,9 +353,14 @@ $.imgAreaSelect = function (img, options) {
fixAspectRatio(true); fixAspectRatio(true);
} }
selection = { x1: selX(min(x1, x2)), x2: selX(max(x1, x2)), selection = {
y1: selY(min(y1, y2)), y2: selY(max(y1, y2)), x1: selX(min(x1, x2)),
width: abs(x2 - x1), height: abs(y2 - y1) }; x2: selX(max(x1, x2)),
y1: selY(min(y1, y2)),
y2: selY(max(y1, y2)),
width: abs(x2 - x1),
height: abs(y2 - y1)
};
update(); update();
@ -376,8 +381,7 @@ $.imgAreaSelect = function (img, options) {
x2 = (x1 = newX1) + selection.width; x2 = (x1 = newX1) + selection.width;
y2 = (y1 = newY1) + selection.height; y2 = (y1 = newY1) + selection.height;
$.extend(selection, { x1: selX(x1), y1: selY(y1), x2: selX(x2), $.extend(selection, { x1: selX(x1), y1: selY(y1), x2: selX(x2), y2: selY(y2) });
y2: selY(y2) });
update(); update();
@ -410,8 +414,7 @@ $.imgAreaSelect = function (img, options) {
shown = true; shown = true;
$(document).unbind('mouseup', cancelSelection) $(document).unbind('mouseup', cancelSelection).mousemove(selectingMouseMove).one('mouseup', docMouseUp);
.mousemove(selectingMouseMove).one('mouseup', docMouseUp);
$box.unbind('mousemove', areaMouseMove); $box.unbind('mousemove', areaMouseMove);
options.onSelectStart(img, getSelection()); options.onSelectStart(img, getSelection());
@ -421,8 +424,14 @@ $.imgAreaSelect = function (img, options) {
$(document).unbind('mousemove', startSelection); $(document).unbind('mousemove', startSelection);
hide($box.add($outer)); hide($box.add($outer));
selection = { x1: selX(x1), y1: selY(y1), x2: selX(x1), y2: selY(y1), selection = {
width: 0, height: 0 }; x1: selX(x1),
y1: selY(y1),
x2: selX(x1),
y2: selY(y1),
width: 0,
height: 0
};
options.onSelectChange(img, getSelection()); options.onSelectChange(img, getSelection());
options.onSelectEnd(img, getSelection()); options.onSelectEnd(img, getSelection());
@ -435,8 +444,7 @@ $.imgAreaSelect = function (img, options) {
startX = x1 = evX(event); startX = x1 = evX(event);
startY = y1 = evY(event); startY = y1 = evY(event);
$(document).one('mousemove', startSelection) $(document).one('mousemove', startSelection).one('mouseup', cancelSelection);
.one('mouseup', cancelSelection);
return false; return false;
} }
@ -505,8 +513,7 @@ $.imgAreaSelect = function (img, options) {
} }
doResize(); doResize();
} } else {
else {
x1 = min(x1, x2); x1 = min(x1, x2);
y1 = min(y1, y2); y1 = min(y1, y2);
@ -575,26 +582,22 @@ $.imgAreaSelect = function (img, options) {
scaleY = options.imageHeight / imgHeight || 1; scaleY = options.imageHeight / imgHeight || 1;
if (newOptions.x1 != null) { if (newOptions.x1 != null) {
setSelection(newOptions.x1, newOptions.y1, newOptions.x2, setSelection(newOptions.x1, newOptions.y1, newOptions.x2, newOptions.y2);
newOptions.y2);
newOptions.show = !newOptions.hide; newOptions.show = !newOptions.hide;
} }
if (newOptions.keys) if (newOptions.keys)
options.keys = $.extend({ shift: 1, ctrl: 'resize' }, options.keys = $.extend({ shift: 1, ctrl: 'resize' }, newOptions.keys);
newOptions.keys);
$outer.addClass(options.classPrefix + '-outer'); $outer.addClass(options.classPrefix + '-outer');
$area.addClass(options.classPrefix + '-selection'); $area.addClass(options.classPrefix + '-selection');
for (i = 0; i++ < 4;) for (i = 0; i++ < 4;)
$($border[i-1]).addClass(options.classPrefix + '-border' + i); $($border[i-1]).addClass(options.classPrefix + '-border' + i);
styleOptions($area, { selectionColor: 'background-color', styleOptions($area, { selectionColor: 'background-color', selectionOpacity: 'opacity' });
selectionOpacity: 'opacity' }); styleOptions($border, { borderOpacity: 'opacity', borderWidth: 'border-width' });
styleOptions($border, { borderOpacity: 'opacity', styleOptions($outer, { outerColor: 'background-color', outerOpacity: 'opacity' });
borderWidth: 'border-width' });
styleOptions($outer, { outerColor: 'background-color',
outerOpacity: 'opacity' });
if (o = options.borderColor1) if (o = options.borderColor1)
$($border[0]).css({ borderStyle: 'solid', borderColor: o }); $($border[0]).css({ borderStyle: 'solid', borderColor: o });
if (o = options.borderColor2) if (o = options.borderColor2)
@ -623,8 +626,7 @@ $.imgAreaSelect = function (img, options) {
$box.unbind('mousemove', areaMouseMove).unbind('mousedown', areaMouseDown); $box.unbind('mousemove', areaMouseMove).unbind('mousedown', areaMouseDown);
$img.add($outer).unbind('mousedown', imgMouseDown); $img.add($outer).unbind('mousedown', imgMouseDown);
$(window).unbind('resize', windowResize); $(window).unbind('resize', windowResize);
} } else if (options.enable || options.disable === false) {
else if (options.enable || options.disable === false) {
if (options.resizable || options.movable) if (options.resizable || options.movable)
$box.mousemove(areaMouseMove).mousedown(areaMouseDown); $box.mousemove(areaMouseMove).mousedown(areaMouseDown);
@ -655,33 +657,36 @@ $.imgAreaSelect = function (img, options) {
$p = $img; $p = $img;
while ($p.length) { while ($p.length) {
zIndex = max(zIndex, zIndex = max(zIndex, !isNaN($p.css('z-index')) ? $p.css('z-index') : zIndex);
!isNaN($p.css('z-index')) ? $p.css('z-index') : zIndex); //if ($p.css('position') == 'fixed')
if ($p.css('position') == 'fixed') // position = 'fixed';
position = 'fixed';
$p = $p.parent(':not(body)'); $p = $p.parent(':not(body)');
} }
zIndex = options.zIndex || zIndex; zIndex = options.zIndex || zIndex;
if ($.browser.msie) if ($.browser.msie) $img.attr('unselectable', 'on');
$img.attr('unselectable', 'on');
$.imgAreaSelect.keyPress = $.browser.msie || $.imgAreaSelect.keyPress = $.browser.msie || $.browser.safari ? 'keydown' : 'keypress';
$.browser.safari ? 'keydown' : 'keypress';
if ($.browser.opera) if ($.browser.opera)
$areaOpera = div().css({ width: '100%', height: '100%', $areaOpera = div().css({
position: 'absolute', zIndex: zIndex + 2 || 2 }); width: '100%',
height: '100%',
position: 'absolute',
zIndex: zIndex + 2 || 2
});
$box.add($outer).css({ visibility: 'hidden', position: position, $box.add($outer).css({
overflow: 'hidden', zIndex: zIndex || '0' }); visibility: 'hidden',
position: position,
overflow: 'hidden',
zIndex: zIndex || '0'
});
$box.css({ zIndex: zIndex + 2 || 2 }); $box.css({ zIndex: zIndex + 2 || 2 });
$area.add($border).css({ position: 'absolute', fontSize: 0 }); $area.add($border).css({ position: 'absolute', fontSize: 0 });
img.complete || img.readyState == 'complete' || !$img.is('img') ? img.complete || img.readyState == 'complete' || !$img.is('img') ? imgLoad() : $img.one('load', imgLoad);
imgLoad() : $img.one('load', imgLoad);
}; };
$.fn.imgAreaSelect = function (options) { $.fn.imgAreaSelect = function (options) {

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

@ -65,11 +65,13 @@ ScatterplotFacet.prototype._initializeUI = function() {
'<div class="facet-scatterplot-body" bind="bodyDiv">' + '<div class="facet-scatterplot-body" bind="bodyDiv">' +
'<div class="facet-scatterplot-message" bind="messageDiv">Loading...</div>' + '<div class="facet-scatterplot-message" bind="messageDiv">Loading...</div>' +
'<table width="100%"><tr>' + '<table width="100%"><tr>' +
'<td class="facet-scatterplot-plot-container">' + '<td>' +
'<div class="facet-scatterplot-plot-container">' +
'<div class="facet-scatterplot-plot" bind="plotDiv">' + '<div class="facet-scatterplot-plot" bind="plotDiv">' +
'<img class="facet-scatterplot-image" bind="plotBaseImg" />' + '<img class="facet-scatterplot-image" bind="plotBaseImg" />' +
'<img class="facet-scatterplot-image" bind="plotImg" />' + '<img class="facet-scatterplot-image" bind="plotImg" />' +
'</div>' + '</div>' +
'</div>' +
'</td>' + '</td>' +
'<td class="facet-scatterplot-selectors-container" width="100%">' + '<td class="facet-scatterplot-selectors-container" width="100%">' +
'<div class="facet-scatterplot-selectors" bind="selectors">' + '<div class="facet-scatterplot-selectors" bind="selectors">' +
@ -113,6 +115,7 @@ ScatterplotFacet.prototype._initializeUI = function() {
var ops = { var ops = {
instance: true, instance: true,
handles: false, handles: false,
parent: this._elmts.plotDiv,
fadeSpeed: 70, fadeSpeed: 70,
onSelectEnd: function(elmt, selection) { onSelectEnd: function(elmt, selection) {
if (selection.height == 0 || selection.width == 0) { if (selection.height == 0 || selection.width == 0) {

8
src/main/webapp/styles/project/browsing.css
View File

@ -196,9 +196,13 @@ img.facet-choice-link {
.facet-text-body { .facet-text-body {
padding: 5px; padding: 5px;
} }
.facet-scatterplot-plot {
border: 1px solid #ccc; .facet-scatterplot-plot-container {
margin: 5px 5px 5px 5px; margin: 5px 5px 5px 5px;
border: 1px solid #bbb;
}
.facet-scatterplot-plot {
position: relative; position: relative;
} }
.facet-scatterplot-image { .facet-scatterplot-image {