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

zoom-in on click events

Browse Source
This commit is contained in:
Andreas Huber
2018-08-18 08:32:57 +02:00
parent b01d267300
commit acc2fa42ef
2 changed files with 45 additions and 12 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,6 +97,7 @@ textarea {
#zoom-in-slider { #zoom-in-slider {
background: #ccc; background: #ccc;
opacity:0.4; opacity:0.4;
cursor: zoom-in;
} }

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

@@ -200,6 +200,7 @@ Vue.component('result-view', {
return { return {
in_drag_mode: false, in_drag_mode: false,
drag_start_x: 0, drag_start_x: 0,
drag_start_y: 0,
drag_end_x: 0, drag_end_x: 0,
zoomInSliderStyle: "display: none;", zoomInSliderStyle: "display: none;",
}; };
@@ -229,19 +230,32 @@ Vue.component('result-view', {
imageWidth: function() { imageWidth: function() {
return Math.floor($('#result').width()); return Math.floor($('#result').width());
}, },
isInPlot: function(x){ update_cursor: function(event){
return x > gnuplotLMargin && x < this.imageWidth() - gnuplotRMargin; $('#result-image').css('cursor', this.isInPlot(event) ? 'zoom-in' : 'pointer');
},
isInPlot: function(event){
const rect = $('#result-image').offset();
const x= event.clientX - rect.left;
const y= event.clientY - rect.top;
return x > gnuplotLMargin
&& x < this.imageWidth() - gnuplotRMargin
&& y > gnuplotTMargin
&& y < Math.floor($('#result').height()) - gnuplotBMargin;
}, },
drag_start: function(event) { drag_start: function(event) {
event.preventDefault(); event.preventDefault();
if (event.buttons == 1 && this.isInPlot(event.x) && !data.searchBar.imageLastUsedParams.keyOutside) { if (event.buttons == 1 && this.isInPlot(event) && !data.searchBar.imageLastUsedParams.keyOutside) {
this.in_drag_mode = true; this.in_drag_mode = true;
this.drag_start_x = event.x; this.drag_start_x = event.x;
this.drag_end_x = event.x; this.drag_end_x = event.x;
this.drag_start_y = event.y;
} }
}, },
dragging: function(event) { dragging: function(event) {
this.update_cursor(event);
if (this.in_drag_mode && event.buttons == 1 && !data.searchBar.imageLastUsedParams.keyOutside){ if (this.in_drag_mode && event.buttons == 1 && !data.searchBar.imageLastUsedParams.keyOutside){
this.drag_end_x = Math.max(Math.min(event.x, this.imageWidth()-gnuplotRMargin), gnuplotLMargin); this.drag_end_x = Math.max(Math.min(event.x, this.imageWidth()-gnuplotRMargin), gnuplotLMargin);
@@ -267,10 +281,10 @@ Vue.component('result-view', {
const startPxInImage = Math.min(this.drag_start_x, this.drag_end_x); const startPxInImage = Math.min(this.drag_start_x, this.drag_end_x);
const endPxInImage = Math.max(this.drag_start_x, this.drag_end_x); const endPxInImage = Math.max(this.drag_start_x, this.drag_end_x);
const imageWidth = Math.floor($('#result').width()); const imageWidth = this.imageWidth();
const widthPlotArea = imageWidth - gnuplotLMargin - gnuplotRMargin; const widthPlotArea = imageWidth - gnuplotLMargin - gnuplotRMargin;
const startPxWithinPlotArea = startPxInImage - gnuplotLMargin; const startPxWithinPlotArea = startPxInImage - gnuplotLMargin;
const endPxWithinPlotArea = endPxInImage - gnuplotLMargin; const endPxWithinPlotArea = endPxInImage - gnuplotLMargin;
const startPercentOfDateRange = startPxWithinPlotArea / widthPlotArea; const startPercentOfDateRange = startPxWithinPlotArea / widthPlotArea;
const endPercentOfDateRange = 1-endPxWithinPlotArea / widthPlotArea; const endPercentOfDateRange = 1-endPxWithinPlotArea / widthPlotArea;
@@ -281,11 +295,28 @@ Vue.component('result-view', {
} }
} }
}, },
drag_abort: function() { drag_abort: function(event) {
this.in_drag_mode = false; if (this.in_drag_mode && !this.isInPlot(event)) {
this.drag_start_x = 0; this.in_drag_mode = false;
this.drag_end_x = 0; this.drag_start_x = 0;
this.hideZoomInSlider(); this.drag_end_x = 0;
this.hideZoomInSlider();
}
},
zoom_click: function(event) {
if (this.isInPlot(event) && this.drag_start_x == event.x && this.drag_start_y == event.y) {
// zoom in
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));
plotCurrent();
}
} }
}, },
computed: { computed: {
@@ -299,7 +330,8 @@ Vue.component('result-view', {
v-on:mousedown="drag_start" v-on:mousedown="drag_start"
v-on:mousemove="dragging" v-on:mousemove="dragging"
v-on:mouseup="drag_stop" v-on:mouseup="drag_stop"
v-on:click="drag_abort"> v-on:mouseout="drag_abort"
v-on:click="zoom_click">
<div <div
id="zoom-in-slider" id="zoom-in-slider"
v-if="in_drag_mode" v-if="in_drag_mode"