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

F6 plugin

import { createSegmentNode } from '@antv/f6-ui';
import bindDragEvents from '../slider/slider-logic';
import createSimpleSlider from '../slider/simple-slider';
import createTrendSlider from '../slider/trend-slider';
import createTiker from '../slider/slide-ticker';
import { subscribe } from '../../dispatcher';
import { CONTROL_NEXT, CONTROL_PREV, SLIDER_END, SLIDER_PAUSE, SLIDER_PLAY, SLIDER_START, SPEED_CHANGE } from '../../utils/const';
export function createSimpleProgressBar(_a) {
  var _b = _a.data,
      data = _b === void 0 ? [] : _b,
      width = _a.width,
      slider = _a.slider,
      sliderTick = _a.sliderTick; // 创建slider

  var nodes = createSimpleSlider(slider); // 创建progressBar

  var progressBar = createProgressBar({
    data: data,
    width: width,
    start: slider.start,
    end: slider.end,
    sliderTick: sliderTick
  }, nodes);
  return progressBar;
}
export function createTrendProgressBar(_a) {
  var data = _a.data,
      width = _a.width,
      slider = _a.slider,
      sliderTick = _a.sliderTick,
      trend = _a.trend; // 创建slider

  var nodes = createTrendSlider({
    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 ? SLIDER_START : _c,
      _d = _a.end,
      end = _d === void 0 ? 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 = createTiker(data, tickWidth, sliderTick);
  progressBar.appendChild(slideContainer, tiker);
  var logic = bindDragEvents({
    data: data,
    slideContainer: slideContainer,
    leftControl: leftControl,
    rightControl: rightControl,
    slideInner: slideInner,
    tickWidth: tickWidth,
    delegateNode: progressBar
  }); // 节点挂载之后初始化

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

  subscribe(SLIDER_PLAY, logic.player.play);
  subscribe(SLIDER_PAUSE, logic.player.stop);
  subscribe(SPEED_CHANGE, logic.player.setSpeed);
  subscribe(CONTROL_NEXT, logic.goNext);
  subscribe(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 createSegmentNode(html, css);
}