采用d3开发流程设计器（六）通过拖拽选中多个节点，然后拖动调整位置

港控/mmm° 2023-02-17 01:20 15阅读 0赞

需求：  
1、通过拖拽选中多个节点，然后进行位置调整。  
2、选中多个节点，点击删除来进行多个节点删除。

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70]  
选中多个节点进行拖拽移动。

关键代码：  
第一步拖拽的时候创建一个临时的rect，并且设置透明度为0.7

/**
     * 初始化一个用于拖拽都rect区块
     * @param containerId
     */
    FlowDragSelArea.prototype.init=function (containerId) {
        this.flowDesCtl.svgObj.append("rect")
            .attr("rx", '4')
            .attr("ry", '4')
            .attr("x", '-100')
            .attr("y", '0')
            .attr("width", 90)
            .attr("height", 50)
            .attr("opacity", 0.7)
            .attr("stroke-dasharray",'2')
            .attr("cursor", "normal")
            .attr("nodeType", "nodeTextDrag")
            .attr("fill", "#F6F6F6")
            .attr("stroke", "#999")
            .style("cursor", `move`)
            .attr("stroke-width", "1")
            .attr("id", () => {
                return "selAreaDrag" + containerId + "";
            })
        ;
    };

第二步：拖拽结束去判断坐标，如果在这范围之内的节点进行选中操作

/**
     * 选中区域
     */
    FlowDragSelArea.prototype.selAreaNode=function () {
        let selRreaNode=window.d3.select("#selAreaDrag"+this.flowDesCtl.containerId);
        if(selRreaNode==null){
            return void(0);
        }
        let startX=selRreaNode.attr("x");
        let startY=selRreaNode.attr("y");
        let endX=parseFloat(selRreaNode.attr("x"))+parseFloat(selRreaNode.attr("width"));
        let endY=parseFloat(selRreaNode.attr("y"))+parseFloat(selRreaNode.attr("height"));
        //对普通节点进行选中
        for(let nodeId in this.flowDesCtl.flowRectNode.nodes){
            let oldTransform=window.d3.select("#"+nodeId).attr("transform");
            let nodePos=flowDesUtils.prseTransform(oldTransform);
            if(parseFloat(nodePos.x)>startX&&nodePos.x<parseFloat(endX)){
                if(parseFloat(nodePos.y)>startY&&nodePos.y<parseFloat(endY)){
                    //显示当前节点的拖拽边框
                    this._activeBorder(nodeId);
                    this.selNodes[nodeId]=this.flowDesCtl.flowRectNode.nodes[nodeId];
                }
            }
        }
        //对图像节点也进行选中
        for(let nodeId in this.flowDesCtl.flowCircleNode.nodes){
            let oldTransform=window.d3.select("#"+nodeId).attr("transform");
            let nodePos=flowDesUtils.prseTransform(oldTransform);
            if(parseFloat(nodePos.x)>startX&&nodePos.x<parseFloat(endX)){
                if(parseFloat(nodePos.y)>startY&&nodePos.y<parseFloat(endY)){
                    //显示当前节点的拖拽边框
                    this._activeBorder(nodeId);
                    this.selNodes[nodeId]=this.flowDesCtl.flowCircleNode.nodes[nodeId];
                }
            }
        }
    };

\_activeBorder 将选中的节点进行选中状态创建

/**
     * 对节点进行选中操作
     * @private
     */
    FlowDragSelArea.prototype._activeBorder=function (nodeId) {
        this.padding=10;
        let nodeG=window.d3.select(`#${nodeId}`);
        if(nodeG!=null){
            let nodePos=flowDesUtils.prseTransform(nodeG.attr("transform"));
    
            //设置拖拽边框节点的位置以及相应大小
            let showNodeDom=window.d3.select(`#${nodeId}_show_real`);
            let rectWidth=parseFloat(showNodeDom.attr("width"));
            let rectHeight=parseFloat(showNodeDom.attr("height"));
            let showNodePos=flowDesUtils.prseTransform(showNodeDom.attr("transform"));
            //创建选中对容器
            let borderNode=this.initSelSvgDom({nodeId,nodePos,rectWidth,rectHeight});
    
            let showRelNode=window.d3.select("#drage_size_rect_"+nodeId);
            showRelNode.attr("width", rectWidth+parseFloat(this.padding))
                .attr("height", rectHeight+parseFloat(this.padding))
                .attr("fill-opacity", 1)
                .attr("stroke-opacity", 1)
                .attr("transform", `translate(${parseFloat(showNodePos.x)-this.padding/2},${parseFloat(showNodePos.y)-this.padding/2})`)
            ;
            //绘制top 第一个 top-left拖拽节点
            this._setDragNodePos({
                borderNode,
                nodeId,
                x:showNodePos.x-this.padding,
                y:showNodePos.y-this.padding,
                dragType: "nw"
            });
            //绘制top 第二个 top-center拖拽节点
            this._setDragNodePos({
                borderNode,
                nodeId,
                x: showNodePos.x+rectWidth / 2,
                y: showNodePos.y-this.padding,
                dragType: "n"
            });
            //绘制top 第三个 top-right拖拽节点
            this._setDragNodePos({
                borderNode,
                nodeId,
                x: showNodePos.x+rectWidth+this.padding/2,
                y: showNodePos.y-this.padding,
                dragType: "ne"
            });
    
    
            //绘制center 第一个拖拽节点 center-left
            this._setDragNodePos({
                borderNode,
                nodeId,
                x:showNodePos.x-this.padding,
                y: showNodePos.y+rectHeight/2,
                dragType: "w"
            });
            //绘制center 第二个拖拽节点 center-right
            this._setDragNodePos({
                borderNode,
                nodeId,
                x: showNodePos.x+rectWidth+this.padding/2,
                y: showNodePos.y+rectHeight/2,
                dragType: "e"
            });
    
    
            //绘制bottom 第一个 bottom-left拖拽节点
            this._setDragNodePos({
                borderNode,
                nodeId,
                x:showNodePos.x-this.padding,
                y:showNodePos.y+rectHeight+this.padding/2,
                dragType: "sw"
            });
            //绘制bottom 第二个 bottom-center拖拽节点
            this._setDragNodePos({
                borderNode,
                nodeId,
                x: showNodePos.x+rectWidth/2,
                y: showNodePos.y+rectHeight+this.padding/2,
                dragType: "s"
            });
            //绘制bottom 第三个 bottom-right拖拽节点
            this._setDragNodePos({
                borderNode,
                nodeId,
                x: showNodePos.x+rectWidth+this.padding/2,
                y: showNodePos.y+rectHeight+this.padding/2,
                dragType: "se"
            });
        }
    }

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