采用d3开发流程设计器（三）添加普通任务节点

比眉伴天荒 2023-02-14 03:13 25阅读 0赞

1、普通任务节点是流程里面的最常用的节点，这种节点是rect形状  
需求：

*  普通节点可以进行拖拽
 *  普通节点可以进行大小变化
 *  普通节点可以拖拽出线条，跟其他节点连接

第一次这么深入的玩svg和d3 还是走了蛮多冤枉路，废话不多说了，上效果图吧。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70]

这里面涉及几个技巧  
1、text节点和边框拖拽节点和节点rect要实现在一个g里头，这样拖拽事件给g即可，不需要每个元素去监听拖拽。  
2、拖拽的时候，要对window.d3.event.x进行特殊的计算处理，因为rect节点的宽高都比较大，导致每次获取都x，y都是不统一的，如果简单的进行translate( w i n d o w . d 3. e v e n t . x , \{window.d3.event.x\}, window.d3.event.x,\{window.d3.event.y\})的话，会出现跳动的问题。  
再就是采用了timer来使移动更加平滑。

3、计算text的宽度，再进行位置的计算

FlowDesCtl.prototype.addNodeText=function({node,nodeWidth,nodeText,colorText="#000",nodeHeight}){
        node.append("text")
            .attr("x", (d)=>{
                $(`<span id="labelTemp">${nodeText}</span>`).appendTo($('#' + this.containerId));
                let labelWid=$("#labelTemp").width();$("#labelTemp").remove();
                d.labelWid=labelWid+20;
                return parseFloat(nodeWidth)/2-labelWid/2;
            })
            .attr("y", parseFloat(nodeHeight/2)+5)
            .text(nodeText)
            .attr("stroke-width", "0.8px")
            .style('stroke',colorText)
            .attr("font-family", 'PingFangSC, "Microsoft YaHei", "Lantinghei SC", serif')
            .attr("font-size", 16)
            .style("text-anchor"," start")
            .on("click", (d) => {
                //左键盘点击 则隐藏右键菜单
                this.vueMethods.hideNodeMenu&&this.vueMethods.hideNodeMenu();
                //隐藏其他节点的边框拖拽
                this._hideDragSizeBorder();
                //显示当前节点的拖拽边框
                this._showCurDragSizeBorder(d);
                window.d3.event.stopPropagation();
            })
            .on("contextmenu", d => {
                this._showNodeMenu(d);
            });
    };

4、绘制拖拽节点

FlowDesCtl.prototype._addDragSizeBorder=function({nodeCtl,nodeData,nodeWidth,nodeHeight,nodeType}){
    
        const borderNode = nodeCtl.append("g")
        // .selectAll("g")
            .data([nodeData])
            .attr("stroke-linecap", "round")
            .attr("stroke-linejoin", "round")
            .attr("class","drage_size_border")
            .attr("id", (d)=>{
                return "drage_size_border_"+d.id+"";
            })
            .style("cursor",`move)`)
            .attr("fill-opacity", 0)
            .attr("stroke-opacity", 0);
        
    
        let rectWidth=nodeWidth;
        let rectHeight=nodeHeight;
        if(nodeType==='startNode'||nodeType==='endNode'){
            rectWidth=nodeWidth*2;
            rectHeight=rectHeight*2;
        }
    
        let padding=14;
    
        borderNode.append("rect")
            .attr("rx", 0)
            .attr("ry", 0)
            .attr("id", (d)=>{
                return "rect_drage_"+d.id+"";
            })
            .attr("fill", "#fff")
            .attr("width", rectWidth+padding)
            .attr("height",  rectHeight+padding)
            .attr("stroke", "#dfdfdf")
            .attr("stroke-width", 1)
            .attr("transform",`translate(${-padding/2},${-padding/2})`)
            .attr("fill-opacity", 0)
            .attr("stroke-opacity", 0);
    
        //绘制top 第一个 top-left拖拽节点
        this._drawDragNode({borderNode,x:-padding/2-this.options.dragNodeWidth/2,y:-padding+this.options.dragNodeWidth/2,cursor:"nw-resize",dragType:"nw"});
        //绘制top 第二个 top-center拖拽节点
        this._drawDragNode({borderNode,x:this.options.taskNodeWidth/2,y:-padding+this.options.dragNodeWidth/2,cursor:"n-resize",dragType:"n"});
        //绘制top 第三个 top-right拖拽节点
        this._drawDragNode({borderNode,x:this.options.taskNodeWidth+this.options.dragNodeWidth/2,y:-padding+this.options.dragNodeWidth/2,cursor:"ne-resize",dragType:"ne"});
    
    
        //绘制center 第一个拖拽节点 center-left
        this._drawDragNode({borderNode,x:-padding/2-this.options.dragNodeWidth/2,y:this.options.taskNodeHeight/2-this.options.dragNodeWidth/2,cursor:"w-resize",dragType:"w"});
        //绘制center 第二个拖拽节点 center-right
        this._drawDragNode({borderNode,x:this.options.taskNodeWidth+this.options.dragNodeWidth/2,y:this.options.taskNodeHeight/2-this.options.dragNodeWidth/2,cursor:"e-resize",dragType:"e"});
    
    
        //绘制bottom 第一个 bottom-left拖拽节点
        this._drawDragNode({borderNode,x:-padding/2-this.options.dragNodeWidth/2,y:this.options.taskNodeHeight+this.options.dragNodeWidth/2,cursor:"sw-resize",dragType:"sw"});
        //绘制bottom 第二个 bottom-center拖拽节点
        this._drawDragNode({borderNode,x:this.options.taskNodeWidth/2,y:this.options.taskNodeHeight+this.options.dragNodeWidth/2,cursor:"s-resize",dragType:"s"});
        //绘制bottom 第三个 bottom-right拖拽节点
        this._drawDragNode({borderNode,x:this.options.taskNodeWidth+this.options.dragNodeWidth/2,y:this.options.taskNodeHeight+this.options.dragNodeWidth/2,cursor:"se-resize",dragType:"se"});
    };

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