feat(interaction): emit more brush and tooltip events

[pearmini]

监听和触发更多事件

brushHighlight 交互监听更多事件：

• brush:start - 开始创建 brush 的时候触发
• brush:end - brush 更新大小和位置完成时候触发

chart.on('brush:create', (e) => {
  console.log(e.data.selection);
  console.log(e.nativeEvent);
});

tooltip 触发更多事件：

• tooltip:disable - 禁用 tooltip
• tooltip:enable - 使用 tooltip

案例

import { Chart, MASK_CLASS_NAME } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

const [render, remove] = useTip({
  container: document.getElementById('container'),
  onRemove: () => chart.emit('brush:remove', {}),
});

const data = [
  { date: '2007-04-23', close: 93.24 },
  { date: '2007-04-24', close: 95.35 },
  { date: '2007-04-25', close: 98.84 },
  { date: '2007-04-26', close: 99.92 },
  { date: '2007-04-29', close: 99.8 },
  { date: '2007-05-01', close: 99.47 },
  { date: '2007-05-02', close: 100.39 },
  { date: '2007-05-03', close: 100.4 },
  { date: '2007-05-04', close: 100.81 },
  { date: '2007-05-07', close: 103.92 },
];

chart
  .line()
  .data(data)
  .encode('x', (d) => new Date(d.date))
  .encode('y', 'close')
  .scale('y', { nice: true })
  .interaction('brushXHighlight', true);

chart.on('brush:start', onStart);
chart.on('brush:create', onUpdate);
chart.on('brush:update', onUpdate);
chart.on('brush:remove', onRemove);

chart.render();

function onStart() {
  chart.emit('tooltip:disable');
}

function onUpdate(e) {
  const { canvas } = chart.getContext();
  const [mask] = canvas.document.getElementsByClassName(MASK_CLASS_NAME);
  const bounds = mask.getBounds();
  const x = bounds.max[0];
  const y = bounds.center[1];
  const [X] = e.data.selection;
  const filtered = data.filter(
    ({ date }) => new Date(date) >= X[0] && new Date(date) <= X[1],
  );
  render(filtered, [x, y]);
}

function onRemove(e) {
  const { nativeEvent } = e;
  if (nativeEvent) remove();
  chart.emit('tooltip:enable');
}

function useTip({ container, onRemove = () => {}, offsetX = 20, offsetY = 0 }) {
  let div;

  const render = (data, [x, y]) => {
    if (div) remove();
    div = document.createElement('div');
    div.innerHTML = `
    Select a node:
    <ul>${data.map((d) => `<li>${d.date}</li>`).join('')}</ul>
    `;
    div.style.position = 'absolute';
    div.style.background = '#eee';
    div.style.padding = '0.5em';
    div.style.left = x + offsetX + 'px';
    div.style.top = y + offsetY + 'px';
    div.onclick = () => {
      remove();
      onRemove();
    };
    container.append(div);
  };

  const remove = () => {
    if (div) div.remove();
    div = null;
  };

  return [render, remove];
}

TODOLIST

• code
• tests
• docs
• example

[hustcc]

有 brush:end brush:hide 这样的事件吗？

[pearmini]

有 brush:end brush:hide 这样的事件吗？

• brush:hide 对应的应该是 brush:remove
• brush:end 对应的应该是 brush:update

[pearmini]

之前模拟 drag 行为有点问题，修复了，所以需要更新一下截图。