andi/perfdb
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Activity

restrict zoomin via drag'n'drop to the zoomable area

Browse Source 
Fixed issues that not the whole area was selected when moving the
cursor too fast out of the selectable area.
This commit is contained in:
Andreas Huber
2018-08-11 18:12:29 +02:00
parent 41b0ca9100
commit 22f35f9cf5
1 changed files with 16 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
pdb-ui/src/main/resources/resources/js/ui.js
View File

@@ -223,10 +223,14 @@ Vue.component('result-view', {
plotCurrent(); plotCurrent();
} }
}, },
hideZoomInSlider: function (){
this.zoomInSliderStyle="display: none;";
},
imageWidth: function() {
return Math.floor($('#result').width());
},
isInPlot: function(x){ isInPlot: function(x){
return x > gnuplotLMargin && x < this.imageWidth() - gnuplotRMargin;
const imageWith = Math.floor($('#result').width());
return x > gnuplotLMargin && x < imageWith - gnuplotRMargin;
}, },
drag_start: function(event) { drag_start: function(event) {
event.preventDefault(); event.preventDefault();
@@ -238,19 +242,23 @@ Vue.component('result-view', {
}, },
dragging: function(event) { dragging: function(event) {
if (this.in_drag_mode && event.buttons == 1 && this.isInPlot(event.x) && !data.searchBar.imageLastUsedParams.keyOutside){ if (this.in_drag_mode && event.buttons == 1 && !data.searchBar.imageLastUsedParams.keyOutside){
this.drag_end_x = event.x; this.drag_end_x = Math.max(Math.min(event.x, this.imageWidth()-gnuplotRMargin), gnuplotLMargin);
const left = this.drag_start_x < this.drag_end_x ? this.drag_start_x : this.drag_end_x; const left = this.drag_start_x < this.drag_end_x ? this.drag_start_x : this.drag_end_x;
const width = Math.abs(this.drag_start_x - this.drag_end_x); const width = Math.abs(this.drag_start_x - this.drag_end_x);
this.zoomInSliderStyle="position: absolute; left: "+left+"px; width: "+width+"px; top:"+gnuplotTMargin+"px; bottom: "+gnuplotBMargin+"px;"; if (width > 10) {
this.zoomInSliderStyle="position: absolute; left: "+left+"px; width: "+width+"px; top:"+gnuplotTMargin+"px; bottom: "+gnuplotBMargin+"px;";
} else {
this.hideZoomInSlider();
}
} }
}, },
drag_stop: function(event) { drag_stop: function(event) {
if (this.in_drag_mode && !data.searchBar.imageLastUsedParams.keyOutside){ if (this.in_drag_mode && !data.searchBar.imageLastUsedParams.keyOutside){
this.in_drag_mode = false; this.in_drag_mode = false;
this.zoomInSliderStyle="display: none;"; this.hideZoomInSlider();
// Zoom in if the selected area has some arbitrary minimal size // Zoom in if the selected area has some arbitrary minimal size
if (Math.abs(this.drag_start_x - this.drag_end_x) > 10) { if (Math.abs(this.drag_start_x - this.drag_end_x) > 10) {
@@ -277,7 +285,7 @@ Vue.component('result-view', {
this.in_drag_mode = false; this.in_drag_mode = false;
this.drag_start_x = 0; this.drag_start_x = 0;
this.drag_end_x = 0; this.drag_end_x = 0;
this.zoomInSliderStyle="display: none;"; this.hideZoomInSlider();
} }
}, },
computed: { computed: {