abstract.js 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223
  1. var Util = require('../../util/common');
  2. var Global = require('../../global');
  3. var Vector2 = require('../../graphic/util/vector2');
  4. var Abastract =
  5. /*#__PURE__*/
  6. function () {
  7. var _proto = Abastract.prototype;
  8. _proto._initDefaultCfg = function _initDefaultCfg() {
  9. /**
  10. * ticks
  11. * @type {Array}
  12. */
  13. this.ticks = [];
  14. /**
  15. * the configuration for tickLine
  16. * @type {Object}
  17. */
  18. this.tickLine = {};
  19. /**
  20. * the direction of ticks, 1 means clockwise
  21. * @type {Number}
  22. */
  23. this.offsetFactor = 1;
  24. /**
  25. * the top container
  26. * @type {container}
  27. */
  28. this.frontContainer = null;
  29. /**
  30. * the back container
  31. * @type {[type]}
  32. */
  33. this.backContainer = null;
  34. /**
  35. * points for draw grid line
  36. * @type {Array}
  37. */
  38. this.gridPoints = [];
  39. };
  40. function Abastract(cfg) {
  41. this._initDefaultCfg();
  42. Util.mix(this, cfg);
  43. this.draw();
  44. }
  45. _proto.draw = function draw() {
  46. var line = this.line,
  47. tickLine = this.tickLine,
  48. label = this.label,
  49. grid = this.grid;
  50. grid && this.drawGrid(grid); // draw the grid lines
  51. tickLine && this.drawTicks(tickLine); // draw the tickLine
  52. line && this.drawLine(line); // draw axis line
  53. label && this.drawLabels(); // draw ticks
  54. };
  55. _proto.drawTicks = function drawTicks(tickCfg) {
  56. var self = this;
  57. var ticks = self.ticks;
  58. var length = tickCfg.length;
  59. var container = self.getContainer(tickCfg.top);
  60. Util.each(ticks, function (tick) {
  61. var start = self.getOffsetPoint(tick.value);
  62. var end = self.getSidePoint(start, length);
  63. var shape = container.addShape('line', {
  64. className: 'axis-tick',
  65. attrs: Util.mix({
  66. x1: start.x,
  67. y1: start.y,
  68. x2: end.x,
  69. y2: end.y
  70. }, tickCfg)
  71. });
  72. shape._id = self._id + '-ticks';
  73. });
  74. };
  75. _proto.drawLabels = function drawLabels() {
  76. var self = this;
  77. var labelOffset = self.labelOffset;
  78. var labels = self.labels;
  79. Util.each(labels, function (labelShape) {
  80. var container = self.getContainer(labelShape.get('top'));
  81. var start = self.getOffsetPoint(labelShape.get('value'));
  82. var _self$getSidePoint = self.getSidePoint(start, labelOffset),
  83. x = _self$getSidePoint.x,
  84. y = _self$getSidePoint.y;
  85. labelShape.attr(Util.mix({
  86. x: x,
  87. y: y
  88. }, self.getTextAlignInfo(start, labelOffset), labelShape.get('textStyle')));
  89. labelShape._id = self._id + '-' + labelShape.attr('text');
  90. container.add(labelShape);
  91. });
  92. };
  93. _proto.drawLine = function drawLine() {};
  94. _proto.drawGrid = function drawGrid(grid) {
  95. var self = this;
  96. var gridPoints = self.gridPoints,
  97. ticks = self.ticks;
  98. var gridCfg = grid;
  99. var count = gridPoints.length;
  100. Util.each(gridPoints, function (subPoints, index) {
  101. if (Util.isFunction(grid)) {
  102. var tick = ticks[index] || {};
  103. var executedGrid = grid(tick.text, index, count);
  104. gridCfg = executedGrid ? Util.mix({}, Global._defaultAxis.grid, executedGrid) : null;
  105. }
  106. if (gridCfg) {
  107. var type = gridCfg.type; // has two types: 'line' and 'arc'
  108. var points = subPoints.points;
  109. var container = self.getContainer(gridCfg.top);
  110. var shape;
  111. if (type === 'arc') {
  112. var center = self.center,
  113. startAngle = self.startAngle,
  114. endAngle = self.endAngle;
  115. var radius = Vector2.length([points[0].x - center.x, points[0].y - center.y]);
  116. shape = container.addShape('Arc', {
  117. className: 'axis-grid',
  118. attrs: Util.mix({
  119. x: center.x,
  120. y: center.y,
  121. startAngle: startAngle,
  122. endAngle: endAngle,
  123. r: radius
  124. }, gridCfg)
  125. });
  126. } else {
  127. shape = container.addShape('Polyline', {
  128. className: 'axis-grid',
  129. attrs: Util.mix({
  130. points: points
  131. }, gridCfg)
  132. });
  133. }
  134. shape._id = subPoints._id;
  135. }
  136. });
  137. };
  138. _proto.getOffsetPoint = function getOffsetPoint() {};
  139. _proto.getAxisVector = function getAxisVector() {};
  140. _proto.getOffsetVector = function getOffsetVector(point, offset) {
  141. var self = this;
  142. var axisVector = self.getAxisVector(point);
  143. var normal = Vector2.normalize([], axisVector);
  144. var factor = self.offsetFactor;
  145. var verticalVector = [normal[1] * -1 * factor, normal[0] * factor];
  146. return Vector2.scale([], verticalVector, offset);
  147. };
  148. _proto.getSidePoint = function getSidePoint(point, offset) {
  149. var self = this;
  150. var offsetVector = self.getOffsetVector(point, offset);
  151. return {
  152. x: point.x + offsetVector[0],
  153. y: point.y + offsetVector[1]
  154. };
  155. };
  156. _proto.getTextAlignInfo = function getTextAlignInfo(point, offset) {
  157. var self = this;
  158. var offsetVector = self.getOffsetVector(point, offset);
  159. var align;
  160. var baseLine;
  161. if (offsetVector[0] > 0) {
  162. align = 'left';
  163. } else if (offsetVector[0] < 0) {
  164. align = 'right';
  165. } else {
  166. align = 'center';
  167. }
  168. if (offsetVector[1] > 0) {
  169. baseLine = 'top';
  170. } else if (offsetVector[1] < 0) {
  171. baseLine = 'bottom';
  172. } else {
  173. baseLine = 'middle';
  174. }
  175. return {
  176. textAlign: align,
  177. textBaseline: baseLine
  178. };
  179. };
  180. _proto.getContainer = function getContainer(isTop) {
  181. var frontContainer = this.frontContainer,
  182. backContainer = this.backContainer;
  183. return isTop ? frontContainer : backContainer;
  184. };
  185. return Abastract;
  186. }();
  187. module.exports = Abastract;