zoom by mousewheel

pdb-js/src/app/plot-view/plot-view.component.html

@@ -4,7 +4,8 @@
   (mousedown)="dragStart($event)"
   (mousemove)="dragging($event)"
   (mouseup)="dragStop($event)"
-  (mouseout)="dragAbort($event)">
+  (mouseout)="dragAbort($event)"
+  (wheel)="zoomByScroll($event)">
   <img
     id="result-image"
     src="{{imageUrl}}"

pdb-js/src/app/plot-view/plot-view.component.ts

@@ -21,6 +21,8 @@ export class PlotViewComponent implements OnInit {
   @Output()
   zoomRange : EventEmitter<SelectionRange> = new EventEmitter<SelectionRange>();
   
+  @Output()
+  zoomWithDateAnchor : EventEmitter<DateAnchor> = new EventEmitter<DateAnchor>();
   
   in_drag_mode = false;
   drag_start_x = 0;
@@ -57,9 +59,9 @@ export class PlotViewComponent implements OnInit {
   }
   
   positionInImage(event) : any {
-    const rect = <HTMLImageElement>document.getElementById('result-image');
-    const x= event.clientX - rect.x;
-    const y= event.clientY - rect.y;
+    const x= event.offsetX; 
+    const y= event.offsetY; 
+    
     return {x: x, y: y};
   }
   
@@ -101,6 +103,7 @@ export class PlotViewComponent implements OnInit {
     
     if (this.in_drag_mode && event.buttons == 1){
       const pos = this.positionInImage(event);
+      
     
       this.drag_end_x = Math.max(Math.min(pos.x, this.imageWidth()-this.gnuplotRMargin), this.gnuplotLMargin);
       
@@ -137,7 +140,7 @@ export class PlotViewComponent implements OnInit {
         const startPercentOfDateRange = startPxWithinPlotArea / widthPlotArea;
         const endPercentOfDateRange = endPxWithinPlotArea / widthPlotArea;
         
-       this.zoomRange.emit(new SelectionRange(startPercentOfDateRange, endPercentOfDateRange));
+        this.zoomRange.emit(new SelectionRange(startPercentOfDateRange, endPercentOfDateRange));
       }     
     }
   }
@@ -151,6 +154,23 @@ export class PlotViewComponent implements OnInit {
       this.hideZoomInSlider();
     }
   }
+  
+  zoomByScroll(event) {
+    if (this.isInImage(event) && event.deltaY != 0) {
+      this.in_drag_mode = false;
+      this.hideZoomInSlider();
+      
+      const pos = this.positionInImage(event);
+        
+      const widthPlotArea = this.imageWidth() - this.gnuplotLMargin - this.gnuplotRMargin;
+      const cursorPxWithinPlotArea = pos.x - this.gnuplotLMargin;
+      const cursorPercentOfDateRange = cursorPxWithinPlotArea / widthPlotArea;
+      
+      const zoomFactor = event.deltaY < 0 ? 0.5 : 2;
+      
+      this.zoomWithDateAnchor.emit(new DateAnchor(cursorPercentOfDateRange, zoomFactor));
+    }
+  }
 }
 
 export class SelectionRange {
@@ -161,4 +181,14 @@ export class SelectionRange {
     this.startPercentOfDateRange = startPercentOfDateRange;
     this.endPercentOfDateRange = endPercentOfDateRange;
   }
+}
+
+export class DateAnchor {
+  cursorPercentOfDateRange : number;
+  zoomFactor : number;
+  
+  constructor(cursorPercentOfDateRange : number, zoomFactor : number) {
+    this.cursorPercentOfDateRange = cursorPercentOfDateRange;
+    this.zoomFactor = zoomFactor;
+  }
 }