Mercurial > gemma
changeset 5160:c86ce16937fd
client: Refactor code to let zoom works on the cursor
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Fri, 03 Apr 2020 09:55:02 +0200 |
parents | e688e79a51e8 |
children | 1ece2e6ac754 |
files | client/src/components/TimeSlider.vue |
diffstat | 1 files changed, 34 insertions(+), 26 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/TimeSlider.vue Thu Apr 02 16:12:24 2020 +0200 +++ b/client/src/components/TimeSlider.vue Fri Apr 03 09:55:02 2020 +0200 @@ -237,6 +237,9 @@ marginLeft = 0; d3.timeFormatDefaultLocale(localeDateString); + const toIsoDate = d => { + return d.toISOString(); + }; xScale = this.getScale(); xAxis = this.getAxes(); let svg = d3 @@ -252,31 +255,7 @@ .extent([[0, 0], [(svgWidth, svgHeight)]]) .on("zoom", this.zoomed); - svg - .append("g") - .attr("class", "axis--x") - .attr("transform", `translate(${marginLeft}, ${marginTop})`) - .call(xAxis); - - // create rectanlge on the slider area to capture mouse events - const eventRect = svg - .append("rect") - .attr("id", "zoom") - .attr("class", "zoom") - .attr("width", svgWidth) - .attr("height", svgHeight) - .attr("fill", "white") - .attr("opacity", 0.2) - .on("mouseover", () => { - svg.select(".zoom").attr("cursor", "move"); - }); - eventRect.call(zoom).on("click", this.onClick); - - const toIsoDate = d => { - return d.toISOString(); - }; - - let drag = d3 + const drag = d3 .drag() .on("start", () => { d3.select(".line") @@ -294,6 +273,33 @@ ); }); + const main = svg + .append("g") + .attr("id", "zoom") + .attr("class", "zoom") + .attr("width", svgWidth) + .attr("height", svgHeight) + .on("mouseover", () => { + svg.select(".zoom").attr("cursor", "move"); + }); + + main + .append("rect") + .attr("class", "main") + .attr("width", svgWidth) + .attr("height", svgHeight) + .attr("opacity", 0) + .on("mouseover", () => { + svg.select(".main").attr("cursor", "move"); + }); + + main + .append("g") + .attr("class", "axis--x") + .attr("id", "zoom") + .attr("transform", `translate(${marginLeft}, ${marginTop})`) + .call(xAxis); + svg .append("rect") .attr("class", "future") @@ -305,7 +311,7 @@ .attr("opacity", 0.3); // Create cursor to indicate to the selected time - svg + main .append("rect") .attr("class", "line") .attr("id", "scrubber") @@ -320,6 +326,8 @@ svg.select(".line").attr("cursor", "e-resize"); }) .call(drag); + + main.call(zoom).on("click", this.onClick); }, getScale() { return d3