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

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

问题分析

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

但是从全局的角度分析了下，发现第三个步骤复杂度有点大，不是说不能实现，而是没有必要这么做；就像你去跑800米，正常情况下我们都是贴着最内道跑，而你非要在最外道跑。而且没有添加右键这个操作，不就满足不了需求了吗。
经过一轮分析后，决定还是来玩玩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