base.js 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. import { deepMix, isNil, isFunction, isString } from '../../util/common';
  2. var KEYWORDS_PERCENT = {
  3. min: 0,
  4. median: 0.5,
  5. max: 1
  6. };
  7. class GuideBase {
  8. _initDefaultCfg() {}
  9. constructor(cfg) {
  10. this._initDefaultCfg();
  11. deepMix(this, cfg);
  12. }
  13. _getNormalizedValue(val, scale) {
  14. var rst;
  15. if (isNil(KEYWORDS_PERCENT[val])) {
  16. rst = scale.scale(val);
  17. } else {
  18. rst = KEYWORDS_PERCENT[val];
  19. }
  20. return rst;
  21. }
  22. parsePercentPoint(coord, position) {
  23. var xPercent = parseFloat(position[0]) / 100;
  24. var yPercent = parseFloat(position[1]) / 100;
  25. var start = coord.start;
  26. var end = coord.end;
  27. var width = Math.abs(start.x - end.x);
  28. var height = Math.abs(start.y - end.y);
  29. var x = width * xPercent + Math.min(start.x, end.x);
  30. var y = height * yPercent + Math.min(start.y, end.y);
  31. return {
  32. x,
  33. y
  34. };
  35. }
  36. parsePoint(coord, position) {
  37. var self = this;
  38. var xScale = self.xScale;
  39. var yScales = self.yScales;
  40. if (isFunction(position)) {
  41. position = position(xScale, yScales); // position 必须是对象
  42. } // 如果数据格式是 ['50%', '50%'] 的格式
  43. // fix: 原始数据中可能会包含 'xxx5%xxx' 这样的数据,需要判断下 https://github.com/antvis/f2/issues/590
  44. if (isString(position[0]) && position[0].indexOf('%') !== -1 && !isNaN(position[0].slice(0, -1))) {
  45. return this.parsePercentPoint(coord, position);
  46. }
  47. var x = self._getNormalizedValue(position[0], xScale);
  48. var y = self._getNormalizedValue(position[1], yScales[0]);
  49. var point = coord.convertPoint({
  50. x,
  51. y
  52. });
  53. if (self.limitInPlot) {
  54. // limit in chart plotRange
  55. if (x >= 0 && x <= 1 && y >= 0 && y <= 1) {
  56. return point;
  57. }
  58. return null;
  59. }
  60. return point;
  61. }
  62. /**
  63. * render the guide component
  64. * @param {Coord} coord coordinate instance
  65. * @param {Canvas.Group} group the container
  66. */
  67. render()
  68. /* coord,group */
  69. {}
  70. repaint() {
  71. this.remove();
  72. var {
  73. coord,
  74. container,
  75. canvas
  76. } = this;
  77. if (container && !container.isDestroyed()) {
  78. this.render(coord, container);
  79. canvas.draw();
  80. }
  81. }
  82. remove() {
  83. var {
  84. element
  85. } = this;
  86. element && element.remove(true);
  87. }
  88. changeVisible(visible) {
  89. var self = this;
  90. self.visible = visible;
  91. var element = self.element;
  92. if (!element) return;
  93. if (element.set) {
  94. element.set('visible', visible);
  95. } else {
  96. element.style.display = visible ? '' : 'none';
  97. }
  98. }
  99. }
  100. export default GuideBase;