How to change the output position CSS dynamic

[adil-cendrol]

How to change the output position CSS dynamic based on our requirement, suppose 4 outputs, I want a different position for how to do that dynamic.

[jerosoler]

View:

• flowchart shapes? #454

Or:

• Is it possible to connect nodes that are not on the same level in the DOM? #363 (comment)

[adil-cendrol]

Problem you added by static, but I need dynamic. Supposing I added multiple outputs based on addnode output, suppose I add a button based on the button, add node output, and then position will also be shown in the same line. based on this image i need fixed static but i need dynamic

[adil-cendrol]

In this scenario, we have added multiple outputs, i.e., n number of outputs.

[adil-cendrol]

addButton(i: number, j: number): void {
const buttonsArray = (this.listBoxes.at(i).get("sections") as FormArray)
.at(j)
.get("buttonslist") as FormArray;
buttonsArray.push(this.createlistButton());
this.editor.addNodeOutput(this.selectedNodeId);
const nodeElement = document.getElementById(node-${this.selectedNodeId});
const sectionContainerElement = nodeElement.querySelector(".listsectionboxheader") as HTMLElement;
const links = sectionContainerElement.querySelectorAll(".listtitlebuttonboxcontainer");

links.forEach((item) => {
  const target = document.querySelector(`#node-${this.selectedNodeId} .outputs .${item.classList[1]}`);
  if (target !== null) {
    // Cast target to HTMLElement to access style
    const targetElement = target as HTMLElement;
    const pos = item.getBoundingClientRect();
    const targetPos = targetElement.getBoundingClientRect();
    targetElement.style.top = `${pos.y - targetPos.y}px`;
    // targetElement.style.left = `${pos.x - targetPos.x}px`;
  }
});

} if (listSectionHeaderElement) {
listSectionHeaderElement.innerHTML = value.sections
.map((section: any) => {
const buttonsHTML = section.buttonslist
.map(
(button: any, index) =>
<div class="listtitlebuttonboxcontainer output_${ index + 1 }"><p class='listsectionbuttontitle'>${button.buttonName}</p> <p class="listsectiondesctitlebutton">${button.listbuttondesc}</p> </div>
)
.join("");
return <div><div class="sectionnameinlist">${section.sectionName}</div> <div class="">${buttonsHTML}</div></div>;
})
.join("");
} addlistNode(posX: number, posY: number): void {
const nodeId = node-${new Date().getTime()};
let textfield = <div id=${nodeId}> <div class="textfieldchatbot"> <h3 class="textfieldheadertopheading">List</h3> </div> <div class='listboxpreview'> <div class="listheadertextpreview"></div> <div class="listbodytextpreview"></div> </div> <div class="listdragfootertext"> </div> <div class="listbuttonpreview"> </div> <div class=''> <div> <div class='listsectionboxheader'> </div> </div> </div>;
const newNodeId = this.editor.addNode(
"list",
1,
0,
posX,
posY,
"list",
this.selectedNode,
textfield
);
const selectedNode = this.editor.drawflow.drawflow.Home.data[newNodeId];
if (selectedNode) {
selectedNode.data = { idind: v4() };
}
return newNodeId;
}