add range selection in plot view

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

@@ -1,5 +1,21 @@
-<img
-  *ngIf="imageUrl" 
-  src="{{imageUrl}}" />
-  
+<div
+  *ngIf="imageUrl"
+  [style.cursor]="imageCursor"
+  (mousedown)="dragStart($event)"
+  (mousemove)="dragging($event)"
+  (mouseup)="dragStop($event)"
+  (mouseout)="dragAbort($event)">
+  <img
+    id="result-image"
+    src="{{imageUrl}}"
+     />
+  <div 
+     id="zoom-in-slider"
+     [style.display]="zoomInSliderStyleDisplay"
+     [style.top]="zoomInSliderStyleTopMargin"
+     [style.bottom]="zoomInSliderStyleBottomMargin"
+     [style.left]="zoomInSliderStyleLeft"
+     [style.width]="zoomInSliderStyleWidth"
+  ></div>
+</div>
 <div *ngIf="errorMessage" class="errorPanel">{{errorMessage}}</div>

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

@@ -1,4 +1,11 @@
 
 img {
   display:block; /* removes 3 pixels extra height around the image */
+  -webkit-user-drag: none; /* prevent Chrome's default behavior, when dragging on an image */
+}
+
+#zoom-in-slider {
+  position: absolute;
+  background: #ccc;
+  opacity:0.4;
 }

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

@@ -7,13 +7,127 @@ import { Component, OnInit } from '@angular/core';
 })
 export class PlotViewComponent implements OnInit {
 
+
+  readonly gnuplotLMargin = 110; // The left margin configured for gnuplot
+  readonly gnuplotRMargin = 110; // The right margin configured for gnuplot
+  readonly gnuplotTMargin = 57; // The top margin configured for gnuplot
+  readonly gnuplotBMargin = 76; // The bottom margin configured for gnuplot
+
+
   imageUrl : string;
   
   errorMessage: string;
+  
+  
+  in_drag_mode = false;
+  drag_start_x = 0;
+  drag_start_y = 0;
+  drag_end_x = 0;
+  
+  imageCursor = "default";
+  
+  zoomInSliderStyleDisplay = "none";
+  zoomInSliderStyleTopMargin = this.gnuplotTMargin+"px";
+  zoomInSliderStyleBottomMargin = this.gnuplotBMargin+"px";
+  zoomInSliderStyleLeft = "0";
+  zoomInSliderStyleWidth = "0";
 
   constructor() { }
 
   ngOnInit() {
   }
+  
+  hideZoomInSlider() {
+    this.zoomInSliderStyleDisplay = "none";
+  }
+  update_cursor(event){
+    //$('#result-image').css('cursor', this.isInPlot(event) ? 'crosshair' : 'default');
+    this.imageCursor = this.isInPlot(event) ? 'crosshair' : 'default';
+  }
+  
+  imageWidth() {
+    return Math.floor(document.getElementById('result-image').offsetWidth);
+  }
+  
+  imageHeight() {
+    return Math.floor(document.getElementById('result-image').offsetHeight);
+  }
+  
+  positionInImage(event) : any {
+    const rect = <HTMLImageElement>document.getElementById('result-image');
+    const x= event.clientX - rect.x;
+    const y= event.clientY - rect.y;
+    return {x: x, y: y};
+  }
+  
+  isInPlot(event) : boolean{
+    const pos = this.positionInImage(event);
+        
+    return pos.x > this.gnuplotLMargin 
+        && pos.x < this.imageWidth() - this.gnuplotRMargin
+        && pos.y > this.gnuplotTMargin
+        && pos.y < this.imageHeight()- this.gnuplotBMargin;
+  }
+  
+  isInImage(event) : boolean{
+    const pos = this.positionInImage(event);
+        
+    return pos.x > 0 
+        && pos.x < this.imageWidth()
+        && pos.y > 0
+        && pos.y < this.imageHeight();
+  }
+  
+  dragStart(event) {
+    //console.log("dragStart inPlot: " + this.isInPlot(event));
+    
+    event.preventDefault();
+    if (event.buttons == 1 && this.isInPlot(event)) {
+      const pos = this.positionInImage(event);
+      this.in_drag_mode = true;
+      this.drag_start_x = pos.x;
+      this.drag_end_x = pos.x;
+      this.drag_start_y = pos.y;
+    }
+  }
 
+  dragging(event) {
+    //console.log("dragging " + this.isInPlot(event));
+    
+    this.update_cursor(event);
+    
+    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);
+      
+      const left = this.drag_start_x < this.drag_end_x ? this.drag_start_x : this.drag_end_x;
+      const width = Math.abs(this.drag_start_x - this.drag_end_x);
+      
+      if (width > 10) {
+        //this.zoomInSliderStyle="position: absolute; left: "+left+"px; width: "+width+"px; top:"+this.gnuplotTMargin+"px; bottom: "+this.gnuplotBMargin+"px;";
+        this.zoomInSliderStyleDisplay = "block";
+        this.zoomInSliderStyleLeft= left+"px";
+        this.zoomInSliderStyleWidth= width+"px";
+      } else {
+        this.hideZoomInSlider();
+      }
+    }
+  }
+  
+  dragStop(event) {
+    //console.log("drag_stop");
+    this.in_drag_mode = false;
+    this.hideZoomInSlider();
+  }
+  
+  dragAbort(event) {
+    //console.log("drag_abort");
+    if (this.in_drag_mode && !this.isInImage(event)) {
+      this.in_drag_mode = false;
+      this.drag_start_x = 0;
+      this.drag_end_x = 0;
+      this.hideZoomInSlider();
+    }
+  }
 }