guide.js 6.0 KB

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