SliderTimelineView.js 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653
  1. /*
  2. * Licensed to the Apache Software Foundation (ASF) under one
  3. * or more contributor license agreements. See the NOTICE file
  4. * distributed with this work for additional information
  5. * regarding copyright ownership. The ASF licenses this file
  6. * to you under the Apache License, Version 2.0 (the
  7. * "License"); you may not use this file except in compliance
  8. * with the License. You may obtain a copy of the License at
  9. *
  10. * http://www.apache.org/licenses/LICENSE-2.0
  11. *
  12. * Unless required by applicable law or agreed to in writing,
  13. * software distributed under the License is distributed on an
  14. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  15. * KIND, either express or implied. See the License for the
  16. * specific language governing permissions and limitations
  17. * under the License.
  18. */
  19. /**
  20. * AUTO-GENERATED FILE. DO NOT MODIFY.
  21. */
  22. /*
  23. * Licensed to the Apache Software Foundation (ASF) under one
  24. * or more contributor license agreements. See the NOTICE file
  25. * distributed with this work for additional information
  26. * regarding copyright ownership. The ASF licenses this file
  27. * to you under the Apache License, Version 2.0 (the
  28. * "License"); you may not use this file except in compliance
  29. * with the License. You may obtain a copy of the License at
  30. *
  31. * http://www.apache.org/licenses/LICENSE-2.0
  32. *
  33. * Unless required by applicable law or agreed to in writing,
  34. * software distributed under the License is distributed on an
  35. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  36. * KIND, either express or implied. See the License for the
  37. * specific language governing permissions and limitations
  38. * under the License.
  39. */
  40. import { __extends } from "tslib";
  41. import BoundingRect from 'zrender/lib/core/BoundingRect.js';
  42. import * as matrix from 'zrender/lib/core/matrix.js';
  43. import * as graphic from '../../util/graphic.js';
  44. import { createTextStyle } from '../../label/labelStyle.js';
  45. import * as layout from '../../util/layout.js';
  46. import TimelineView from './TimelineView.js';
  47. import TimelineAxis from './TimelineAxis.js';
  48. import { createSymbol, normalizeSymbolOffset, normalizeSymbolSize } from '../../util/symbol.js';
  49. import * as numberUtil from '../../util/number.js';
  50. import { merge, each, extend, isString, bind, defaults, retrieve2 } from 'zrender/lib/core/util.js';
  51. import OrdinalScale from '../../scale/Ordinal.js';
  52. import TimeScale from '../../scale/Time.js';
  53. import IntervalScale from '../../scale/Interval.js';
  54. import { parsePercent } from 'zrender/lib/contain/text.js';
  55. import { makeInner } from '../../util/model.js';
  56. import { getECData } from '../../util/innerStore.js';
  57. import { enableHoverEmphasis } from '../../util/states.js';
  58. import { createTooltipMarkup } from '../tooltip/tooltipMarkup.js';
  59. var PI = Math.PI;
  60. var labelDataIndexStore = makeInner();
  61. var SliderTimelineView = /** @class */function (_super) {
  62. __extends(SliderTimelineView, _super);
  63. function SliderTimelineView() {
  64. var _this = _super !== null && _super.apply(this, arguments) || this;
  65. _this.type = SliderTimelineView.type;
  66. return _this;
  67. }
  68. SliderTimelineView.prototype.init = function (ecModel, api) {
  69. this.api = api;
  70. };
  71. /**
  72. * @override
  73. */
  74. SliderTimelineView.prototype.render = function (timelineModel, ecModel, api) {
  75. this.model = timelineModel;
  76. this.api = api;
  77. this.ecModel = ecModel;
  78. this.group.removeAll();
  79. if (timelineModel.get('show', true)) {
  80. var layoutInfo_1 = this._layout(timelineModel, api);
  81. var mainGroup_1 = this._createGroup('_mainGroup');
  82. var labelGroup = this._createGroup('_labelGroup');
  83. var axis_1 = this._axis = this._createAxis(layoutInfo_1, timelineModel);
  84. timelineModel.formatTooltip = function (dataIndex) {
  85. var name = axis_1.scale.getLabel({
  86. value: dataIndex
  87. });
  88. return createTooltipMarkup('nameValue', {
  89. noName: true,
  90. value: name
  91. });
  92. };
  93. each(['AxisLine', 'AxisTick', 'Control', 'CurrentPointer'], function (name) {
  94. this['_render' + name](layoutInfo_1, mainGroup_1, axis_1, timelineModel);
  95. }, this);
  96. this._renderAxisLabel(layoutInfo_1, labelGroup, axis_1, timelineModel);
  97. this._position(layoutInfo_1, timelineModel);
  98. }
  99. this._doPlayStop();
  100. this._updateTicksStatus();
  101. };
  102. /**
  103. * @override
  104. */
  105. SliderTimelineView.prototype.remove = function () {
  106. this._clearTimer();
  107. this.group.removeAll();
  108. };
  109. /**
  110. * @override
  111. */
  112. SliderTimelineView.prototype.dispose = function () {
  113. this._clearTimer();
  114. };
  115. SliderTimelineView.prototype._layout = function (timelineModel, api) {
  116. var labelPosOpt = timelineModel.get(['label', 'position']);
  117. var orient = timelineModel.get('orient');
  118. var viewRect = getViewRect(timelineModel, api);
  119. var parsedLabelPos;
  120. // Auto label offset.
  121. if (labelPosOpt == null || labelPosOpt === 'auto') {
  122. parsedLabelPos = orient === 'horizontal' ? viewRect.y + viewRect.height / 2 < api.getHeight() / 2 ? '-' : '+' : viewRect.x + viewRect.width / 2 < api.getWidth() / 2 ? '+' : '-';
  123. } else if (isString(labelPosOpt)) {
  124. parsedLabelPos = {
  125. horizontal: {
  126. top: '-',
  127. bottom: '+'
  128. },
  129. vertical: {
  130. left: '-',
  131. right: '+'
  132. }
  133. }[orient][labelPosOpt];
  134. } else {
  135. // is number
  136. parsedLabelPos = labelPosOpt;
  137. }
  138. var labelAlignMap = {
  139. horizontal: 'center',
  140. vertical: parsedLabelPos >= 0 || parsedLabelPos === '+' ? 'left' : 'right'
  141. };
  142. var labelBaselineMap = {
  143. horizontal: parsedLabelPos >= 0 || parsedLabelPos === '+' ? 'top' : 'bottom',
  144. vertical: 'middle'
  145. };
  146. var rotationMap = {
  147. horizontal: 0,
  148. vertical: PI / 2
  149. };
  150. // Position
  151. var mainLength = orient === 'vertical' ? viewRect.height : viewRect.width;
  152. var controlModel = timelineModel.getModel('controlStyle');
  153. var showControl = controlModel.get('show', true);
  154. var controlSize = showControl ? controlModel.get('itemSize') : 0;
  155. var controlGap = showControl ? controlModel.get('itemGap') : 0;
  156. var sizePlusGap = controlSize + controlGap;
  157. // Special label rotate.
  158. var labelRotation = timelineModel.get(['label', 'rotate']) || 0;
  159. labelRotation = labelRotation * PI / 180; // To radian.
  160. var playPosition;
  161. var prevBtnPosition;
  162. var nextBtnPosition;
  163. var controlPosition = controlModel.get('position', true);
  164. var showPlayBtn = showControl && controlModel.get('showPlayBtn', true);
  165. var showPrevBtn = showControl && controlModel.get('showPrevBtn', true);
  166. var showNextBtn = showControl && controlModel.get('showNextBtn', true);
  167. var xLeft = 0;
  168. var xRight = mainLength;
  169. // position[0] means left, position[1] means middle.
  170. if (controlPosition === 'left' || controlPosition === 'bottom') {
  171. showPlayBtn && (playPosition = [0, 0], xLeft += sizePlusGap);
  172. showPrevBtn && (prevBtnPosition = [xLeft, 0], xLeft += sizePlusGap);
  173. showNextBtn && (nextBtnPosition = [xRight - controlSize, 0], xRight -= sizePlusGap);
  174. } else {
  175. // 'top' 'right'
  176. showPlayBtn && (playPosition = [xRight - controlSize, 0], xRight -= sizePlusGap);
  177. showPrevBtn && (prevBtnPosition = [0, 0], xLeft += sizePlusGap);
  178. showNextBtn && (nextBtnPosition = [xRight - controlSize, 0], xRight -= sizePlusGap);
  179. }
  180. var axisExtent = [xLeft, xRight];
  181. if (timelineModel.get('inverse')) {
  182. axisExtent.reverse();
  183. }
  184. return {
  185. viewRect: viewRect,
  186. mainLength: mainLength,
  187. orient: orient,
  188. rotation: rotationMap[orient],
  189. labelRotation: labelRotation,
  190. labelPosOpt: parsedLabelPos,
  191. labelAlign: timelineModel.get(['label', 'align']) || labelAlignMap[orient],
  192. labelBaseline: timelineModel.get(['label', 'verticalAlign']) || timelineModel.get(['label', 'baseline']) || labelBaselineMap[orient],
  193. // Based on mainGroup.
  194. playPosition: playPosition,
  195. prevBtnPosition: prevBtnPosition,
  196. nextBtnPosition: nextBtnPosition,
  197. axisExtent: axisExtent,
  198. controlSize: controlSize,
  199. controlGap: controlGap
  200. };
  201. };
  202. SliderTimelineView.prototype._position = function (layoutInfo, timelineModel) {
  203. // Position is be called finally, because bounding rect is needed for
  204. // adapt content to fill viewRect (auto adapt offset).
  205. // Timeline may be not all in the viewRect when 'offset' is specified
  206. // as a number, because it is more appropriate that label aligns at
  207. // 'offset' but not the other edge defined by viewRect.
  208. var mainGroup = this._mainGroup;
  209. var labelGroup = this._labelGroup;
  210. var viewRect = layoutInfo.viewRect;
  211. if (layoutInfo.orient === 'vertical') {
  212. // transform to horizontal, inverse rotate by left-top point.
  213. var m = matrix.create();
  214. var rotateOriginX = viewRect.x;
  215. var rotateOriginY = viewRect.y + viewRect.height;
  216. matrix.translate(m, m, [-rotateOriginX, -rotateOriginY]);
  217. matrix.rotate(m, m, -PI / 2);
  218. matrix.translate(m, m, [rotateOriginX, rotateOriginY]);
  219. viewRect = viewRect.clone();
  220. viewRect.applyTransform(m);
  221. }
  222. var viewBound = getBound(viewRect);
  223. var mainBound = getBound(mainGroup.getBoundingRect());
  224. var labelBound = getBound(labelGroup.getBoundingRect());
  225. var mainPosition = [mainGroup.x, mainGroup.y];
  226. var labelsPosition = [labelGroup.x, labelGroup.y];
  227. labelsPosition[0] = mainPosition[0] = viewBound[0][0];
  228. var labelPosOpt = layoutInfo.labelPosOpt;
  229. if (labelPosOpt == null || isString(labelPosOpt)) {
  230. // '+' or '-'
  231. var mainBoundIdx = labelPosOpt === '+' ? 0 : 1;
  232. toBound(mainPosition, mainBound, viewBound, 1, mainBoundIdx);
  233. toBound(labelsPosition, labelBound, viewBound, 1, 1 - mainBoundIdx);
  234. } else {
  235. var mainBoundIdx = labelPosOpt >= 0 ? 0 : 1;
  236. toBound(mainPosition, mainBound, viewBound, 1, mainBoundIdx);
  237. labelsPosition[1] = mainPosition[1] + labelPosOpt;
  238. }
  239. mainGroup.setPosition(mainPosition);
  240. labelGroup.setPosition(labelsPosition);
  241. mainGroup.rotation = labelGroup.rotation = layoutInfo.rotation;
  242. setOrigin(mainGroup);
  243. setOrigin(labelGroup);
  244. function setOrigin(targetGroup) {
  245. targetGroup.originX = viewBound[0][0] - targetGroup.x;
  246. targetGroup.originY = viewBound[1][0] - targetGroup.y;
  247. }
  248. function getBound(rect) {
  249. // [[xmin, xmax], [ymin, ymax]]
  250. return [[rect.x, rect.x + rect.width], [rect.y, rect.y + rect.height]];
  251. }
  252. function toBound(fromPos, from, to, dimIdx, boundIdx) {
  253. fromPos[dimIdx] += to[dimIdx][boundIdx] - from[dimIdx][boundIdx];
  254. }
  255. };
  256. SliderTimelineView.prototype._createAxis = function (layoutInfo, timelineModel) {
  257. var data = timelineModel.getData();
  258. var axisType = timelineModel.get('axisType');
  259. var scale = createScaleByModel(timelineModel, axisType);
  260. // Customize scale. The `tickValue` is `dataIndex`.
  261. scale.getTicks = function () {
  262. return data.mapArray(['value'], function (value) {
  263. return {
  264. value: value
  265. };
  266. });
  267. };
  268. var dataExtent = data.getDataExtent('value');
  269. scale.setExtent(dataExtent[0], dataExtent[1]);
  270. scale.calcNiceTicks();
  271. var axis = new TimelineAxis('value', scale, layoutInfo.axisExtent, axisType);
  272. axis.model = timelineModel;
  273. return axis;
  274. };
  275. SliderTimelineView.prototype._createGroup = function (key) {
  276. var newGroup = this[key] = new graphic.Group();
  277. this.group.add(newGroup);
  278. return newGroup;
  279. };
  280. SliderTimelineView.prototype._renderAxisLine = function (layoutInfo, group, axis, timelineModel) {
  281. var axisExtent = axis.getExtent();
  282. if (!timelineModel.get(['lineStyle', 'show'])) {
  283. return;
  284. }
  285. var line = new graphic.Line({
  286. shape: {
  287. x1: axisExtent[0],
  288. y1: 0,
  289. x2: axisExtent[1],
  290. y2: 0
  291. },
  292. style: extend({
  293. lineCap: 'round'
  294. }, timelineModel.getModel('lineStyle').getLineStyle()),
  295. silent: true,
  296. z2: 1
  297. });
  298. group.add(line);
  299. var progressLine = this._progressLine = new graphic.Line({
  300. shape: {
  301. x1: axisExtent[0],
  302. x2: this._currentPointer ? this._currentPointer.x : axisExtent[0],
  303. y1: 0,
  304. y2: 0
  305. },
  306. style: defaults({
  307. lineCap: 'round',
  308. lineWidth: line.style.lineWidth
  309. }, timelineModel.getModel(['progress', 'lineStyle']).getLineStyle()),
  310. silent: true,
  311. z2: 1
  312. });
  313. group.add(progressLine);
  314. };
  315. SliderTimelineView.prototype._renderAxisTick = function (layoutInfo, group, axis, timelineModel) {
  316. var _this = this;
  317. var data = timelineModel.getData();
  318. // Show all ticks, despite ignoring strategy.
  319. var ticks = axis.scale.getTicks();
  320. this._tickSymbols = [];
  321. // The value is dataIndex, see the customized scale.
  322. each(ticks, function (tick) {
  323. var tickCoord = axis.dataToCoord(tick.value);
  324. var itemModel = data.getItemModel(tick.value);
  325. var itemStyleModel = itemModel.getModel('itemStyle');
  326. var hoverStyleModel = itemModel.getModel(['emphasis', 'itemStyle']);
  327. var progressStyleModel = itemModel.getModel(['progress', 'itemStyle']);
  328. var symbolOpt = {
  329. x: tickCoord,
  330. y: 0,
  331. onclick: bind(_this._changeTimeline, _this, tick.value)
  332. };
  333. var el = giveSymbol(itemModel, itemStyleModel, group, symbolOpt);
  334. el.ensureState('emphasis').style = hoverStyleModel.getItemStyle();
  335. el.ensureState('progress').style = progressStyleModel.getItemStyle();
  336. enableHoverEmphasis(el);
  337. var ecData = getECData(el);
  338. if (itemModel.get('tooltip')) {
  339. ecData.dataIndex = tick.value;
  340. ecData.dataModel = timelineModel;
  341. } else {
  342. ecData.dataIndex = ecData.dataModel = null;
  343. }
  344. _this._tickSymbols.push(el);
  345. });
  346. };
  347. SliderTimelineView.prototype._renderAxisLabel = function (layoutInfo, group, axis, timelineModel) {
  348. var _this = this;
  349. var labelModel = axis.getLabelModel();
  350. if (!labelModel.get('show')) {
  351. return;
  352. }
  353. var data = timelineModel.getData();
  354. var labels = axis.getViewLabels();
  355. this._tickLabels = [];
  356. each(labels, function (labelItem) {
  357. // The tickValue is dataIndex, see the customized scale.
  358. var dataIndex = labelItem.tickValue;
  359. var itemModel = data.getItemModel(dataIndex);
  360. var normalLabelModel = itemModel.getModel('label');
  361. var hoverLabelModel = itemModel.getModel(['emphasis', 'label']);
  362. var progressLabelModel = itemModel.getModel(['progress', 'label']);
  363. var tickCoord = axis.dataToCoord(labelItem.tickValue);
  364. var textEl = new graphic.Text({
  365. x: tickCoord,
  366. y: 0,
  367. rotation: layoutInfo.labelRotation - layoutInfo.rotation,
  368. onclick: bind(_this._changeTimeline, _this, dataIndex),
  369. silent: false,
  370. style: createTextStyle(normalLabelModel, {
  371. text: labelItem.formattedLabel,
  372. align: layoutInfo.labelAlign,
  373. verticalAlign: layoutInfo.labelBaseline
  374. })
  375. });
  376. textEl.ensureState('emphasis').style = createTextStyle(hoverLabelModel);
  377. textEl.ensureState('progress').style = createTextStyle(progressLabelModel);
  378. group.add(textEl);
  379. enableHoverEmphasis(textEl);
  380. labelDataIndexStore(textEl).dataIndex = dataIndex;
  381. _this._tickLabels.push(textEl);
  382. });
  383. };
  384. SliderTimelineView.prototype._renderControl = function (layoutInfo, group, axis, timelineModel) {
  385. var controlSize = layoutInfo.controlSize;
  386. var rotation = layoutInfo.rotation;
  387. var itemStyle = timelineModel.getModel('controlStyle').getItemStyle();
  388. var hoverStyle = timelineModel.getModel(['emphasis', 'controlStyle']).getItemStyle();
  389. var playState = timelineModel.getPlayState();
  390. var inverse = timelineModel.get('inverse', true);
  391. makeBtn(layoutInfo.nextBtnPosition, 'next', bind(this._changeTimeline, this, inverse ? '-' : '+'));
  392. makeBtn(layoutInfo.prevBtnPosition, 'prev', bind(this._changeTimeline, this, inverse ? '+' : '-'));
  393. makeBtn(layoutInfo.playPosition, playState ? 'stop' : 'play', bind(this._handlePlayClick, this, !playState), true);
  394. function makeBtn(position, iconName, onclick, willRotate) {
  395. if (!position) {
  396. return;
  397. }
  398. var iconSize = parsePercent(retrieve2(timelineModel.get(['controlStyle', iconName + 'BtnSize']), controlSize), controlSize);
  399. var rect = [0, -iconSize / 2, iconSize, iconSize];
  400. var btn = makeControlIcon(timelineModel, iconName + 'Icon', rect, {
  401. x: position[0],
  402. y: position[1],
  403. originX: controlSize / 2,
  404. originY: 0,
  405. rotation: willRotate ? -rotation : 0,
  406. rectHover: true,
  407. style: itemStyle,
  408. onclick: onclick
  409. });
  410. btn.ensureState('emphasis').style = hoverStyle;
  411. group.add(btn);
  412. enableHoverEmphasis(btn);
  413. }
  414. };
  415. SliderTimelineView.prototype._renderCurrentPointer = function (layoutInfo, group, axis, timelineModel) {
  416. var data = timelineModel.getData();
  417. var currentIndex = timelineModel.getCurrentIndex();
  418. var pointerModel = data.getItemModel(currentIndex).getModel('checkpointStyle');
  419. var me = this;
  420. var callback = {
  421. onCreate: function (pointer) {
  422. pointer.draggable = true;
  423. pointer.drift = bind(me._handlePointerDrag, me);
  424. pointer.ondragend = bind(me._handlePointerDragend, me);
  425. pointerMoveTo(pointer, me._progressLine, currentIndex, axis, timelineModel, true);
  426. },
  427. onUpdate: function (pointer) {
  428. pointerMoveTo(pointer, me._progressLine, currentIndex, axis, timelineModel);
  429. }
  430. };
  431. // Reuse when exists, for animation and drag.
  432. this._currentPointer = giveSymbol(pointerModel, pointerModel, this._mainGroup, {}, this._currentPointer, callback);
  433. };
  434. SliderTimelineView.prototype._handlePlayClick = function (nextState) {
  435. this._clearTimer();
  436. this.api.dispatchAction({
  437. type: 'timelinePlayChange',
  438. playState: nextState,
  439. from: this.uid
  440. });
  441. };
  442. SliderTimelineView.prototype._handlePointerDrag = function (dx, dy, e) {
  443. this._clearTimer();
  444. this._pointerChangeTimeline([e.offsetX, e.offsetY]);
  445. };
  446. SliderTimelineView.prototype._handlePointerDragend = function (e) {
  447. this._pointerChangeTimeline([e.offsetX, e.offsetY], true);
  448. };
  449. SliderTimelineView.prototype._pointerChangeTimeline = function (mousePos, trigger) {
  450. var toCoord = this._toAxisCoord(mousePos)[0];
  451. var axis = this._axis;
  452. var axisExtent = numberUtil.asc(axis.getExtent().slice());
  453. toCoord > axisExtent[1] && (toCoord = axisExtent[1]);
  454. toCoord < axisExtent[0] && (toCoord = axisExtent[0]);
  455. this._currentPointer.x = toCoord;
  456. this._currentPointer.markRedraw();
  457. var progressLine = this._progressLine;
  458. if (progressLine) {
  459. progressLine.shape.x2 = toCoord;
  460. progressLine.dirty();
  461. }
  462. var targetDataIndex = this._findNearestTick(toCoord);
  463. var timelineModel = this.model;
  464. if (trigger || targetDataIndex !== timelineModel.getCurrentIndex() && timelineModel.get('realtime')) {
  465. this._changeTimeline(targetDataIndex);
  466. }
  467. };
  468. SliderTimelineView.prototype._doPlayStop = function () {
  469. var _this = this;
  470. this._clearTimer();
  471. if (this.model.getPlayState()) {
  472. this._timer = setTimeout(function () {
  473. // Do not cache
  474. var timelineModel = _this.model;
  475. _this._changeTimeline(timelineModel.getCurrentIndex() + (timelineModel.get('rewind', true) ? -1 : 1));
  476. }, this.model.get('playInterval'));
  477. }
  478. };
  479. SliderTimelineView.prototype._toAxisCoord = function (vertex) {
  480. var trans = this._mainGroup.getLocalTransform();
  481. return graphic.applyTransform(vertex, trans, true);
  482. };
  483. SliderTimelineView.prototype._findNearestTick = function (axisCoord) {
  484. var data = this.model.getData();
  485. var dist = Infinity;
  486. var targetDataIndex;
  487. var axis = this._axis;
  488. data.each(['value'], function (value, dataIndex) {
  489. var coord = axis.dataToCoord(value);
  490. var d = Math.abs(coord - axisCoord);
  491. if (d < dist) {
  492. dist = d;
  493. targetDataIndex = dataIndex;
  494. }
  495. });
  496. return targetDataIndex;
  497. };
  498. SliderTimelineView.prototype._clearTimer = function () {
  499. if (this._timer) {
  500. clearTimeout(this._timer);
  501. this._timer = null;
  502. }
  503. };
  504. SliderTimelineView.prototype._changeTimeline = function (nextIndex) {
  505. var currentIndex = this.model.getCurrentIndex();
  506. if (nextIndex === '+') {
  507. nextIndex = currentIndex + 1;
  508. } else if (nextIndex === '-') {
  509. nextIndex = currentIndex - 1;
  510. }
  511. this.api.dispatchAction({
  512. type: 'timelineChange',
  513. currentIndex: nextIndex,
  514. from: this.uid
  515. });
  516. };
  517. SliderTimelineView.prototype._updateTicksStatus = function () {
  518. var currentIndex = this.model.getCurrentIndex();
  519. var tickSymbols = this._tickSymbols;
  520. var tickLabels = this._tickLabels;
  521. if (tickSymbols) {
  522. for (var i = 0; i < tickSymbols.length; i++) {
  523. tickSymbols && tickSymbols[i] && tickSymbols[i].toggleState('progress', i < currentIndex);
  524. }
  525. }
  526. if (tickLabels) {
  527. for (var i = 0; i < tickLabels.length; i++) {
  528. tickLabels && tickLabels[i] && tickLabels[i].toggleState('progress', labelDataIndexStore(tickLabels[i]).dataIndex <= currentIndex);
  529. }
  530. }
  531. };
  532. SliderTimelineView.type = 'timeline.slider';
  533. return SliderTimelineView;
  534. }(TimelineView);
  535. function createScaleByModel(model, axisType) {
  536. axisType = axisType || model.get('type');
  537. if (axisType) {
  538. switch (axisType) {
  539. // Buildin scale
  540. case 'category':
  541. return new OrdinalScale({
  542. ordinalMeta: model.getCategories(),
  543. extent: [Infinity, -Infinity]
  544. });
  545. case 'time':
  546. return new TimeScale({
  547. locale: model.ecModel.getLocaleModel(),
  548. useUTC: model.ecModel.get('useUTC')
  549. });
  550. default:
  551. // default to be value
  552. return new IntervalScale();
  553. }
  554. }
  555. }
  556. function getViewRect(model, api) {
  557. return layout.getLayoutRect(model.getBoxLayoutParams(), {
  558. width: api.getWidth(),
  559. height: api.getHeight()
  560. }, model.get('padding'));
  561. }
  562. function makeControlIcon(timelineModel, objPath, rect, opts) {
  563. var style = opts.style;
  564. var icon = graphic.createIcon(timelineModel.get(['controlStyle', objPath]), opts || {}, new BoundingRect(rect[0], rect[1], rect[2], rect[3]));
  565. // TODO createIcon won't use style in opt.
  566. if (style) {
  567. icon.setStyle(style);
  568. }
  569. return icon;
  570. }
  571. /**
  572. * Create symbol or update symbol
  573. * opt: basic position and event handlers
  574. */
  575. function giveSymbol(hostModel, itemStyleModel, group, opt, symbol, callback) {
  576. var color = itemStyleModel.get('color');
  577. if (!symbol) {
  578. var symbolType = hostModel.get('symbol');
  579. symbol = createSymbol(symbolType, -1, -1, 2, 2, color);
  580. symbol.setStyle('strokeNoScale', true);
  581. group.add(symbol);
  582. callback && callback.onCreate(symbol);
  583. } else {
  584. symbol.setColor(color);
  585. group.add(symbol); // Group may be new, also need to add.
  586. callback && callback.onUpdate(symbol);
  587. }
  588. // Style
  589. var itemStyle = itemStyleModel.getItemStyle(['color']);
  590. symbol.setStyle(itemStyle);
  591. // Transform and events.
  592. opt = merge({
  593. rectHover: true,
  594. z2: 100
  595. }, opt, true);
  596. var symbolSize = normalizeSymbolSize(hostModel.get('symbolSize'));
  597. opt.scaleX = symbolSize[0] / 2;
  598. opt.scaleY = symbolSize[1] / 2;
  599. var symbolOffset = normalizeSymbolOffset(hostModel.get('symbolOffset'), symbolSize);
  600. if (symbolOffset) {
  601. opt.x = (opt.x || 0) + symbolOffset[0];
  602. opt.y = (opt.y || 0) + symbolOffset[1];
  603. }
  604. var symbolRotate = hostModel.get('symbolRotate');
  605. opt.rotation = (symbolRotate || 0) * Math.PI / 180 || 0;
  606. symbol.attr(opt);
  607. // FIXME
  608. // (1) When symbol.style.strokeNoScale is true and updateTransform is not performed,
  609. // getBoundingRect will return wrong result.
  610. // (This is supposed to be resolved in zrender, but it is a little difficult to
  611. // leverage performance and auto updateTransform)
  612. // (2) All of ancesters of symbol do not scale, so we can just updateTransform symbol.
  613. symbol.updateTransform();
  614. return symbol;
  615. }
  616. function pointerMoveTo(pointer, progressLine, dataIndex, axis, timelineModel, noAnimation) {
  617. if (pointer.dragging) {
  618. return;
  619. }
  620. var pointerModel = timelineModel.getModel('checkpointStyle');
  621. var toCoord = axis.dataToCoord(timelineModel.getData().get('value', dataIndex));
  622. if (noAnimation || !pointerModel.get('animation', true)) {
  623. pointer.attr({
  624. x: toCoord,
  625. y: 0
  626. });
  627. progressLine && progressLine.attr({
  628. shape: {
  629. x2: toCoord
  630. }
  631. });
  632. } else {
  633. var animationCfg = {
  634. duration: pointerModel.get('animationDuration', true),
  635. easing: pointerModel.get('animationEasing', true)
  636. };
  637. pointer.stopAnimation(null, true);
  638. pointer.animateTo({
  639. x: toCoord,
  640. y: 0
  641. }, animationCfg);
  642. progressLine && progressLine.animateTo({
  643. shape: {
  644. x2: toCoord
  645. }
  646. }, animationCfg);
  647. }
  648. }
  649. export default SliderTimelineView;