text: /**
   * @file 基于 G 的播放轴组件
   * @author blackganglion
   */
  import { __extends } from "tslib";
  import { deepMix, findIndex, get } from '@antv/util';
  import Button from './button';
  import BaseComponent from '../base';
  var TIMELINE_START = 'timelinestart';
  var TIMELINE_CHANGE = 'timelinechange';
  var TIMELINE_END = 'timelineend';
  var TIMELINE_UPDATE = 'timelineupdate';
  var PADDING_LEFT = 20;
  var PADDING_RIGHT = 20;
  /**
   * 参考示例
   * https://www.gapminder.org/tools/#$state$time$value=1870&delay:100;;&chart-type=bubbles
   */
  var TimeLine = /** @class */ (function (_super) {
      __extends(TimeLine, _super);
      function TimeLine(cfg) {
          var _this = _super.call(this, deepMix({}, {
              speed: 1,
              loop: false,
          }, cfg)) || this;
          _this.onTimeSelectMouseMove = function (e) {
              e.stopPropagation();
              e.preventDefault();
              var x = get(e, 'touches.0.pageX', e.pageX);
              var offsetX = x - _this.prevX;
              _this.setTimeSelectX(offsetX);
              _this.prevX = x;
          };
          _this.onTimeSelectMouseUp = function () {
              _this.syncCurrnentTick();
              _this.emit(TIMELINE_END, null);
              // 取消事件
              var containerDOM = _this.getCanvas().get('container');
              if (containerDOM) {
                  containerDOM.removeEventListener('mousemove', _this.onTimeSelectMouseMove);
                  containerDOM.removeEventListener('mouseup', _this.onTimeSelectMouseUp);
                  // 防止滑动到 canvas 外部之后，状态丢失
                  containerDOM.removeEventListener('mouseleave', _this.onTimeSelectMouseUp);
                  // 移动端事件
                  containerDOM.removeEventListener('touchmove', _this.onTimeSelectMouseMove);
                  containerDOM.removeEventListener('touchend', _this.onTimeSelectMouseUp);
                  containerDOM.removeEventListener('touchcancel', _this.onTimeSelectMouseUp);
              }
          };
          _this.onTimeSelectMouseDown = function (e) {
              // 取出原生事件
              var event = e.originalEvent;
              event.stopPropagation();
              event.preventDefault();
              if (_this.isPlay === false) {
                  _this.emit(TIMELINE_START, null);
              }
              else {
                  // 取消播放状态
                  _this.isPlay = false;
                  // 拖动过程中的播放暂停不需要调整 tick 位置，防止偏移
                  _this.changePlayStatus(false);
              }
              _this.prevX = get(event, 'touches.0.pageX', event.pageX);
              // 开始滑动的时候，绑定 move 和 up 事件
              var containerDOM = _this.getCanvas().get('container');
              containerDOM.addEventListener('mousemove', _this.onTimeSelectMouseMove);
              containerDOM.addEventListener('mouseup', _this.onTimeSelectMouseUp);
              containerDOM.addEventListener('mouseleave', _this.onTimeSelectMouseUp);
              // 移动端事件
              containerDOM.addEventListener('touchmove', _this.onTimeSelectMouseMove);
              containerDOM.addEventListener('touchend', _this.onTimeSelectMouseUp);
              containerDOM.addEventListener('touchcancel', _this.onTimeSelectMouseUp);
          };
          return _this;
      }
      TimeLine.prototype.renderInner = function () {
          // 基类抽象方法，暂无实现
      };
      // 更新配置
      TimeLine.prototype.update = function (cfg) {
          this.config = deepMix({}, this.config, cfg);
          var ticks = this.config.ticks;
          this.currentTick = ticks.includes(this.currentTick) ? this.currentTick : ticks[0];
          this.renderPlayButton();
          this.renderTimeLine();
          this.renderTimeSelect(this.currentTick);
          // 更新时需要触发一次，来过滤数据
          this.emit(TIMELINE_UPDATE, this.currentTick);
      };
      TimeLine.prototype.destroy = function () {
          _super.prototype.destroy.call(this);
          this.timeLineButton.destroy();
          this.timeLineButton.off();
          this.timeSelect.off();
          if (this.playHandler) {
              window.cancelAnimationFrame(this.playHandler);
          }
      };
      TimeLine.prototype.init = function () {
          var _a = this.config, ticks = _a.ticks, defaultCurrentTick = _a.defaultCurrentTick;
          if (ticks && ticks.length) {
              this.currentTick = this.config.ticks.includes(defaultCurrentTick) ? defaultCurrentTick : ticks[0];
              this.renderPlayButton();
              this.renderTimeLine();
              this.renderTimeSelect(this.currentTick);
              this.initEvent();
          }
      };
      TimeLine.prototype.renderPlayButton = function () {
          var _a = this.config, height = _a.height, x = _a.x, y = _a.y;
          var ratio = 0.8;
          var r = (height / 2) * ratio;
          if (this.timeLineButton) {
              this.timeLineButton.update({
                  x: x + r,
                  y: y + r + (height * (1 - ratio)) / 2,
                  r: r,
              });
          }
          else {
              this.timeLineButton = new Button({
                  container: this.group,
                  x: x + r,
                  y: y + r + (height * (1 - ratio)) / 2,
                  r: r,
                  isPlay: this.isPlay,
              });
          }
      };
      TimeLine.prototype.getTimeLinePath = function () {
          var _a = this.timeLine, x = _a.x, y = _a.y, width = _a.width, height = _a.height;
          var r = height / 2;
          if (width > 0) {
              return ("M" + x + ", " + y +
                  ("A" + r + "," + r + " 90 0,0 " + x + "," + (y + height)) +
                  ("L" + (x + width) + ", " + (y + height)) +
                  ("A" + r + "," + r + " 90 0,0 " + (x + width) + "," + y) +
                  ("L" + x + ", " + y));
          }
          return [];
      };
      TimeLine.prototype.renderTimeLine = function () {
          var _this = this;
          var _a = this.config, width = _a.width, height = _a.height, ticks = _a.ticks, x = _a.x, y = _a.y;
          if (!this.timeLine) {
              this.timeLine = {};
          }
          /** 默认高度是真实高度 15% */
          this.timeLine.height = height * 0.15;
          this.timeLine.x = x + height + PADDING_LEFT;
          this.timeLine.y = y + (height / 2 - this.timeLine.height / 2);
          this.timeLine.width = width - this.timeLine.x - PADDING_RIGHT;
          if (this.timeLine && this.timeLine.shape) {
              this.timeLine.shape.attr('path', this.getTimeLinePath());
          }
          else {
              this.timeLine.shape = this.group.addShape('path', {
                  attrs: {
                      path: this.getTimeLinePath(),
                      fill: '#607889',
                      opacity: 0.2,
                  },
              });
          }
          var interval = this.timeLine.width / (ticks.length - 1);
          this.tickPosList = [];
          if (this.timeLine.textList && this.timeLine.textList.length) {
              this.timeLine.textList.forEach(function (text) {
                  text.destroy();
              });
          }
          var lastX = -Infinity;
          this.timeLine.textList = ticks.map(function (tick, index) {
              _this.tickPosList.push(_this.timeLine.x + index * interval);
              var text = _this.group.addShape('text', {
                  attrs: {
                      x: _this.timeLine.x + index * interval,
                      y: _this.timeLine.y + _this.timeLine.height + 5,
                      text: tick,
                      textAlign: 'center',
                      textBaseline: 'top',
                      fill: '#607889',
                      opacity: 0.35,
                  },
              });
              var bbox = text.getBBox();
              // 抽样，标签与标签间距不小于 10
              if (bbox.minX > lastX) {
                  text.show();
                  lastX = bbox.minX + bbox.width + 10;
              }
              else {
                  text.hide();
              }
              return text;
          });
      };
      TimeLine.prototype.renderTimeSelect = function (tickValue) {
          var _a = this.config, ticks = _a.ticks, height = _a.height;
          var interval = this.timeLine.width / (ticks.length - 1);
          var index = findIndex(ticks, function (tick) { return tick === tickValue; });
          var x = this.timeLine.x + index * interval;
          var y = this.config.y + height / 2;
          var r = height * 0.15;
          if (this.timeSelect) {
              this.timeSelect.attr('x', x);
              this.timeSelect.attr('y', y);
              this.timeSelect.attr('r', r);
          }
          else {
              this.timeSelect = this.group.addShape('circle', {
                  attrs: {
                      x: x,
                      y: y,
                      r: r,
                      fill: '#607889',
                  },
              });
          }
          if (this.timeSelectText) {
              this.timeSelectText.attr('x', x);
              this.timeSelectText.attr('y', y - height * 0.15 - 14);
              this.timeSelectText.attr('text', this.currentTick);
          }
          else {
              this.timeSelectText = this.group.addShape('text', {
                  attrs: {
                      x: x,
                      y: y - height * 0.15 - 14,
                      text: this.currentTick,
                      textAlign: 'center',
                      textBaseline: 'top',
                      fill: '#607889',
                  },
              });
          }
      };
      /** 输入当前圆点位置，输出离哪个 tick 的位置最近 */
      TimeLine.prototype.adjustTickIndex = function (timeSelectX) {
          for (var i = 0; i < this.tickPosList.length - 1; i++) {
              if (this.tickPosList[i] <= timeSelectX && timeSelectX <= this.tickPosList[i + 1]) {
                  return Math.abs(this.tickPosList[i] - timeSelectX) < Math.abs(timeSelectX - this.tickPosList[i + 1])
                      ? i
                      : i + 1;
              }
          }
      };
      /** 拖动或自动播放过程中，设置 TimeSelect 的位置 */
      TimeLine.prototype.setTimeSelectX = function (offsetX) {
          var timeSelectX = this.timeSelect.attr('x') + offsetX;
          // 防止左右溢出
          if (timeSelectX < this.timeLine.x) {
              timeSelectX = this.timeLine.x;
          }
          if (timeSelectX > this.timeLine.x + this.timeLine.width) {
              timeSelectX = this.timeLine.x + this.timeLine.width;
              // 正在播放场景
              if (this.isPlay) {
                  // 如果是循环
                  if (this.config.loop) {
                      // 当前滑动点已经处于最后一个 tick 上，才能重置回去，继续循环
                      if (this.timeSelect.attr('x') === this.timeLine.x + this.timeLine.width) {
                          timeSelectX = this.timeLine.x;
                      }
                  }
                  else {
                      this.isPlay = false;
                      this.changePlayStatus();
                  }
              }
          }
          this.timeSelect.attr('x', timeSelectX);
          this.timeSelectText.attr('x', timeSelectX);
          var index = this.adjustTickIndex(timeSelectX);
          if (this.currentTick !== this.config.ticks[index]) {
              this.currentTick = this.config.ticks[index];
              this.timeSelectText.attr('text', this.currentTick);
              this.emit(TIMELINE_CHANGE, this.currentTick);
          }
          this.getCanvas().draw();
      };
      /** 同步圆点到 currnentTick */
      TimeLine.prototype.syncCurrnentTick = function () {
          var _this = this;
          var ticks = this.config.ticks;
          var interval = this.timeLine.width / (ticks.length - 1);
          var index = findIndex(ticks, function (tick) { return tick === _this.currentTick; });
          var x = this.timeLine.x + index * interval;
          this.timeSelect.attr('x', x);
          this.timeSelectText.attr('x', x);
          this.getCanvas().draw();
      };
      TimeLine.prototype.startPlay = function () {
          var _this = this;
          return window.requestAnimationFrame(function () {
              var _a = _this.config, speed = _a.speed, ticks = _a.ticks;
              var width = _this.timeLine.width;
              var tickInterval = width / ticks.length;
              var offsetX = tickInterval / ((speed * 1000) / 60);
              _this.setTimeSelectX(offsetX);
              if (_this.isPlay) {
                  _this.playHandler = _this.startPlay();
              }
          });
      };
      TimeLine.prototype.changePlayStatus = function (isSync) {
          if (isSync === void 0) { isSync = true; }
          this.timeLineButton.update({
              isPlay: this.isPlay,
          });
          if (this.isPlay) {
              // 开始播放
              this.playHandler = this.startPlay();
              this.emit(TIMELINE_START, null);
          }
          else {
              // 结束播放
              if (this.playHandler) {
                  window.cancelAnimationFrame(this.playHandler);
                  if (isSync) {
                      this.syncCurrnentTick();
                      this.emit(TIMELINE_END, null);
                  }
              }
          }
          this.getCanvas().draw();
      };
      TimeLine.prototype.initEvent = function () {
          var _this = this;
          /** 播放/暂停事件 */
          this.timeLineButton.on('click', function () {
              _this.isPlay = !_this.isPlay;
              _this.changePlayStatus();
          });
          /** 播放轴上圆点滑动事件 */
          this.timeSelect.on('mousedown', function (event) {
              _this.onTimeSelectMouseDown(event);
          });
      };
      return TimeLine;
  }(BaseComponent));
  export default TimeLine;
  //# sourceMappingURL=index.js.map