jtopo的项目实战（七）

话接上回，继续实现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">&#xe60c;</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（），这样一来可以解决点击图标后没有反应的问题。这里只演示了节点右键菜单的代码处理，其他画布的右键菜单和连线的右键菜单也是一样需要处理的，办法都是一样，博主就不重复讲解了。

 

最后，博主有一个小小的心愿，就是希望大家点一下下方的点赞、分享和收藏，博主希望大家都支持下，后期有好的东西我会继续分享给大家。