DataZoom.js 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285
  1. var echarts = require("../../../echarts");
  2. var zrUtil = require("zrender/lib/core/util");
  3. var BrushController = require("../../helper/BrushController");
  4. var BrushTargetManager = require("../../helper/BrushTargetManager");
  5. var history = require("../../dataZoom/history");
  6. var sliderMove = require("../../helper/sliderMove");
  7. var lang = require("../../../lang");
  8. var featureManager = require("../featureManager");
  9. require("../../dataZoomSelect");
  10. // Use dataZoomSelect
  11. var dataZoomLang = lang.toolbox.dataZoom;
  12. var each = zrUtil.each; // Spectial component id start with \0ec\0, see echarts/model/Global.js~hasInnerId
  13. var DATA_ZOOM_ID_BASE = '\0_ec_\0toolbox-dataZoom_';
  14. function DataZoom(model, ecModel, api) {
  15. /**
  16. * @private
  17. * @type {module:echarts/component/helper/BrushController}
  18. */
  19. (this._brushController = new BrushController(api.getZr())).on('brush', zrUtil.bind(this._onBrush, this)).mount();
  20. /**
  21. * @private
  22. * @type {boolean}
  23. */
  24. this._isZoomActive;
  25. }
  26. DataZoom.defaultOption = {
  27. show: true,
  28. // Icon group
  29. icon: {
  30. zoom: 'M0,13.5h26.9 M13.5,26.9V0 M32.1,13.5H58V58H13.5 V32.1',
  31. back: 'M22,1.4L9.9,13.5l12.3,12.3 M10.3,13.5H54.9v44.6 H10.3v-26'
  32. },
  33. // `zoom`, `back`
  34. title: zrUtil.clone(dataZoomLang.title)
  35. };
  36. var proto = DataZoom.prototype;
  37. proto.render = function (featureModel, ecModel, api, payload) {
  38. this.model = featureModel;
  39. this.ecModel = ecModel;
  40. this.api = api;
  41. updateZoomBtnStatus(featureModel, ecModel, this, payload, api);
  42. updateBackBtnStatus(featureModel, ecModel);
  43. };
  44. proto.onclick = function (ecModel, api, type) {
  45. handlers[type].call(this);
  46. };
  47. proto.remove = function (ecModel, api) {
  48. this._brushController.unmount();
  49. };
  50. proto.dispose = function (ecModel, api) {
  51. this._brushController.dispose();
  52. };
  53. /**
  54. * @private
  55. */
  56. var handlers = {
  57. zoom: function () {
  58. var nextActive = !this._isZoomActive;
  59. this.api.dispatchAction({
  60. type: 'takeGlobalCursor',
  61. key: 'dataZoomSelect',
  62. dataZoomSelectActive: nextActive
  63. });
  64. },
  65. back: function () {
  66. this._dispatchZoomAction(history.pop(this.ecModel));
  67. }
  68. };
  69. /**
  70. * @private
  71. */
  72. proto._onBrush = function (areas, opt) {
  73. if (!opt.isEnd || !areas.length) {
  74. return;
  75. }
  76. var snapshot = {};
  77. var ecModel = this.ecModel;
  78. this._brushController.updateCovers([]); // remove cover
  79. var brushTargetManager = new BrushTargetManager(retrieveAxisSetting(this.model.option), ecModel, {
  80. include: ['grid']
  81. });
  82. brushTargetManager.matchOutputRanges(areas, ecModel, function (area, coordRange, coordSys) {
  83. if (coordSys.type !== 'cartesian2d') {
  84. return;
  85. }
  86. var brushType = area.brushType;
  87. if (brushType === 'rect') {
  88. setBatch('x', coordSys, coordRange[0]);
  89. setBatch('y', coordSys, coordRange[1]);
  90. } else {
  91. setBatch({
  92. lineX: 'x',
  93. lineY: 'y'
  94. }[brushType], coordSys, coordRange);
  95. }
  96. });
  97. history.push(ecModel, snapshot);
  98. this._dispatchZoomAction(snapshot);
  99. function setBatch(dimName, coordSys, minMax) {
  100. var axis = coordSys.getAxis(dimName);
  101. var axisModel = axis.model;
  102. var dataZoomModel = findDataZoom(dimName, axisModel, ecModel); // Restrict range.
  103. var minMaxSpan = dataZoomModel.findRepresentativeAxisProxy(axisModel).getMinMaxSpan();
  104. if (minMaxSpan.minValueSpan != null || minMaxSpan.maxValueSpan != null) {
  105. minMax = sliderMove(0, minMax.slice(), axis.scale.getExtent(), 0, minMaxSpan.minValueSpan, minMaxSpan.maxValueSpan);
  106. }
  107. dataZoomModel && (snapshot[dataZoomModel.id] = {
  108. dataZoomId: dataZoomModel.id,
  109. startValue: minMax[0],
  110. endValue: minMax[1]
  111. });
  112. }
  113. function findDataZoom(dimName, axisModel, ecModel) {
  114. var found;
  115. ecModel.eachComponent({
  116. mainType: 'dataZoom',
  117. subType: 'select'
  118. }, function (dzModel) {
  119. var has = dzModel.getAxisModel(dimName, axisModel.componentIndex);
  120. has && (found = dzModel);
  121. });
  122. return found;
  123. }
  124. };
  125. /**
  126. * @private
  127. */
  128. proto._dispatchZoomAction = function (snapshot) {
  129. var batch = []; // Convert from hash map to array.
  130. each(snapshot, function (batchItem, dataZoomId) {
  131. batch.push(zrUtil.clone(batchItem));
  132. });
  133. batch.length && this.api.dispatchAction({
  134. type: 'dataZoom',
  135. from: this.uid,
  136. batch: batch
  137. });
  138. };
  139. function retrieveAxisSetting(option) {
  140. var setting = {}; // Compatible with previous setting: null => all axis, false => no axis.
  141. zrUtil.each(['xAxisIndex', 'yAxisIndex'], function (name) {
  142. setting[name] = option[name];
  143. setting[name] == null && (setting[name] = 'all');
  144. (setting[name] === false || setting[name] === 'none') && (setting[name] = []);
  145. });
  146. return setting;
  147. }
  148. function updateBackBtnStatus(featureModel, ecModel) {
  149. featureModel.setIconStatus('back', history.count(ecModel) > 1 ? 'emphasis' : 'normal');
  150. }
  151. function updateZoomBtnStatus(featureModel, ecModel, view, payload, api) {
  152. var zoomActive = view._isZoomActive;
  153. if (payload && payload.type === 'takeGlobalCursor') {
  154. zoomActive = payload.key === 'dataZoomSelect' ? payload.dataZoomSelectActive : false;
  155. }
  156. view._isZoomActive = zoomActive;
  157. featureModel.setIconStatus('zoom', zoomActive ? 'emphasis' : 'normal');
  158. var brushTargetManager = new BrushTargetManager(retrieveAxisSetting(featureModel.option), ecModel, {
  159. include: ['grid']
  160. });
  161. view._brushController.setPanels(brushTargetManager.makePanelOpts(api, function (targetInfo) {
  162. return targetInfo.xAxisDeclared && !targetInfo.yAxisDeclared ? 'lineX' : !targetInfo.xAxisDeclared && targetInfo.yAxisDeclared ? 'lineY' : 'rect';
  163. })).enableBrush(zoomActive ? {
  164. brushType: 'auto',
  165. brushStyle: {
  166. // FIXME user customized?
  167. lineWidth: 0,
  168. fill: 'rgba(0,0,0,0.2)'
  169. }
  170. } : false);
  171. }
  172. featureManager.register('dataZoom', DataZoom); // Create special dataZoom option for select
  173. echarts.registerPreprocessor(function (option) {
  174. if (!option) {
  175. return;
  176. }
  177. var dataZoomOpts = option.dataZoom || (option.dataZoom = []);
  178. if (!zrUtil.isArray(dataZoomOpts)) {
  179. option.dataZoom = dataZoomOpts = [dataZoomOpts];
  180. }
  181. var toolboxOpt = option.toolbox;
  182. if (toolboxOpt) {
  183. // Assume there is only one toolbox
  184. if (zrUtil.isArray(toolboxOpt)) {
  185. toolboxOpt = toolboxOpt[0];
  186. }
  187. if (toolboxOpt && toolboxOpt.feature) {
  188. var dataZoomOpt = toolboxOpt.feature.dataZoom;
  189. addForAxis('xAxis', dataZoomOpt);
  190. addForAxis('yAxis', dataZoomOpt);
  191. }
  192. }
  193. function addForAxis(axisName, dataZoomOpt) {
  194. if (!dataZoomOpt) {
  195. return;
  196. } // Try not to modify model, because it is not merged yet.
  197. var axisIndicesName = axisName + 'Index';
  198. var givenAxisIndices = dataZoomOpt[axisIndicesName];
  199. if (givenAxisIndices != null && givenAxisIndices != 'all' && !zrUtil.isArray(givenAxisIndices)) {
  200. givenAxisIndices = givenAxisIndices === false || givenAxisIndices === 'none' ? [] : [givenAxisIndices];
  201. }
  202. forEachComponent(axisName, function (axisOpt, axisIndex) {
  203. if (givenAxisIndices != null && givenAxisIndices != 'all' && zrUtil.indexOf(givenAxisIndices, axisIndex) === -1) {
  204. return;
  205. }
  206. var newOpt = {
  207. type: 'select',
  208. $fromToolbox: true,
  209. // Id for merge mapping.
  210. id: DATA_ZOOM_ID_BASE + axisName + axisIndex
  211. }; // FIXME
  212. // Only support one axis now.
  213. newOpt[axisIndicesName] = axisIndex;
  214. dataZoomOpts.push(newOpt);
  215. });
  216. }
  217. function forEachComponent(mainType, cb) {
  218. var opts = option[mainType];
  219. if (!zrUtil.isArray(opts)) {
  220. opts = opts ? [opts] : [];
  221. }
  222. each(opts, cb);
  223. }
  224. });
  225. var _default = DataZoom;
  226. module.exports = _default;