From 4bc504d2bd687cec6b082330fe28831aae7601be Mon Sep 17 00:00:00 2001 From: nvtngan Date: Thu, 9 Jul 2020 01:55:50 -0500 Subject: [PATCH] click on time line #187 4 --- JobCircularLayout/index.html | 1 + JobCircularLayout/src/js/main.js | 2 ++ JobCircularLayout/src/js/simulation.js | 7 +++- JobCircularLayout/src/js/timeline.js | 43 ++++++++++++++++++++++-- JobCircularLayout/src/style/timeline.css | 20 +++++++++++ 5 files changed, 69 insertions(+), 4 deletions(-) create mode 100644 JobCircularLayout/src/style/timeline.css diff --git a/JobCircularLayout/index.html b/JobCircularLayout/index.html index 0ec93aa69..359a90384 100644 --- a/JobCircularLayout/index.html +++ b/JobCircularLayout/index.html @@ -7,6 +7,7 @@ + diff --git a/JobCircularLayout/src/js/main.js b/JobCircularLayout/src/js/main.js index 1e1217f61..19429fc27 100644 --- a/JobCircularLayout/src/js/main.js +++ b/JobCircularLayout/src/js/main.js @@ -44,12 +44,14 @@ function initTimeElement(){ timelineControl = new Timeline('#timelineControl'); timelineControl.callbackPlay = request.start.bind(request); timelineControl.callbackPause = request.pause.bind(request); + timelineControl.step = _.partial(request.request.bind(request),0); request.callbackStop = timelineControl.pause.bind(timelineControl); request.onDataChange.push(timelineControl.domain.bind(timelineControl)); request.onUpdateTime.push(timelineControl.update.bind(timelineControl)); if (request.isRealTime) { + timelineControl.disableHandle(true); request.onStartQuery=()=>timelineControl.meassage.text('query data....'); request.onFinishQuery.push((d)=>(timelineControl.meassage.text(''),d)); request.setInterval(120000); diff --git a/JobCircularLayout/src/js/simulation.js b/JobCircularLayout/src/js/simulation.js index 9660417f1..8f322b329 100644 --- a/JobCircularLayout/src/js/simulation.js +++ b/JobCircularLayout/src/js/simulation.js @@ -25,7 +25,12 @@ class Simulation { } } - request(){ + request(timesexlapse,index){ + if(index!=undefined && this.#data) + if (_.isDate(index)) + this.#index = d3.bisect(this.#data.time_stamp,index) + else + this.#index = index; if (this.isRealTime || (!this.isRealTime&&this.#data===undefined)||(this.#index{}; timeConf={scale:d3.scaleTime().range([0,100])}; #play=()=>{ const self = this; @@ -47,18 +49,51 @@ class Timeline{ this.playbutton.call(self.playbutton_icon); this.timelineHolder = this.el.append('div') - .attr('class',"progress align-self-center") + .attr('class','progress-bar-wrapper align-self-center') .style("width", "80%"); this.timeline = this.timelineHolder.append('div') + .attr('class',"progress") + .style("width", "100%") + .on('click',onClickTimeline) + .append('div') .attr('class','progress-bar') .attr('role',"progressbar") .attr('aria-valuenow',"0") .attr('aria-valuemin',"0") .attr('aria-valuemax',"100"); + this.timelineHandler = this.timelineHolder + .append('div').attr('class','progress-bar-handle align-self-center'); this.meassage = this.el.append('div') .attr('class','message') .style("width", "calc(20% - 80px)") .append('span'); + + this.timelineHandler.call(d3.drag() + .on("start", dragstarted) + .on("drag", dragged) + .on("end", dragended)); + + function dragstarted(d) { + self.pause(); + } + + function dragged(d) { + // d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y); + } + + function dragended(d) { + // d3.select(this).attr("stroke", null); + } + + function onClickTimeline(){ + self.pause(); + const mouse = d3.mouse(this); + const value = mouse[0]/this.getBoundingClientRect().width*100; + self.step(self.timeConf.scale.invert(value)); + } + } + disableHandle(isdisable){ + this.timelineHolder.classed('disabled',isdisable) } play(){ @@ -87,10 +122,12 @@ class Timeline{ this.currentValue = value; else this.currentValue = new Date(value); + const percentage = this.timeConf.scale(this.currentValue) this.timeline - .style("width", `${this.timeConf.scale(this.currentValue)}%`) + .style("width", `${percentage}%`) .attr('aria-valuenow',this.timeConf.scale(this.currentValue)) - .text(this.currentValue.toLocaleString()) + .text(this.currentValue.toLocaleString()); + this.timelineHandler.style('left',`${percentage}%`) } } diff --git a/JobCircularLayout/src/style/timeline.css b/JobCircularLayout/src/style/timeline.css new file mode 100644 index 000000000..6eb160faf --- /dev/null +++ b/JobCircularLayout/src/style/timeline.css @@ -0,0 +1,20 @@ +.progress-bar-wrapper{ + position: relative; +} +.progress-bar-wrapper.disabled{ + pointer-events: none; +} +.progress-bar-wrapper:hover .progress-bar-handle{ + opacity: 1; +} +.progress-bar-handle { + position: absolute; + top: -0.1rem; + width: 1.2rem; + height: 1.2rem; + background-color: var(--primary); + border-radius: 0.6rem; + transform: translateX(-50%); + transition: left .6s ease; + opacity: 0; +}