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 3438185..b0ed93f 100644
--- a/pdb-js/src/app/plot-view/plot-view.component.html
+++ b/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)">
= new EventEmitter();
+ @Output()
+ zoomWithDateAnchor : EventEmitter = new EventEmitter();
in_drag_mode = false;
drag_start_x = 0;
@@ -57,9 +59,9 @@ export class PlotViewComponent implements OnInit {
}
positionInImage(event) : any {
- const rect = 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;
+ }
}
\ No newline at end of file
diff --git a/pdb-js/src/app/visualization-page/visualization-page.component.html b/pdb-js/src/app/visualization-page/visualization-page.component.html
index 12dd889..de97c78 100644
--- a/pdb-js/src/app/visualization-page/visualization-page.component.html
+++ b/pdb-js/src/app/visualization-page/visualization-page.component.html
@@ -84,7 +84,10 @@
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 3d7185d..8b624c6 100644
--- a/pdb-js/src/app/visualization-page/visualization-page.component.ts
+++ b/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);
+ }
}
diff --git a/plan.txt b/plan.txt
index 5fda154..645c26a 100644
--- a/plan.txt
+++ b/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