How to plot multiple connectors (straight line) using dynamic data
This is my diagram
I want multiple lines like the selected 1 with dynamic data. I tried to plot using for loop, but it is plotting only last value, there are total 3 lines.
Below is my HTML code
<ejs-diagram #diagram id="diagram" (created)='created($event)' [rulerSettings]='rulerSettings' [getConnectorDefaults] ='getConnectorDefaults'(click)="click($event)">
<e-connectors>
<e-connector id='connector' type='Straight' [sourcePoint]='sourcePoint' [targetPoint]='targetPoint'>
</e-connector>
</e-connectors>
</ejs-diagram>
Below is my component.ts code
import { Component, OnInit, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramComponent, NodeModel, DiagramTools, ConnectorModel, PointModel, RulerSettingsModel } from '@syncfusion/ej2-angular-diagrams';
@Component({
templateUrl: 'dashboard.component.html',
encapsulation: ViewEncapsulation.None
})
export class DashboardComponent implements OnInit {
//user input
xaxis:any;
yaxis:any;
rwidth:any;
rlength:any;
typeid:any;
//shape properties
bgcolor:any;
bordercolor:any;
//layout data
layout : any[]=
[
{
"xaxis": 400,
"yaxis": 200,
"rwidth": 200,
"rlength": 400,
"typeid": 1
},
{
"xaxis": 90,
"yaxis": 50,
"rwidth": 50,
"rlength": 90,
"typeid": 2
},
{
"xaxis": 120,
"yaxis": 50,
"rwidth": 50,
"rlength": 30,
"typeid": 2
},
{
"xaxis": 270,
"yaxis": 50,
"rwidth": 50,
"rlength": 150,
"typeid": 2
},
{
"xaxis": 310,
"yaxis": 10,
"rwidth": 10,
"rlength": 40,
"typeid": 2
},
{
"xaxis": 310,
"yaxis": 30,
"rwidth": 20,
"rlength": 40,
"typeid": 2
},
{
"xaxis": 310,
"yaxis": 50,
"rwidth": 20,
"rlength": 40,
"typeid": 2
},
{
"xaxis": 400,
"yaxis": 50,
"rwidth": 50,
"rlength": 90,
"typeid": 2
},
{
"xaxis": 110,
"yaxis": 140,
"rwidth": 90,
"rlength": 110,
"typeid": 2
},
{
"xaxis": 50,
"yaxis": 200,
"rwidth": 60,
"rlength": 50,
"typeid": 2
},
{
"xaxis": 110,
"yaxis": 200,
"rwidth": 60,
"rlength": 60,
"typeid": 2
},
{
"xaxis": 260,
"yaxis": 90,
"rwidth": 40,
"rlength": 150,
"typeid": 2
},
{
"xaxis": 260,
"yaxis": 130,
"rwidth": 40,
"rlength": 150,
"typeid": 2
},
{
"xaxis": 260,
"yaxis": 170,
"rwidth": 40,
"rlength": 150,
"typeid": 2
},
{
"xaxis": 140,
"yaxis": 200,
"rwidth": 30,
"rlength": 30,
"typeid": 2
},
{
"xaxis": 170,
"yaxis": 200,
"rwidth": 30,
"rlength": 30,
"typeid": 2
},
{
"xaxis": 200,
"yaxis": 200,
"rwidth": 30,
"rlength": 30,
"typeid": 2
},
{
"xaxis": 230,
"yaxis": 200,
"rwidth": 30,
"rlength": 30,
"typeid": 2
},
{
"xaxis": 260,
"yaxis": 200,
"rwidth": 30,
"rlength": 30,
"typeid": 2
},
{
"xaxis": 400,
"yaxis": 200,
"rwidth": 150,
"rlength": 140,
"typeid": 2
}
]
//line data
startx:any;
starty:any;
endx:any;
endy:any;
line : any[]=
[
{
"startx":500,
"starty":100,
"endx":900,
"endy":500
},
{
"startx":500,
"starty":200,
"endx":900,
"endy":500
},
{
"startx":500,
"starty":300,
"endx":900,
"endy":300
}
];
@ViewChild("diagram")
public diagram: DiagramComponent;
public sourcePoint: PointModel;
public targetPoint: PointModel;
public pivot: PointModel;
public rulerSettings: RulerSettingsModel = { showRulers: true, dynamicGrid: true }
public tool: DiagramTools;
public node:NodeModel = { };
//user input
public drawrectangle()
{
// this.layout.map(function(x)
// {
// if (x.xaxis >=+_me.xaxis && x.xaxis <=+_me.yaxis) {
// alert("You can not overlap the shapes. Please check the co-ordinates.");
// return;
// }
// }
// )
this.node = {
offsetX: +this.xaxis,
offsetY: +this.yaxis,
width: +this.rlength,
height: +this.rwidth,
style: {
fill: 'pink',
strokeColor: 'cornflowerblue'
},
pivot : { x: 1, y: 1 }
};
this.diagram.add(this.node);
}
//predefined
public created(): void {
var _me = this;
this.layout.map(function(shapes)
{
if (shapes.typeid==1) {
_me.bgcolor='burlywood';
_me.bordercolor='black';
}
else
{
_me.bgcolor='azure';
_me.bordercolor='aqua';
}
_me.node = {
offsetX: shapes.xaxis,
offsetY: shapes.yaxis,
width: shapes.rlength,
height: shapes.rwidth,
style: {
fill: _me.bgcolor,
strokeColor: _me.bordercolor
},
pivot : { x: 1, y: 1 }
};
_me.diagram.add(_me.node);
}
)
// Selects when you click a node and pans when you click the Diagram surface
this.diagram.tool = DiagramTools.Default | DiagramTools.ZoomPan
}
public getConnectorDefaults(obj: ConnectorModel) {
obj.style = {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
}
obj.targetDecorator = {
style: {
fill: 'transparent',
strokeColor: 'transparent'
}
}
}
ngOnInit(): void {
var _me = this;
this.line.map(function(cuts)
{
_me.sourcePoint = { x: cuts.startx, y: cuts.starty };
_me.targetPoint = { x: cuts.endx, y: cuts.endy };
}
)
// this.sourcePoint = { x: 500, y: 100 };
// this.targetPoint = { x: 700, y: 100 };
this.pivot = { x: 1, y: 1 };
}
public click (args: any) {
alert("X:" + args.actualObject.offsetX + "Y:" + args.actualObject.offsetY + "Width" + args.actualObject.height + "Length" + args.actualObject.width);
// console.log("offsetX:"+ args.actualObject.offsetX);
}
}
I want to plot the lines on the diagram which is in aqua border color, but if I keep the same values as a rectangle (x,y) then the line is getting plotted behind rectangle which is not visible.
SIGN IN To post a reply.
3 Replies
SIGN IN To post a reply.
