Mercurial > gemma
changeset 5061:37371727f704 time-sliding
client: improve time-slider code
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Mon, 09 Mar 2020 15:00:21 +0100 |
parents | ed1d963017e7 |
children | da28a58eb10d |
files | client/src/components/TimeSlider.vue |
diffstat | 1 files changed, 10 insertions(+), 4 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/TimeSlider.vue Mon Mar 09 12:52:37 2020 +0100 +++ b/client/src/components/TimeSlider.vue Mon Mar 09 15:00:21 2020 +0100 @@ -64,6 +64,9 @@ import { format, setHours, setMinutes } from "date-fns"; let zoom = null; +let xScale = null; +let xAxis = null; + export default { name: "timeslider", data() { @@ -129,6 +132,7 @@ close() { this.$store.commit("application/showTimeSlider", false); }, + rescaleSlider(scaleFactor) { const tx = -scaleFactor * @@ -154,7 +158,9 @@ marginLeft = 0; d3.timeFormatDefaultLocale(localeDateString); + xScale = this.getScale(); this.newX = this.getScale(); + xAxis = this.getAxes(); d3.select(".sliderContainer svg").remove(); let svg = d3 .select(".sliderContainer") @@ -173,7 +179,7 @@ .append("g") .attr("class", "axis--x") .attr("transform", `translate(${marginLeft}, ${marginTop})`) - .call(this.getAxes()); + .call(xAxis); // create rectanlge on the slider area to capture mouse events const eventRect = svg @@ -252,9 +258,9 @@ .tickFormat(axesFormat); }, zoomed() { - let scale = this.getScale(); - this.newX = d3.event.transform.rescaleX(scale); - d3.select(".axis--x").call(this.getAxes()); + this.newX = d3.event.transform.rescaleX(xScale); + xAxis.scale(this.newX); + d3.select(".axis--x").call(xAxis); d3.select(".line").attr("x", this.newX(d3.isoParse(this.selectedTime))); }, onClick() {