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 {
background: #ccc;
opacity:0.4;
cursor: zoom-in;
}

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

@@ -200,6 +200,7 @@ Vue.component('result-view', {
return {
in_drag_mode: false,
drag_start_x: 0,
drag_start_y: 0,
drag_end_x: 0,
zoomInSliderStyle: "display: none;",
};
@@ -229,19 +230,32 @@ Vue.component('result-view', {
imageWidth: function() {
return Math.floor($('#result').width());
},
isInPlot: function(x){
return x > gnuplotLMargin && x < this.imageWidth() - gnuplotRMargin;
update_cursor: function(event){
$('#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) {
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.drag_start_x = event.x;
this.drag_end_x = event.x;
this.drag_start_y = event.y;
}
},
dragging: function(event) {
this.update_cursor(event);
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);
@@ -267,7 +281,7 @@ Vue.component('result-view', {
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 imageWidth = Math.floor($('#result').width());
const imageWidth = this.imageWidth();
const widthPlotArea = imageWidth - gnuplotLMargin - gnuplotRMargin;
const startPxWithinPlotArea = startPxInImage - gnuplotLMargin;
const endPxWithinPlotArea = endPxInImage - gnuplotLMargin;
@@ -281,11 +295,28 @@ Vue.component('result-view', {
}
}
},
drag_abort: function() {
this.in_drag_mode = false;
this.drag_start_x = 0;
this.drag_end_x = 0;
this.hideZoomInSlider();
drag_abort: function(event) {
if (this.in_drag_mode && !this.isInPlot(event)) {
this.in_drag_mode = false;
this.drag_start_x = 0;
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: {
@@ -299,7 +330,8 @@ Vue.component('result-view', {
v-on:mousedown="drag_start"
v-on:mousemove="dragging"
v-on:mouseup="drag_stop"
v-on:click="drag_abort">
v-on:mouseout="drag_abort"
v-on:click="zoom_click">
<div
id="zoom-in-slider"
v-if="in_drag_mode"