ContinuousView.js 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808
  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 * as zrUtil from 'zrender/lib/core/util.js';
  42. import LinearGradient from 'zrender/lib/graphic/LinearGradient.js';
  43. import * as eventTool from 'zrender/lib/core/event.js';
  44. import VisualMapView from './VisualMapView.js';
  45. import * as graphic from '../../util/graphic.js';
  46. import * as numberUtil from '../../util/number.js';
  47. import sliderMove from '../helper/sliderMove.js';
  48. import * as helper from './helper.js';
  49. import * as modelUtil from '../../util/model.js';
  50. import { parsePercent } from 'zrender/lib/contain/text.js';
  51. import { setAsHighDownDispatcher } from '../../util/states.js';
  52. import { createSymbol } from '../../util/symbol.js';
  53. import ZRImage from 'zrender/lib/graphic/Image.js';
  54. import { getECData } from '../../util/innerStore.js';
  55. import { createTextStyle } from '../../label/labelStyle.js';
  56. import { findEventDispatcher } from '../../util/event.js';
  57. var linearMap = numberUtil.linearMap;
  58. var each = zrUtil.each;
  59. var mathMin = Math.min;
  60. var mathMax = Math.max; // Arbitrary value
  61. var HOVER_LINK_SIZE = 12;
  62. var HOVER_LINK_OUT = 6; // Notice:
  63. // Any "interval" should be by the order of [low, high].
  64. // "handle0" (handleIndex === 0) maps to
  65. // low data value: this._dataInterval[0] and has low coord.
  66. // "handle1" (handleIndex === 1) maps to
  67. // high data value: this._dataInterval[1] and has high coord.
  68. // The logic of transform is implemented in this._createBarGroup.
  69. var ContinuousView =
  70. /** @class */
  71. function (_super) {
  72. __extends(ContinuousView, _super);
  73. function ContinuousView() {
  74. var _this = _super !== null && _super.apply(this, arguments) || this;
  75. _this.type = ContinuousView.type;
  76. _this._shapes = {};
  77. _this._dataInterval = [];
  78. _this._handleEnds = [];
  79. _this._hoverLinkDataIndices = [];
  80. return _this;
  81. }
  82. ContinuousView.prototype.doRender = function (visualMapModel, ecModel, api, payload) {
  83. this._api = api;
  84. if (!payload || payload.type !== 'selectDataRange' || payload.from !== this.uid) {
  85. this._buildView();
  86. }
  87. };
  88. ContinuousView.prototype._buildView = function () {
  89. this.group.removeAll();
  90. var visualMapModel = this.visualMapModel;
  91. var thisGroup = this.group;
  92. this._orient = visualMapModel.get('orient');
  93. this._useHandle = visualMapModel.get('calculable');
  94. this._resetInterval();
  95. this._renderBar(thisGroup);
  96. var dataRangeText = visualMapModel.get('text');
  97. this._renderEndsText(thisGroup, dataRangeText, 0);
  98. this._renderEndsText(thisGroup, dataRangeText, 1); // Do this for background size calculation.
  99. this._updateView(true); // After updating view, inner shapes is built completely,
  100. // and then background can be rendered.
  101. this.renderBackground(thisGroup); // Real update view
  102. this._updateView();
  103. this._enableHoverLinkToSeries();
  104. this._enableHoverLinkFromSeries();
  105. this.positionGroup(thisGroup);
  106. };
  107. ContinuousView.prototype._renderEndsText = function (group, dataRangeText, endsIndex) {
  108. if (!dataRangeText) {
  109. return;
  110. } // Compatible with ec2, text[0] map to high value, text[1] map low value.
  111. var text = dataRangeText[1 - endsIndex];
  112. text = text != null ? text + '' : '';
  113. var visualMapModel = this.visualMapModel;
  114. var textGap = visualMapModel.get('textGap');
  115. var itemSize = visualMapModel.itemSize;
  116. var barGroup = this._shapes.mainGroup;
  117. var position = this._applyTransform([itemSize[0] / 2, endsIndex === 0 ? -textGap : itemSize[1] + textGap], barGroup);
  118. var align = this._applyTransform(endsIndex === 0 ? 'bottom' : 'top', barGroup);
  119. var orient = this._orient;
  120. var textStyleModel = this.visualMapModel.textStyleModel;
  121. this.group.add(new graphic.Text({
  122. style: createTextStyle(textStyleModel, {
  123. x: position[0],
  124. y: position[1],
  125. verticalAlign: orient === 'horizontal' ? 'middle' : align,
  126. align: orient === 'horizontal' ? align : 'center',
  127. text: text
  128. })
  129. }));
  130. };
  131. ContinuousView.prototype._renderBar = function (targetGroup) {
  132. var visualMapModel = this.visualMapModel;
  133. var shapes = this._shapes;
  134. var itemSize = visualMapModel.itemSize;
  135. var orient = this._orient;
  136. var useHandle = this._useHandle;
  137. var itemAlign = helper.getItemAlign(visualMapModel, this.api, itemSize);
  138. var mainGroup = shapes.mainGroup = this._createBarGroup(itemAlign);
  139. var gradientBarGroup = new graphic.Group();
  140. mainGroup.add(gradientBarGroup); // Bar
  141. gradientBarGroup.add(shapes.outOfRange = createPolygon());
  142. gradientBarGroup.add(shapes.inRange = createPolygon(null, useHandle ? getCursor(this._orient) : null, zrUtil.bind(this._dragHandle, this, 'all', false), zrUtil.bind(this._dragHandle, this, 'all', true))); // A border radius clip.
  143. gradientBarGroup.setClipPath(new graphic.Rect({
  144. shape: {
  145. x: 0,
  146. y: 0,
  147. width: itemSize[0],
  148. height: itemSize[1],
  149. r: 3
  150. }
  151. }));
  152. var textRect = visualMapModel.textStyleModel.getTextRect('国');
  153. var textSize = mathMax(textRect.width, textRect.height); // Handle
  154. if (useHandle) {
  155. shapes.handleThumbs = [];
  156. shapes.handleLabels = [];
  157. shapes.handleLabelPoints = [];
  158. this._createHandle(visualMapModel, mainGroup, 0, itemSize, textSize, orient);
  159. this._createHandle(visualMapModel, mainGroup, 1, itemSize, textSize, orient);
  160. }
  161. this._createIndicator(visualMapModel, mainGroup, itemSize, textSize, orient);
  162. targetGroup.add(mainGroup);
  163. };
  164. ContinuousView.prototype._createHandle = function (visualMapModel, mainGroup, handleIndex, itemSize, textSize, orient) {
  165. var onDrift = zrUtil.bind(this._dragHandle, this, handleIndex, false);
  166. var onDragEnd = zrUtil.bind(this._dragHandle, this, handleIndex, true);
  167. var handleSize = parsePercent(visualMapModel.get('handleSize'), itemSize[0]);
  168. var handleThumb = createSymbol(visualMapModel.get('handleIcon'), -handleSize / 2, -handleSize / 2, handleSize, handleSize, null, true);
  169. var cursor = getCursor(this._orient);
  170. handleThumb.attr({
  171. cursor: cursor,
  172. draggable: true,
  173. drift: onDrift,
  174. ondragend: onDragEnd,
  175. onmousemove: function (e) {
  176. eventTool.stop(e.event);
  177. }
  178. });
  179. handleThumb.x = itemSize[0] / 2;
  180. handleThumb.useStyle(visualMapModel.getModel('handleStyle').getItemStyle());
  181. handleThumb.setStyle({
  182. strokeNoScale: true,
  183. strokeFirst: true
  184. });
  185. handleThumb.style.lineWidth *= 2;
  186. handleThumb.ensureState('emphasis').style = visualMapModel.getModel(['emphasis', 'handleStyle']).getItemStyle();
  187. setAsHighDownDispatcher(handleThumb, true);
  188. mainGroup.add(handleThumb); // Text is always horizontal layout but should not be effected by
  189. // transform (orient/inverse). So label is built separately but not
  190. // use zrender/graphic/helper/RectText, and is located based on view
  191. // group (according to handleLabelPoint) but not barGroup.
  192. var textStyleModel = this.visualMapModel.textStyleModel;
  193. var handleLabel = new graphic.Text({
  194. cursor: cursor,
  195. draggable: true,
  196. drift: onDrift,
  197. onmousemove: function (e) {
  198. // For mobile device, prevent screen slider on the button.
  199. eventTool.stop(e.event);
  200. },
  201. ondragend: onDragEnd,
  202. style: createTextStyle(textStyleModel, {
  203. x: 0,
  204. y: 0,
  205. text: ''
  206. })
  207. });
  208. handleLabel.ensureState('blur').style = {
  209. opacity: 0.1
  210. };
  211. handleLabel.stateTransition = {
  212. duration: 200
  213. };
  214. this.group.add(handleLabel);
  215. var handleLabelPoint = [handleSize, 0];
  216. var shapes = this._shapes;
  217. shapes.handleThumbs[handleIndex] = handleThumb;
  218. shapes.handleLabelPoints[handleIndex] = handleLabelPoint;
  219. shapes.handleLabels[handleIndex] = handleLabel;
  220. };
  221. ContinuousView.prototype._createIndicator = function (visualMapModel, mainGroup, itemSize, textSize, orient) {
  222. var scale = parsePercent(visualMapModel.get('indicatorSize'), itemSize[0]);
  223. var indicator = createSymbol(visualMapModel.get('indicatorIcon'), -scale / 2, -scale / 2, scale, scale, null, true);
  224. indicator.attr({
  225. cursor: 'move',
  226. invisible: true,
  227. silent: true,
  228. x: itemSize[0] / 2
  229. });
  230. var indicatorStyle = visualMapModel.getModel('indicatorStyle').getItemStyle();
  231. if (indicator instanceof ZRImage) {
  232. var pathStyle = indicator.style;
  233. indicator.useStyle(zrUtil.extend({
  234. // TODO other properties like x, y ?
  235. image: pathStyle.image,
  236. x: pathStyle.x,
  237. y: pathStyle.y,
  238. width: pathStyle.width,
  239. height: pathStyle.height
  240. }, indicatorStyle));
  241. } else {
  242. indicator.useStyle(indicatorStyle);
  243. }
  244. mainGroup.add(indicator);
  245. var textStyleModel = this.visualMapModel.textStyleModel;
  246. var indicatorLabel = new graphic.Text({
  247. silent: true,
  248. invisible: true,
  249. style: createTextStyle(textStyleModel, {
  250. x: 0,
  251. y: 0,
  252. text: ''
  253. })
  254. });
  255. this.group.add(indicatorLabel);
  256. var indicatorLabelPoint = [(orient === 'horizontal' ? textSize / 2 : HOVER_LINK_OUT) + itemSize[0] / 2, 0];
  257. var shapes = this._shapes;
  258. shapes.indicator = indicator;
  259. shapes.indicatorLabel = indicatorLabel;
  260. shapes.indicatorLabelPoint = indicatorLabelPoint;
  261. this._firstShowIndicator = true;
  262. };
  263. ContinuousView.prototype._dragHandle = function (handleIndex, isEnd, // dx is event from ondragend if isEnd is true. It's not used
  264. dx, dy) {
  265. if (!this._useHandle) {
  266. return;
  267. }
  268. this._dragging = !isEnd;
  269. if (!isEnd) {
  270. // Transform dx, dy to bar coordination.
  271. var vertex = this._applyTransform([dx, dy], this._shapes.mainGroup, true);
  272. this._updateInterval(handleIndex, vertex[1]);
  273. this._hideIndicator(); // Considering realtime, update view should be executed
  274. // before dispatch action.
  275. this._updateView();
  276. } // dragEnd do not dispatch action when realtime.
  277. if (isEnd === !this.visualMapModel.get('realtime')) {
  278. // jshint ignore:line
  279. this.api.dispatchAction({
  280. type: 'selectDataRange',
  281. from: this.uid,
  282. visualMapId: this.visualMapModel.id,
  283. selected: this._dataInterval.slice()
  284. });
  285. }
  286. if (isEnd) {
  287. !this._hovering && this._clearHoverLinkToSeries();
  288. } else if (useHoverLinkOnHandle(this.visualMapModel)) {
  289. this._doHoverLinkToSeries(this._handleEnds[handleIndex], false);
  290. }
  291. };
  292. ContinuousView.prototype._resetInterval = function () {
  293. var visualMapModel = this.visualMapModel;
  294. var dataInterval = this._dataInterval = visualMapModel.getSelected();
  295. var dataExtent = visualMapModel.getExtent();
  296. var sizeExtent = [0, visualMapModel.itemSize[1]];
  297. this._handleEnds = [linearMap(dataInterval[0], dataExtent, sizeExtent, true), linearMap(dataInterval[1], dataExtent, sizeExtent, true)];
  298. };
  299. /**
  300. * @private
  301. * @param {(number|string)} handleIndex 0 or 1 or 'all'
  302. * @param {number} dx
  303. * @param {number} dy
  304. */
  305. ContinuousView.prototype._updateInterval = function (handleIndex, delta) {
  306. delta = delta || 0;
  307. var visualMapModel = this.visualMapModel;
  308. var handleEnds = this._handleEnds;
  309. var sizeExtent = [0, visualMapModel.itemSize[1]];
  310. sliderMove(delta, handleEnds, sizeExtent, handleIndex, // cross is forbidden
  311. 0);
  312. var dataExtent = visualMapModel.getExtent(); // Update data interval.
  313. this._dataInterval = [linearMap(handleEnds[0], sizeExtent, dataExtent, true), linearMap(handleEnds[1], sizeExtent, dataExtent, true)];
  314. };
  315. ContinuousView.prototype._updateView = function (forSketch) {
  316. var visualMapModel = this.visualMapModel;
  317. var dataExtent = visualMapModel.getExtent();
  318. var shapes = this._shapes;
  319. var outOfRangeHandleEnds = [0, visualMapModel.itemSize[1]];
  320. var inRangeHandleEnds = forSketch ? outOfRangeHandleEnds : this._handleEnds;
  321. var visualInRange = this._createBarVisual(this._dataInterval, dataExtent, inRangeHandleEnds, 'inRange');
  322. var visualOutOfRange = this._createBarVisual(dataExtent, dataExtent, outOfRangeHandleEnds, 'outOfRange');
  323. shapes.inRange.setStyle({
  324. fill: visualInRange.barColor // opacity: visualInRange.opacity
  325. }).setShape('points', visualInRange.barPoints);
  326. shapes.outOfRange.setStyle({
  327. fill: visualOutOfRange.barColor // opacity: visualOutOfRange.opacity
  328. }).setShape('points', visualOutOfRange.barPoints);
  329. this._updateHandle(inRangeHandleEnds, visualInRange);
  330. };
  331. ContinuousView.prototype._createBarVisual = function (dataInterval, dataExtent, handleEnds, forceState) {
  332. var opts = {
  333. forceState: forceState,
  334. convertOpacityToAlpha: true
  335. };
  336. var colorStops = this._makeColorGradient(dataInterval, opts);
  337. var symbolSizes = [this.getControllerVisual(dataInterval[0], 'symbolSize', opts), this.getControllerVisual(dataInterval[1], 'symbolSize', opts)];
  338. var barPoints = this._createBarPoints(handleEnds, symbolSizes);
  339. return {
  340. barColor: new LinearGradient(0, 0, 0, 1, colorStops),
  341. barPoints: barPoints,
  342. handlesColor: [colorStops[0].color, colorStops[colorStops.length - 1].color]
  343. };
  344. };
  345. ContinuousView.prototype._makeColorGradient = function (dataInterval, opts) {
  346. // Considering colorHue, which is not linear, so we have to sample
  347. // to calculate gradient color stops, but not only calculate head
  348. // and tail.
  349. var sampleNumber = 100; // Arbitrary value.
  350. var colorStops = [];
  351. var step = (dataInterval[1] - dataInterval[0]) / sampleNumber;
  352. colorStops.push({
  353. color: this.getControllerVisual(dataInterval[0], 'color', opts),
  354. offset: 0
  355. });
  356. for (var i = 1; i < sampleNumber; i++) {
  357. var currValue = dataInterval[0] + step * i;
  358. if (currValue > dataInterval[1]) {
  359. break;
  360. }
  361. colorStops.push({
  362. color: this.getControllerVisual(currValue, 'color', opts),
  363. offset: i / sampleNumber
  364. });
  365. }
  366. colorStops.push({
  367. color: this.getControllerVisual(dataInterval[1], 'color', opts),
  368. offset: 1
  369. });
  370. return colorStops;
  371. };
  372. ContinuousView.prototype._createBarPoints = function (handleEnds, symbolSizes) {
  373. var itemSize = this.visualMapModel.itemSize;
  374. return [[itemSize[0] - symbolSizes[0], handleEnds[0]], [itemSize[0], handleEnds[0]], [itemSize[0], handleEnds[1]], [itemSize[0] - symbolSizes[1], handleEnds[1]]];
  375. };
  376. ContinuousView.prototype._createBarGroup = function (itemAlign) {
  377. var orient = this._orient;
  378. var inverse = this.visualMapModel.get('inverse');
  379. return new graphic.Group(orient === 'horizontal' && !inverse ? {
  380. scaleX: itemAlign === 'bottom' ? 1 : -1,
  381. rotation: Math.PI / 2
  382. } : orient === 'horizontal' && inverse ? {
  383. scaleX: itemAlign === 'bottom' ? -1 : 1,
  384. rotation: -Math.PI / 2
  385. } : orient === 'vertical' && !inverse ? {
  386. scaleX: itemAlign === 'left' ? 1 : -1,
  387. scaleY: -1
  388. } : {
  389. scaleX: itemAlign === 'left' ? 1 : -1
  390. });
  391. };
  392. ContinuousView.prototype._updateHandle = function (handleEnds, visualInRange) {
  393. if (!this._useHandle) {
  394. return;
  395. }
  396. var shapes = this._shapes;
  397. var visualMapModel = this.visualMapModel;
  398. var handleThumbs = shapes.handleThumbs;
  399. var handleLabels = shapes.handleLabels;
  400. var itemSize = visualMapModel.itemSize;
  401. var dataExtent = visualMapModel.getExtent();
  402. each([0, 1], function (handleIndex) {
  403. var handleThumb = handleThumbs[handleIndex];
  404. handleThumb.setStyle('fill', visualInRange.handlesColor[handleIndex]);
  405. handleThumb.y = handleEnds[handleIndex];
  406. var val = linearMap(handleEnds[handleIndex], [0, itemSize[1]], dataExtent, true);
  407. var symbolSize = this.getControllerVisual(val, 'symbolSize');
  408. handleThumb.scaleX = handleThumb.scaleY = symbolSize / itemSize[0];
  409. handleThumb.x = itemSize[0] - symbolSize / 2; // Update handle label position.
  410. var textPoint = graphic.applyTransform(shapes.handleLabelPoints[handleIndex], graphic.getTransform(handleThumb, this.group));
  411. handleLabels[handleIndex].setStyle({
  412. x: textPoint[0],
  413. y: textPoint[1],
  414. text: visualMapModel.formatValueText(this._dataInterval[handleIndex]),
  415. verticalAlign: 'middle',
  416. align: this._orient === 'vertical' ? this._applyTransform('left', shapes.mainGroup) : 'center'
  417. });
  418. }, this);
  419. };
  420. ContinuousView.prototype._showIndicator = function (cursorValue, textValue, rangeSymbol, halfHoverLinkSize) {
  421. var visualMapModel = this.visualMapModel;
  422. var dataExtent = visualMapModel.getExtent();
  423. var itemSize = visualMapModel.itemSize;
  424. var sizeExtent = [0, itemSize[1]];
  425. var shapes = this._shapes;
  426. var indicator = shapes.indicator;
  427. if (!indicator) {
  428. return;
  429. }
  430. indicator.attr('invisible', false);
  431. var opts = {
  432. convertOpacityToAlpha: true
  433. };
  434. var color = this.getControllerVisual(cursorValue, 'color', opts);
  435. var symbolSize = this.getControllerVisual(cursorValue, 'symbolSize');
  436. var y = linearMap(cursorValue, dataExtent, sizeExtent, true);
  437. var x = itemSize[0] - symbolSize / 2;
  438. var oldIndicatorPos = {
  439. x: indicator.x,
  440. y: indicator.y
  441. }; // Update handle label position.
  442. indicator.y = y;
  443. indicator.x = x;
  444. var textPoint = graphic.applyTransform(shapes.indicatorLabelPoint, graphic.getTransform(indicator, this.group));
  445. var indicatorLabel = shapes.indicatorLabel;
  446. indicatorLabel.attr('invisible', false);
  447. var align = this._applyTransform('left', shapes.mainGroup);
  448. var orient = this._orient;
  449. var isHorizontal = orient === 'horizontal';
  450. indicatorLabel.setStyle({
  451. text: (rangeSymbol ? rangeSymbol : '') + visualMapModel.formatValueText(textValue),
  452. verticalAlign: isHorizontal ? align : 'middle',
  453. align: isHorizontal ? 'center' : align
  454. });
  455. var indicatorNewProps = {
  456. x: x,
  457. y: y,
  458. style: {
  459. fill: color
  460. }
  461. };
  462. var labelNewProps = {
  463. style: {
  464. x: textPoint[0],
  465. y: textPoint[1]
  466. }
  467. };
  468. if (visualMapModel.ecModel.isAnimationEnabled() && !this._firstShowIndicator) {
  469. var animationCfg = {
  470. duration: 100,
  471. easing: 'cubicInOut',
  472. additive: true
  473. };
  474. indicator.x = oldIndicatorPos.x;
  475. indicator.y = oldIndicatorPos.y;
  476. indicator.animateTo(indicatorNewProps, animationCfg);
  477. indicatorLabel.animateTo(labelNewProps, animationCfg);
  478. } else {
  479. indicator.attr(indicatorNewProps);
  480. indicatorLabel.attr(labelNewProps);
  481. }
  482. this._firstShowIndicator = false;
  483. var handleLabels = this._shapes.handleLabels;
  484. if (handleLabels) {
  485. for (var i = 0; i < handleLabels.length; i++) {
  486. // Fade out handle labels.
  487. // NOTE: Must use api enter/leave on emphasis/blur/select state. Or the global states manager will change it.
  488. this._api.enterBlur(handleLabels[i]);
  489. }
  490. }
  491. };
  492. ContinuousView.prototype._enableHoverLinkToSeries = function () {
  493. var self = this;
  494. this._shapes.mainGroup.on('mousemove', function (e) {
  495. self._hovering = true;
  496. if (!self._dragging) {
  497. var itemSize = self.visualMapModel.itemSize;
  498. var pos = self._applyTransform([e.offsetX, e.offsetY], self._shapes.mainGroup, true, true); // For hover link show when hover handle, which might be
  499. // below or upper than sizeExtent.
  500. pos[1] = mathMin(mathMax(0, pos[1]), itemSize[1]);
  501. self._doHoverLinkToSeries(pos[1], 0 <= pos[0] && pos[0] <= itemSize[0]);
  502. }
  503. }).on('mouseout', function () {
  504. // When mouse is out of handle, hoverLink still need
  505. // to be displayed when realtime is set as false.
  506. self._hovering = false;
  507. !self._dragging && self._clearHoverLinkToSeries();
  508. });
  509. };
  510. ContinuousView.prototype._enableHoverLinkFromSeries = function () {
  511. var zr = this.api.getZr();
  512. if (this.visualMapModel.option.hoverLink) {
  513. zr.on('mouseover', this._hoverLinkFromSeriesMouseOver, this);
  514. zr.on('mouseout', this._hideIndicator, this);
  515. } else {
  516. this._clearHoverLinkFromSeries();
  517. }
  518. };
  519. ContinuousView.prototype._doHoverLinkToSeries = function (cursorPos, hoverOnBar) {
  520. var visualMapModel = this.visualMapModel;
  521. var itemSize = visualMapModel.itemSize;
  522. if (!visualMapModel.option.hoverLink) {
  523. return;
  524. }
  525. var sizeExtent = [0, itemSize[1]];
  526. var dataExtent = visualMapModel.getExtent(); // For hover link show when hover handle, which might be below or upper than sizeExtent.
  527. cursorPos = mathMin(mathMax(sizeExtent[0], cursorPos), sizeExtent[1]);
  528. var halfHoverLinkSize = getHalfHoverLinkSize(visualMapModel, dataExtent, sizeExtent);
  529. var hoverRange = [cursorPos - halfHoverLinkSize, cursorPos + halfHoverLinkSize];
  530. var cursorValue = linearMap(cursorPos, sizeExtent, dataExtent, true);
  531. var valueRange = [linearMap(hoverRange[0], sizeExtent, dataExtent, true), linearMap(hoverRange[1], sizeExtent, dataExtent, true)]; // Consider data range is out of visualMap range, see test/visualMap-continuous.html,
  532. // where china and india has very large population.
  533. hoverRange[0] < sizeExtent[0] && (valueRange[0] = -Infinity);
  534. hoverRange[1] > sizeExtent[1] && (valueRange[1] = Infinity); // Do not show indicator when mouse is over handle,
  535. // otherwise labels overlap, especially when dragging.
  536. if (hoverOnBar) {
  537. if (valueRange[0] === -Infinity) {
  538. this._showIndicator(cursorValue, valueRange[1], '< ', halfHoverLinkSize);
  539. } else if (valueRange[1] === Infinity) {
  540. this._showIndicator(cursorValue, valueRange[0], '> ', halfHoverLinkSize);
  541. } else {
  542. this._showIndicator(cursorValue, cursorValue, '≈ ', halfHoverLinkSize);
  543. }
  544. } // When realtime is set as false, handles, which are in barGroup,
  545. // also trigger hoverLink, which help user to realize where they
  546. // focus on when dragging. (see test/heatmap-large.html)
  547. // When realtime is set as true, highlight will not show when hover
  548. // handle, because the label on handle, which displays a exact value
  549. // but not range, might mislead users.
  550. var oldBatch = this._hoverLinkDataIndices;
  551. var newBatch = [];
  552. if (hoverOnBar || useHoverLinkOnHandle(visualMapModel)) {
  553. newBatch = this._hoverLinkDataIndices = visualMapModel.findTargetDataIndices(valueRange);
  554. }
  555. var resultBatches = modelUtil.compressBatches(oldBatch, newBatch);
  556. this._dispatchHighDown('downplay', helper.makeHighDownBatch(resultBatches[0], visualMapModel));
  557. this._dispatchHighDown('highlight', helper.makeHighDownBatch(resultBatches[1], visualMapModel));
  558. };
  559. ContinuousView.prototype._hoverLinkFromSeriesMouseOver = function (e) {
  560. var ecData;
  561. findEventDispatcher(e.target, function (target) {
  562. var currECData = getECData(target);
  563. if (currECData.dataIndex != null) {
  564. ecData = currECData;
  565. return true;
  566. }
  567. }, true);
  568. if (!ecData) {
  569. return;
  570. }
  571. var dataModel = this.ecModel.getSeriesByIndex(ecData.seriesIndex);
  572. var visualMapModel = this.visualMapModel;
  573. if (!visualMapModel.isTargetSeries(dataModel)) {
  574. return;
  575. }
  576. var data = dataModel.getData(ecData.dataType);
  577. var value = data.getStore().get(visualMapModel.getDataDimensionIndex(data), ecData.dataIndex);
  578. if (!isNaN(value)) {
  579. this._showIndicator(value, value);
  580. }
  581. };
  582. ContinuousView.prototype._hideIndicator = function () {
  583. var shapes = this._shapes;
  584. shapes.indicator && shapes.indicator.attr('invisible', true);
  585. shapes.indicatorLabel && shapes.indicatorLabel.attr('invisible', true);
  586. var handleLabels = this._shapes.handleLabels;
  587. if (handleLabels) {
  588. for (var i = 0; i < handleLabels.length; i++) {
  589. // Fade out handle labels.
  590. // NOTE: Must use api enter/leave on emphasis/blur/select state. Or the global states manager will change it.
  591. this._api.leaveBlur(handleLabels[i]);
  592. }
  593. }
  594. };
  595. ContinuousView.prototype._clearHoverLinkToSeries = function () {
  596. this._hideIndicator();
  597. var indices = this._hoverLinkDataIndices;
  598. this._dispatchHighDown('downplay', helper.makeHighDownBatch(indices, this.visualMapModel));
  599. indices.length = 0;
  600. };
  601. ContinuousView.prototype._clearHoverLinkFromSeries = function () {
  602. this._hideIndicator();
  603. var zr = this.api.getZr();
  604. zr.off('mouseover', this._hoverLinkFromSeriesMouseOver);
  605. zr.off('mouseout', this._hideIndicator);
  606. };
  607. ContinuousView.prototype._applyTransform = function (vertex, element, inverse, global) {
  608. var transform = graphic.getTransform(element, global ? null : this.group);
  609. return zrUtil.isArray(vertex) ? graphic.applyTransform(vertex, transform, inverse) : graphic.transformDirection(vertex, transform, inverse);
  610. }; // TODO: TYPE more specified payload types.
  611. ContinuousView.prototype._dispatchHighDown = function (type, batch) {
  612. batch && batch.length && this.api.dispatchAction({
  613. type: type,
  614. batch: batch
  615. });
  616. };
  617. /**
  618. * @override
  619. */
  620. ContinuousView.prototype.dispose = function () {
  621. this._clearHoverLinkFromSeries();
  622. this._clearHoverLinkToSeries();
  623. };
  624. /**
  625. * @override
  626. */
  627. ContinuousView.prototype.remove = function () {
  628. this._clearHoverLinkFromSeries();
  629. this._clearHoverLinkToSeries();
  630. };
  631. ContinuousView.type = 'visualMap.continuous';
  632. return ContinuousView;
  633. }(VisualMapView);
  634. function createPolygon(points, cursor, onDrift, onDragEnd) {
  635. return new graphic.Polygon({
  636. shape: {
  637. points: points
  638. },
  639. draggable: !!onDrift,
  640. cursor: cursor,
  641. drift: onDrift,
  642. onmousemove: function (e) {
  643. // For mobile device, prevent screen slider on the button.
  644. eventTool.stop(e.event);
  645. },
  646. ondragend: onDragEnd
  647. });
  648. }
  649. function getHalfHoverLinkSize(visualMapModel, dataExtent, sizeExtent) {
  650. var halfHoverLinkSize = HOVER_LINK_SIZE / 2;
  651. var hoverLinkDataSize = visualMapModel.get('hoverLinkDataSize');
  652. if (hoverLinkDataSize) {
  653. halfHoverLinkSize = linearMap(hoverLinkDataSize, dataExtent, sizeExtent, true) / 2;
  654. }
  655. return halfHoverLinkSize;
  656. }
  657. function useHoverLinkOnHandle(visualMapModel) {
  658. var hoverLinkOnHandle = visualMapModel.get('hoverLinkOnHandle');
  659. return !!(hoverLinkOnHandle == null ? visualMapModel.get('realtime') : hoverLinkOnHandle);
  660. }
  661. function getCursor(orient) {
  662. return orient === 'vertical' ? 'ns-resize' : 'ew-resize';
  663. }
  664. export default ContinuousView;