tsiclient/PlaybackControls-6261fffc.js

import { a as __extends } from './tslib.es6-f952ba6f.js';
import { U as Utils } from './Utils-38a0872e.js';
import { select, scaleTime, drag } from 'd3';
import { C as Component } from './Component-5173b5ea.js';
import { T as TemporalXAxisComponent } from './TemporalXAxisComponent-1ecfb135.js';

var PlaybackControls = /** @class */ (function (_super) {
    __extends(PlaybackControls, _super);
    function PlaybackControls(renderTarget, initialTimeStamp) {
        if (initialTimeStamp === void 0) { initialTimeStamp = null; }
        var _this = _super.call(this, renderTarget) || this;
        _this.handleRadius = 7;
        _this.minimumPlaybackInterval = 1000; // 1 second
        _this.playbackInterval = null;
        _this.selectedTimeStamp = initialTimeStamp;
        return _this;
    }
    Object.defineProperty(PlaybackControls.prototype, "currentTimeStamp", {
        get: function () {
            return this.selectedTimeStamp;
        },
        enumerable: false,
        configurable: true
    });
    PlaybackControls.prototype.render = function (start, end, onSelectTimeStamp, options, playbackSettings) {
        var _this = this;
        this.end = end;
        this.selectTimeStampCallback = onSelectTimeStamp;
        this.chartOptions.setOptions(options);
        this.playbackSettings = playbackSettings;
        this.timeFormatter = Utils.timeFormat(true, false, this.chartOptions.offset, this.chartOptions.is24HourTime, null, null, this.chartOptions.dateLocale);
        var targetElement = select(this.renderTarget);
        _super.prototype.themify.call(this, targetElement, this.chartOptions.theme);
        targetElement.html('');
        var sliderContainer = targetElement.append('div')
            .classed('tsi-playback-timeline', true);
        var sliderContainerWidth = sliderContainer.node().clientWidth;
        var sliderContainerHeight = sliderContainer.node().clientHeight;
        this.trackXOffset = this.handleRadius + 8;
        this.trackYOffset = Math.floor(sliderContainerHeight / 2);
        this.trackWidth = sliderContainerWidth - (2 * this.trackXOffset);
        this.timeStampToPosition = scaleTime()
            .domain([start, end])
            .range([0, this.trackWidth]);
        var timeAxisContainer = sliderContainer.append('div')
            .classed('tsi-playback-axis', true)
            .style('top', this.trackYOffset + 6 + "px")
            .style('left', this.trackXOffset + "px")
            .style('width', this.trackWidth + "px");
        var timeAxis = new TimeAxis(timeAxisContainer.node());
        timeAxis.render(this.chartOptions, this.timeStampToPosition);
        var gWrapper = sliderContainer
            .append('svg')
            .append('g');
        sliderContainer.append('div')
            .classed('tsi-playback-input', true)
            .style('left', this.trackXOffset + "px")
            .style('width', this.trackWidth + "px");
        this.track = gWrapper
            .append('g')
            .classed('tsi-playback-track', true);
        gWrapper.call(drag()
            .container(sliderContainer.select('.tsi-playback-input').node())
            .on('start.interrupt', function () { gWrapper.interrupt(); })
            .on('start drag', function (event) {
            _this.onDrag(event.x);
        })
            .on('end', function () {
            _this.onDragEnd();
        }));
        this.track.append('line')
            .classed('tsi-left-of-handle', true)
            .attr('y1', this.trackYOffset)
            .attr('y2', this.trackYOffset);
        this.track.append('line')
            .classed('tsi-right-of-handle', true)
            .attr('y1', this.trackYOffset)
            .attr('y2', this.trackYOffset);
        this.handleElement = gWrapper.append('circle')
            .classed('tsi-playback-handle', true)
            .attr('r', this.handleRadius)
            .attr('cy', this.trackYOffset);
        this.controlsContainer = targetElement.append('div')
            .classed('tsi-playback-buttons', true);
        this.playButton = this.controlsContainer.append('button')
            .classed('tsi-play-button', this.playbackInterval === null)
            .classed('tsi-pause-button', this.playbackInterval !== null)
            .on('click', function () {
            if (_this.playbackInterval === null) {
                _this.play();
            }
            else {
                _this.pause();
            }
        });
        this.controlsContainer.append('span')
            .classed('tsi-playback-timestamp', true)
            .style('margin', "0 " + this.trackXOffset + "px");
        this.selectedTimeStamp = this.selectedTimeStamp || start;
        var handlePosition = this.timeStampToPosition(this.selectedTimeStamp);
        this.updateSelection(handlePosition, this.selectedTimeStamp);
    };
    PlaybackControls.prototype.play = function () {
        if (this.playbackInterval === null) {
            // Default to an interval if one is not provided. Also, the interval should
            // not be lower than the minimum playback interval.
            var playbackIntervalMs = Math.max(this.playbackSettings.intervalMillis || this.minimumPlaybackInterval, this.minimumPlaybackInterval);
            this.next();
            this.playbackInterval = window.setInterval(this.next.bind(this), playbackIntervalMs);
            this.playButton
                .classed('tsi-play-button', false)
                .classed('tsi-pause-button', true);
        }
    };
    PlaybackControls.prototype.pause = function () {
        // Pause only if component is in 'play' mode (i.e. an interval has ben set)
        // otherwise, do nothing.
        if (this.playbackInterval !== null) {
            window.clearInterval(this.playbackInterval);
            this.playbackInterval = null;
            this.playButton
                .classed('tsi-play-button', true)
                .classed('tsi-pause-button', false);
        }
    };
    PlaybackControls.prototype.next = function () {
        // If we've reached the end of the available time stamps, do nothing until 
        // the end moves forward.
        if (this.selectedTimeStamp.valueOf() === this.end.valueOf()) {
            return;
        }
        var newValue = this.selectedTimeStamp.valueOf() + this.playbackSettings.stepSizeMillis;
        newValue = Math.min(newValue, this.end.valueOf());
        this.selectedTimeStamp = new Date(newValue);
        var handlePosition = this.timeStampToPosition(this.selectedTimeStamp);
        this.updateSelection(handlePosition, this.selectedTimeStamp);
        this.selectTimeStampCallback(this.selectedTimeStamp);
    };
    PlaybackControls.prototype.clamp = function (number, min, max) {
        var clamped = Math.max(number, min);
        return Math.min(clamped, max);
    };
    PlaybackControls.prototype.onDrag = function (positionX) {
        this.wasPlayingWhenDragStarted = this.wasPlayingWhenDragStarted ||
            (this.playbackInterval !== null);
        this.pause();
        var handlePosition = this.clamp(positionX, 0, this.trackWidth);
        this.selectedTimeStamp = this.timeStampToPosition.invert(handlePosition);
        this.updateSelection(handlePosition, this.selectedTimeStamp);
    };
    PlaybackControls.prototype.onDragEnd = function () {
        this.selectTimeStampCallback(this.selectedTimeStamp);
        if (this.wasPlayingWhenDragStarted) {
            this.play();
            this.wasPlayingWhenDragStarted = false;
        }
    };
    PlaybackControls.prototype.updateSelection = function (handlePositionX, timeStamp) {
        this.track.select('.tsi-left-of-handle')
            .attr('x1', this.trackXOffset)
            .attr('x2', this.trackXOffset + handlePositionX);
        this.track.select('.tsi-right-of-handle')
            .attr('x1', this.trackXOffset + handlePositionX)
            .attr('x2', this.trackXOffset + this.trackWidth);
        this.handleElement
            .attr('cx', this.trackXOffset + handlePositionX);
        this.controlsContainer
            .select('.tsi-playback-timestamp')
            .text(this.timeFormatter(timeStamp));
    };
    return PlaybackControls;
}(Component));
var TimeAxis = /** @class */ (function (_super) {
    __extends(TimeAxis, _super);
    function TimeAxis(renderTarget) {
        return _super.call(this, renderTarget) || this;
    }
    TimeAxis.prototype.render = function (options, timeScale) {
        this.chartOptions.setOptions(options);
        this.x = timeScale;
        if (this.chartOptions.xAxisHidden) {
            return;
        }
        var targetElement = select(this.renderTarget);
        targetElement.html('');
        this.chartWidth = targetElement.node().clientWidth;
        this.xAxis = targetElement.append('svg')
            .classed('xAxis', true)
            .data([this.x]);
        this.drawXAxis(0, true, true);
    };
    return TimeAxis;
}(TemporalXAxisComponent));

export { PlaybackControls as P };