@antv/f6-plugin/es/time-bar/ui/slider/slider-logic.js

F6 plugin

import { dispatch } from '../../dispatcher';
import { createPlayer } from '../../utils/player';
export default function createLogicer(option) {
  var delegateNode = option.delegateNode,
      leftControl = option.leftControl,
      rightControl = option.rightControl,
      slideInner = option.slideInner,
      data = option.data,
      tickWidth = option.tickWidth,
      slideContainer = option.slideContainer,
      _a = option.speed,
      speed = _a === void 0 ? 100 : _a;
  var start = 0;
  var end = 1;
  var cur = 0;

  function goLeftPercent(percent) {
    if (percent < 0 || percent > 1) return;
    var containerWidth = slideContainer.width;
    updateLeft(percent * containerWidth);
  }

  function goRightPercent(percent) {
    if (percent < 0 || percent > 1) return;
    var containerWidth = slideContainer.width;
    updateRight(percent * containerWidth);
  }

  function goNext() {
    var controlWidth = rightControl.width;
    var containerWidth = slideContainer.width;
    if (cur > containerWidth - controlWidth) return;
    cur += tickWidth;
    updateRight(cur);
  }

  function goPrev() {
    if (cur < 0) return;
    cur -= tickWidth;
    updateRight(cur);
  }

  var player = createPlayer(goNext, speed);

  function getSlideInnerWidth() {
    return rightControl.left - leftControl.left + leftControl.width;
  }

  function getDataItem(value) {
    var containerWidth = slideContainer.width;
    var index = value / containerWidth * data.length;
    return data[Math.floor(index)];
  }

  function updateLeft(value, isChangeSliderWidth) {
    var _a;

    if (isChangeSliderWidth === void 0) {
      isChangeSliderWidth = true;
    }

    var controlWidth = leftControl.width;
    var containerWidth = slideContainer.width;
    if (value < 0) value = 0;
    if (value > containerWidth - controlWidth) value = containerWidth - controlWidth;
    (_a = leftControl.onLeftChange) === null || _a === void 0 ? void 0 : _a.call(leftControl, value);
    leftControl.setStyle('left', value);
    isChangeSliderWidth && slideInner.setStyle('width', getSlideInnerWidth());
    slideInner.setStyle('left', value < 0 ? 0 : value);
    var data = getDataItem(value);

    if (data) {
      leftControl.setText(data.date);
      start = value / containerWidth;
      dispatch('RANGE_CHANGE', {
        value: [start, end]
      });
    }
  }

  function updateRight(value, isChangeSliderWidth) {
    var _a;

    if (isChangeSliderWidth === void 0) {
      isChangeSliderWidth = true;
    }

    var controlWidth = rightControl.width;
    var containerWidth = slideContainer.width;
    if (value < 0) value = 0;
    if (value >= containerWidth - controlWidth) value = containerWidth - controlWidth;
    (_a = rightControl.onLeftChange) === null || _a === void 0 ? void 0 : _a.call(rightControl, value);
    rightControl.setStyle('left', value);
    isChangeSliderWidth && slideInner.setStyle('width', getSlideInnerWidth());
    var data = getDataItem(value + controlWidth);

    if (data) {
      cur = value;
      rightControl.setText(data.date);
      end = (value + controlWidth) / containerWidth;
      dispatch('RANGE_CHANGE', {
        value: [start, end]
      });
    }
  }

  function updateSlideInner(value) {
    var controlWidth = rightControl.width;
    var slideWidth = slideInner.width;
    var containerWidth = slideContainer.width;
    if (value < 0) value = 0;
    if (value > containerWidth - slideWidth) value = containerWidth - slideWidth;
    updateLeft(value, false);
    updateRight(value + slideWidth - controlWidth, false);
  }

  var map = new Map();
  map.set(leftControl, {
    getStart: function getStart() {
      return leftControl.left;
    },
    handler: updateLeft
  });
  map.set(rightControl, {
    getStart: function getStart() {
      return rightControl.left;
    },
    handler: updateRight
  });
  map.set(slideInner, {
    getStart: function getStart() {
      return slideInner.left;
    },
    handler: updateSlideInner
  });
  var startX = 0;
  var startLeft = 0;
  var dragingNode;
  delegateNode.on('panstart', function (e) {
    if (!e.uiNode) return;
    dragingNode = undefined;
    var drager = map.get(e.uiNode);

    if (drager) {
      dragingNode = e.uiNode;
      startX = e.clientX;
      startLeft = drager.getStart();
    }
  });
  delegateNode.on('panmove', function (e) {
    if (!dragingNode) return;
    var drager = map.get(dragingNode);
    var delta = e.clientX - startX;
    drager.handler(startLeft + delta);
  });
  return {
    goLeftPercent: goLeftPercent,
    goRightPercent: goRightPercent,
    goNext: goNext,
    goPrev: goPrev,
    player: player
  };
}