采用d3开发流程设计器（一）搭建框架和节点拖拽

电玩女神 2023-02-12 05:44 7阅读 0赞

多年前接触过一个easyui写的一个流程设计器，功能蛮强大的，但时过境迁，以前的那种太过笨重，而且始终感觉运行起来太卡顿，最近公司不是特别忙，突然想采用d3来写个流程设计器。  
流程设计器大概需求

*  可以拖拽节点进行绘制流程图
 *  可以点击右键弹出菜单进行相应操作
 *  可以生成流程xml格式内容
 *  可以双击弹出属性配置
 *  遵循activity的流程图规则
 *  流程图可以整体拖动
 *  提供流程图的鹰眼查看功能
 *  提供流程图放大缩小功能  
    目前只想到这些需求。

第一步：自然就是搭建框架结构， 左边为操作区域，右边为绘图区域：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70]  
第二步：就是实现开始按钮，结束按钮的拖拽

通过mousedown事件来实现dom的拖拽

moseItemMove (event,nodeType) {
                    let odiv = $(event.target).closest(".flowNode").get(0);   //获取当前元素
                    if(odiv==null){
                        return void(0);
                    }
                    let pos=GoingUtils.getElementPosition($("#flowLayout").get(0));
                    let {x,y}=GoingUtils.getElementPosition(odiv);
                    //需要实际
                    let newDiv=$(odiv).clone(true).appendTo("#flowLayout");
                    $(newDiv).css("position","absolute").css("opacity","0.8").css("left",x-pos.x).css("top",y-pos.y).css("border","1px solid #dfdfdf").css("width","150");
                    newDiv=newDiv.get(0);
                    //算出鼠标相对元素的位置
                    let disX = event.clientX - newDiv.offsetLeft;
                    var disy = event.clientY - newDiv.offsetTop;
                    let left = '',top='';
                    document.onmousemove = (e)=>{
                        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
                        left = e.clientX - disX;
                        top = e.clientY - disy;
                        if(this.moverTimer!=null){
                            clearTimeout(this.moverTimer);
                        }
                        this.moverTimer=setTimeout(()=>{
                        //这里是限制拖动范围
                            if(top<0||left<180){
                                $(newDiv).css("cursor","not-allowed");
                                newDiv.style.left = left + 'px';
                                newDiv.style.top = top + 'px';
                                this.appendNode=false;
                            }else{
                                this.appendNode=true;
                                $(newDiv).css("cursor","inherit");
                                //绑定元素位置到positionX和positionY上面
                                //移动当前元素
                                newDiv.style.left = left + 'px';
                                newDiv.style.top = top + 'px';
                            }
                        },5);
                    };
                    document.onmouseup = (e) => {
                        document.onmousemove = null;
                        document.onmouseup = null;
                        this.appendSvgNode(newDiv,nodeType);
                    };
                }

这样就实现了dom元素的拖拽操作。如果拖拽到设计区域，则进行svg节点的添加

第三步：进行svg元素的添加

/**
     * 绘制节点
     * @param nodeColor
     * @param nodeData
     * @param circleWidth
     * @param nodeText
     * @private
     */
    FlowDesCtl.prototype._addNode=function({nodeColor,nodeData,circleWidth,nodeText}){
        this.svgObj.selectAll("rect")
            .attr("fill-opacity", 0)
            .attr("stroke-opacity", 0);
    
    
        function dragstarted(d) {
            if (d != null) {
                d.fx = d.x;
                d.fy = d.y;
            }
        }
    
        function dragged(d) {
            console.log(d,"====");
            if (d != null) {
                d.fx = window.d3.event.x;
                d.fy = window.d3.event.y;
                window.d3.select(this).attr("transform",`translate(${d.fx},${d.fy })`);
            }
        }
    
        function dragended(d) {
            if(d!=null){
                d.fx = null;
                d.fy = null;
            }
        }
        let {fx,fy}=nodeData;
        const node = this.svgObj.append("g")
        // .selectAll("g")
            .data([nodeData])
            .attr("fill", "currentColor")
            .attr("stroke-linecap", "round")
            .attr("stroke-linejoin", "round")
            .attr("class", "moveNode")
            .attr("transform",`translate(${fx},${fy})`)
            .style("cursor",`move)`)
            .call(window.d3.drag()
                .on("start", dragstarted)
                .on("drag", dragged)
                .on("end", dragended));
    
    
        node.append("rect")
            .attr("rx", 4)
            .attr("ry", 4)
            .attr("id", (d)=>{
                return "rect_"+d.id+"";
            })
            .attr("fill", "#fff")
            .attr("width",  (d)=> {
                return 10;
            })
            .attr("height",  (d)=> {
                console.log(d,"===height");
                return 10;
            })
            .attr("stroke", "red")
            .attr("stroke-width", 1)
            .attr("transform",`translate(${15},${20})`)
            .attr("fill-opacity", 1)
            .attr("stroke-opacity", 1)
        ;
    
        node.append("circle")
            .attr("r", circleWidth)
            .attr("fill", nodeColor)
            .on("click", d => {
                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,"====");
            });
        // .attr("cx", 20)
        // .attr("cy", 20);
    
        node.append("text")
            .attr("x", -circleWidth/2)
            .attr("y", "0.31em")
            .text(nodeText)
            .attr("fill", "#fff")
            .attr("stroke", "white")
            .attr("stroke-width", "0.5px")
            .style('stroke',"#FFF")
            .attr("stroke", "#fff");
    };

这样就成功的实现了开始节点和结束节点进行拖拽绘制的功能。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70 1]  
具体代码会整个设计器写完后附上github地址。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200527163730611.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/20200527164756536.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM=,size_16,color_FFFFFF,t_70