1 | import { a as __extends } from './tslib.es6-863e3717.js';
|
2 | import { U as Utils } from './Utils-5f9f1f09.js';
|
3 | import { select, scaleTime, drag, event } from 'd3';
|
4 | import { C as Component } from './Component-5b66527b.js';
|
5 | import { T as TemporalXAxisComponent } from './TemporalXAxisComponent-daca2af1.js';
|
6 |
|
7 | var PlaybackControls = (function (_super) {
|
8 | __extends(PlaybackControls, _super);
|
9 | function PlaybackControls(renderTarget, initialTimeStamp) {
|
10 | if (initialTimeStamp === void 0) { initialTimeStamp = null; }
|
11 | var _this = _super.call(this, renderTarget) || this;
|
12 | _this.handleRadius = 7;
|
13 | _this.minimumPlaybackInterval = 1000;
|
14 | _this.playbackInterval = null;
|
15 | _this.selectedTimeStamp = initialTimeStamp;
|
16 | return _this;
|
17 | }
|
18 | Object.defineProperty(PlaybackControls.prototype, "currentTimeStamp", {
|
19 | get: function () {
|
20 | return this.selectedTimeStamp;
|
21 | },
|
22 | enumerable: false,
|
23 | configurable: true
|
24 | });
|
25 | PlaybackControls.prototype.render = function (start, end, onSelectTimeStamp, options, playbackSettings) {
|
26 | var _this = this;
|
27 | this.end = end;
|
28 | this.selectTimeStampCallback = onSelectTimeStamp;
|
29 | this.chartOptions.setOptions(options);
|
30 | this.playbackSettings = playbackSettings;
|
31 | this.timeFormatter = Utils.timeFormat(true, false, this.chartOptions.offset, this.chartOptions.is24HourTime, null, null, this.chartOptions.dateLocale);
|
32 | var targetElement = select(this.renderTarget);
|
33 | _super.prototype.themify.call(this, targetElement, this.chartOptions.theme);
|
34 | targetElement.html('');
|
35 | var sliderContainer = targetElement.append('div')
|
36 | .classed('tsi-playback-timeline', true);
|
37 | var sliderContainerWidth = sliderContainer.node().clientWidth;
|
38 | var sliderContainerHeight = sliderContainer.node().clientHeight;
|
39 | this.trackXOffset = this.handleRadius + 8;
|
40 | this.trackYOffset = Math.floor(sliderContainerHeight / 2);
|
41 | this.trackWidth = sliderContainerWidth - (2 * this.trackXOffset);
|
42 | this.timeStampToPosition = scaleTime()
|
43 | .domain([start, end])
|
44 | .range([0, this.trackWidth]);
|
45 | var timeAxisContainer = sliderContainer.append('div')
|
46 | .classed('tsi-playback-axis', true)
|
47 | .style('top', this.trackYOffset + 6 + "px")
|
48 | .style('left', this.trackXOffset + "px")
|
49 | .style('width', this.trackWidth + "px");
|
50 | var timeAxis = new TimeAxis(timeAxisContainer.node());
|
51 | timeAxis.render(this.chartOptions, this.timeStampToPosition);
|
52 | var gWrapper = sliderContainer
|
53 | .append('svg')
|
54 | .append('g');
|
55 | sliderContainer.append('div')
|
56 | .classed('tsi-playback-input', true)
|
57 | .style('left', this.trackXOffset + "px")
|
58 | .style('width', this.trackWidth + "px");
|
59 | this.track = gWrapper
|
60 | .append('g')
|
61 | .classed('tsi-playback-track', true);
|
62 | gWrapper.call(drag()
|
63 | .container(sliderContainer.select('.tsi-playback-input').node())
|
64 | .on('start.interrupt', function () { gWrapper.interrupt(); })
|
65 | .on('start drag', function () {
|
66 | _this.onDrag(event.x);
|
67 | })
|
68 | .on('end', function () {
|
69 | _this.onDragEnd();
|
70 | }));
|
71 | this.track.append('line')
|
72 | .classed('tsi-left-of-handle', true)
|
73 | .attr('y1', this.trackYOffset)
|
74 | .attr('y2', this.trackYOffset);
|
75 | this.track.append('line')
|
76 | .classed('tsi-right-of-handle', true)
|
77 | .attr('y1', this.trackYOffset)
|
78 | .attr('y2', this.trackYOffset);
|
79 | this.handleElement = gWrapper.append('circle')
|
80 | .classed('tsi-playback-handle', true)
|
81 | .attr('r', this.handleRadius)
|
82 | .attr('cy', this.trackYOffset);
|
83 | this.controlsContainer = targetElement.append('div')
|
84 | .classed('tsi-playback-buttons', true);
|
85 | this.playButton = this.controlsContainer.append('button')
|
86 | .classed('tsi-play-button', this.playbackInterval === null)
|
87 | .classed('tsi-pause-button', this.playbackInterval !== null)
|
88 | .on('click', function () {
|
89 | if (_this.playbackInterval === null) {
|
90 | _this.play();
|
91 | }
|
92 | else {
|
93 | _this.pause();
|
94 | }
|
95 | });
|
96 | this.controlsContainer.append('span')
|
97 | .classed('tsi-playback-timestamp', true)
|
98 | .style('margin', "0 " + this.trackXOffset + "px");
|
99 | this.selectedTimeStamp = this.selectedTimeStamp || start;
|
100 | var handlePosition = this.timeStampToPosition(this.selectedTimeStamp);
|
101 | this.updateSelection(handlePosition, this.selectedTimeStamp);
|
102 | };
|
103 | PlaybackControls.prototype.play = function () {
|
104 | if (this.playbackInterval === null) {
|
105 |
|
106 |
|
107 | var playbackIntervalMs = Math.max(this.playbackSettings.intervalMillis || this.minimumPlaybackInterval, this.minimumPlaybackInterval);
|
108 | this.next();
|
109 | this.playbackInterval = window.setInterval(this.next.bind(this), playbackIntervalMs);
|
110 | this.playButton
|
111 | .classed('tsi-play-button', false)
|
112 | .classed('tsi-pause-button', true);
|
113 | }
|
114 | };
|
115 | PlaybackControls.prototype.pause = function () {
|
116 |
|
117 |
|
118 | if (this.playbackInterval !== null) {
|
119 | window.clearInterval(this.playbackInterval);
|
120 | this.playbackInterval = null;
|
121 | this.playButton
|
122 | .classed('tsi-play-button', true)
|
123 | .classed('tsi-pause-button', false);
|
124 | }
|
125 | };
|
126 | PlaybackControls.prototype.next = function () {
|
127 |
|
128 |
|
129 | if (this.selectedTimeStamp.valueOf() === this.end.valueOf()) {
|
130 | return;
|
131 | }
|
132 | var newValue = this.selectedTimeStamp.valueOf() + this.playbackSettings.stepSizeMillis;
|
133 | newValue = Math.min(newValue, this.end.valueOf());
|
134 | this.selectedTimeStamp = new Date(newValue);
|
135 | var handlePosition = this.timeStampToPosition(this.selectedTimeStamp);
|
136 | this.updateSelection(handlePosition, this.selectedTimeStamp);
|
137 | this.selectTimeStampCallback(this.selectedTimeStamp);
|
138 | };
|
139 | PlaybackControls.prototype.clamp = function (number, min, max) {
|
140 | var clamped = Math.max(number, min);
|
141 | return Math.min(clamped, max);
|
142 | };
|
143 | PlaybackControls.prototype.onDrag = function (positionX) {
|
144 | this.wasPlayingWhenDragStarted = this.wasPlayingWhenDragStarted ||
|
145 | (this.playbackInterval !== null);
|
146 | this.pause();
|
147 | var handlePosition = this.clamp(positionX, 0, this.trackWidth);
|
148 | this.selectedTimeStamp = this.timeStampToPosition.invert(handlePosition);
|
149 | this.updateSelection(handlePosition, this.selectedTimeStamp);
|
150 | };
|
151 | PlaybackControls.prototype.onDragEnd = function () {
|
152 | this.selectTimeStampCallback(this.selectedTimeStamp);
|
153 | if (this.wasPlayingWhenDragStarted) {
|
154 | this.play();
|
155 | this.wasPlayingWhenDragStarted = false;
|
156 | }
|
157 | };
|
158 | PlaybackControls.prototype.updateSelection = function (handlePositionX, timeStamp) {
|
159 | this.track.select('.tsi-left-of-handle')
|
160 | .attr('x1', this.trackXOffset)
|
161 | .attr('x2', this.trackXOffset + handlePositionX);
|
162 | this.track.select('.tsi-right-of-handle')
|
163 | .attr('x1', this.trackXOffset + handlePositionX)
|
164 | .attr('x2', this.trackXOffset + this.trackWidth);
|
165 | this.handleElement
|
166 | .attr('cx', this.trackXOffset + handlePositionX);
|
167 | this.controlsContainer
|
168 | .select('.tsi-playback-timestamp')
|
169 | .text(this.timeFormatter(timeStamp));
|
170 | };
|
171 | return PlaybackControls;
|
172 | }(Component));
|
173 | var TimeAxis = (function (_super) {
|
174 | __extends(TimeAxis, _super);
|
175 | function TimeAxis(renderTarget) {
|
176 | return _super.call(this, renderTarget) || this;
|
177 | }
|
178 | TimeAxis.prototype.render = function (options, timeScale) {
|
179 | this.chartOptions.setOptions(options);
|
180 | this.x = timeScale;
|
181 | if (this.chartOptions.xAxisHidden) {
|
182 | return;
|
183 | }
|
184 | var targetElement = select(this.renderTarget);
|
185 | targetElement.html('');
|
186 | this.chartWidth = targetElement.node().clientWidth;
|
187 | this.xAxis = targetElement.append('svg')
|
188 | .classed('xAxis', true)
|
189 | .data([this.x]);
|
190 | this.drawXAxis(0, true, true);
|
191 | };
|
192 | return TimeAxis;
|
193 | }(TemporalXAxisComponent));
|
194 |
|
195 | export { PlaybackControls as P };
|