逐步完成前后端服务器
This commit is contained in:
653
frontend/node_modules/echarts/lib/component/timeline/SliderTimelineView.js
generated
vendored
Normal file
653
frontend/node_modules/echarts/lib/component/timeline/SliderTimelineView.js
generated
vendored
Normal file
@ -0,0 +1,653 @@
|
||||
|
||||
/*
|
||||
* Licensed to the Apache Software Foundation (ASF) under one
|
||||
* or more contributor license agreements. See the NOTICE file
|
||||
* distributed with this work for additional information
|
||||
* regarding copyright ownership. The ASF licenses this file
|
||||
* to you under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance
|
||||
* with the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* AUTO-GENERATED FILE. DO NOT MODIFY.
|
||||
*/
|
||||
|
||||
/*
|
||||
* Licensed to the Apache Software Foundation (ASF) under one
|
||||
* or more contributor license agreements. See the NOTICE file
|
||||
* distributed with this work for additional information
|
||||
* regarding copyright ownership. The ASF licenses this file
|
||||
* to you under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance
|
||||
* with the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import { __extends } from "tslib";
|
||||
import BoundingRect from 'zrender/lib/core/BoundingRect.js';
|
||||
import * as matrix from 'zrender/lib/core/matrix.js';
|
||||
import * as graphic from '../../util/graphic.js';
|
||||
import { createTextStyle } from '../../label/labelStyle.js';
|
||||
import * as layout from '../../util/layout.js';
|
||||
import TimelineView from './TimelineView.js';
|
||||
import TimelineAxis from './TimelineAxis.js';
|
||||
import { createSymbol, normalizeSymbolOffset, normalizeSymbolSize } from '../../util/symbol.js';
|
||||
import * as numberUtil from '../../util/number.js';
|
||||
import { merge, each, extend, isString, bind, defaults, retrieve2 } from 'zrender/lib/core/util.js';
|
||||
import OrdinalScale from '../../scale/Ordinal.js';
|
||||
import TimeScale from '../../scale/Time.js';
|
||||
import IntervalScale from '../../scale/Interval.js';
|
||||
import { parsePercent } from 'zrender/lib/contain/text.js';
|
||||
import { makeInner } from '../../util/model.js';
|
||||
import { getECData } from '../../util/innerStore.js';
|
||||
import { enableHoverEmphasis } from '../../util/states.js';
|
||||
import { createTooltipMarkup } from '../tooltip/tooltipMarkup.js';
|
||||
var PI = Math.PI;
|
||||
var labelDataIndexStore = makeInner();
|
||||
var SliderTimelineView = /** @class */function (_super) {
|
||||
__extends(SliderTimelineView, _super);
|
||||
function SliderTimelineView() {
|
||||
var _this = _super !== null && _super.apply(this, arguments) || this;
|
||||
_this.type = SliderTimelineView.type;
|
||||
return _this;
|
||||
}
|
||||
SliderTimelineView.prototype.init = function (ecModel, api) {
|
||||
this.api = api;
|
||||
};
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
SliderTimelineView.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();
|
||||
};
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
SliderTimelineView.prototype.remove = function () {
|
||||
this._clearTimer();
|
||||
this.group.removeAll();
|
||||
};
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
SliderTimelineView.prototype.dispose = function () {
|
||||
this._clearTimer();
|
||||
};
|
||||
SliderTimelineView.prototype._layout = function (timelineModel, api) {
|
||||
var labelPosOpt = timelineModel.get(['label', 'position']);
|
||||
var orient = timelineModel.get('orient');
|
||||
var viewRect = getViewRect(timelineModel, api);
|
||||
var parsedLabelPos;
|
||||
// Auto label offset.
|
||||
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 {
|
||||
// is number
|
||||
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
|
||||
};
|
||||
// Position
|
||||
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;
|
||||
// Special label rotate.
|
||||
var labelRotation = timelineModel.get(['label', 'rotate']) || 0;
|
||||
labelRotation = labelRotation * PI / 180; // To radian.
|
||||
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;
|
||||
// position[0] means left, position[1] means middle.
|
||||
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 {
|
||||
// 'top' 'right'
|
||||
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: viewRect,
|
||||
mainLength: mainLength,
|
||||
orient: orient,
|
||||
rotation: rotationMap[orient],
|
||||
labelRotation: labelRotation,
|
||||
labelPosOpt: parsedLabelPos,
|
||||
labelAlign: timelineModel.get(['label', 'align']) || labelAlignMap[orient],
|
||||
labelBaseline: timelineModel.get(['label', 'verticalAlign']) || timelineModel.get(['label', 'baseline']) || labelBaselineMap[orient],
|
||||
// Based on mainGroup.
|
||||
playPosition: playPosition,
|
||||
prevBtnPosition: prevBtnPosition,
|
||||
nextBtnPosition: nextBtnPosition,
|
||||
axisExtent: axisExtent,
|
||||
controlSize: controlSize,
|
||||
controlGap: controlGap
|
||||
};
|
||||
};
|
||||
SliderTimelineView.prototype._position = function (layoutInfo, timelineModel) {
|
||||
// Position is be called finally, because bounding rect is needed for
|
||||
// adapt content to fill viewRect (auto adapt offset).
|
||||
// Timeline may be not all in the viewRect when 'offset' is specified
|
||||
// as a number, because it is more appropriate that label aligns at
|
||||
// 'offset' but not the other edge defined by viewRect.
|
||||
var mainGroup = this._mainGroup;
|
||||
var labelGroup = this._labelGroup;
|
||||
var viewRect = layoutInfo.viewRect;
|
||||
if (layoutInfo.orient === 'vertical') {
|
||||
// transform to horizontal, inverse rotate by left-top point.
|
||||
var m = matrix.create();
|
||||
var rotateOriginX = viewRect.x;
|
||||
var rotateOriginY = viewRect.y + viewRect.height;
|
||||
matrix.translate(m, m, [-rotateOriginX, -rotateOriginY]);
|
||||
matrix.rotate(m, m, -PI / 2);
|
||||
matrix.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)) {
|
||||
// '+' or '-'
|
||||
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) {
|
||||
// [[xmin, xmax], [ymin, ymax]]
|
||||
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];
|
||||
}
|
||||
};
|
||||
SliderTimelineView.prototype._createAxis = function (layoutInfo, timelineModel) {
|
||||
var data = timelineModel.getData();
|
||||
var axisType = timelineModel.get('axisType');
|
||||
var scale = createScaleByModel(timelineModel, axisType);
|
||||
// Customize scale. The `tickValue` is `dataIndex`.
|
||||
scale.getTicks = function () {
|
||||
return data.mapArray(['value'], function (value) {
|
||||
return {
|
||||
value: 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;
|
||||
};
|
||||
SliderTimelineView.prototype._createGroup = function (key) {
|
||||
var newGroup = this[key] = new graphic.Group();
|
||||
this.group.add(newGroup);
|
||||
return newGroup;
|
||||
};
|
||||
SliderTimelineView.prototype._renderAxisLine = function (layoutInfo, group, axis, timelineModel) {
|
||||
var axisExtent = axis.getExtent();
|
||||
if (!timelineModel.get(['lineStyle', 'show'])) {
|
||||
return;
|
||||
}
|
||||
var line = new graphic.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 graphic.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);
|
||||
};
|
||||
SliderTimelineView.prototype._renderAxisTick = function (layoutInfo, group, axis, timelineModel) {
|
||||
var _this = this;
|
||||
var data = timelineModel.getData();
|
||||
// Show all ticks, despite ignoring strategy.
|
||||
var ticks = axis.scale.getTicks();
|
||||
this._tickSymbols = [];
|
||||
// The value is dataIndex, see the customized scale.
|
||||
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);
|
||||
});
|
||||
};
|
||||
SliderTimelineView.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) {
|
||||
// The tickValue is dataIndex, see the customized scale.
|
||||
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 graphic.Text({
|
||||
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);
|
||||
});
|
||||
};
|
||||
SliderTimelineView.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: onclick
|
||||
});
|
||||
btn.ensureState('emphasis').style = hoverStyle;
|
||||
group.add(btn);
|
||||
enableHoverEmphasis(btn);
|
||||
}
|
||||
};
|
||||
SliderTimelineView.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);
|
||||
}
|
||||
};
|
||||
// Reuse when exists, for animation and drag.
|
||||
this._currentPointer = giveSymbol(pointerModel, pointerModel, this._mainGroup, {}, this._currentPointer, callback);
|
||||
};
|
||||
SliderTimelineView.prototype._handlePlayClick = function (nextState) {
|
||||
this._clearTimer();
|
||||
this.api.dispatchAction({
|
||||
type: 'timelinePlayChange',
|
||||
playState: nextState,
|
||||
from: this.uid
|
||||
});
|
||||
};
|
||||
SliderTimelineView.prototype._handlePointerDrag = function (dx, dy, e) {
|
||||
this._clearTimer();
|
||||
this._pointerChangeTimeline([e.offsetX, e.offsetY]);
|
||||
};
|
||||
SliderTimelineView.prototype._handlePointerDragend = function (e) {
|
||||
this._pointerChangeTimeline([e.offsetX, e.offsetY], true);
|
||||
};
|
||||
SliderTimelineView.prototype._pointerChangeTimeline = function (mousePos, trigger) {
|
||||
var toCoord = this._toAxisCoord(mousePos)[0];
|
||||
var axis = this._axis;
|
||||
var axisExtent = numberUtil.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);
|
||||
}
|
||||
};
|
||||
SliderTimelineView.prototype._doPlayStop = function () {
|
||||
var _this = this;
|
||||
this._clearTimer();
|
||||
if (this.model.getPlayState()) {
|
||||
this._timer = setTimeout(function () {
|
||||
// Do not cache
|
||||
var timelineModel = _this.model;
|
||||
_this._changeTimeline(timelineModel.getCurrentIndex() + (timelineModel.get('rewind', true) ? -1 : 1));
|
||||
}, this.model.get('playInterval'));
|
||||
}
|
||||
};
|
||||
SliderTimelineView.prototype._toAxisCoord = function (vertex) {
|
||||
var trans = this._mainGroup.getLocalTransform();
|
||||
return graphic.applyTransform(vertex, trans, true);
|
||||
};
|
||||
SliderTimelineView.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;
|
||||
};
|
||||
SliderTimelineView.prototype._clearTimer = function () {
|
||||
if (this._timer) {
|
||||
clearTimeout(this._timer);
|
||||
this._timer = null;
|
||||
}
|
||||
};
|
||||
SliderTimelineView.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
|
||||
});
|
||||
};
|
||||
SliderTimelineView.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);
|
||||
}
|
||||
}
|
||||
};
|
||||
SliderTimelineView.type = 'timeline.slider';
|
||||
return SliderTimelineView;
|
||||
}(TimelineView);
|
||||
function createScaleByModel(model, axisType) {
|
||||
axisType = axisType || model.get('type');
|
||||
if (axisType) {
|
||||
switch (axisType) {
|
||||
// Buildin scale
|
||||
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:
|
||||
// default to be value
|
||||
return new IntervalScale();
|
||||
}
|
||||
}
|
||||
}
|
||||
function getViewRect(model, api) {
|
||||
return layout.getLayoutRect(model.getBoxLayoutParams(), {
|
||||
width: api.getWidth(),
|
||||
height: api.getHeight()
|
||||
}, model.get('padding'));
|
||||
}
|
||||
function makeControlIcon(timelineModel, objPath, rect, opts) {
|
||||
var style = opts.style;
|
||||
var icon = graphic.createIcon(timelineModel.get(['controlStyle', objPath]), opts || {}, new BoundingRect(rect[0], rect[1], rect[2], rect[3]));
|
||||
// TODO createIcon won't use style in opt.
|
||||
if (style) {
|
||||
icon.setStyle(style);
|
||||
}
|
||||
return icon;
|
||||
}
|
||||
/**
|
||||
* Create symbol or update symbol
|
||||
* opt: basic position and event handlers
|
||||
*/
|
||||
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); // Group may be new, also need to add.
|
||||
callback && callback.onUpdate(symbol);
|
||||
}
|
||||
// Style
|
||||
var itemStyle = itemStyleModel.getItemStyle(['color']);
|
||||
symbol.setStyle(itemStyle);
|
||||
// Transform and events.
|
||||
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);
|
||||
// FIXME
|
||||
// (1) When symbol.style.strokeNoScale is true and updateTransform is not performed,
|
||||
// getBoundingRect will return wrong result.
|
||||
// (This is supposed to be resolved in zrender, but it is a little difficult to
|
||||
// leverage performance and auto updateTransform)
|
||||
// (2) All of ancesters of symbol do not scale, so we can just updateTransform symbol.
|
||||
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);
|
||||
}
|
||||
}
|
||||
export default SliderTimelineView;
|
||||
Reference in New Issue
Block a user