pie-select.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. import { mix, each, isWx, isMy, isObject, isObjectValueEqual, createEvent } from '../util/common';
  2. import Interaction from './base';
  3. import Chart from '../chart/chart';
  4. class PieSelect extends Interaction {
  5. getDefaultCfg() {
  6. var defaultCfg = super.getDefaultCfg();
  7. defaultCfg = mix({}, defaultCfg, {
  8. startEvent: 'tap',
  9. processEvent: null,
  10. animate: false,
  11. offset: 1,
  12. appendRadius: 8,
  13. style: {
  14. fillOpacity: 0.5
  15. },
  16. cancelable: true,
  17. defaultSelected: null // set the default selected shape
  18. });
  19. if (isWx || isMy) {
  20. // 小程序
  21. defaultCfg.startEvent = 'touchstart';
  22. defaultCfg.endEvent = 'touchend';
  23. }
  24. return defaultCfg;
  25. }
  26. constructor(cfg, chart) {
  27. super(cfg, chart);
  28. var self = this;
  29. chart.registerPlugins({
  30. clearInner() {
  31. self.halo && self.halo.remove(true);
  32. self.selected = false;
  33. self.selectedShape = null;
  34. self.lastShape = null;
  35. self.halo = null;
  36. self.defaultSelected = null;
  37. }
  38. });
  39. var defaultSelected = self.defaultSelected;
  40. if (isObject(defaultSelected)) {
  41. var selectedShape = self._getSelectedShapeByData(defaultSelected);
  42. selectedShape && self._selectedShape(selectedShape);
  43. this.canvas.draw();
  44. }
  45. }
  46. _getSelectedShapeByData(data) {
  47. var selectedShape = null;
  48. var chart = this.chart;
  49. var geom = chart.get('geoms')[0];
  50. var container = geom.get('container');
  51. var children = container.get('children');
  52. each(children, function (child) {
  53. if (child.get('isShape') && child.get('className') === geom.get('type')) {
  54. // get geometry's shape
  55. var shapeData = child.get('origin')._origin;
  56. if (isObjectValueEqual(shapeData, data)) {
  57. selectedShape = child;
  58. return false;
  59. }
  60. }
  61. });
  62. return selectedShape;
  63. }
  64. _selectedShape(selectedShape) {
  65. var {
  66. offset,
  67. style,
  68. appendRadius,
  69. chart
  70. } = this;
  71. this.lastShape = selectedShape;
  72. var {
  73. x,
  74. y,
  75. startAngle,
  76. endAngle,
  77. r,
  78. fill
  79. } = selectedShape._attrs.attrs;
  80. var frontPlot = chart.get('frontPlot');
  81. var halo = frontPlot.addShape('sector', {
  82. attrs: mix({
  83. x,
  84. y,
  85. r: r + offset + appendRadius,
  86. r0: r + offset,
  87. fill,
  88. startAngle,
  89. endAngle
  90. }, style)
  91. });
  92. this.halo = halo;
  93. var animate = this.animate;
  94. if (animate) {
  95. if (animate === true) {
  96. animate = {
  97. duration: 300
  98. };
  99. }
  100. halo.attr('r', r + offset);
  101. halo.animate().to(mix({
  102. attrs: {
  103. r: r + offset + appendRadius
  104. }
  105. }, animate));
  106. }
  107. }
  108. start(ev) {
  109. var chart = this.chart;
  110. if (ev.type === 'tap') {
  111. ev.clientX = ev.center.x;
  112. ev.clientY = ev.center.y;
  113. }
  114. var {
  115. x,
  116. y
  117. } = createEvent(ev, chart);
  118. var records = chart.getSnapRecords({
  119. x,
  120. y
  121. });
  122. if (!records.length) {
  123. this.selected = false;
  124. this.selectedShape = null;
  125. return;
  126. }
  127. var data = records[0]._origin;
  128. var selectedShape = this._getSelectedShapeByData(data);
  129. var lastShape = this.lastShape;
  130. this.selectedShape = selectedShape;
  131. this.selected = true;
  132. if (selectedShape === lastShape) {
  133. if (!this.cancelable) {
  134. return;
  135. }
  136. this.halo && this.halo.remove(true);
  137. this.lastShape = null;
  138. this.selected = false;
  139. } else {
  140. this.halo && this.halo.remove(true);
  141. this._selectedShape(selectedShape);
  142. }
  143. this.canvas.draw();
  144. }
  145. end(ev) {
  146. var selectedShape = this.selectedShape;
  147. if (selectedShape && !selectedShape.get('destroyed')) {
  148. ev.data = selectedShape.get('origin')._origin;
  149. ev.shapeInfo = selectedShape.get('origin');
  150. ev.shape = selectedShape;
  151. ev.selected = !!this.selected;
  152. }
  153. }
  154. }
  155. Chart.registerInteraction('pie-select', PieSelect);
  156. export default PieSelect;