antv x6踩坑记录二

1. graph配置panning，会出现一种情况，就是我鼠标点击了画布的某个点，然后滚动滑轮去点击不在当前视图的某个节点的时候，它会自动聚焦到你之前点击的画布的点上
2. 使用fromJSON去序列化节点渲染，在有群组节点的情况下，会出现群组内的节点连线被覆盖的问题，我的处理情况是通过先将节点中的群组节点和子节点区分开来，通过addNodes先将所有的群组节点渲染，然后在渲染子节点和普通节点，最后遍历群组节点，通过addChild的方法把对应的子节点添加到对应的群组节点中，最后才通过addEdges方法渲染连线
3. 关于连线校验的validateEdge和validateConnection，这里说下，validateConnection是指在移动边的时候判断连接是否有效，如果返回 false，当鼠标放开的时候，不会连接到当前元素，否则会连接到当前元素。validateEdge是指当停止拖动边的时候根据 validateEdge 返回值来判断边是否生效，如果返回 false, 该边会被清除。看起来都是创建连线时候的校验，但是通过getEdges方法去获取边的时候，会发现validateEdge在没有返回true的时候，获取到的连线还是之前的连线，但是validateConnection获取到的连线数据已经包含当前还未完成的连线数据，这对于用于某些几点的连线，重复判断可能会造成误差。所以我将对比的连线数据变化放到validateEdge去做更改监听
4. 关于节点hover效果，鼠标移入节点线上链接桩和变色的实现方法：

//通过graph的视图交互事件
// 鼠标移入节点
 graph.on("node:mouseenter", ({ e, node, view }) => {
	// 获取当前节点的链接桩
	const ports = node.getPorts();
	showPorts(node, ports, true);
	node.setAttrs({
		// 节点样式
	})
 })
// 鼠标移出节点，通过node:mouseleave实现，只需要把showPorts的visible参数改为false就OK了
// 控制链接桩显示与隐藏的函数
function showPorts(node, ports, visible) {
	ports.forEach(port => {
		node.setPortProp(
			port.id,
			'attrs/circle/style/visibility',
			visible ? 'visible' : 'hidden',
		)
	})
}