How to automatically arrange nodes without overlapping in Angular Diagram?
How to add multiple nodes dynamically without overlapping between them
You should not push the node to the nodes collection at runtime. (Example: nodes.push(node)). Instead, you can use a add method to add a node at runtime.
Add a single node dynamically
You can add a node at runtime by using the add method. Refer to the following code example.
<!-- create a button -->
<button (click)="addNode()">Add Node</button>
public addNode() {
let node: NodeModel = { };
// add a node at runtime
this.diagram.add(node);
}
The above code example will add a node to the diagram at position 0,0, which means offsetX and offsetY of a node is 0.
Position the node
You need to set node offsetX and offsetY to position the node in the diagram. Refer to the following code example in which the nodes are positioned at 100,100.
<!-- create a button -->
<button (click)="addNode()">Add Node</button>
public addNode() {
let node: NodeModel = { id: ‘node’, offsetX:100, offsetY: 100};
//Add a node at runtime
this.diagram.add(node);
}
Nodes overlaps with each other by clicking the button several times
When you click a button several times, the nodes will be added to the position 100,100 at each button click. So, multiple nodes will be in the same position.
How to avoid overlapping of multiple nodes
To avoid overlapping of nodes, change the node position based on the viewPortWidth value.
Here is the code example to initialize the offsetX and offsetY value as 100,100.
//Define offset values initially public offsetX: number = 100; public offsetY: number = 100;
Here is a code example to change the node offset value based on the diagram viewPortWidth.
public addNode() {
//Create a node object with size
let node: NodeModel = { height: 100, width: 100 };
//Check node offset lesser than diagram viewportwidth
if (this.offsetX < this.diagram.scrollSettings.viewPortWidth) {
node.offsetX = this.offsetX;
node.offsetY = this.offsetY;
//Add a node at runtime
this.diagram.add(node);
this.offsetX = this.offsetX + 150;
} else {
this.offsetX = 100;
this.offsetY = this.offsetY + 150;
node.offsetX = this.offsetX;
node.offsetY = this.offsetY;
this.diagram.add(node);
}
}
Here is a complete code example to add multiple nodes dynamically without overlapping with each other.
<!-- create a button -->
<button (click)="addNode()">Add Node</button>
export class AppComponent {
@ViewChild("diagram", null)
public diagram: DiagramComponent;
//Default node offset values
public offsetX: number = 100;
public offsetY: number = 100;
public addNode() {
//Create a node object with size
let node: NodeModel = { height: 100, width: 100 };
//Check node offset lesser than diagram viewportwidth
if (this.offsetX < this.diagram.scrollSettings.viewPortWidth) {
node.offsetX = this.offsetX;
node.offsetY = this.offsetY;
//Add a node at runtime
this.diagram.add(node);
this.offsetX = this.offsetX + 150;
} else {
this.offsetX = 100;
this.offsetY = this.offsetY + 150;
node.offsetX = this.offsetX;
node.offsetY = this.offsetY;
this.diagram.add(node);
}
}
}
Sample link: https://stackblitz.com/edit/angular-naist2-wptpvk?file=app.component.ts
