「AntV」x6 框选添加右键菜单

今天在群里有个小伙伴提出了这么个问题：如何在框选完成后给框选的区域添加一个右键菜单的功能，我看到了这个问题后也是有点懵，心里想着怎么还有这个需求，直接快捷键删除不是更好吗，谁知这位小伙伴也是这么写的，奈何客户要添加右键菜单的功能，所以说，客户最大。既然人家都提出这个需求呢，那就说明大概率情况下是可以做的，只是看自己想不想做了，下面我先来分析下我的思路，仅供参考，不过这个方案应该是能解决大部分的业务场景了

问题分析

1. 框选完成？那就监听框选完成的事件，这个官方是有对应的事件的
2. 框选完成才会触发右键？也就是说不框选是不能触发右键事件的
3. 即使前面两个步骤都解决了，那我这个菜单坐标怎么确定？第一个想到是框选的时候会有左右的边界，就像如图这样，我是否可以根据这两个边界节点的坐标去动态计算？第二个方法就是不加右键的功能，直接在框选的容器的右上角添加一个dom，把操作按钮放在这里面，通过鼠标划入来控制显示和隐藏

4. 但是从全局的角度分析了下，发现第三个步骤复杂度有点大，不是说不能实现，而是没有必要这么做；就像你去跑800米，正常情况下我们都是贴着最内道跑，而你非要在最外道跑。而且没有添加右键这个操作，不就满足不了需求了吗。
5. 经过一轮分析后，决定还是来玩玩dom操作，因为只有dom是一直不变的，变的只是显示隐藏而已，从理论上来说，我们是可以获取到框选这个容器的dom实例的，然后再根据这个dom实例去触发右键的事件，然后我在这个右键里面添加我的业务操作不就行了吗？开干吧！

解决方法

步骤1

这里为了保险起见，我给框选插件的配置项添加了一个自定义的class类名，我可以根据我这个唯一的class去获取框选的容器

步骤二

开始玩dom，先获取到我自定义的这个class，然后再根据这个父级去获取真正的框选容器（框选容器的class需要自行打开浏览器的f12去找哈）

// 我自定义的class
const parent = document.getElementsByClassName('cu-selected-container')[0];
// 框选的容器
const selectInner = parent.getElementsByClassName('x6-widget-selection-inner')[0];
// 打印下看是个啥
console.log('seleeeee >>>', selectInner);

没错了，我获取到了，看下图

步骤三

经过前面两个步骤的处理，步骤三就轻松多了，步骤三主要做的事情就是监听框选完成的事件，看过官网的小伙伴都知道，官方大大给我们提供的事件还是挺多的事件，那小伙伴在这里可能就犯嘀咕了，我到底该用哪个呢？其实吧，我觉得这里用哪个事件更多取决你的业务场景，我这里为了节约时间，就直接使用selection:changed这个事件了。
:::warning
Tip：如果你框选的节点个数是0的话需要特殊处理下，不然控制台会报框选的容器不存在，我这里是根据selected的长度进行判断，不满足条件直接提前返回
:::

graph.on('selection:changed', ({ selected }) => {
  if (selected.length === 0) return;
  const parent = document.getElementsByClassName('cu-selected-container')[0];
  const selectInner = parent.getElementsByClassName('x6-widget-selection-inner')[0];
  selectInner.style.pointerEvents = 'unset';
  console.log('seleeeee >>>', selectInner);
 selectInner.addEventListener('contextmenu', event => {
    event.preventDefault();
    alert(1);
  });
});

最后再看下效果吧，菜单的内容后面我再更新吧……

步骤四

原以为到第三个步骤就结束了，没想到还有个问题，就是我一直去框选，但是这期间我不去触发右击事件，直到最后我再右键，这时你再去点击alert的确定按钮会发现完全关不掉，我想着完了完了，是不是进入死循环了？于是我就多实验了几次，发现这个alert的次数是和我框选的次数是有关联的，于是就在想是哪里除了问题，经过一番排查后发现是事件的问题，好像是每次框选完后没有清空掉dom，于是我就从事件这里下手解决，决定在触发右键菜单之前先移除一下右键的事件（排他法，不管你有没有，先清空再说），果然问题得到了完美的解决

const handleContextMenu = event => {
  event.preventDefault();
  alert(1);
};
graph.on('selection:changed', ({ selected }) => {
  if (selected.length === 0) return;
  const parent = document.getElementsByClassName('cu-selected-container')[0];
  const selectInner = parent.getElementsByClassName('x6-widget-selection-inner')[0];
  selectInner.style.pointerEvents = 'unset';
  console.log('seleeeee >>>', selectInner);
  selectInner.removeEventListener('contextmenu', handleContextMenu);
  selectInner.addEventListener('contextmenu', handleContextMenu);
});

总结

问题分析很关键，代码只是个工具，具体怎么走还是要我们自己去制定，所以在这一行待的时间久了，你会发现分析问题和关键时刻解决问题的能力是有多重要。顺便讲一下这个小功能我也是趁着下班前15分钟搞出来的，如果我直接跳过分析问题的步骤，我估计到节后也不一定能想到解决方案。好了，这个小问题的总结就到这吧，有空再更新菜单坐标的问题的解决思路吧。😜demo也同步更新了，想看效果的可以直接看antv demo