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

F6 plugin

import { createSegmentNode } from '@antv/f6-ui';
import { dispatch, subscribe } from '../../dispatcher';
import { CONTROL_NEXT, CONTROL_PREV, RANGE_CHANGE, SLIDER_PAUSE, SLIDER_PLAY, PROGRESS_TICK_SELECTED_STYLE, PROGRESS_TICK, PROGRESS_TICK_LINE_STYLE, PROGRESS_TICK_TEXT_STYLE, PROGRESS_TICK_UNSELECTED_STYLE, SLIDER_START, SLIDER_END, SPEED_CHANGE } from '../../utils/const';
import { throttle } from '@antv/util';
import { createPlayer } from '../../utils/player';

var createTickProgressBar = function createTickProgressBar(option) {
  var _a, _b, _c, _d, _e;

  var data = option.data;
  var _f = option.tick,
      _g = _f.start,
      start = _g === void 0 ? SLIDER_START : _g,
      _h = _f.end,
      end = _h === void 0 ? SLIDER_END : _h,
      width = _f.width,
      padding = _f.padding;
  console.log(option);
  var selectedTickStyle = Object.assign({}, PROGRESS_TICK_SELECTED_STYLE, (_a = option === null || option === void 0 ? void 0 : option.tick) === null || _a === void 0 ? void 0 : _a.selectedTickStyle);
  var unselectedTickStyle = Object.assign({}, PROGRESS_TICK_UNSELECTED_STYLE, (_b = option === null || option === void 0 ? void 0 : option.tick) === null || _b === void 0 ? void 0 : _b.unSelectedTickStyle);
  var context = {}; // 数据

  context.data = data; // 整个bar的宽度

  context.width = width;
  context.padding = padding || '10 0'; // 高亮

  context.selectedFill = selectedTickStyle.fill; // 默认

  context.unSelectFill = unselectedTickStyle.fill; // 每个刻度的间隔

  context.gap = PROGRESS_TICK.gap; // 每个刻度的高度

  context.tickBoxHeight = ((_c = option === null || option === void 0 ? void 0 : option.tick) === null || _c === void 0 ? void 0 : _c.tickBoxHeight) || PROGRESS_TICK.tickBoxHeight; // 刻度下面的线的样式

  context.lineStyle = Object.assign({}, PROGRESS_TICK_LINE_STYLE, (_d = option === null || option === void 0 ? void 0 : option.tick) === null || _d === void 0 ? void 0 : _d.tickLineStyle); // 刻度下面文本样式

  context.textStyle = Object.assign({}, PROGRESS_TICK_TEXT_STYLE, (_e = option === null || option === void 0 ? void 0 : option.tick) === null || _e === void 0 ? void 0 : _e.tickLabelStyle); // 每个刻度的宽度

  context.tickWidth = width / data.length; // 每个文本宽度相当于多少个刻度，用来布局文本

  context.count = Math.floor(context.textStyle.width / context.tickWidth);
  context.start = start;
  context.end = end;
  context.selects = [];
  var node = createTickProgressBarNode(context);
  context.tickBoxs = node.queryAll('.tick-box');
  initPlayer(context);
  bindEvents(node, context);
  return node;
}; // 创建节点


function createTickProgressBarNode(context) {
  var data = context.data,
      tickWidth = context.tickWidth,
      count = context.count,
      width = context.width,
      gap = context.gap,
      tickBoxHeight = context.tickBoxHeight,
      textStyle = context.textStyle,
      lineStyle = context.lineStyle,
      start = context.start,
      end = context.end,
      unSelectFill = context.unSelectFill;
  var html = "\n  <div id='slider'>\n    " + data.reduce(function (prev, cur, index) {
    return prev += "\n        <div class='ticker'> \n          <div class='tick-box' disFromStart='" + index * tickWidth + "'></div>\n          " + (index % count == 0 ? "\n              <div class='tick-desc' > \n                <shape class='line' type='rect'/>\n                <div class='text'>" + cur.date + "</div>\n              </div>" : '') + "\n        </div>";
  }, '') + "\n  </div>\n";
  var css = "\n  #slider {\n    width: " + width + ";\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: flex-start;\n    padding: " + context.padding + ";\n  }\n\n  .ticker {\n    width: " + (tickWidth - gap) + ";\n    display: flex;\n    background-opacity: 0;\n    align-items: center;\n  }\n\n  .tick-box {\n    width: " + (tickWidth - gap) + ";\n    height: " + tickBoxHeight + ";\n    background:  " + unSelectFill + ";\n  }\n\n  .tick-desc {\n    display: flex;\n    align-items: center;\n  }\n\n  .text{\n    width: 0;\n    height: " + textStyle.fontSize + ";\n    text-align:center;\n    color: " + textStyle.fill + ";\n    font-size: " + textStyle.fontSize + ";\n  }\n\n  .text text{\n    white-space: nowrap;\n  }\n\n  .line {\n    width: " + lineStyle.width + ";\n    height: " + lineStyle.height + ";\n    background: " + lineStyle.fill + ";\n    margin: 2 0;\n  }\n";
  var node = createSegmentNode(html, css);

  node.didMount = function () {
    context.start = start * width;
    context.end = end * width;
    select(context.start, context.end, context);
  };

  return node;
} // 绑定事件


function bindEvents(node, context) {
  var startX = 0;
  var isStart = false;
  var startLeft = 0;
  var selectThrottle = throttle(select, 30, {
    trailing: true,
    leading: true
  });
  node.on('panstart', function (e) {
    isStart = false;
    if (!e.uiNode) return;

    if (e.uiNode.getAttribute('class') === 'tick-box') {
      isStart = true;
      startX = e.clientX;
      startLeft = e.uiNode.getAttribute('disFromStart');
      clearAllSelect(context);
    }
  });
  node.on('panmove', function (e) {
    if (!isStart) return;
    var delta = e.clientX - startX;
    selectThrottle(startLeft, startLeft + delta, context);
  });
  node.on('tap', function (e) {
    if (e.uiNode && e.uiNode.getAttribute('class') === 'tick-box') {
      selectSingle(e.uiNode, context);
    }
  });
} // 初始化播放器


function initPlayer(context) {
  var goNext = function goNext() {
    context.end += context.tickWidth;
    select(context.start, context.end, context);
  };

  var goPrev = function goPrev() {
    context.end -= context.tickWidth;
    select(context.start, context.end, context);
  };

  var player = createPlayer(goNext, 1000);
  subscribe(CONTROL_NEXT, goNext);
  subscribe(CONTROL_PREV, goPrev);
  subscribe(SLIDER_PLAY, player.play);
  subscribe(SLIDER_PAUSE, player.stop);
  subscribe(SPEED_CHANGE, player.setSpeed);
} // 选中刻度函数


function select(start, end, context) {
  var max = Math.max(start, end);
  var min = Math.min(start, end);
  context.start = min;
  context.end = max;
  clearAllSelect(context);
  context.tickBoxs.forEach(function (tickBox) {
    if (context.selects.includes(tickBox)) return;

    if (tickBox.getAttribute('disFromStart') >= min && tickBox.getAttribute('disFromStart') <= max) {
      tickBox.setStyle('backgroundColor', context.selectedFill);
      context.selects.push(tickBox);
    }
  });

  if (context.selects.length > 0) {
    dispatch(RANGE_CHANGE, {
      value: [context.selects[0].getAttribute('disFromStart') / context.width, context.selects[context.selects.length - 1].getAttribute('disFromStart') / context.width]
    });
  }
} // 清除选中


function clearAllSelect(context) {
  context.selects.forEach(function (box) {
    box.setStyle('backgroundColor', context.unSelectFill);
  });
  context.selects = [];
} // 选中单个box


function selectSingle(tickBox, context) {
  clearAllSelect(context);
  context.selects.push(tickBox);
  context.start = context.end = tickBox.getAttribute('disFromStart');
  dispatch(RANGE_CHANGE, {
    value: [tickBox.getAttribute('disFromStart') / context.width, tickBox.getAttribute('disFromStart') / context.width]
  });
  tickBox.setStyle('backgroundColor', context.selectedFill);
}

export default createTickProgressBar;