Error offsetWidth

[vnomohan]

Hi Jerosoler,

i am getting above error when trying to re-arrange nodes. What it is saying actually.. i dont understand..Please explain.

[jerosoler]

It seems that it is not finding any node.

Can you show your code to do the re-arrange?

Since there is no native function to do re-arrange.

[vnomohan]

Hi Jerosoler, Im extremely sorry for the delay,believe me im overlooked the message.

Below is the code i have created for the re-arrange the nodes.

Note : this nodes arrangement works based on balancing the nodes on position based. Top and Bottom. Example, if there is 4 sub-nodes on Top of main node, the below codes will re-arrange it by moving the two nodes from Top position to Bottom position. so it will looks balanced. Also there is gap adjustment provided to adjust the position based on the shape of nodes

`. this.zoomInOutAdjust();

    let predWorkflow: any = this.drawFlowData();
    let workflowType: any = this.aHandlingModuleData.currentModule;
    let currentWorkflow: any = JSON.parse(JSON.stringify(this.editor.drawflow["drawflow"][workflowType]["data"]));

    //console.log(currentWorkflow)
    let mainNodeId: any = [];
    let generateNodeId: any = [];
    let triangularId: any = [];

    let isCanvasEmpty = document.querySelector("#node-1");
    const len = Object.keys(currentWorkflow).length;

    //Generate Node
    let initGPosition = 'output_1';//top position, output_3 is bottom position
    let posXP_G_o1 = 200;
    let posYP_G_o1 = -100;
    let posXP_G_01_gap = 10;
    let posYP_G_01_gap = -120;

    let posXP_G_o3 = 200;
    let posYP_G_o3 = 100;
    let posXP_G_03_gap = 10;
    let posYP_G_03_gap = 120;

    //Triangular Node
    let initTPosition = 'output_1';
    let posXP_T_o1 = 970;
    let posYP_T_o1 = -100;
    let posXP_T_01_gap = 10;
    let posYP_T_01_gap = -120;

    let posXP_T_o3 = 970;
    let posYP_T_o3 = 100;
    let posXP_T_03_gap = 10;
    let posYP_T_03_gap = 120;

    if (isCanvasEmpty != null) {
        let counter = 1;
       _.each(currentWorkflow, (value, key) => {
            for (let k of key) {
                if(counter > len){
                    break;
                }
                let idNodeC:number = +key;
                if(idNodeC === 11){
                    console.log("first")
                }
                let posXC = currentWorkflow[key]['pos_x'];
                let posYC = currentWorkflow[key]['pos_y'];
                let classC = currentWorkflow[key]['class'];
                counter = counter + 1;
                if(!this.mainNodeId.includes(idNodeC)){
                    let getOutputCon:any = "";
                    let whichOutputCon: boolean ;
                    let output = "";
                    let posYP = 0;
                    let posXP = 0;

                    if(classC.includes("generate")){
                        getOutputCon = document.querySelector(".connection.node_in_node-"+idNodeC+".node_out_node-3")!.classList;
                        whichOutputCon = getOutputCon.contains(initGPosition);

                        output = (initGPosition == "output_1")? "output_3" : "output_1";
                        if(!whichOutputCon){
                            getOutputCon.remove(output);
                            getOutputCon.add(initGPosition);
                        }

                        if(initGPosition == "output_1"){
                            posYP = posYP_G_o1
                            posXP = posXP_G_o1
                            posYP_G_o1 = (posYP_G_o1 + posYP_G_01_gap);
                            posXP_G_o1 = (posXP_G_o1 + posXP_G_01_gap);
                        } else {
                            posYP = posYP_G_o3
                            posXP = posXP_G_o3
                            posYP_G_o3 = (posYP_G_o3 + posYP_G_03_gap);
                            posXP_G_o3 = (posXP_G_o3 + posXP_G_03_gap);
                        }
                        generateNodeId.push(idNodeC)
                    }else {
                        getOutputCon = document.querySelector(".connection.node_in_node-"+idNodeC+".node_out_node-4")!.classList;
                        whichOutputCon = getOutputCon.contains(initTPosition);

                        output = (initGPosition == "output_1")? "output_3" : "output_1";
                        if(!whichOutputCon){
                            getOutputCon.remove(output);
                            getOutputCon.add(initGPosition);
                        }

                        if(initGPosition == "output_1"){
                            posYP = posYP_T_o1
                            posXP = posXP_T_o1
                            posYP_T_o1 = (posYP_T_o1 + posYP_T_01_gap);
                            posXP_T_o1 = (posXP_T_o1 + posXP_T_01_gap);
                        } else {
                            posYP = posYP_T_o3
                            posXP = posXP_T_o3
                            posYP_T_o3 = (posYP_T_o3 + posYP_T_03_gap);
                            posXP_T_o3 = (posXP_T_o3 + posXP_T_03_gap);
                        }

                        triangularId.push(idNodeC);
                    }

                    document.getElementById("node-" + idNodeC + "")!.style.top = "" + posYP + "px";
                    document.getElementById("node-" + idNodeC + "")!.style.left = "" + posXP + "px";
                    this.editor.drawflow.drawflow[workflowType].data[idNodeC].pos_x = posXP;
                    this.editor.drawflow.drawflow[workflowType].data[idNodeC].pos_y = posYP;
                    initGPosition = output;

                    console.log(idNodeC)
                    console.log(posXP)
                    console.log(posYP)
                    break;
                }

                let idNodeP = predWorkflow[k]['id'];
                let posXP = predWorkflow[k]['pos_x'];
                let posYP = predWorkflow[k]['pos_y'];

                mainNodeId.push(idNodeC);
                document.getElementById("node-" + idNodeC + "")!.style.top = "" + posYP + "px";
                document.getElementById("node-" + idNodeC + "")!.style.left = "" + posXP + "px";
                this.editor.drawflow.drawflow[workflowType].data[idNodeC].pos_x = posXP;
                this.editor.drawflow.drawflow[workflowType].data[idNodeC].pos_y = posYP;
                this.editor.updateConnectionNodes("node-" + idNodeC + "");   

            }
        });

        generateNodeId = new Set(generateNodeId);
        generateNodeId.forEach((nodeId: any) => {
            this.editor.updateConnectionNodes("node-"+nodeId);
        });
        triangularId = new Set(triangularId);
        triangularId.forEach((nodeId: any) => {
            this.editor.updateConnectionNodes("node-"+nodeId);
        });
    }

    `

However if there is more sub-nodes ,there is an error "offsetWidth" as i posted on 25 Dec. Not sure what is that..

[jerosoler]

Check that the node exists when you do an updateConnectionNodes.

It seems that you are trying to access a component that does not exist.

[vnomohan]

hi Jerosoler,

I found the root cause here, handled the error message by properly removing and adding the node connection output1 -> input1.

a. ) this.editor.removeConnectionNodeId - missed b.) this.editor.addConnection - missed c.) this.editor.updateConnectionNodes

Now the rearrange is working beautifully!!!

https://github.com/jerosoler/Drawflow/assets/45278418/952fb91a-8432-4cf6-9559-ba2965f7bd4f