event.js 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. import { ChartEvent } from '../utils/event';
  2. export function dataOf(element, view) {
  3. const { __data__: datum } = element;
  4. const { markKey, index, seriesIndex } = datum;
  5. const { markState } = view;
  6. const selectedMark = Array.from(markState.keys()).find((mark) => mark.key === markKey);
  7. if (!selectedMark)
  8. return;
  9. if (seriesIndex) {
  10. return seriesIndex.map((i) => selectedMark.data[i]);
  11. }
  12. return selectedMark.data[index];
  13. }
  14. function bubblesEvent(eventType, view, emitter, predicate = (event) => true) {
  15. return (e) => {
  16. if (!predicate(e))
  17. return;
  18. // Emit plot events.
  19. emitter.emit(`plot:${eventType}`, e);
  20. const { target } = e;
  21. // There is no target for pointerupoutside event if out of canvas.
  22. if (!target)
  23. return;
  24. const { className: elementType, markType } = target;
  25. // If target area is plot area, do not emit extra events.
  26. if (elementType === 'plot')
  27. return;
  28. // Emit wrapped events.
  29. if (elementType === 'element') {
  30. const e1 = Object.assign(Object.assign({}, e), { nativeEvent: true, data: { data: dataOf(target, view) } });
  31. emitter.emit(`element:${eventType}`, e1);
  32. emitter.emit(`${markType}:${eventType}`, e1);
  33. }
  34. else {
  35. // @todo Handle click axis and legend.
  36. emitter.emit(`${elementType}:${eventType}`, e);
  37. }
  38. };
  39. }
  40. // @todo Provide more info for event.dataset.
  41. export function Event() {
  42. return (context, _, emitter) => {
  43. const { container, view } = context;
  44. // Click events.
  45. const click = bubblesEvent(ChartEvent.CLICK, view, emitter, (e) => e.detail === 1);
  46. const dblclick = bubblesEvent(ChartEvent.DBLCLICK, view, emitter, (e) => e.detail === 2);
  47. // Pointer events.
  48. const pointertap = bubblesEvent(ChartEvent.POINTER_TAP, view, emitter);
  49. const pointerdown = bubblesEvent(ChartEvent.POINTER_DOWN, view, emitter);
  50. const pointerup = bubblesEvent(ChartEvent.POINTER_UP, view, emitter);
  51. const pointerover = bubblesEvent(ChartEvent.POINTER_OVER, view, emitter);
  52. const pointerout = bubblesEvent(ChartEvent.POINTER_OUT, view, emitter);
  53. const pointermove = bubblesEvent(ChartEvent.POINTER_MOVE, view, emitter);
  54. const pointerenter = bubblesEvent(ChartEvent.POINTER_ENTER, view, emitter);
  55. const pointerleave = bubblesEvent(ChartEvent.POINTER_LEAVE, view, emitter);
  56. const pointerupoutside = bubblesEvent(ChartEvent.POINTER_UPOUTSIDE, view, emitter);
  57. // Drag and drop events.
  58. const dragstart = bubblesEvent(ChartEvent.DRAG_START, view, emitter);
  59. const drag = bubblesEvent(ChartEvent.DRAG, view, emitter);
  60. const dragend = bubblesEvent(ChartEvent.DRAG_END, view, emitter);
  61. const dragenter = bubblesEvent(ChartEvent.DRAG_ENTER, view, emitter);
  62. const dragleave = bubblesEvent(ChartEvent.DRAG_LEAVE, view, emitter);
  63. const dragover = bubblesEvent(ChartEvent.DRAG_OVER, view, emitter);
  64. const drop = bubblesEvent(ChartEvent.DROP, view, emitter);
  65. // For legacy usage.
  66. container.addEventListener('click', click);
  67. container.addEventListener('click', dblclick);
  68. // Recommend events.
  69. container.addEventListener('pointertap', pointertap);
  70. container.addEventListener('pointerdown', pointerdown);
  71. container.addEventListener('pointerup', pointerup);
  72. container.addEventListener('pointerover', pointerover);
  73. container.addEventListener('pointerout', pointerout);
  74. container.addEventListener('pointermove', pointermove);
  75. container.addEventListener('pointerenter', pointerenter);
  76. container.addEventListener('pointerleave', pointerleave);
  77. container.addEventListener('pointerupoutside', pointerupoutside);
  78. // Plugin events.
  79. container.addEventListener('dragstart', dragstart);
  80. container.addEventListener('drag', drag);
  81. container.addEventListener('dragend', dragend);
  82. container.addEventListener('dragenter', dragenter);
  83. container.addEventListener('dragleave', dragleave);
  84. container.addEventListener('dragover', dragover);
  85. container.addEventListener('drop', drop);
  86. return () => {
  87. container.removeEventListener('click', click);
  88. container.removeEventListener('click', dblclick);
  89. container.removeEventListener('pointertap', pointertap);
  90. container.removeEventListener('pointerdown', pointerdown);
  91. container.removeEventListener('pointerup', pointerup);
  92. container.removeEventListener('pointerover', pointerover);
  93. container.removeEventListener('pointerout', pointerout);
  94. container.removeEventListener('pointermove', pointermove);
  95. container.removeEventListener('pointerenter', pointerenter);
  96. container.removeEventListener('pointerleave', pointerleave);
  97. container.removeEventListener('pointerupoutside', pointerupoutside);
  98. container.removeEventListener('dragstart', dragstart);
  99. container.removeEventListener('drag', drag);
  100. container.removeEventListener('dragend', dragend);
  101. container.removeEventListener('dragenter', dragenter);
  102. container.removeEventListener('dragleave', dragleave);
  103. container.removeEventListener('dragover', dragover);
  104. container.removeEventListener('drop', drop);
  105. };
  106. };
  107. }
  108. //# sourceMappingURL=event.js.map