guide.js 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279
  1. var Util = require('../util/common');
  2. var Guide = require('../component/guide/base');
  3. var Global = require('../global'); // register the default configuration for Guide
  4. Global.guide = Util.deepMix({
  5. line: {
  6. style: {
  7. stroke: '#a3a3a3',
  8. lineWidth: 1
  9. },
  10. top: true
  11. },
  12. text: {
  13. style: {
  14. fill: '#787878',
  15. textAlign: 'center',
  16. textBaseline: 'middle'
  17. },
  18. offsetX: 0,
  19. offsetY: 0,
  20. top: true
  21. },
  22. rect: {
  23. style: {
  24. fill: '#fafafa'
  25. },
  26. top: false
  27. },
  28. arc: {
  29. style: {
  30. stroke: '#a3a3a3'
  31. },
  32. top: true
  33. },
  34. html: {
  35. offsetX: 0,
  36. offsetY: 0,
  37. alignX: 'center',
  38. alignY: 'middle'
  39. },
  40. tag: {
  41. top: true,
  42. offsetX: 0,
  43. offsetY: 0,
  44. side: 4,
  45. background: {
  46. padding: 5,
  47. radius: 2,
  48. fill: '#1890FF'
  49. },
  50. textStyle: {
  51. fontSize: 12,
  52. fill: '#fff',
  53. textAlign: 'center',
  54. textBaseline: 'middle'
  55. }
  56. },
  57. point: {
  58. top: true,
  59. offsetX: 0,
  60. offsetY: 0,
  61. style: {
  62. fill: '#fff',
  63. r: 3,
  64. lineWidth: 2,
  65. stroke: '#1890ff'
  66. }
  67. }
  68. }, Global.guide || {});
  69. var GuideController =
  70. /*#__PURE__*/
  71. function () {
  72. function GuideController(cfg) {
  73. this.guides = [];
  74. this.xScale = null;
  75. this.yScales = null;
  76. this.guideShapes = [];
  77. Util.mix(this, cfg);
  78. }
  79. var _proto = GuideController.prototype;
  80. _proto._toString = function _toString(position) {
  81. if (Util.isFunction(position)) {
  82. position = position(this.xScale, this.yScales);
  83. }
  84. position = position.toString();
  85. return position;
  86. };
  87. _proto._getId = function _getId(shape, guide) {
  88. var id = guide.id;
  89. if (!id) {
  90. var type = guide.type;
  91. if (type === 'arc' || type === 'line' || type === 'rect') {
  92. id = this._toString(guide.start) + '-' + this._toString(guide.end);
  93. } else {
  94. id = this._toString(guide.position);
  95. }
  96. }
  97. return id;
  98. };
  99. _proto.paint = function paint(coord) {
  100. var self = this;
  101. var chart = self.chart,
  102. guides = self.guides,
  103. xScale = self.xScale,
  104. yScales = self.yScales;
  105. var guideShapes = [];
  106. Util.each(guides, function (guide, idx) {
  107. guide.xScale = xScale;
  108. guide.yScales = yScales;
  109. var container;
  110. if (guide.type === 'regionFilter') {
  111. // TODO: RegionFilter support animation
  112. guide.chart = chart;
  113. } else {
  114. container = guide.top ? self.frontPlot : self.backPlot;
  115. }
  116. guide.coord = coord;
  117. guide.container = container;
  118. guide.canvas = chart.get('canvas');
  119. var shape = guide.render(coord, container);
  120. if (shape) {
  121. var id = self._getId(shape, guide);
  122. [].concat(shape).forEach(function (s) {
  123. s._id = s.get('className') + '-' + id;
  124. s.set('index', idx);
  125. guideShapes.push(s);
  126. });
  127. }
  128. });
  129. self.guideShapes = guideShapes;
  130. };
  131. _proto.clear = function clear() {
  132. this.reset();
  133. this.guides = [];
  134. return this;
  135. };
  136. _proto.reset = function reset() {
  137. var guides = this.guides;
  138. Util.each(guides, function (guide) {
  139. guide.remove();
  140. });
  141. };
  142. _proto._createGuide = function _createGuide(type, cfg) {
  143. var ClassName = Util.upperFirst(type);
  144. var guide = new Guide[ClassName](Util.deepMix({}, Global.guide[type], cfg));
  145. this.guides.push(guide);
  146. return guide;
  147. };
  148. _proto.line = function line(cfg) {
  149. if (cfg === void 0) {
  150. cfg = {};
  151. }
  152. return this._createGuide('line', cfg);
  153. };
  154. _proto.text = function text(cfg) {
  155. if (cfg === void 0) {
  156. cfg = {};
  157. }
  158. return this._createGuide('text', cfg);
  159. };
  160. _proto.arc = function arc(cfg) {
  161. if (cfg === void 0) {
  162. cfg = {};
  163. }
  164. return this._createGuide('arc', cfg);
  165. };
  166. _proto.html = function html(cfg) {
  167. if (cfg === void 0) {
  168. cfg = {};
  169. }
  170. return this._createGuide('html', cfg);
  171. };
  172. _proto.rect = function rect(cfg) {
  173. if (cfg === void 0) {
  174. cfg = {};
  175. }
  176. return this._createGuide('rect', cfg);
  177. };
  178. _proto.tag = function tag(cfg) {
  179. if (cfg === void 0) {
  180. cfg = {};
  181. }
  182. return this._createGuide('tag', cfg);
  183. };
  184. _proto.point = function point(cfg) {
  185. if (cfg === void 0) {
  186. cfg = {};
  187. }
  188. return this._createGuide('point', cfg);
  189. };
  190. _proto.regionFilter = function regionFilter(cfg) {
  191. if (cfg === void 0) {
  192. cfg = {};
  193. }
  194. return this._createGuide('regionFilter', cfg);
  195. };
  196. return GuideController;
  197. }();
  198. module.exports = {
  199. init: function init(chart) {
  200. var guideController = new GuideController({
  201. frontPlot: chart.get('frontPlot').addGroup({
  202. zIndex: 20,
  203. className: 'guideContainer'
  204. }),
  205. backPlot: chart.get('backPlot').addGroup({
  206. className: 'guideContainer'
  207. })
  208. });
  209. chart.set('guideController', guideController);
  210. /**
  211. * 为图表添加 guide
  212. * @return {GuideController} 返回 guide 控制器
  213. */
  214. chart.guide = function () {
  215. return guideController;
  216. };
  217. },
  218. afterGeomDraw: function afterGeomDraw(chart) {
  219. var guideController = chart.get('guideController');
  220. if (!guideController.guides.length) {
  221. return;
  222. }
  223. var xScale = chart.getXScale();
  224. var yScales = chart.getYScales();
  225. var coord = chart.get('coord');
  226. guideController.xScale = xScale;
  227. guideController.yScales = yScales;
  228. guideController.chart = chart; // for regionFilter
  229. guideController.paint(coord);
  230. },
  231. clear: function clear(chart) {
  232. chart.get('guideController').clear();
  233. },
  234. repaint: function repaint(chart) {
  235. chart.get('guideController').reset();
  236. }
  237. };