采用d3开发流程设计器（二）添加右键菜单

客官°小女子只卖身不卖艺 2023-02-13 08:48 6阅读 0赞

上一节完成了架子的搭建以及节点的拖拽，这节完成节点菜单右键的操作  
需求：  
1、右键点击节点，弹出菜单，选中属性菜单项，右边再弹出菜单配置panel  
2、点击其他节点或者界面空白处隐藏下拉菜单

效果图：  
1、右键节点弹出菜单  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70]  
点击属性节点弹出右边的panel  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70 1]

其中的核心代码：  
第一步：注册右键菜单

node.append("circle")
            .attr("r", nodeWidth)
            .attr("fill", nodeColor)
            .on("click", d => {
                //左键盘点击 则隐藏右键菜单
                this.vueMethods.hideNodeMenu&&this.vueMethods.hideNodeMenu();
                //隐藏以前相应的选中状态
                this.svgObj.selectAll("rect")
                    .attr("fill-opacity", 0)
                    .attr("stroke-opacity", 0);
                //将当前节点设置为选中状态
                window.d3.select("#"+"rect_"+d.id)
                    .attr("fill-opacity", 1)
                    .attr("stroke-opacity", 1);
                console.log(d,"====");
            })
            .on("contextmenu", d => {
                this._showNodeMenu(d);
            })
        ;
        // .attr("cx", 20)
        // .attr("cy", 20);
    
        node.append("text")
            .attr("x", -nodeWidth/2)
            .attr("y", "0.31em")
            .text(nodeText)
            .attr("fill", "#fff")
            .attr("stroke", "white")
            .attr("stroke-width", "0.5px")
            .style('stroke',"#FFF")
            .attr("stroke", "#fff")
            .on("click", d => {
                this.vueMethods.hideNodeMenu&&this.vueMethods.hideNodeMenu();
            })
            .on("contextmenu", d => {
                this._showNodeMenu(d);
            })
        ;

对圆圈和字都进行了菜单右键的注册，因为svg感觉没有事件冒泡这个说法，如果不是都注册可能导致点击没效果。

第二步：在vue的界面实现菜单

第三步：自然就是控制显示隐藏菜单的方法

//显示节点但右键菜单信息
                showNodeMenu(x,elY,curNode){
                    this.curNode=curNode;
                    let {y}=GoingUtils.getElementPosition($("#flowLayout").get(0));
                    this.nodeMenuFlag=true;
                    if(x>0){
                        console.log(x,"====")
                        $("#nodeMenu").css("left",x+"px");
                    }
                    if(y>0){
                        console.log(y,"====")
                        $("#nodeMenu").css("top",elY-y+"px");
                    }
                },

第四步：就是取消父界面的默认右键菜单操作，注册一个@contextmenu.prevent方法

第五步：准备右边的panel，我用的ivew的Drawer组件

最后自然就是添加panle的控制与显示了

//点击属性
                propClick(){
                    this.nodeProp=true;
                    this.nodeMenuFlag=false;
                },

基本思路和大概代码就是如此了。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200528094002206.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200528094054307.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM=,size_16,color_FFFFFF,t_70