zoom by mouse wheel

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;
 }
 
 

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,17 +303,18 @@ Vue.component('result-view', {
                 this.hideZoomInSlider();
             }
 		},
-		zoom_click: function(event) {
+		zoom_by_scroll: function(event) {
-            if (this.isInPlot(event) && this.drag_start_x == event.x && this.drag_start_y == event.y) {
+            if (this.isInPlot(event) && event.wheelDelta != 0) {
-                // zoom in
+                
                 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();