话接上回，继续实现jtopo本身不具有的一些功能，有讲的不对的地方，欢迎大家在评论区留言提出，博主基本每天在线，看到都会及时回复的，我们一起进步，奥利给，还有，码字不易，如果觉得博主写的不错的欢迎打赏哈！
8.给右键菜单添加图标
jtopo本身自带有右键菜单，但是没有图标，还是挺难看的，应项目需要，决定给jtopo增加右键菜单的图标，看着很简单，其实还是有一些小故事的，老规矩，先看效果图，再听我娓娓道来。
起先想着直接用layui的字体图标，因为着实方便呀，每个小菜单前面加一行代码就搞定了，例如：
<div class="fa fa-search-minus menu-item" onMouseMove="this.style.backgroundColor='#c5e7f6'" onMouseOut="this.style.backgroundColor=''"><i class="layui-icon"></i> <span>缩小(Shift-)</span></div>
但是后来发现行不通，主要是因为layui的的字体图标就那么一百来个，很多想要的图标都没有，自己又懒得去按照阿里矢量图标的生成办法搞一些需要的图标
怎么搞呢？还是有办法的，我们不用layui的字体图标了，直接用阿里的矢量图标。首先打开阿里矢量图库，找到我们喜欢的图标，点击右下角的复制svg代码，这样就复制到了该图标的svg代码
再粘贴到我们想要的标签旁边就ok了
上图中红框圈起来的部分都是我复制的svg代码，这样做的好处是改动量最小，不用下载图片，不用再增加其他的HTML标签，接下来我们再调整一下图标的大小和颜色，使之和我们的标签同样的样式：
.icon { width: 1.3em; height: 1.3em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; color: rgb(115,115,115);}最后再设置下右键菜单的边距，下划线超出部分隐藏：
.right-click-menu {position: absolute;width: 180px;display: none;background-color: #FFFFFF;border: 1px solid #b7c8f6;overflow: hidden;}.menu-item {/* padding-left: 5px; */width: 100%;font-size: 18px;height: 24px;line-height: 24px;text-align: left;border-bottom: 1px dotted #cccccc;padding: 0px 6px;cursor: pointer;}
好了，到此整个样式出来了，看起来还像模像样，但是……点击右键菜单的时候，好像右键菜单不大好使了，哈哈，该隐藏的时候不隐藏，该出来的时候不出来，什么原因导致的呢？细心的童鞋大概一猜就知道了，jtopo的右键菜单和功能实现是通过菜单名字去匹配的，可是我们加了图标，这样一来，匹配到的名称就和之前的不一样了，前边多出了svg的部分，好吧，在jtopo面前，我们始终奉行的是鬼挡杀鬼，佛挡杀佛，我们不妨先看看右键菜单的实现逻辑。节点、连线和画布的右键菜单都是在TopologyEditor方法里定义并挂载的，如图：
而真正的实现是在菜单初始化函数里，有这样一行代码要注意 let text = $.trim($(event.target).text())
这样代码在我们添加图标之前是没有问题的，但是现在有图标了，如果鼠标点击的正好是svg或者path，这里拿到的text就会是空值，这就导致了点击后没有反应，菜单失灵。好了，找到了问题的症结，就知道怎么改了，我们的目标是让鼠标点击后可以拿到点击处的“动作值”，这行代码我们稍加改动既可。
let text = $.trim($(event.target).text()||$(event.target).parent().text())if ($(event.target).prop("tagName") == "path") {text = $.trim($(event.target).text()||$(event.target).parent().parent().text())}
首先获取自身的text再和父节点的text做或运算拿到有效的text值，如果event节点正好是path，那么这里的text还会是空，那我们再强求一次parent（），这样一来可以解决点击图标后没有反应的问题。这里只演示了节点右键菜单的代码处理，其他画布的右键菜单和连线的右键菜单也是一样需要处理的，办法都是一样，博主就不重复讲解了。
最后，博主有一个小小的心愿，就是希望大家点一下下方的点赞、分享和收藏，博主希望大家都支持下，后期有好的东西我会继续分享给大家。
