docs: optimize examples for tools (#3942)

antvis · Sep 27, 2023 · c6800af · c6800af
1 parent 331a4f3
commit c6800af
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 47 deletions.
diff --git a/sites/x6-sites/examples/edge/tool/demo/context-menu.tsx b/sites/x6-sites/examples/edge/tool/demo/context-menu.tsx
@@ -1,58 +1,39 @@
 import React from 'react'
 import ReactDom from 'react-dom'
-import { Menu, Dropdown } from 'antd'
+import { Dropdown } from 'antd'
 import { Graph, ToolsView, EdgeView } from '@antv/x6'
+import type { MenuProps } from 'antd'
+
+// 如果项目中使用的是 antd@4，使用方式参考：https://codesandbox.io/s/contextmenu-z8gpq3
 
 class ContextMenuTool extends ToolsView.ToolItem<
   EdgeView,
   ContextMenuToolOptions
 > {
-  private knob: HTMLDivElement
   private timer: number
 
-  render() {
-    if (!this.knob) {
-      this.knob = ToolsView.createElement('div', false) as HTMLDivElement
-      this.knob.style.position = 'absolute'
-      this.container.appendChild(this.knob)
-    }
-    return this
-  }
-
-  private toggleContextMenu(visible: boolean) {
-    ReactDom.unmountComponentAtNode(this.knob)
+  private toggleContextMenu(visible: boolean, pos?: { x: number; y: number }) {
+    ReactDom.unmountComponentAtNode(this.container)
     document.removeEventListener('mousedown', this.onMouseDown)
 
-    if (visible) {
+    if (visible && pos) {
       ReactDom.render(
         <Dropdown
-          visible={true}
+          open={true}
           trigger={['contextMenu']}
-          overlay={this.options.menu}
+          menu={{ items: this.options.menu }}
+          align={{ offset: [pos.x, pos.y] }}
         >
-          <a />
+          <span />
         </Dropdown>,
-        this.knob,
+        this.container,
       )
       document.addEventListener('mousedown', this.onMouseDown)
     }
   }
 
-  private updatePosition(e?: MouseEvent) {
-    const style = this.knob.style
-    if (e) {
-      const pos = this.graph.clientToGraph(e.clientX, e.clientY)
-      style.left = `${pos.x}px`
-      style.top = `${pos.y}px`
-    } else {
-      style.left = '-1000px'
-      style.top = '-1000px'
-    }
-  }
-
   private onMouseDown = () => {
     this.timer = window.setTimeout(() => {
-      this.updatePosition()
       this.toggleContextMenu(false)
     }, 200)
   }
@@ -62,8 +43,7 @@ class ContextMenuTool extends ToolsView.ToolItem<
       clearTimeout(this.timer)
       this.timer = 0
     }
-    this.updatePosition(e)
-    this.toggleContextMenu(true)
+    this.toggleContextMenu(true, { x: e.clientX, y: e.clientY })
   }
 
   delegateEvents() {
@@ -82,24 +62,27 @@ ContextMenuTool.config({
 })
 
 export interface ContextMenuToolOptions extends ToolsView.ToolItem.Options {
-  menu: React.ReactElement
+  menu: MenuProps['items']
 }
 
 Graph.registerEdgeTool('contextmenu', ContextMenuTool, true)
 Graph.registerNodeTool('contextmenu', ContextMenuTool, true)
 
-const menu = (
-  <Menu>
-    <Menu.Item>1st menu item</Menu.Item>
-    <Menu.Item>2nd menu item</Menu.Item>
-    <Menu.Item>
-      <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
-        3rd menu item
-      </a>
-    </Menu.Item>
-    <Menu.Item danger>a danger item</Menu.Item>
-  </Menu>
-)
+const menu = [
+  {
+    key: 'copy',
+    label: '复制',
+  },
+  {
+    key: 'paste',
+    label: '粘贴',
+  },
+  {
+    key: 'delete',
+    label: '删除',
+    type: 'danger',
+  },
+]
 
 const graph = new Graph({
   container: document.getElementById('container'),

diff --git a/sites/x6-sites/examples/edge/tool/demo/tooltip.tsx b/sites/x6-sites/examples/edge/tool/demo/tooltip.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import ReactDom from 'react-dom'
 import { Tooltip } from 'antd'
 import { Graph, ToolsView, EdgeView } from '@antv/x6'
+
 class TooltipTool extends ToolsView.ToolItem<EdgeView, TooltipToolOptions> {
   private knob: HTMLDivElement
 
@@ -21,7 +22,9 @@ class TooltipTool extends ToolsView.ToolItem<EdgeView, TooltipToolOptions> {
         ReactDom.render(
           <Tooltip
             title={this.options.tooltip}
-            visible={true}
+            open={true}
+            arrow={false}
+            overlayStyle={{ padding: 0 }}
             destroyTooltipOnHide
           >
             <div />