feat(interaction): emit more brush and tooltip events

__tests__/integration/api-chart-emit-enable-disable-tooltip.spec.ts

@@ -0,0 +1,103 @@
+import './utils/useSnapshotMatchers';
+import { Chart } from '../../src';
+import { createDOMGCanvas } from './utils/createDOMGCanvas';
+import { sleep } from './utils/sleep';
+import { dispatchFirstElementEvent, dispatchPlotEvent } from './utils/event';
+import { kebabCase } from './utils/kebabCase';
+
+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 },
+];
+
+function renderBar({ canvas, container }) {
+  const chart = new Chart({ canvas, container });
+  chart.options({
+    type: 'interval',
+    data,
+    encode: { x: 'date', y: 'close' },
+  });
+  const finished = chart.render();
+  return { chart, finished };
+}
+
+function renderLine({ canvas, container }) {
+  const chart = new Chart({ canvas, container });
+  chart.options({
+    type: 'line',
+    data,
+    encode: { x: 'date', y: 'close' },
+  });
+  const finished = chart.render();
+  return { chart, finished };
+}
+
+describe('chart.emit', () => {
+  const dir = `${__dirname}/snapshots/api/${kebabCase(
+    'chartEmitEnableDisableTooltip',
+  )}`;
+  const barCanvas = createDOMGCanvas(640, 480);
+  const lineCanvas = createDOMGCanvas(640, 480);
+
+  it('chart.emit enable item tooltip.', async () => {
+    const { finished, chart } = renderBar({
+      canvas: barCanvas,
+      container: document.createElement('div'),
+    });
+    await finished;
+
+    chart.emit('tooltip:disable');
+    await sleep(20);
+
+    dispatchFirstElementEvent(barCanvas, 'pointerover');
+    await expect(barCanvas).toMatchDOMSnapshot(dir, 'step0', {
+      selector: '.g2-tooltip',
+    });
+
+    chart.emit('tooltip:enable');
+
+    dispatchFirstElementEvent(barCanvas, 'pointerover');
+    await expect(barCanvas).toMatchDOMSnapshot(dir, 'step1', {
+      selector: '.g2-tooltip',
+    });
+  });
+
+  it('chart.emit enable series tooltip.', async () => {
+    const { finished, chart } = renderLine({
+      canvas: lineCanvas,
+      container: document.createElement('div'),
+    });
+    await finished;
+
+    chart.emit('tooltip:disable');
+    dispatchPlotEvent(lineCanvas, 'pointermove', {
+      offsetX: 100,
+      offsetY: 100,
+    });
+    await expect(lineCanvas).toMatchDOMSnapshot(dir, 'step2', {
+      selector: '.g2-tooltip',
+    });
+
+    chart.emit('tooltip:enable');
+    dispatchPlotEvent(lineCanvas, 'pointermove', {
+      offsetX: 100,
+      offsetY: 100,
+    });
+    await expect(lineCanvas).toMatchDOMSnapshot(dir, 'step3', {
+      selector: '.g2-tooltip',
+    });
+  });
+
+  afterAll(() => {
+    barCanvas?.destroy();
+    lineCanvas?.destroy();
+  });
+});

__tests__/integration/api-chart-on-brush-highlight-tooltip.spec.ts

@@ -0,0 +1,38 @@
+import { chartOnBrushHighlightTooltip as render } from '../plots/api/chart-on-brush-highlight-tooltip';
+import { brush, dragMask } from '../plots/interaction/penguins-point-brush';
+import './utils/useSnapshotMatchers';
+import { PLOT_CLASS_NAME } from '../../src';
+import { createPromise } from './utils/event';
+import { createDOMGCanvas } from './utils/createDOMGCanvas';
+import { sleep } from './utils/sleep';
+
+describe('chart.on', () => {
+  const canvas = createDOMGCanvas(640, 480);
+
+  it('chart.on should on brush events.', async () => {
+    const { finished, chart } = render({
+      canvas,
+      container: document.createElement('div'),
+    });
+    await finished;
+
+    const { document: gDocument } = canvas;
+    const plot = gDocument.getElementsByClassName(PLOT_CLASS_NAME)[0];
+
+    const [start, resolveStart] = createPromise();
+    chart.on('brush:start', resolveStart);
+    brush(plot, 100, 100, 300, 300);
+    await start;
+    await sleep(20);
+
+    const [update, resolveUpdate] = createPromise();
+    chart.on('brush:end', resolveUpdate);
+    dragMask(plot, 30, 30, 60, 60);
+    await update;
+    await sleep(20);
+  });
+
+  afterAll(() => {
+    canvas?.destroy();
+  });
+});

__tests__/integration/api-chart-render-brush-end.spec.ts

@@ -5,7 +5,7 @@ import { sleep } from './utils/sleep';
 describe('chart.render', () => {
   const canvas = createNodeGCanvas(800, 500);
 
-  it('chart.render() should not emit brush:end', async () => {
+  it('chart.render() should not emit brush:remove', async () => {
     const { rerendered, finished, button, chart } = render({
       canvas,
       container: document.createElement('div'),
@@ -17,7 +17,7 @@ describe('chart.render', () => {
     chart.on('brush:highlight', () => {
       start();
     });
-    chart.on('brush:end', () => {
+    chart.on('brush:remove', () => {
       end();
     });
     await finished;

__tests__/integration/snapshots/api/chart-emit-enable-disable-tooltip/step0.html

@@ -0,0 +1 @@
+null

__tests__/integration/snapshots/api/chart-emit-enable-disable-tooltip/step1.html

@@ -0,0 +1,46 @@
+<div
+  xmlns="http://www.w3.org/1999/xhtml"
+  class="g2-tooltip"
+  style="pointer-events: none; position: absolute; visibility: visible; z-index: 8; transition: visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(255, 255, 255, 0.96); box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.12); border-radius: 4px; color: rgba(0, 0, 0, 0.65); font-size: 12px; line-height: 20px; padding: 12px; min-width: 120px; max-width: 360px; font-family: Roboto-Regular; left: 10px; top: 10px;"
+>
+  <div
+    class="g2-tooltip-title"
+    style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+  >
+    2007-04-23
+  </div>
+  <ul
+    class="g2-tooltip-list"
+    style="margin: 0px; list-style-type: none; padding: 0px;"
+  >
+    <li
+      class="g2-tooltip-list-item"
+      data-index="0"
+      style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
+    >
+      <span
+        class="g2-tooltip-list-item-name"
+        style="display: flex; align-items: center; max-width: 216px;"
+      >
+        <span
+          class="g2-tooltip-list-item-marker"
+          style="background: rgb(23, 131, 255); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
+        />
+        <span
+          class="g2-tooltip-list-item-name-label"
+          title="close"
+          style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+        >
+          close
+        </span>
+      </span>
+      <span
+        class="g2-tooltip-list-item-value"
+        title="93.24"
+        style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+      >
+        93.24
+      </span>
+    </li>
+  </ul>
+</div>

__tests__/integration/snapshots/api/chart-emit-enable-disable-tooltip/step2.html

@@ -0,0 +1,46 @@
+<div
+  xmlns="http://www.w3.org/1999/xhtml"
+  class="g2-tooltip"
+  style="pointer-events: none; position: absolute; visibility: visible; z-index: 8; transition: visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(255, 255, 255, 0.96); box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.12); border-radius: 4px; color: rgba(0, 0, 0, 0.65); font-size: 12px; line-height: 20px; padding: 12px; min-width: 120px; max-width: 360px; font-family: Roboto-Regular; left: 10px; top: 10px;"
+>
+  <div
+    class="g2-tooltip-title"
+    style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+  >
+    2007-04-23
+  </div>
+  <ul
+    class="g2-tooltip-list"
+    style="margin: 0px; list-style-type: none; padding: 0px;"
+  >
+    <li
+      class="g2-tooltip-list-item"
+      data-index="0"
+      style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
+    >
+      <span
+        class="g2-tooltip-list-item-name"
+        style="display: flex; align-items: center; max-width: 216px;"
+      >
+        <span
+          class="g2-tooltip-list-item-marker"
+          style="background: rgb(23, 131, 255); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
+        />
+        <span
+          class="g2-tooltip-list-item-name-label"
+          title="close"
+          style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+        >
+          close
+        </span>
+      </span>
+      <span
+        class="g2-tooltip-list-item-value"
+        title="93.24"
+        style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+      >
+        93.24
+      </span>
+    </li>
+  </ul>
+</div>

__tests__/integration/snapshots/api/chart-emit-enable-disable-tooltip/step3.html

@@ -0,0 +1,46 @@
+<div
+  xmlns="http://www.w3.org/1999/xhtml"
+  class="g2-tooltip"
+  style="pointer-events: none; position: absolute; visibility: visible; z-index: 8; transition: visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(255, 255, 255, 0.96); box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.12); border-radius: 4px; color: rgba(0, 0, 0, 0.65); font-size: 12px; line-height: 20px; padding: 12px; min-width: 120px; max-width: 360px; font-family: Roboto-Regular; left: 10px; top: 10px;"
+>
+  <div
+    class="g2-tooltip-title"
+    style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+  >
+    2007-04-23
+  </div>
+  <ul
+    class="g2-tooltip-list"
+    style="margin: 0px; list-style-type: none; padding: 0px;"
+  >
+    <li
+      class="g2-tooltip-list-item"
+      data-index="0"
+      style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
+    >
+      <span
+        class="g2-tooltip-list-item-name"
+        style="display: flex; align-items: center; max-width: 216px;"
+      >
+        <span
+          class="g2-tooltip-list-item-marker"
+          style="background: rgb(23, 131, 255); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
+        />
+        <span
+          class="g2-tooltip-list-item-name-label"
+          title="close"
+          style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+        >
+          close
+        </span>
+      </span>
+      <span
+        class="g2-tooltip-list-item-value"
+        title="93.24"
+        style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+      >
+        93.24
+      </span>
+    </li>
+  </ul>
+</div>

__tests__/integration/snapshots/tooltip/alphabet-interval-tooltip-render-update/step0.html

@@ -4,7 +4,7 @@
   style="pointer-events: none; position: absolute; visibility: visible; z-index: 8; transition: visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(255, 255, 255, 0.96); box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.12); border-radius: 4px; color: rgba(0, 0, 0, 0.65); font-size: 12px; line-height: 20px; padding: 12px; min-width: 120px; max-width: 360px; font-family: Roboto-Regular; left: 10px; top: 10px;"
 >
   <div>
-    <h2>A</h2>
-    <span>frequency: 0.08167</span>
+    <h2>B</h2>
+    <span>frequency: 0.01492</span>
   </div>
 </div>