From 22f35f9cf5643a96f73117a7492adb75b9fbb22c Mon Sep 17 00:00:00 2001
From: Andreas Huber <bitbucket@lucares.de>
Date: Sat, 11 Aug 2018 18:12:29 +0200
Subject: [PATCH] restrict zoomin via drag'n'drop to the zoomable area

Fixed issues that not the whole area was selected when moving the
cursor too fast out of the selectable area.
---
 pdb-ui/src/main/resources/resources/js/ui.js | 24 +++++++++++++-------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/pdb-ui/src/main/resources/resources/js/ui.js b/pdb-ui/src/main/resources/resources/js/ui.js
index 29f1417..3990414 100644
--- a/pdb-ui/src/main/resources/resources/js/ui.js
+++ b/pdb-ui/src/main/resources/resources/js/ui.js
@@ -223,10 +223,14 @@ Vue.component('result-view', {
 				plotCurrent();
 			}
 		},
+		hideZoomInSlider: function (){
+		  this.zoomInSliderStyle="display: none;";
+		},
+		imageWidth: function() {
+		  return Math.floor($('#result').width());
+		},
 		isInPlot: function(x){
-		  
-		  const imageWith = Math.floor($('#result').width());
-		  return x > gnuplotLMargin && x < imageWith - gnuplotRMargin;
+		  return x > gnuplotLMargin && x < this.imageWidth() - gnuplotRMargin;
 		},
 		drag_start: function(event) {
 		  event.preventDefault();
@@ -238,19 +242,23 @@ Vue.component('result-view', {
 		},
 		dragging: function(event) {
 		  
-		  if (this.in_drag_mode && event.buttons == 1 && this.isInPlot(event.x) && !data.searchBar.imageLastUsedParams.keyOutside){
-		      this.drag_end_x = event.x;
+		  if (this.in_drag_mode && event.buttons == 1 && !data.searchBar.imageLastUsedParams.keyOutside){
+		      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 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) {
 		  if (this.in_drag_mode && !data.searchBar.imageLastUsedParams.keyOutside){
 		      this.in_drag_mode = false;
-		      this.zoomInSliderStyle="display: none;";
+		      this.hideZoomInSlider();
 		      
 		      // Zoom in if the selected area has some arbitrary minimal size
 		      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.drag_start_x = 0;
           this.drag_end_x = 0;
-          this.zoomInSliderStyle="display: none;";
+          this.hideZoomInSlider();
 		}
 	},
 	computed: {