今天在群里有个小伙伴提出了这么个问题:如何在框选完成后给框选的区域添加一个右键菜单的功能,我看到了这个问题后也是有点懵,心里想着怎么还有这个需求,直接快捷键删除不是更好吗,谁知这位小伙伴也是这么写的,奈何客户要添加右键菜单的功能,所以说,客户最大。既然人家都提出这个需求呢,那就说明大概率情况下是可以做的,只是看自己想不想做了,下面我先来分析下我的思路,仅供参考,不过这个方案应该是能解决大部分的业务场景了
这里为了保险起见,我给框选插件的配置项添加了一个自定义的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
手机扫一扫
移动阅读更方便
你可能感兴趣的文章