From 775b420e85a5c0d7066be2c71b42df1868f4c547 Mon Sep 17 00:00:00 2001 From: Andreas Huber Date: Thu, 31 Oct 2019 18:56:19 +0100 Subject: [PATCH] zoom by mousewheel --- .../app/plot-view/plot-view.component.html | 3 +- .../src/app/plot-view/plot-view.component.ts | 38 +++++++++++++++++-- .../visualization-page.component.html | 5 ++- .../visualization-page.component.ts | 27 ++++++++++++- plan.txt | 1 + 5 files changed, 66 insertions(+), 8 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 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