blob: 5412b1f5bcc80b97a8889862f9a2d2724dcb2978 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
import React from 'react'
import PlayButtonContainer from '../../../containers/app/timeline/PlayButtonContainer'
import { convertTickToPercentage } from '../../../util/timeline'
class TimelineControlsComponent extends React.Component {
onTimelineClick(e) {
const percentage = e.nativeEvent.offsetX / this.timeline.clientWidth
const tick = Math.floor(percentage * (this.props.lastSimulatedTick + 1))
this.props.goToTick(tick)
}
render() {
return (
<div className="timeline-controls">
<PlayButtonContainer/>
<div
className="timeline"
ref={timeline => (this.timeline = timeline)}
onClick={this.onTimelineClick.bind(this)}
>
<div
className="time-marker"
style={{
left: convertTickToPercentage(
this.props.currentTick,
this.props.lastSimulatedTick,
),
}}
/>
{this.props.sectionTicks.map(sectionTick => (
<div
key={sectionTick}
className="section-marker"
style={{
left: convertTickToPercentage(
sectionTick,
this.props.lastSimulatedTick,
),
}}
title="Topology changes at this tick"
/>
))}
</div>
</div>
)
}
}
export default TimelineControlsComponent
|
