From 920851b39e985d92cacde2ad3745e8422d5dac5d Mon Sep 17 00:00:00 2001 From: Andreas Huber Date: Mon, 28 Oct 2019 17:37:50 +0100 Subject: [PATCH] add range selection in plot view --- .../app/plot-view/plot-view.component.html | 24 +++- .../app/plot-view/plot-view.component.scss | 7 ++ .../src/app/plot-view/plot-view.component.ts | 114 ++++++++++++++++++ .../visualization-page.component.scss | 1 + .../visualization-page.component.ts | 6 + 5 files changed, 148 insertions(+), 4 deletions(-) diff --git a/pdb-js/src/app/plot-view/plot-view.component.html b/pdb-js/src/app/plot-view/plot-view.component.html index 34e94c9..3438185 100644 --- a/pdb-js/src/app/plot-view/plot-view.component.html +++ b/pdb-js/src/app/plot-view/plot-view.component.html @@ -1,5 +1,21 @@ - - +
+ +
+
{{errorMessage}}
diff --git a/pdb-js/src/app/plot-view/plot-view.component.scss b/pdb-js/src/app/plot-view/plot-view.component.scss index 0cbb92a..a5133e5 100644 --- a/pdb-js/src/app/plot-view/plot-view.component.scss +++ b/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; } \ No newline at end of file diff --git a/pdb-js/src/app/plot-view/plot-view.component.ts b/pdb-js/src/app/plot-view/plot-view.component.ts index 05662db..f228b6c 100644 --- a/pdb-js/src/app/plot-view/plot-view.component.ts +++ b/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 = 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(); + } + } } diff --git a/pdb-js/src/app/visualization-page/visualization-page.component.scss b/pdb-js/src/app/visualization-page/visualization-page.component.scss index f5e0a94..904debf 100644 --- a/pdb-js/src/app/visualization-page/visualization-page.component.scss +++ b/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 { diff --git a/pdb-js/src/app/visualization-page/visualization-page.component.ts b/pdb-js/src/app/visualization-page/visualization-page.component.ts index 2d73696..a38748c 100644 --- a/pdb-js/src/app/visualization-page/visualization-page.component.ts +++ b/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 = '';