Comments (4)
vnomohan
commented on June 1, 2024
1
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!!!
Kapture.2024-02-26.at.22.44.34.mp4
from drawflow.
jerosoler
commented on June 1, 2024
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.
from drawflow.
vnomohan
commented on June 1, 2024
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..
from drawflow.
jerosoler
commented on June 1, 2024
Check that the node exists when you do an updateConnectionNodes.
It seems that you are trying to access a component that does not exist.
from drawflow.
Related Issues (20)
- Adding event listener to button inside drawflow node HOT 1
- Suggestion to get exact mouse position
- "view" editor mode disables translate click/drag HOT 2
- Is it possible to create a drawflow connection with a different curvature than the others? HOT 1
- Can we have a before node delete event in angular? HOT 2
- Cannot read properties of undefined (reading 'inputs') HOT 3
- After setting zoom out manually and then zoomrefresh() so the connected lines of each node gets disconnected. HOT 3
- When input type = "password" the node can't be drag from list HOT 4
- [question] How to dynamically add point? HOT 1
- How to lock the full screen nodes and move into the area HOT 1
- Component return click event goes out of the canvas HOT 1
- Mouse gets stuck when leaving parent container HOT 1
- How to do a right click context menu on the connection links HOT 2
- How to place Inputs/Outputs at top & bottom instead of left and right HOT 1
- how can distribute flow in 2 part HOT 4
- Any way to designate True/False outputs for custom nodes? HOT 1
- newest npm package HOT 5
- on Zoom out not able to see all the nodes in single view (Full view) if nodes were more HOT 4
- Reference error in VS Code HOT 3
- Possibility to embed widgets or plots in nodes ? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from drawflow.