feat:add Tooltip demo to solve contextmenu event

packages/graphin-components/src/Tooltip/demos/AntdWithContextMenu.tsx

@@ -0,0 +1,94 @@
+import * as React from 'react';
+import Graphin, { Utils, GraphinContext } from '@antv/graphin';
+import { Tooltip } from '@antv/graphin-components';
+import { Popover, Card } from 'antd';
+
+const content = (
+  <div>
+    <p>Content</p>
+    <p>Content</p>
+  </div>
+);
+
+const nodeSize = 40;
+const tooltipStyles = {
+  height: `${nodeSize}px`,
+  width: `${nodeSize}px`,
+  background: 'transparent',
+};
+
+const CustomContextMenu = props => {
+  console.log(props);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { visible, position } = props;
+  if (visible) {
+    // const { x, y } = position;
+    return (
+      <div
+        style={{
+          position: 'absolute',
+          left: 0, // x,
+          top: 0, // y,
+        }}
+      >
+        <Card title="Card"> contextMenu</Card>
+      </div>
+    );
+  }
+  return null;
+};
+const AntdTooltip = () => {
+  const [state, setState] = React.useState({
+    visible: false,
+    x: 0,
+    y: 0,
+  });
+  const { visible } = state;
+
+  const handleContextMenu = (e: Event) => {
+    e.preventDefault();
+    setState(preState => {
+      return {
+        ...preState,
+        visible: true,
+      };
+    });
+  };
+
+  const { tooltip } = React.useContext(GraphinContext);
+  const context = tooltip.node;
+  const { item, x, y } = context;
+  const model = item && item.getModel();
+
+  return (
+    // @ts-ignore
+    <div onContextMenu={handleContextMenu}>
+      <Popover placement="topLeft" title={model.id} content={content}>
+        <div style={tooltipStyles} />
+      </Popover>
+      <CustomContextMenu visible={visible} position={{ x, y }} />
+    </div>
+  );
+};
+
+const TooltipDemo: React.FunctionComponent = () => {
+  return (
+    <div>
+      <Graphin data={Utils.mock(10).circle().graphin()}>
+        <Tooltip
+          bindType="node"
+          style={{
+            ...tooltipStyles,
+            transform: `translate(-${nodeSize / 2}px,-${nodeSize / 2}px)`,
+            // 用户只需要将这个颜色去掉即可
+            // background: 'red',
+          }}
+        >
+          <AntdTooltip />
+        </Tooltip>
+      </Graphin>
+    </div>
+  );
+};
+
+export default TooltipDemo;

packages/graphin-components/src/Tooltip/index.md

@@ -27,6 +27,12 @@ Tooltip 提示框是一种快速浏览信息的交互组件，常用于图的节
 
 <code src='./demos/Antd.tsx' />
 
+## ⚠️：集成 Antd 的 Popover 组件，监听不到 ContextMenu 事件
+
+因为我们集成 Antd 的 Popover 组件，需要一个触发的 DOM，而触发的 DOM 恰好覆盖了节点，因此，我们再引入 Graphin 的 ContextMenu 组件，则没办法监听'node:contextmenu'事件。临时方案如下：在 AntdTooltip 的组件中，监听触发 DOM 的`onContexmenu`事件，自定义 ContextMenu
+
+<code src='./demos/AntdWithContextMenu.tsx' />
+
 ## 功能特性
 
 - Tooltip 作为容器组件，给内部的组件提供事件唤起和坐标定位功能,提供 Node 和 Edge 两种容器