fix(tooltip): view with inset

__tests__/plots/interaction/index.ts

@@ -54,3 +54,4 @@ export { pointsPointRegressionQuad } from './points-point-regression-quad';
 export { indicesLineChartFacet } from './indices-line-chart-facet';
 export { pointsPointRegressionQuadTranspose } from './points-point-regression-quad-transpose';
 export { scoreByItemAreaRadar } from './score-by-item-area-radar';
+export { pointsPointRegressionQuadInset } from './points-point-regression-quad-inset';

__tests__/plots/interaction/points-point-regression-quad-inset.ts

@@ -0,0 +1,56 @@
+import { regressionQuad } from 'd3-regression';
+import { G2Spec, PLOT_CLASS_NAME } from '../../../src';
+import { points } from '../../data/points';
+import { step } from './utils';
+
+const regression = regressionQuad()
+  .x((d) => d.x)
+  // @ts-ignore
+  .y((d) => d.y)
+  .domain([-4, 4]);
+
+export function pointsPointRegressionQuadInset(): G2Spec {
+  return {
+    type: 'view',
+    inset: 30,
+    data: points,
+    scale: { x: { domain: [-4, 4] }, y: { domain: [-2, 14] } },
+    axis: { x: { title: false }, y: { title: false } },
+    interaction: {
+      tooltip: { body: false, style: { crosshairsStrokeWidth: 30 } },
+    },
+    children: [
+      {
+        type: 'point',
+        encode: { x: 'x', y: 'y', shape: 'point' },
+      },
+      {
+        type: 'line',
+        data: { transform: [{ type: 'custom', callback: regression }] },
+        encode: {
+          x: (d) => d[0],
+          y: (d) => d[1],
+        },
+        style: {
+          stroke: '#30BF78',
+          lineWidth: 2,
+        },
+      },
+      { type: 'lineX', data: [0] },
+      { type: 'lineY', data: [0] },
+    ],
+  };
+}
+
+pointsPointRegressionQuadInset.tooltip = true;
+
+pointsPointRegressionQuadInset.steps = ({ canvas }) => {
+  const { document } = canvas;
+  const [plot] = document.getElementsByClassName(PLOT_CLASS_NAME);
+  return [
+    step(plot, 'pointermove', {
+      offsetX: 450,
+      offsetY: 350,
+    }),
+  ];
+};

src/interaction/tooltip.ts

@@ -5,7 +5,7 @@ import { Tooltip as TooltipComponent } from '@antv/gui';
 import { Constant, Identity } from '@antv/scale';
 import { defined, subObject } from '../utils/helper';
 import { isTranspose, isPolar } from '../utils/coordinate';
-import { angleWithQuadrant, angle, angleBetween, sub } from '../utils/vector';
+import { angle, sub } from '../utils/vector';
 import {
   selectG2Elements,
   createXKey,
@@ -275,7 +275,7 @@ export function seriesTooltip(
   const elements = elementsof(root);
   const transposed = isTranspose(coordinate);
   const polar = isPolar(coordinate);
-  const [width, height] = coordinate.getSize();
+  const { innerWidth: width, innerHeight: height } = coordinate.getOptions();
 
   // Split elements into series elements and item elements.
   const seriesElements = [];