[Bug]: 设置连接桩后，behaviors的drag-element无法区分点击节点还是点击连接桩，他们的event.targetType都是node

[yrx100]

Describe the bug / 问题描述

<template>
	<div ref="containerRef" class="viewport"></div>
	<TeleportContainer />
</template>

<script setup lang="tsx">
import { useFlowCanvasStore } from '@/store/modules/flowCanvas'
import { ExtensionCategory, register, Graph } from '@antv/g6'
import { VueNode } from 'g6-extension-vue'
import { computed, defineComponent, onMounted, useTemplateRef } from 'vue'
import CustomFlowNode from './CustomFlowNode.vue'
const containerRef = useTemplateRef('containerRef')

const flowCanvasStore = useFlowCanvasStore()

// 注册自定义节点
register(ExtensionCategory.NODE, 'vue-node', VueNode)

onMounted(() => {
	const graph = new Graph({
		container: containerRef.value as HTMLElement,
		autoResize: true,
		data: {
			nodes: [
				{
					id: 'node1',
					style: { x: 100, y: 200 },
					ports: [
						{ key: 'custom1', placement: [0.2, 0] }, // 相对位置：左上角20%处
						{ key: 'custom2', placement: [0.8, 0] }, // 相对位置：右上角80%处
						{ key: 'custom3', placement: [1, 0.5] } // 相对位置：右边中央
					],
					data: { label: 'node1' }
				},
				{
					id: 'node2',
					style: { x: 300, y: 200 },
					data: { label: 'node2' }
				}
			],
			edges: []
		},
		node: {
			type: 'vue-node',
			style: {
				size: [186, 36], // 节点大小
				ports: [
					{
						key: 'top',
						placement: 'top',
						fill: '#7E92B5',
						cursor: 'crosshair',
						draggable: false
					},

					{
						key: 'bottom',
						placement: 'bottom',
						fill: '#FFBE3A',
						cursor: 'crosshair'
					}
				], // 连接桩
				portR: 4, // 连接桩圆角
				portLineWidth: 1, // 连接桩线宽
				portStroke: '#fff', // 连接桩颜色
				component: (data: any) => (
					<CustomFlowNode {...{ data: Object.assign({}, data) }} />
				)
			}
		},
		edge: {
			type: 'cubic-vertical' // 边的类型，可选：'line', 'cubic', 'cubic-vertical' 等
		},
		behaviors: [
			'hover-activate',
			'drag-canvas',
			'zoom-canvas',
			'click-select',
			{
				type: 'drag-element',
				key: 'drag-node-only',
				enable: event => {
					console.log(
						event.target,
						event.originalTarget,
						event.currentTarget,
						event.originalEvent,
						'event'
					)

					return event.targetType === 'node'
				} // 只允许拖拽节点
			}
		]
	})

	graph.render()

	// 监听连线成功事件（可选）
	graph.on('edge:created', (event: any) => {
		console.log('新增连线:', event)
		// 在这里可以处理新增的连线逻辑
	})

	// 监听连线错误事件（可选）
	graph.on('edge:create-error', (event: any) => {
		console.log('连线创建失败:', event)
	})
})
</script>
<style scoped lang="scss">
.viewport {
	width: 100%;
	height: 100%;
	background-color: #f7f7f9;
}
</style>

Reproduction link / 复现链接

No response

Steps to Reproduce the Bug or Issue / 重现步骤

No response

Version / 版本

Please select / 请选择

OS / 操作系统

• macOS
• Windows
• Linux
• Others / 其他

Browser / 浏览器

• Chrome
• Edge
• Firefox
• Safari (Limited support / 有限支持)
• IE (Nonsupport / 不支持)
• Others / 其他

[github-actions]

@yrx100 您好！以下是关于您问题的自动回复：

您好，感谢您反馈 G6 使用中的问题！

---

问题分析

问题简述：
在启用连接桩（port）后，drag-element 行为的事件回调（如 enable）中，event.targetType 无法区分是点击节点主体还是点击连接桩，两者均为 'node'，导致无法限制拖拽仅作用于节点本身或连接桩。

---

解决思路

1. 事件区分原理

G6 在事件传递时，targetType 对于连接桩和节点主体均为 'node'。连接桩本质上是节点的子图形，未单独暴露 targetType: 'port'，因此默认无法区分。

2. 推荐实践

A. 利用 event.target 进一步区分

• 可以通过 event.target 的属性、event.target.name、event.target.cfg 等进一步判断是否为连接桩。
• 通常连接桩的 name 或其他自定义字段会有如 "port-shape"、"port-group" 标识。

示例代码：

enable: (event) => {
  // event.targetType === 'node'，但需要进一步判断具体是节点还是连接桩
  const isPort = event.target?.name?.includes('port'); // 或根据实际 name 规则
  if (isPort) {
    // 是连接桩，不允许拖拽
    return false;
  }
  // 节点主体，允许拖拽
  return true;
}

B. 自定义连接桩样式与交互区域

• 在节点的 ports 配置中设置 cursor、draggable 等属性，限制交互行为。
• 例如：draggable: false 可让连接桩不响应拖拽。

示例配置：

ports: [
  { key: 'custom1', placement: [0.2, 0], draggable: false, cursor: 'crosshair' },
  // ...
]

C. 监听更细粒度的事件

• 可监听 node:dragstart、node:click 等事件，结合 event.target 精细处理。

---

参考文档

• G6 事件机制
• G6 节点 ports 配置
• 官方示例：连接桩与事件判定

---

建议改进

1. 增强事件过滤
   在 drag-element 的 enable 方法内，结合 event.target.name 或自定义标识，区分节点主体与连接桩，提升交互准确性。

2. 如需更高级交互
   可在自定义节点组件（如 Vue/React 节点）内，针对连接桩元素添加专属事件处理逻辑，或利用 G6 的 custom-event 机制。

3. 向 G6 官方反馈
   若期望 G6 原生支持 targetType: 'port'，可在 G6 GitHub 提出 Feature Request，便于后续版本优化。

---

示例优化代码

// drag-element 行为配置优化
{
  type: 'drag-element',
  key: 'drag-node-only',
  enable: event => {
    // event.targetType === 'node'
    // 补充判定连接桩
    const isPort = event.target?.name?.includes('port');
    return event.targetType === 'node' && !isPort;
  }
}

---

总结

• G6 目前未直接区分节点主体与连接桩的 targetType
• 建议通过 event.target 的属性判定，或在节点 ports 配置中限制交互
• 可以参考官方文档和源码，进一步自定义事件处理

如需更详细代码或有其他疑问，欢迎补充更多信息！

---

G6 项目组祝您开发顺利！

---

此回复由 AI 助手自动生成。如有任何问题，我们的团队会尽快跟进。

[yrx100]

ai助手的回答我试过，target.name没有相关值

[yrx100]

ai助手的回答我试过，target.name没有相关值

ai助手说的应该是v4的用法

https://g6-v4.antv.vision/zh/examples/interaction/createEdge/#drag-link-point

[Child-qjj]

可以 style中设置portPointerEvents: 'none',

[yrx100]

可以 style中设置portPointerEvents: 'none',

node设置这个属性后，连接桩就失效了，点击没反应

[Child-qjj]

可以 style中设置portPointerEvents: 'none',

node设置这个属性后，连接桩就失效了，点击没反应

这是禁止拖拽连接桩的

[yrx100]

可以 style中设置portPointerEvents: 'none',

node设置这个属性后，连接桩就失效了，点击没反应

这是禁止拖拽连接桩的

麻烦问一下，如果我想设置这个属性后，想要通过点击连接桩来连线改怎么实现

[yrx100]

无法区分连接桩和节点，就没法通过drag-element来只通过连接桩实现连线

[yvonneyx]

event.currentTarget 是当前触发事件的对象，可以试下

https://g6.antv.antgroup.com/api/event#%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1%E5%B1%9E%E6%80%A7

[yrx100]

event.currentTarget 是当前触发事件的对象，可以试下

https://g6.antv.antgroup.com/api/event#%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1%E5%B1%9E%E6%80%A7

我试过，但是返回的没什么区别