diff --git a/packages/x6/src/registry/tool/vertices.ts b/packages/x6/src/registry/tool/vertices.ts index 5b4cea25a6f..1c142f36fc6 100644 --- 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 { } } + 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 index 984ee23ad16..21733225565 100644 --- 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` 的默认值(默认样式)为: