add range selection in plot view

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

@@ -1,5 +1,21 @@
-<img
+<div
   *ngIf="imageUrl"
-  src="{{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();
+    }
+  }
 }

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

@@ -52,6 +52,7 @@
   grid-area: results;
   overflow: hidden;
   margin-right: 1em;
+  position:relative; /* ??? */ 
 }
 
 #plot-button-bar {

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

@@ -85,6 +85,11 @@ export class VisualizationPageComponent implements OnInit {
     
   plot(){
     const that = this;
+    
+    that.plotView.errorMessage = '';
+    that.plotView.imageUrl = '';
+    
+    
     var aggregates = [];
     aggregates.push(this.selectedPlotType.value.id);
     if (this.selectedCombinePlotType.value){
@@ -111,6 +116,7 @@ export class VisualizationPageComponent implements OnInit {
     this.plotService.sendPlotRequest(request).subscribe(function(plotResponse){
       console.log("response: " + JSON.stringify(plotResponse));
       that.plotView.imageUrl = "http://"+window.location.hostname+':8080/'+plotResponse.imageUrl;
+      that.plotView.errorMessage = '';
     },
     error => {
       that.plotView.imageUrl = '';