feat: add modifiers for vertices tool

antvis · Jul 13, 2023 · e927f89 · e927f89
1 parent a6c4509
commit e927f89
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 14 deletions.
diff --git a/packages/x6/src/registry/tool/vertices.ts b/packages/x6/src/registry/tool/vertices.ts
@@ -1,5 +1,5 @@
 import { Point } from '@antv/x6-geometry'
-import { Dom } from '@antv/x6-common'
+import { Dom, ModifierKey } from '@antv/x6-common'
 import { Config } from '../../config'
 import { View } from '../../view/view'
 import { ToolsView } from '../../view/tool'
@@ -241,14 +241,19 @@ export class Vertices extends ToolsView.ToolItem<EdgeView, Vertices.Options> {
     }
   }
 
+  protected allowAddVertex(e: Dom.MouseDownEvent) {
+    const guard = this.guard(e)
+    const addable = this.options.addable && this.cellView.can('vertexAddable')
+    const matchModifiers = this.options.modifiers
+      ? ModifierKey.isMatch(e, this.options.modifiers)
+      : true
+    return !guard && addable && matchModifiers
+  }
+
   protected onPathMouseDown(evt: Dom.MouseDownEvent) {
     const edgeView = this.cellView
 
-    if (
-      this.guard(evt) ||
-      !this.options.addable ||
-      !edgeView.can('vertexAddable')
-    ) {
+    if (!this.allowAddVertex(evt)) {
       return
     }
 
@@ -282,6 +287,7 @@ export namespace Vertices {
     removable?: boolean
     removeRedundancies?: boolean
     stopPropagation?: boolean
+    modifiers?: string | ModifierKey[]
     attrs?: Attr.SimpleAttrs | ((handle: Handle) => Attr.SimpleAttrs)
     createHandle?: (options: Handle.Options) => Handle
     processHandle?: (handle: Handle) => void

diff --git a/sites/x6-sites/docs/api/registry/edge-tool.zh.md b/sites/x6-sites/docs/api/registry/edge-tool.zh.md
@@ -71,14 +71,15 @@ graph.on('edge:mouseleave', ({ cell }) => {
 
 路径点工具，在路径点位置渲染一个小圆点，拖动小圆点修改路径点位置，双击小圆点删除路径点，在边上单击添加路径点。配置如下：
 
-| 参数名             | 类型     | 默认值   | 说明                                                                                                                   |
-|--------------------|----------|----------|----------------------------------------------------------------------------------------------------------------------|
-| attrs              | KeyValue | `object` | 小圆点的属性。                                                                                                          |
-| snapRadius         | number   | `20`     | 移动路径点过程中的吸附半径。当路径点与邻近的路径点距离在半径范围内时，将当前路径点吸附到临近路径点。                      |
-| addable            | boolean  | `true`   | 在边上按下鼠标时，是否可以添加新的路径点。                                                                               |
-| removable          | boolean  | `true`   | 是否可以通过双击移除路径点。                                                                                            |
-| removeRedundancies | boolean  | `true`   | 是否自动移除冗余的路径点。                                                                                              |
-| stopPropagation    | boolean  | `true`   | 是否阻止工具上的鼠标事件冒泡到边视图上。阻止后鼠标与工具交互时将不会触发边的 `mousedown`、`mousemove` 和 `mouseup` 事件。 |
+| 参数名             | 类型                      | 默认值   | 说明                                                                                                                   |
+|--------------------|---------------------------|----------|----------------------------------------------------------------------------------------------------------------------|
+| attrs              | KeyValue                  | `object` | 小圆点的属性。                                                                                                          |
+| snapRadius         | number                    | `20`     | 移动路径点过程中的吸附半径。当路径点与邻近的路径点距离在半径范围内时，将当前路径点吸附到临近路径点。                      |
+| addable            | boolean                   | `true`   | 在边上按下鼠标时，是否可以添加新的路径点。                                                                               |
+| removable          | boolean                   | `true`   | 是否可以通过双击移除路径点。                                                                                            |
+| removeRedundancies | boolean                   | `true`   | 是否自动移除冗余的路径点。                                                                                              |
+| stopPropagation    | boolean                   | `true`   | 是否阻止工具上的鼠标事件冒泡到边视图上。阻止后鼠标与工具交互时将不会触发边的 `mousedown`、`mousemove` 和 `mouseup` 事件。 |
+| modifiers          | `string \| ModifierKey[]` | -        | 按下对应的键盘按键后才能添加路径点，可以解决添加路径点和边点击两种交互重叠现象。                                         |
 
 其中 `attrs` 的默认值(默认样式)为：