feat: 支持回调函数调整 Tooltip 位置 (#1350)

嘤嘤嘤 · web-flow · commit 898f3df59022 · 2022-05-18T18:58:58.000+08:00
* feat: 支持回调函数调整 Tooltip 位置

* style: 代码优化
diff --git a/packages/s2-core/__tests__/spreadsheet/tooltip-spec.ts b/packages/s2-core/__tests__/spreadsheet/tooltip-spec.ts
@@ -53,6 +53,27 @@ describe('Tooltip Tests', () => {
     s2.destroy();
   });
 
+  test('should render tooltip in custom position', () => {
+    const container = document.createElement('div');
+    container.id = 'custom-container';
+    document.body.appendChild(container);
+
+    const s2 = createS2({
+      showTooltip: true,
+      adjustPosition: (position) => {
+        return { x: position.x + 100, y: position.y + 100 };
+      },
+    });
+
+    s2.render();
+
+    s2.showTooltip({ position: { x: 0, y: 0 } });
+
+    expect(s2.tooltip.position).toEqual({ x: 115, y: 110 });
+
+    s2.destroy();
+  });
+
   test('should render tooltip in custom container', () => {
     const container = document.createElement('div');
     container.id = 'custom-container';
diff --git a/packages/s2-core/src/common/interface/tooltip.ts b/packages/s2-core/src/common/interface/tooltip.ts
@@ -153,6 +153,9 @@ export interface BaseTooltipConfig<T = TooltipContentType> {
   // Tooltip operation
   readonly operation?: TooltipOperation;
   readonly autoAdjustBoundary?: TooltipAutoAdjustBoundary;
+  // Custom tooltip position
+  readonly adjustPosition?: (position: TooltipPosition) => TooltipPosition;
+  // Custom tooltip content
   readonly renderTooltip?: (spreadsheet: SpreadSheet) => BaseTooltip;
   // Custom tooltip mount container
   readonly getContainer?: () => HTMLElement;
diff --git a/packages/s2-core/src/ui/tooltip/index.ts b/packages/s2-core/src/ui/tooltip/index.ts
@@ -46,8 +46,8 @@ export class BaseTooltip {
     const { position, options, content } = showOptions;
     const { enterable } = getTooltipDefaultOptions(options);
     const container = this.getContainer();
-    const { autoAdjustBoundary } = this.spreadsheet.options.tooltip || {};
-
+    const { autoAdjustBoundary, adjustPosition } =
+      this.spreadsheet.options.tooltip || {};
     this.visible = true;
     this.options = showOptions as unknown as TooltipShowOptions;
 
@@ -59,16 +59,14 @@ export class BaseTooltip {
       tooltipContainer: container,
       autoAdjustBoundary,
     });
-
-    this.position = {
+    this.position = adjustPosition?.({ x, y }) ?? {
       x,
       y,
     };
-
     setContainerStyle(container, {
       style: {
-        left: `${x}px`,
-        top: `${y}px`,
+        left: `${this.position?.x}px`,
+        top: `${this.position?.y}px`,
         pointerEvents: enterable ? 'all' : 'none',
       },
       className: `${TOOLTIP_CONTAINER_CLS}-show`,
diff --git a/packages/s2-core/src/utils/tooltip.ts b/packages/s2-core/src/utils/tooltip.ts
@@ -595,7 +595,10 @@ export const getTooltipOptions = (
   spreadsheet: SpreadSheet,
   event: CanvasEvent | MouseEvent | Event,
 ): Tooltip => {
-  const cellType = spreadsheet.getCellType?.(event.target);
+  if (!event || !spreadsheet) {
+    return;
+  }
+  const cellType = spreadsheet.getCellType?.(event?.target);
   return getTooltipOptionsByCellType(spreadsheet.options.tooltip, cellType);
 };
 
diff --git a/s2-site/docs/common/tooltip.zh.md b/s2-site/docs/common/tooltip.zh.md
@@ -18,6 +18,7 @@ object **必选**,_default：null_ 功能描述： tooltip 配置
 | renderTooltip      | 自定义整个 tooltip, 可以继承 BaseTooltip 自己重写一些方法    | [RenderTooltip](#rendertooltip)         | -      |      |
 | content   | 自定义 tooltip 内容                                      | `React.ReactNode | Element | string |` 或者 `(cell, defaultTooltipShowOptions) => React.ReactNode | Element | string`                         | -      |      |
 | autoAdjustBoundary | 当 tooltip 超过边界时自动调整显示位置，container: 图表区域，body: 整个浏览器窗口，设置为 `null` 可关闭此功能 | `container` \| `body`                   | `body` |      |
+| adjustPosition | 自定义 tooltip 位置，| `({x: number, y: number}) => {x: number, y: number}`                   |  |      |
 | getContainer | 自定义 tooltip 挂载容器，| `() => HTMLElement`                   | `document.body` |      |
 
 ### BaseTooltipConfig
