@antv/f6-plugin/lib/time-bar/ui/progress-bar/trend.js

F6 plugin

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.createSimpleProgressBar = createSimpleProgressBar;
exports.createTrendProgressBar = createTrendProgressBar;

var _f6Ui = require("@antv/f6-ui");

var _sliderLogic = _interopRequireDefault(require("../slider/slider-logic"));

var _simpleSlider = _interopRequireDefault(require("../slider/simple-slider"));

var _trendSlider = _interopRequireDefault(require("../slider/trend-slider"));

var _slideTicker = _interopRequireDefault(require("../slider/slide-ticker"));

var _dispatcher = require("../../dispatcher");

var _const = require("../../utils/const");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function createSimpleProgressBar(_a) {
  var _b = _a.data,
      data = _b === void 0 ? [] : _b,
      width = _a.width,
      slider = _a.slider,
      sliderTick = _a.sliderTick; // 创建slider

  var nodes = (0, _simpleSlider.default)(slider); // 创建progressBar

  var progressBar = createProgressBar({
    data: data,
    width: width,
    start: slider.start,
    end: slider.end,
    sliderTick: sliderTick
  }, nodes);
  return progressBar;
}

function createTrendProgressBar(_a) {
  var data = _a.data,
      width = _a.width,
      slider = _a.slider,
      sliderTick = _a.sliderTick,
      trend = _a.trend; // 创建slider

  var nodes = (0, _trendSlider.default)({
    slider: slider,
    trend: trend
  }); // 创建progressBar

  var progressBar = createProgressBar({
    data: data,
    width: width,
    start: slider.start,
    end: slider.end,
    sliderTick: sliderTick
  }, nodes);
  return progressBar;
}

function createProgressBar(_a, sliderNodes) {
  var _b = _a.data,
      data = _b === void 0 ? [] : _b,
      width = _a.width,
      _c = _a.start,
      start = _c === void 0 ? _const.SLIDER_START : _c,
      _d = _a.end,
      end = _d === void 0 ? _const.SLIDER_END : _d,
      sliderTick = _a.sliderTick;
  var _e = sliderTick.width,
      sliderTickWidth = _e === void 0 ? 0 : _e; // 每个刻度宽度

  var tickWidth = sliderTickWidth / data.length;
  var progressBar = createProgressBarNode(width);
  var slideContainer = sliderNodes.slideContainer,
      leftControl = sliderNodes.leftControl,
      rightControl = sliderNodes.rightControl,
      slideInner = sliderNodes.slideInner;
  var tiker = (0, _slideTicker.default)(data, tickWidth, sliderTick);
  progressBar.appendChild(slideContainer, tiker);
  var logic = (0, _sliderLogic.default)({
    data: data,
    slideContainer: slideContainer,
    leftControl: leftControl,
    rightControl: rightControl,
    slideInner: slideInner,
    tickWidth: tickWidth,
    delegateNode: progressBar
  }); // 节点挂载之后初始化

  slideContainer.didMount = function () {
    logic.goLeftPercent(start);
    logic.goRightPercent(end);
  };

  (0, _dispatcher.subscribe)(_const.SLIDER_PLAY, logic.player.play);
  (0, _dispatcher.subscribe)(_const.SLIDER_PAUSE, logic.player.stop);
  (0, _dispatcher.subscribe)(_const.SPEED_CHANGE, logic.player.setSpeed);
  (0, _dispatcher.subscribe)(_const.CONTROL_NEXT, logic.goNext);
  (0, _dispatcher.subscribe)(_const.CONTROL_PREV, logic.goPrev);
  return progressBar;
}

function createProgressBarNode(width) {
  var html = "\n    <div id='slider'></div>\n  ";
  var css = "\n    #slider {\n      width: " + width + ";\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    }\n  ";
  return (0, _f6Ui.createSegmentNode)(html, css);
}