zoom by range selection

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

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Output, EventEmitter } from '@angular/core';
 
 @Component({
   selector: 'pdb-plot-view',
@@ -18,6 +18,9 @@ export class PlotViewComponent implements OnInit {
   
   errorMessage: string;
   
+  @Output()
+  zoomRange : EventEmitter<SelectionRange> = new EventEmitter<SelectionRange>();
+  
   
   in_drag_mode = false;
   drag_start_x = 0;
@@ -116,9 +119,27 @@ export class PlotViewComponent implements OnInit {
   }
   
   dragStop(event) {
-    //console.log("drag_stop");
-    this.in_drag_mode = false;
-    this.hideZoomInSlider();
+   if (this.in_drag_mode){
+      this.in_drag_mode = false;
+      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) {
+        
+        const startPxInImage = Math.min(this.drag_start_x, this.drag_end_x);
+        const endPxInImage = Math.max(this.drag_start_x, this.drag_end_x);
+        
+        const imageWidth = this.imageWidth();
+        const widthPlotArea = imageWidth - this.gnuplotLMargin - this.gnuplotRMargin;
+        const startPxWithinPlotArea = startPxInImage - this.gnuplotLMargin;
+        const endPxWithinPlotArea = endPxInImage - this.gnuplotLMargin;
+        
+        const startPercentOfDateRange = startPxWithinPlotArea / widthPlotArea;
+        const endPercentOfDateRange = endPxWithinPlotArea / widthPlotArea;
+        
+       this.zoomRange.emit(new SelectionRange(startPercentOfDateRange, endPercentOfDateRange));
+      }     
+    }
   }
   
   dragAbort(event) {
@@ -131,3 +152,13 @@ export class PlotViewComponent implements OnInit {
     }
   }
 }
+
+export class SelectionRange {
+  startPercentOfDateRange : number;
+  endPercentOfDateRange : number;
+  
+  constructor(startPercentOfDateRange: number, endPercentOfDateRange: number){
+    this.startPercentOfDateRange = startPercentOfDateRange;
+    this.endPercentOfDateRange = endPercentOfDateRange;
+  }
+}