cione-comp-lib/es/node_modules/echarts/lib/component/timeline/SliderTimelineView.mjs

`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`

import { __extends } from "../../../../tslib/tslib.es6.mjs";
import BoundingRect from "../../../../zrender/lib/core/BoundingRect.mjs";
import { translate, rotate, create } from "../../../../zrender/lib/core/matrix.mjs";
import { applyTransform, createIcon } from "../../util/graphic.mjs";
import { createTextStyle } from "../../label/labelStyle.mjs";
import { getLayoutRect } from "../../util/layout.mjs";
import TimelineView from "./TimelineView.mjs";
import TimelineAxis from "./TimelineAxis.mjs";
import { createSymbol, normalizeSymbolSize, normalizeSymbolOffset } from "../../util/symbol.mjs";
import { asc } from "../../util/number.mjs";
import { each, isString, extend, defaults, bind, retrieve2, merge } from "../../../../zrender/lib/core/util.mjs";
import OrdinalScale from "../../scale/Ordinal.mjs";
import TimeScale from "../../scale/Time.mjs";
import IntervalScale from "../../scale/Interval.mjs";
import { parsePercent } from "../../../../zrender/lib/contain/text.mjs";
import { makeInner } from "../../util/model.mjs";
import { getECData } from "../../util/innerStore.mjs";
import { enableHoverEmphasis } from "../../util/states.mjs";
import { createTooltipMarkup } from "../tooltip/tooltipMarkup.mjs";
import Group from "../../../../zrender/lib/graphic/Group.mjs";
import Line from "../../../../zrender/lib/graphic/shape/Line.mjs";
import ZRText from "../../../../zrender/lib/graphic/Text.mjs";
var PI = Math.PI;
var labelDataIndexStore = makeInner();
var SliderTimelineView = function(_super) {
  __extends(SliderTimelineView2, _super);
  function SliderTimelineView2() {
    var _this = _super !== null && _super.apply(this, arguments) || this;
    _this.type = SliderTimelineView2.type;
    return _this;
  }
  SliderTimelineView2.prototype.init = function(ecModel, api) {
    this.api = api;
  };
  SliderTimelineView2.prototype.render = function(timelineModel, ecModel, api) {
    this.model = timelineModel;
    this.api = api;
    this.ecModel = ecModel;
    this.group.removeAll();
    if (timelineModel.get("show", true)) {
      var layoutInfo_1 = this._layout(timelineModel, api);
      var mainGroup_1 = this._createGroup("_mainGroup");
      var labelGroup = this._createGroup("_labelGroup");
      var axis_1 = this._axis = this._createAxis(layoutInfo_1, timelineModel);
      timelineModel.formatTooltip = function(dataIndex) {
        var name = axis_1.scale.getLabel({
          value: dataIndex
        });
        return createTooltipMarkup("nameValue", {
          noName: true,
          value: name
        });
      };
      each(["AxisLine", "AxisTick", "Control", "CurrentPointer"], function(name) {
        this["_render" + name](layoutInfo_1, mainGroup_1, axis_1, timelineModel);
      }, this);
      this._renderAxisLabel(layoutInfo_1, labelGroup, axis_1, timelineModel);
      this._position(layoutInfo_1, timelineModel);
    }
    this._doPlayStop();
    this._updateTicksStatus();
  };
  SliderTimelineView2.prototype.remove = function() {
    this._clearTimer();
    this.group.removeAll();
  };
  SliderTimelineView2.prototype.dispose = function() {
    this._clearTimer();
  };
  SliderTimelineView2.prototype._layout = function(timelineModel, api) {
    var labelPosOpt = timelineModel.get(["label", "position"]);
    var orient = timelineModel.get("orient");
    var viewRect = getViewRect(timelineModel, api);
    var parsedLabelPos;
    if (labelPosOpt == null || labelPosOpt === "auto") {
      parsedLabelPos = orient === "horizontal" ? viewRect.y + viewRect.height / 2 < api.getHeight() / 2 ? "-" : "+" : viewRect.x + viewRect.width / 2 < api.getWidth() / 2 ? "+" : "-";
    } else if (isString(labelPosOpt)) {
      parsedLabelPos = {
        horizontal: {
          top: "-",
          bottom: "+"
        },
        vertical: {
          left: "-",
          right: "+"
        }
      }[orient][labelPosOpt];
    } else {
      parsedLabelPos = labelPosOpt;
    }
    var labelAlignMap = {
      horizontal: "center",
      vertical: parsedLabelPos >= 0 || parsedLabelPos === "+" ? "left" : "right"
    };
    var labelBaselineMap = {
      horizontal: parsedLabelPos >= 0 || parsedLabelPos === "+" ? "top" : "bottom",
      vertical: "middle"
    };
    var rotationMap = {
      horizontal: 0,
      vertical: PI / 2
    };
    var mainLength = orient === "vertical" ? viewRect.height : viewRect.width;
    var controlModel = timelineModel.getModel("controlStyle");
    var showControl = controlModel.get("show", true);
    var controlSize = showControl ? controlModel.get("itemSize") : 0;
    var controlGap = showControl ? controlModel.get("itemGap") : 0;
    var sizePlusGap = controlSize + controlGap;
    var labelRotation = timelineModel.get(["label", "rotate"]) || 0;
    labelRotation = labelRotation * PI / 180;
    var playPosition;
    var prevBtnPosition;
    var nextBtnPosition;
    var controlPosition = controlModel.get("position", true);
    var showPlayBtn = showControl && controlModel.get("showPlayBtn", true);
    var showPrevBtn = showControl && controlModel.get("showPrevBtn", true);
    var showNextBtn = showControl && controlModel.get("showNextBtn", true);
    var xLeft = 0;
    var xRight = mainLength;
    if (controlPosition === "left" || controlPosition === "bottom") {
      showPlayBtn && (playPosition = [0, 0], xLeft += sizePlusGap);
      showPrevBtn && (prevBtnPosition = [xLeft, 0], xLeft += sizePlusGap);
      showNextBtn && (nextBtnPosition = [xRight - controlSize, 0], xRight -= sizePlusGap);
    } else {
      showPlayBtn && (playPosition = [xRight - controlSize, 0], xRight -= sizePlusGap);
      showPrevBtn && (prevBtnPosition = [0, 0], xLeft += sizePlusGap);
      showNextBtn && (nextBtnPosition = [xRight - controlSize, 0], xRight -= sizePlusGap);
    }
    var axisExtent = [xLeft, xRight];
    if (timelineModel.get("inverse")) {
      axisExtent.reverse();
    }
    return {
      viewRect,
      mainLength,
      orient,
      rotation: rotationMap[orient],
      labelRotation,
      labelPosOpt: parsedLabelPos,
      labelAlign: timelineModel.get(["label", "align"]) || labelAlignMap[orient],
      labelBaseline: timelineModel.get(["label", "verticalAlign"]) || timelineModel.get(["label", "baseline"]) || labelBaselineMap[orient],
      playPosition,
      prevBtnPosition,
      nextBtnPosition,
      axisExtent,
      controlSize,
      controlGap
    };
  };
  SliderTimelineView2.prototype._position = function(layoutInfo, timelineModel) {
    var mainGroup = this._mainGroup;
    var labelGroup = this._labelGroup;
    var viewRect = layoutInfo.viewRect;
    if (layoutInfo.orient === "vertical") {
      var m = create();
      var rotateOriginX = viewRect.x;
      var rotateOriginY = viewRect.y + viewRect.height;
      translate(m, m, [-rotateOriginX, -rotateOriginY]);
      rotate(m, m, -PI / 2);
      translate(m, m, [rotateOriginX, rotateOriginY]);
      viewRect = viewRect.clone();
      viewRect.applyTransform(m);
    }
    var viewBound = getBound(viewRect);
    var mainBound = getBound(mainGroup.getBoundingRect());
    var labelBound = getBound(labelGroup.getBoundingRect());
    var mainPosition = [mainGroup.x, mainGroup.y];
    var labelsPosition = [labelGroup.x, labelGroup.y];
    labelsPosition[0] = mainPosition[0] = viewBound[0][0];
    var labelPosOpt = layoutInfo.labelPosOpt;
    if (labelPosOpt == null || isString(labelPosOpt)) {
      var mainBoundIdx = labelPosOpt === "+" ? 0 : 1;
      toBound(mainPosition, mainBound, viewBound, 1, mainBoundIdx);
      toBound(labelsPosition, labelBound, viewBound, 1, 1 - mainBoundIdx);
    } else {
      var mainBoundIdx = labelPosOpt >= 0 ? 0 : 1;
      toBound(mainPosition, mainBound, viewBound, 1, mainBoundIdx);
      labelsPosition[1] = mainPosition[1] + labelPosOpt;
    }
    mainGroup.setPosition(mainPosition);
    labelGroup.setPosition(labelsPosition);
    mainGroup.rotation = labelGroup.rotation = layoutInfo.rotation;
    setOrigin(mainGroup);
    setOrigin(labelGroup);
    function setOrigin(targetGroup) {
      targetGroup.originX = viewBound[0][0] - targetGroup.x;
      targetGroup.originY = viewBound[1][0] - targetGroup.y;
    }
    function getBound(rect) {
      return [[rect.x, rect.x + rect.width], [rect.y, rect.y + rect.height]];
    }
    function toBound(fromPos, from, to, dimIdx, boundIdx) {
      fromPos[dimIdx] += to[dimIdx][boundIdx] - from[dimIdx][boundIdx];
    }
  };
  SliderTimelineView2.prototype._createAxis = function(layoutInfo, timelineModel) {
    var data = timelineModel.getData();
    var axisType = timelineModel.get("axisType");
    var scale = createScaleByModel(timelineModel, axisType);
    scale.getTicks = function() {
      return data.mapArray(["value"], function(value) {
        return {
          value
        };
      });
    };
    var dataExtent = data.getDataExtent("value");
    scale.setExtent(dataExtent[0], dataExtent[1]);
    scale.calcNiceTicks();
    var axis = new TimelineAxis("value", scale, layoutInfo.axisExtent, axisType);
    axis.model = timelineModel;
    return axis;
  };
  SliderTimelineView2.prototype._createGroup = function(key) {
    var newGroup = this[key] = new Group();
    this.group.add(newGroup);
    return newGroup;
  };
  SliderTimelineView2.prototype._renderAxisLine = function(layoutInfo, group, axis, timelineModel) {
    var axisExtent = axis.getExtent();
    if (!timelineModel.get(["lineStyle", "show"])) {
      return;
    }
    var line = new Line({
      shape: {
        x1: axisExtent[0],
        y1: 0,
        x2: axisExtent[1],
        y2: 0
      },
      style: extend({
        lineCap: "round"
      }, timelineModel.getModel("lineStyle").getLineStyle()),
      silent: true,
      z2: 1
    });
    group.add(line);
    var progressLine = this._progressLine = new Line({
      shape: {
        x1: axisExtent[0],
        x2: this._currentPointer ? this._currentPointer.x : axisExtent[0],
        y1: 0,
        y2: 0
      },
      style: defaults({
        lineCap: "round",
        lineWidth: line.style.lineWidth
      }, timelineModel.getModel(["progress", "lineStyle"]).getLineStyle()),
      silent: true,
      z2: 1
    });
    group.add(progressLine);
  };
  SliderTimelineView2.prototype._renderAxisTick = function(layoutInfo, group, axis, timelineModel) {
    var _this = this;
    var data = timelineModel.getData();
    var ticks = axis.scale.getTicks();
    this._tickSymbols = [];
    each(ticks, function(tick) {
      var tickCoord = axis.dataToCoord(tick.value);
      var itemModel = data.getItemModel(tick.value);
      var itemStyleModel = itemModel.getModel("itemStyle");
      var hoverStyleModel = itemModel.getModel(["emphasis", "itemStyle"]);
      var progressStyleModel = itemModel.getModel(["progress", "itemStyle"]);
      var symbolOpt = {
        x: tickCoord,
        y: 0,
        onclick: bind(_this._changeTimeline, _this, tick.value)
      };
      var el = giveSymbol(itemModel, itemStyleModel, group, symbolOpt);
      el.ensureState("emphasis").style = hoverStyleModel.getItemStyle();
      el.ensureState("progress").style = progressStyleModel.getItemStyle();
      enableHoverEmphasis(el);
      var ecData = getECData(el);
      if (itemModel.get("tooltip")) {
        ecData.dataIndex = tick.value;
        ecData.dataModel = timelineModel;
      } else {
        ecData.dataIndex = ecData.dataModel = null;
      }
      _this._tickSymbols.push(el);
    });
  };
  SliderTimelineView2.prototype._renderAxisLabel = function(layoutInfo, group, axis, timelineModel) {
    var _this = this;
    var labelModel = axis.getLabelModel();
    if (!labelModel.get("show")) {
      return;
    }
    var data = timelineModel.getData();
    var labels = axis.getViewLabels();
    this._tickLabels = [];
    each(labels, function(labelItem) {
      var dataIndex = labelItem.tickValue;
      var itemModel = data.getItemModel(dataIndex);
      var normalLabelModel = itemModel.getModel("label");
      var hoverLabelModel = itemModel.getModel(["emphasis", "label"]);
      var progressLabelModel = itemModel.getModel(["progress", "label"]);
      var tickCoord = axis.dataToCoord(labelItem.tickValue);
      var textEl = new ZRText({
        x: tickCoord,
        y: 0,
        rotation: layoutInfo.labelRotation - layoutInfo.rotation,
        onclick: bind(_this._changeTimeline, _this, dataIndex),
        silent: false,
        style: createTextStyle(normalLabelModel, {
          text: labelItem.formattedLabel,
          align: layoutInfo.labelAlign,
          verticalAlign: layoutInfo.labelBaseline
        })
      });
      textEl.ensureState("emphasis").style = createTextStyle(hoverLabelModel);
      textEl.ensureState("progress").style = createTextStyle(progressLabelModel);
      group.add(textEl);
      enableHoverEmphasis(textEl);
      labelDataIndexStore(textEl).dataIndex = dataIndex;
      _this._tickLabels.push(textEl);
    });
  };
  SliderTimelineView2.prototype._renderControl = function(layoutInfo, group, axis, timelineModel) {
    var controlSize = layoutInfo.controlSize;
    var rotation = layoutInfo.rotation;
    var itemStyle = timelineModel.getModel("controlStyle").getItemStyle();
    var hoverStyle = timelineModel.getModel(["emphasis", "controlStyle"]).getItemStyle();
    var playState = timelineModel.getPlayState();
    var inverse = timelineModel.get("inverse", true);
    makeBtn(layoutInfo.nextBtnPosition, "next", bind(this._changeTimeline, this, inverse ? "-" : "+"));
    makeBtn(layoutInfo.prevBtnPosition, "prev", bind(this._changeTimeline, this, inverse ? "+" : "-"));
    makeBtn(layoutInfo.playPosition, playState ? "stop" : "play", bind(this._handlePlayClick, this, !playState), true);
    function makeBtn(position, iconName, onclick, willRotate) {
      if (!position) {
        return;
      }
      var iconSize = parsePercent(retrieve2(timelineModel.get(["controlStyle", iconName + "BtnSize"]), controlSize), controlSize);
      var rect = [0, -iconSize / 2, iconSize, iconSize];
      var btn = makeControlIcon(timelineModel, iconName + "Icon", rect, {
        x: position[0],
        y: position[1],
        originX: controlSize / 2,
        originY: 0,
        rotation: willRotate ? -rotation : 0,
        rectHover: true,
        style: itemStyle,
        onclick
      });
      btn.ensureState("emphasis").style = hoverStyle;
      group.add(btn);
      enableHoverEmphasis(btn);
    }
  };
  SliderTimelineView2.prototype._renderCurrentPointer = function(layoutInfo, group, axis, timelineModel) {
    var data = timelineModel.getData();
    var currentIndex = timelineModel.getCurrentIndex();
    var pointerModel = data.getItemModel(currentIndex).getModel("checkpointStyle");
    var me = this;
    var callback = {
      onCreate: function(pointer) {
        pointer.draggable = true;
        pointer.drift = bind(me._handlePointerDrag, me);
        pointer.ondragend = bind(me._handlePointerDragend, me);
        pointerMoveTo(pointer, me._progressLine, currentIndex, axis, timelineModel, true);
      },
      onUpdate: function(pointer) {
        pointerMoveTo(pointer, me._progressLine, currentIndex, axis, timelineModel);
      }
    };
    this._currentPointer = giveSymbol(pointerModel, pointerModel, this._mainGroup, {}, this._currentPointer, callback);
  };
  SliderTimelineView2.prototype._handlePlayClick = function(nextState) {
    this._clearTimer();
    this.api.dispatchAction({
      type: "timelinePlayChange",
      playState: nextState,
      from: this.uid
    });
  };
  SliderTimelineView2.prototype._handlePointerDrag = function(dx, dy, e) {
    this._clearTimer();
    this._pointerChangeTimeline([e.offsetX, e.offsetY]);
  };
  SliderTimelineView2.prototype._handlePointerDragend = function(e) {
    this._pointerChangeTimeline([e.offsetX, e.offsetY], true);
  };
  SliderTimelineView2.prototype._pointerChangeTimeline = function(mousePos, trigger) {
    var toCoord = this._toAxisCoord(mousePos)[0];
    var axis = this._axis;
    var axisExtent = asc(axis.getExtent().slice());
    toCoord > axisExtent[1] && (toCoord = axisExtent[1]);
    toCoord < axisExtent[0] && (toCoord = axisExtent[0]);
    this._currentPointer.x = toCoord;
    this._currentPointer.markRedraw();
    var progressLine = this._progressLine;
    if (progressLine) {
      progressLine.shape.x2 = toCoord;
      progressLine.dirty();
    }
    var targetDataIndex = this._findNearestTick(toCoord);
    var timelineModel = this.model;
    if (trigger || targetDataIndex !== timelineModel.getCurrentIndex() && timelineModel.get("realtime")) {
      this._changeTimeline(targetDataIndex);
    }
  };
  SliderTimelineView2.prototype._doPlayStop = function() {
    var _this = this;
    this._clearTimer();
    if (this.model.getPlayState()) {
      this._timer = setTimeout(function() {
        var timelineModel = _this.model;
        _this._changeTimeline(timelineModel.getCurrentIndex() + (timelineModel.get("rewind", true) ? -1 : 1));
      }, this.model.get("playInterval"));
    }
  };
  SliderTimelineView2.prototype._toAxisCoord = function(vertex) {
    var trans = this._mainGroup.getLocalTransform();
    return applyTransform(vertex, trans, true);
  };
  SliderTimelineView2.prototype._findNearestTick = function(axisCoord) {
    var data = this.model.getData();
    var dist = Infinity;
    var targetDataIndex;
    var axis = this._axis;
    data.each(["value"], function(value, dataIndex) {
      var coord = axis.dataToCoord(value);
      var d = Math.abs(coord - axisCoord);
      if (d < dist) {
        dist = d;
        targetDataIndex = dataIndex;
      }
    });
    return targetDataIndex;
  };
  SliderTimelineView2.prototype._clearTimer = function() {
    if (this._timer) {
      clearTimeout(this._timer);
      this._timer = null;
    }
  };
  SliderTimelineView2.prototype._changeTimeline = function(nextIndex) {
    var currentIndex = this.model.getCurrentIndex();
    if (nextIndex === "+") {
      nextIndex = currentIndex + 1;
    } else if (nextIndex === "-") {
      nextIndex = currentIndex - 1;
    }
    this.api.dispatchAction({
      type: "timelineChange",
      currentIndex: nextIndex,
      from: this.uid
    });
  };
  SliderTimelineView2.prototype._updateTicksStatus = function() {
    var currentIndex = this.model.getCurrentIndex();
    var tickSymbols = this._tickSymbols;
    var tickLabels = this._tickLabels;
    if (tickSymbols) {
      for (var i = 0; i < tickSymbols.length; i++) {
        tickSymbols && tickSymbols[i] && tickSymbols[i].toggleState("progress", i < currentIndex);
      }
    }
    if (tickLabels) {
      for (var i = 0; i < tickLabels.length; i++) {
        tickLabels && tickLabels[i] && tickLabels[i].toggleState("progress", labelDataIndexStore(tickLabels[i]).dataIndex <= currentIndex);
      }
    }
  };
  SliderTimelineView2.type = "timeline.slider";
  return SliderTimelineView2;
}(TimelineView);
function createScaleByModel(model, axisType) {
  axisType = axisType || model.get("type");
  if (axisType) {
    switch (axisType) {
      case "category":
        return new OrdinalScale({
          ordinalMeta: model.getCategories(),
          extent: [Infinity, -Infinity]
        });
      case "time":
        return new TimeScale({
          locale: model.ecModel.getLocaleModel(),
          useUTC: model.ecModel.get("useUTC")
        });
      default:
        return new IntervalScale();
    }
  }
}
function getViewRect(model, api) {
  return getLayoutRect(model.getBoxLayoutParams(), {
    width: api.getWidth(),
    height: api.getHeight()
  }, model.get("padding"));
}
function makeControlIcon(timelineModel, objPath, rect, opts) {
  var style = opts.style;
  var icon = createIcon(timelineModel.get(["controlStyle", objPath]), opts || {}, new BoundingRect(rect[0], rect[1], rect[2], rect[3]));
  if (style) {
    icon.setStyle(style);
  }
  return icon;
}
function giveSymbol(hostModel, itemStyleModel, group, opt, symbol, callback) {
  var color = itemStyleModel.get("color");
  if (!symbol) {
    var symbolType = hostModel.get("symbol");
    symbol = createSymbol(symbolType, -1, -1, 2, 2, color);
    symbol.setStyle("strokeNoScale", true);
    group.add(symbol);
    callback && callback.onCreate(symbol);
  } else {
    symbol.setColor(color);
    group.add(symbol);
    callback && callback.onUpdate(symbol);
  }
  var itemStyle = itemStyleModel.getItemStyle(["color"]);
  symbol.setStyle(itemStyle);
  opt = merge({
    rectHover: true,
    z2: 100
  }, opt, true);
  var symbolSize = normalizeSymbolSize(hostModel.get("symbolSize"));
  opt.scaleX = symbolSize[0] / 2;
  opt.scaleY = symbolSize[1] / 2;
  var symbolOffset = normalizeSymbolOffset(hostModel.get("symbolOffset"), symbolSize);
  if (symbolOffset) {
    opt.x = (opt.x || 0) + symbolOffset[0];
    opt.y = (opt.y || 0) + symbolOffset[1];
  }
  var symbolRotate = hostModel.get("symbolRotate");
  opt.rotation = (symbolRotate || 0) * Math.PI / 180 || 0;
  symbol.attr(opt);
  symbol.updateTransform();
  return symbol;
}
function pointerMoveTo(pointer, progressLine, dataIndex, axis, timelineModel, noAnimation) {
  if (pointer.dragging) {
    return;
  }
  var pointerModel = timelineModel.getModel("checkpointStyle");
  var toCoord = axis.dataToCoord(timelineModel.getData().get("value", dataIndex));
  if (noAnimation || !pointerModel.get("animation", true)) {
    pointer.attr({
      x: toCoord,
      y: 0
    });
    progressLine && progressLine.attr({
      shape: {
        x2: toCoord
      }
    });
  } else {
    var animationCfg = {
      duration: pointerModel.get("animationDuration", true),
      easing: pointerModel.get("animationEasing", true)
    };
    pointer.stopAnimation(null, true);
    pointer.animateTo({
      x: toCoord,
      y: 0
    }, animationCfg);
    progressLine && progressLine.animateTo({
      shape: {
        x2: toCoord
      }
    }, animationCfg);
  }
}
var SliderTimelineView$1 = SliderTimelineView;
export { SliderTimelineView$1 as default };