From 861797acf7c87c79822e586da379a335eb7dc05c Mon Sep 17 00:00:00 2001
From: Andreas Huber <bitbucket@lucares.de>
Date: Thu, 13 Sep 2018 09:26:43 +0200
Subject: [PATCH] zoom by mouse wheel

---
 .../main/resources/resources/css/design.css   |  1 -
 pdb-ui/src/main/resources/resources/js/ui.js  | 37 +++++++++++++++----
 2 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/pdb-ui/src/main/resources/resources/css/design.css b/pdb-ui/src/main/resources/resources/css/design.css
index dc86f97..291c534 100644
--- a/pdb-ui/src/main/resources/resources/css/design.css
+++ b/pdb-ui/src/main/resources/resources/css/design.css
@@ -97,7 +97,6 @@ textarea {
 #zoom-in-slider {
     background: #ccc;
     opacity:0.4;
-    cursor: zoom-in;
 }
 
 
diff --git a/pdb-ui/src/main/resources/resources/js/ui.js b/pdb-ui/src/main/resources/resources/js/ui.js
index 9e1b7d6..b1af4af 100644
--- a/pdb-ui/src/main/resources/resources/js/ui.js
+++ b/pdb-ui/src/main/resources/resources/js/ui.js
@@ -231,7 +231,7 @@ Vue.component('result-view', {
 		  return Math.floor($('#result').width());
 		},
 		update_cursor: function(event){
-		  $('#result-image').css('cursor', this.isInPlot(event) ? 'zoom-in' : 'default');
+		  $('#result-image').css('cursor', this.isInPlot(event) ? 'crosshair' : 'default');
 		},
 		isInPlot: function(event){
           const rect = $('#result-image').offset();
@@ -303,18 +303,19 @@ Vue.component('result-view', {
                 this.hideZoomInSlider();
             }
 		},
-		zoom_click: function(event) {
-            if (this.isInPlot(event) && this.drag_start_x == event.x && this.drag_start_y == event.y) {
-                // zoom in
+		zoom_by_scroll: function(event) {
+            if (this.isInPlot(event) && event.wheelDelta != 0) {
+                
                 const dateRangeAsString = data.searchBar.imageLastUsedParams.dateRange;
-                const dateRange = parseDateRange(dateRangeAsString);
                 
                 const widthPlotArea = this.imageWidth() - gnuplotLMargin - gnuplotRMargin;
                 const cursorPxWithinPlotArea = event.x - gnuplotLMargin;
                 const cursorPercentOfDateRange = cursorPxWithinPlotArea / widthPlotArea;
                 
-                shiftDate(dateRangeAsString, cursorPercentOfDateRange-0.25, (cursorPercentOfDateRange-0.75));
-                  
+                const zoomFactor = event.wheelDelta > 0 ? 0.5 : 2;
+                
+                shiftDateByAnchor(dateRangeAsString, cursorPercentOfDateRange, zoomFactor);
+                
                 plotCurrent();
             }
 		}
@@ -331,7 +332,7 @@ Vue.component('result-view', {
 	   v-on:mousemove="dragging"
 	   v-on:mouseup="drag_stop"
 	   v-on:mouseout="drag_abort"
-	   v-on:click="zoom_click">
+	   v-on:mousewheel="zoom_by_scroll">
 	    <div 
 	       id="zoom-in-slider" 
 	       v-if="in_drag_mode"
@@ -977,6 +978,26 @@ function shiftDate(dateRange, factorStartDate, factorEndDate)
     setDateRange(newStartDate, newEndDate);
 }
 
+/**
+ * Zoom in/out by zoomFaktor, so that the anchorInPercentOfDateRange keeps the same position.
+ *
+ * shiftDateByAnchor(dateRangeAsString, 0.20, 0.5) zooms in by 50%, so that the date that was at 20% before the zoom is still at 20% after the zoom
+ * shiftDateByAnchor(dateRangeAsString, 0.33, 2) zooms out by 50%, so that the date that was at 33% before the zoom is still at 33% after the zoom
+ */
+function shiftDateByAnchor(dateRange, anchorInPercentOfDateRange, zoomFactor)
+{
+    const dateRangeParsed = parseDateRange(dateRange);
+    const dateRangeInSeconds = dateRangeParsed.duration.asSeconds();
+    
+    const anchorTimestampInSeconds = dateRangeParsed.startDate.clone().add(Math.floor(dateRangeInSeconds*anchorInPercentOfDateRange), "seconds");
+    const newDateRangeInSeconds = dateRangeInSeconds * zoomFactor;
+    
+    const newStartDate = anchorTimestampInSeconds.clone().subtract(newDateRangeInSeconds*anchorInPercentOfDateRange, "seconds");
+    const newEndDate = newStartDate.clone().add({seconds: newDateRangeInSeconds});;
+    
+    setDateRange(newStartDate, newEndDate);
+}
+
 function showLoadingIcon()
 {
 	hidePlotAndGallery();