andi/perfdb
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Activity

zoom by mouse wheel

Browse Source
This commit is contained in:
Andreas Huber
2018-09-13 09:26:43 +02:00
parent a2e63cca44
commit 861797acf7
2 changed files with 29 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
pdb-ui/src/main/resources/resources/css/design.css
View File

@@ -97,7 +97,6 @@ textarea {
#zoom-in-slider {
background: #ccc;
opacity:0.4;
cursor: zoom-in;
}

37
pdb-ui/src/main/resources/resources/js/ui.js
View File

@@ -231,7 +231,7 @@ Vue.component('result-view', {
return Math.floor($('#result').width());
},
update_cursor: function(event){
$('#result-image').css('cursor', this.isInPlot(event) ? 'zoom-in' : 'default');
$('#result-image').css('cursor', this.isInPlot(event) ? 'crosshair' : 'default');
},
isInPlot: function(event){
const rect = $('#result-image').offset();
@@ -303,18 +303,19 @@ Vue.component('result-view', {
this.hideZoomInSlider();
}
},
zoom_click: function(event) {
if (this.isInPlot(event) && this.drag_start_x == event.x && this.drag_start_y == event.y) {
// zoom in
zoom_by_scroll: function(event) {
if (this.isInPlot(event) && event.wheelDelta != 0) {
const dateRangeAsString = data.searchBar.imageLastUsedParams.dateRange;
const dateRange = parseDateRange(dateRangeAsString);
const widthPlotArea = this.imageWidth() - gnuplotLMargin - gnuplotRMargin;
const cursorPxWithinPlotArea = event.x - gnuplotLMargin;
const cursorPercentOfDateRange = cursorPxWithinPlotArea / widthPlotArea;
shiftDate(dateRangeAsString, cursorPercentOfDateRange-0.25, (cursorPercentOfDateRange-0.75));
const zoomFactor = event.wheelDelta > 0 ? 0.5 : 2;
shiftDateByAnchor(dateRangeAsString, cursorPercentOfDateRange, zoomFactor);
plotCurrent();
}
}
@@ -331,7 +332,7 @@ Vue.component('result-view', {
v-on:mousemove="dragging"
v-on:mouseup="drag_stop"
v-on:mouseout="drag_abort"
v-on:click="zoom_click">
v-on:mousewheel="zoom_by_scroll">
<div
id="zoom-in-slider"
v-if="in_drag_mode"
@@ -977,6 +978,26 @@ function shiftDate(dateRange, factorStartDate, factorEndDate)
setDateRange(newStartDate, newEndDate);
}
/**
* 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
*/
function shiftDateByAnchor(dateRange, anchorInPercentOfDateRange, zoomFactor)
{
const dateRangeParsed = 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});;
setDateRange(newStartDate, newEndDate);
}
function showLoadingIcon()
{
hidePlotAndGallery();