feat(interaction): emit more brush and tooltip events

antvis · Sep 5, 2023 · 01d40be · 01d40be
1 parent bbae4ce
commit 01d40be
Show file tree

Hide file tree

Showing 18 changed files with 593 additions and 42 deletions.
diff --git a/__tests__/integration/api-chart-emit-enable-disable-tooltip.spec.ts b/__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();
+  });
+});
diff --git a/__tests__/integration/api-chart-on-brush-highlight-tooltip.spec.ts b/__tests__/integration/api-chart-on-brush-highlight-tooltip.spec.ts
@@ -0,0 +1,41 @@
+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();
+    const [create, resolveCreate] = createPromise();
+    chart.on('brush:start', resolveStart);
+    chart.on('brush:create', resolveCreate);
+    brush(plot, 100, 100, 300, 300);
+    await start;
+    await create;
+    await sleep(20);
+
+    const [update, resolveUpdate] = createPromise();
+    chart.on('brush:update', resolveUpdate);
+    dragMask(plot, 30, 30, 60, 60);
+    await update;
+    await sleep(20);
+  });
+
+  afterAll(() => {
+    canvas?.destroy();
+  });
+});
diff --git a/__tests__/integration/snapshots/api/chart-emit-enable-disable-tooltip/step0.html b/__tests__/integration/snapshots/api/chart-emit-enable-disable-tooltip/step0.html
@@ -0,0 +1 @@
+null
diff --git a/__tests__/integration/snapshots/api/chart-emit-enable-disable-tooltip/step1.html b/__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>
diff --git a/__tests__/integration/snapshots/api/chart-emit-enable-disable-tooltip/step2.html b/__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>
diff --git a/__tests__/integration/snapshots/api/chart-emit-enable-disable-tooltip/step3.html b/__tests__/integration/snapshots/api/chart-emit-enable-disable-tooltip/step3.html
@@ -0,0 +1 @@
+null
diff --git a/__tests__/plots/api/chart-on-brush-highlight-tooltip.ts b/__tests__/plots/api/chart-on-brush-highlight-tooltip.ts
@@ -0,0 +1,99 @@
+import { Chart, MASK_CLASS_NAME } from '../../../src';
+
+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] as const;
+}
+
+export function chartOnBrushHighlightTooltip(context) {
+  const { container, canvas } = context;
+
+  const chart = new Chart({
+    container,
+    canvas,
+  });
+
+  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);
+
+  const [render, remove] = useTip({
+    container,
+    onRemove: () => chart.emit('brush:remove', {}),
+  });
+
+  chart.on('brush:start', onStart);
+  chart.on('brush:create', onUpdate);
+  chart.on('brush:update', onUpdate);
+  chart.on('brush:remove', onRemove);
+
+  const finished = chart.render();
+
+  function onStart() {
+    chart.emit('tooltip:disable');
+  }
+
+  function onUpdate(e) {
+    const { canvas } = chart.getContext();
+    // @ts-ignore
+    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');
+  }
+
+  return { chart, finished };
+}
diff --git a/__tests__/plots/api/index.ts b/__tests__/plots/api/index.ts
@@ -47,3 +47,4 @@ export { chartRender3dScatterPlotPerspective } from './chart-render-3d-scatter-p
 export { chartRender3dScatterPlotLegend } from './chart-render-3d-scatter-plot-legend';
 export { chartRender3dLinePlot } from './chart-render-3d-line-plot';
 export { chartRender3dLinePlotPerspective } from './chart-render-3d-line-plot-perspective';
+export { chartOnBrushHighlightTooltip } from './chart-on-brush-highlight-tooltip';
diff --git a/__tests__/plots/interaction/penguins-point-brush.ts b/__tests__/plots/interaction/penguins-point-brush.ts
@@ -72,7 +72,7 @@ export function drag(shape, x, y, x1, y1) {
     }),
   );
   shape.dispatchEvent(
-    new CustomEvent('drag', {
+    new CustomEvent('dragend', {
       // @ts-ignore
       offsetX: x1,
       offsetY: y1,

diff --git a/site/docs/spec/interaction/brushHighlight.zh.md b/site/docs/spec/interaction/brushHighlight.zh.md
@@ -206,3 +206,30 @@ chart.options({
   },
 });
 ```
+
+### 监听事件
+
+支持以下的事件：
+
+- `brush:create` - 创建 brush 完成的时候触发
+- `brush:update` - brush 更新大小和位置完成时候触发
+- `brush:highlight` - brush 改变大小和位置时出发
+- `brush:remove` - brush 移除的时候触发
+
+```js
+chart.on('brush:highlight', (e) => {
+  console.log(e.data.selection);
+  console.log(e.nativeEvent);
+});
+```
+
+### 触发交互
+
+支持以下的事件：
+
+- `brush:highlight` - 高亮数据
+- `brush:remove` - 移除 brush
+
+```js
+chart.emit('brush:remove');
+```