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

pdb-js/src/app/visualization-page/visualization-page.component.html

@@ -84,7 +84,10 @@
     </div>
   </div>
   <div id="results">
-    <pdb-plot-view #plotView (zoomRange)="zoomRange($event)"></pdb-plot-view>
+    <pdb-plot-view 
+      #plotView 
+      (zoomRange)="zoomRange($event)" 
+      (zoomWithDateAnchor)="zoomWithDateAnchor($event)"></pdb-plot-view>
   </div>
   
 </div>

pdb-js/src/app/visualization-page/visualization-page.component.ts

@@ -5,7 +5,7 @@ import { FormControl, Validators } from '@angular/forms';
 import { LimitByComponent } from '../limit-by/limit-by.component';
 import { YAxisRangeComponent } from '../y-axis-range/y-axis-range.component';
 import { QueryAutocompleteComponent } from '../query-autocomplete/query-autocomplete.component';
-import {PlotViewComponent, SelectionRange } from '../plot-view/plot-view.component'
+import {PlotViewComponent, SelectionRange, DateAnchor } from '../plot-view/plot-view.component'
 import * as moment from 'moment';
 
 @Component({
@@ -126,6 +126,26 @@ export class VisualizationPageComponent implements OnInit {
     });
   }
   
+  /**
+   * 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
+   */
+  shiftDateByAnchor(dateRange:string, anchorInPercentOfDateRange:number, zoomFactor:number)
+  {
+      const dateRangeParsed = this.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});;
+      
+      this.setDateRange(newStartDate, newEndDate);
+  }
+  
   /**
    * Zoom in/out or shift date by adding factorStartDate*dateRangeInSeconds seconds to the start date
    * and factorEndDate*dateRangeInSeconds seconds to the end date.
@@ -143,7 +163,6 @@ export class VisualizationPageComponent implements OnInit {
       const newStartDate = dateRangeParsed.startDate.add({seconds: dateRangeInSeconds*factorStartDate});
       const newEndDate = dateRangeParsed.endDate.add({seconds: dateRangeInSeconds*factorEndDate});
       
-      console.log(newStartDate + " - " + newEndDate);
       this.setDateRange(newStartDate, newEndDate);
   }
   
@@ -173,6 +192,10 @@ export class VisualizationPageComponent implements OnInit {
   zoomRange(range: SelectionRange) {
     this.shiftDate(this.dateRangeAsString(), range.startPercentOfDateRange, range.endPercentOfDateRange-1);
   }
+  
+  zoomWithDateAnchor(dateAnchor: DateAnchor){
+    this.shiftDateByAnchor(this.dateRangeAsString(), dateAnchor.cursorPercentOfDateRange, dateAnchor.zoomFactor);
+  }
 
 }
 

plan.txt

@@ -47,6 +47,7 @@ Filters
 * split by
 * limit
 * date ranges (1...n)
+* find all method calls active at a specific time 
 
 Axis
 * log/linear