123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753 |
- /*
- * 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 costomized 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 costomized 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();
- this._progressLine.shape.x2 = toCoord;
- this._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;
|