event.js 5.8 KB

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