ParallelAxisView.js 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
  1. var echarts = require("../../echarts");
  2. var zrUtil = require("zrender/lib/core/util");
  3. var AxisBuilder = require("./AxisBuilder");
  4. var BrushController = require("../helper/BrushController");
  5. var brushHelper = require("../helper/brushHelper");
  6. var graphic = require("../../util/graphic");
  7. var elementList = ['axisLine', 'axisTickLabel', 'axisName'];
  8. var AxisView = echarts.extendComponentView({
  9. type: 'parallelAxis',
  10. /**
  11. * @override
  12. */
  13. init: function (ecModel, api) {
  14. AxisView.superApply(this, 'init', arguments);
  15. /**
  16. * @type {module:echarts/component/helper/BrushController}
  17. */
  18. (this._brushController = new BrushController(api.getZr())).on('brush', zrUtil.bind(this._onBrush, this));
  19. },
  20. /**
  21. * @override
  22. */
  23. render: function (axisModel, ecModel, api, payload) {
  24. if (fromAxisAreaSelect(axisModel, ecModel, payload)) {
  25. return;
  26. }
  27. this.axisModel = axisModel;
  28. this.api = api;
  29. this.group.removeAll();
  30. var oldAxisGroup = this._axisGroup;
  31. this._axisGroup = new graphic.Group();
  32. this.group.add(this._axisGroup);
  33. if (!axisModel.get('show')) {
  34. return;
  35. }
  36. var coordSysModel = getCoordSysModel(axisModel, ecModel);
  37. var coordSys = coordSysModel.coordinateSystem;
  38. var areaSelectStyle = axisModel.getAreaSelectStyle();
  39. var areaWidth = areaSelectStyle.width;
  40. var dim = axisModel.axis.dim;
  41. var axisLayout = coordSys.getAxisLayout(dim);
  42. var builderOpt = zrUtil.extend({
  43. strokeContainThreshold: areaWidth
  44. }, axisLayout);
  45. var axisBuilder = new AxisBuilder(axisModel, builderOpt);
  46. zrUtil.each(elementList, axisBuilder.add, axisBuilder);
  47. this._axisGroup.add(axisBuilder.getGroup());
  48. this._refreshBrushController(builderOpt, areaSelectStyle, axisModel, coordSysModel, areaWidth, api);
  49. var animationModel = payload && payload.animation === false ? null : axisModel;
  50. graphic.groupTransition(oldAxisGroup, this._axisGroup, animationModel);
  51. },
  52. /**
  53. * @override
  54. */
  55. updateVisual: function (axisModel, ecModel, api, payload) {
  56. this._brushController && this._brushController.updateCovers(getCoverInfoList(axisModel));
  57. },
  58. _refreshBrushController: function (builderOpt, areaSelectStyle, axisModel, coordSysModel, areaWidth, api) {
  59. // After filtering, axis may change, select area needs to be update.
  60. var extent = axisModel.axis.getExtent();
  61. var extentLen = extent[1] - extent[0];
  62. var extra = Math.min(30, Math.abs(extentLen) * 0.1); // Arbitrary value.
  63. // width/height might be negative, which will be
  64. // normalized in BoundingRect.
  65. var rect = graphic.BoundingRect.create({
  66. x: extent[0],
  67. y: -areaWidth / 2,
  68. width: extentLen,
  69. height: areaWidth
  70. });
  71. rect.x -= extra;
  72. rect.width += 2 * extra;
  73. this._brushController.mount({
  74. enableGlobalPan: true,
  75. rotation: builderOpt.rotation,
  76. position: builderOpt.position
  77. }).setPanels([{
  78. panelId: 'pl',
  79. clipPath: brushHelper.makeRectPanelClipPath(rect),
  80. isTargetByCursor: brushHelper.makeRectIsTargetByCursor(rect, api, coordSysModel),
  81. getLinearBrushOtherExtent: brushHelper.makeLinearBrushOtherExtent(rect, 0)
  82. }]).enableBrush({
  83. brushType: 'lineX',
  84. brushStyle: areaSelectStyle,
  85. removeOnClick: true
  86. }).updateCovers(getCoverInfoList(axisModel));
  87. },
  88. _onBrush: function (coverInfoList, opt) {
  89. // Do not cache these object, because the mey be changed.
  90. var axisModel = this.axisModel;
  91. var axis = axisModel.axis;
  92. var intervals = zrUtil.map(coverInfoList, function (coverInfo) {
  93. return [axis.coordToData(coverInfo.range[0], true), axis.coordToData(coverInfo.range[1], true)];
  94. }); // If realtime is true, action is not dispatched on drag end, because
  95. // the drag end emits the same params with the last drag move event,
  96. // and may have some delay when using touch pad.
  97. if (!axisModel.option.realtime === opt.isEnd || opt.removeOnClick) {
  98. // jshint ignore:line
  99. this.api.dispatchAction({
  100. type: 'axisAreaSelect',
  101. parallelAxisId: axisModel.id,
  102. intervals: intervals
  103. });
  104. }
  105. },
  106. /**
  107. * @override
  108. */
  109. dispose: function () {
  110. this._brushController.dispose();
  111. }
  112. });
  113. function fromAxisAreaSelect(axisModel, ecModel, payload) {
  114. return payload && payload.type === 'axisAreaSelect' && ecModel.findComponents({
  115. mainType: 'parallelAxis',
  116. query: payload
  117. })[0] === axisModel;
  118. }
  119. function getCoverInfoList(axisModel) {
  120. var axis = axisModel.axis;
  121. return zrUtil.map(axisModel.activeIntervals, function (interval) {
  122. return {
  123. brushType: 'lineX',
  124. panelId: 'pl',
  125. range: [axis.dataToCoord(interval[0], true), axis.dataToCoord(interval[1], true)]
  126. };
  127. });
  128. }
  129. function getCoordSysModel(axisModel, ecModel) {
  130. return ecModel.getComponent('parallel', axisModel.get('parallelIndex'));
  131. }
  132. var _default = AxisView;
  133. module.exports = _default;