Connectors are objects used to create link between two points, nodes or ports to represent the relationships between them.
Connector can be created by defining the source and target point of the connector. The path to be drawn can be defined with a collection of segments. To explore the properties of a connector
, refer to Connector Properties
.
The sourcePoint
and targetPoint
properties of connector allow you to define the end points of a connector.
The following code example illustrates how to add a connector through connector collection.
<ejs-diagram id="container" width="100%" height="700px" connectors="@ViewBag.connectors" nodes="@ViewBag.nodes">
</ejs-diagram>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.Drawing;
namespace EJ2MVCSampleBrowser.Controllers.Diagram {
public partial class DiagramController: Controller {
// GET: Nodes
public ActionResult Nodes() {
List<DiagramConnector> Connectors = new List<DiagramConnector>();
Connectors.Add(new DiagramConnector() { Id = "connector", SourcePoint = new DiagramPoint() { X = 100, Y = 100 }, TargetPoint = new DiagramPoint() { X = 300, Y = 300 } });
ViewBag.connectors = Connectors;
return View();
}
}
}
Connectors can be added at runtime by using public method, diagram.add
and can be removed at runtime by using public method, diagram.remove
.
The following code example illustrates how to add connector at runtime.
<ejs-diagram id="container" width="100%" height="700px" connectors="@ViewBag.connectors" nodes="@ViewBag.nodes">
</ejs-diagram>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.Drawing;
namespace EJ2MVCSampleBrowser.Controllers.Diagram {
public partial class DiagramController: Controller {
// GET: Nodes
public ActionResult Nodes() {
List<DiagramConnector> Connectors = new List<DiagramConnector>();
Connectors.Add(new DiagramConnector() { Id = "connector", SourcePoint = new DiagramPoint() { X = 100, Y = 100 }, TargetPoint = new DiagramPoint() { X = 300, Y = 300 } });
ViewBag.connectors = Connectors;
return View();
}
}
}
var connectors = {
id: "connector2",
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
},
sourcePoint: {
x: 300,
y: 100
},
targetPoint: {
x: 400,
y: 200
}
}
var diagram = document.getElementById("container").ej2_instances[0];
// Adds to the Diagram
diagram.add(connectors)
// Remove from the diagram
diagram.remove(connectors)
Connectors can be predefined and added to the symbol palette. You can drop those connectors into the diagram, when required.
For more information about adding connectors from symbol palette, refer to Symbol Palette
.
Connectors can be interactively drawn by clicking and dragging on the diagram surface by using drawingObject
.
For more information about drawing connectors, refer to Draw Connectors
.
Various connector properties such as sourcePoint
, targetPoint
, style
, sourcePortID
, targetPortID
, etc., can be updated at the runtime.
The following code example illustrates how to update a connector’s source point, target point, styles properties at runtime.
<ejs-diagram id="container" width="100%" height="700px" connectors="@ViewBag.connectors" nodes="@ViewBag.nodes">
</ejs-diagram>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.Drawing;
namespace EJ2MVCSampleBrowser.Controllers.Diagram {
public partial class DiagramController: Controller {
// GET: Nodes
public ActionResult Nodes() {
List<DiagramConnector> Connectors = new List<DiagramConnector>();
Connectors.Add(new DiagramConnector() { Id = "connector", SourcePoint = new DiagramPoint() { X = 100, Y = 100 }, TargetPoint = new DiagramPoint() { X = 300, Y = 300 } });
ViewBag.connectors = Connectors;
return View();
}
}
}
var diagram = document.getElementById("container").ej2_instances[0];
// Update the connector properties at the run time
diagram.connectors[0].style.strokeColor = '#6BA5D7';
diagram.connectors[0].style.fill = '#6BA5D7';
diagram.connectors[0].style.strokeWidth = 2;
diagram.connectors[0].targetDecorator.style.fill = '#6BA5D7';
diagram.connectors[0].targetDecorator.style.strokeColor = '#6BA5D7';
diagram.connectors[0].sourcePoint.x = 150;
diagram.connectors[0].targetPoint.x = 150;
diagram.dataBind();
sourceID
and targetID
properties allow to define the nodes to be connected.<ejs-diagram id="container" width="100%" height="700px" connectors="@ViewBag.connectors" nodes="@ViewBag.nodes">
</ejs-diagram>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.Drawing;
namespace EJ2MVCSampleBrowser.Controllers.Diagram {
public partial class DiagramController: Controller {
// GET: Nodes
public ActionResult Nodes() {
List < DiagramNode > nodes = new List < DiagramNode > ();
List < DiagramNodeAnnotation > Node1 = new List < DiagramNodeAnnotation > ();
Node1.Add(new DiagramNodeAnnotation() {
Content = "node1", Style = new DiagramTextStyle() {
Color = "White", StrokeColor = "None"
}
});
List < DiagramNodeAnnotation > Node2 = new List < DiagramNodeAnnotation > ();
Node2.Add(new DiagramNodeAnnotation() {
Content = "node2", Style = new DiagramTextStyle() {
Color = "White", StrokeColor = "None"
}
});
nodes.Add(new DiagramNode() {
Id = "node1",
Width = 100,
Height = 100,
Style = new NodeStyleNodes() {
Fill = "darkcyan"
},
OffsetX = 100,
OffsetY = 100,
Annotations = Node1
});
nodes.Add(new DiagramNode() {
Id = "node2",
Width = 100,
Height = 100,
Style = new NodeStyleNodes() {
Fill = "darkcyan"
},
OffsetX = 300,
OffsetY = 300,
Annotations = Node2
});
ViewBag.nodes = nodes;
List<DiagramConnector> Connectors = new List<DiagramConnector>();
Connectors.Add(new DiagramConnector() { Id = "connector", SourceID="node1", TargetID="node2" });
ViewBag.connectors = Connectors;
return View();
}
}
}
node.constraints = NodeConstraints.Default & ~NodeConstraints.InConnect,
The sourcePortID
and targetPortID
properties allow to create connections between some specific points of source/target nodes.
The following code example illustrates how to create port to port connections.
<ejs-diagram id="container" width="100%" height="700px" connectors="@ViewBag.connectors" nodes="@ViewBag.nodes">
</ejs-diagram>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.Drawing;
namespace EJ2MVCSampleBrowser.Controllers.Diagram {
public partial class DiagramController: Controller {
// GET: Nodes
public ActionResult Nodes() {
List < DiagramNode > nodes = new List < DiagramNode > ();
List < DiagramNodeAnnotation > Node1 = new List < DiagramNodeAnnotation > ();
Node1.Add(new DiagramNodeAnnotation() {
Content = "node1", Style = new DiagramTextStyle() {
Color = "White", StrokeColor = "None"
}
});
List < DiagramNodeAnnotation > Node2 = new List < DiagramNodeAnnotation > ();
Node2.Add(new DiagramNodeAnnotation() {
Content = "node2", Style = new DiagramTextStyle() {
Color = "White", StrokeColor = "None"
}
});
List<DiagramPort> ports1 = new List<DiagramPort>();
ports1.Add(new CustomPort() { Id = "port1", Shape = PortShapes.Circle, Offset = new DiagramPoint() { X = 1, Y = 0.5 }, Visibility = PortVisibility.Visible });
List<DiagramPort> ports2 = new List<DiagramPort>();
ports2.Add(new CustomPort() { Id = "port2", Shape = PortShapes.Circle, Offset = new DiagramPoint() { X = 0, Y = 0.5 }, Visibility = PortVisibility.Visible });
nodes.Add(new DiagramNode() {
Id = "node1",
Width = 100,
Height = 100,
Style = new NodeStyleNodes() {
Fill = "darkcyan"
},
OffsetX = 100,
OffsetY = 100,
Annotations = Node1,
Ports = ports1
});
nodes.Add(new DiagramNode() {
Id = "node2",
Width = 100,
Height = 100,
Style = new NodeStyleNodes() {
Fill = "darkcyan"
},
OffsetX = 300,
OffsetY = 300,
Annotations = Node2,
Ports = port2
});
ViewBag.nodes = nodes;
List<DiagramConnector> Connectors = new List<DiagramConnector>();
Connectors.Add(new DiagramConnector() { Id = "connector", SourceID="node1", TargetID="node2", SourcePortID = "port1", TargetPortID = "port2" });
ViewBag.connectors = Connectors;
return View();
}
}
}
Similarly, the sourcePortID
or targetPortID
can be changed at the runtime by changing the port sourcePortID
or targetPortID
.
<ejs-diagram id="container" width="100%" height="700px" connectors="@ViewBag.connectors" nodes="@ViewBag.nodes">
</ejs-diagram>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.Drawing;
namespace EJ2MVCSampleBrowser.Controllers.Diagram {
public partial class DiagramController: Controller {
// GET: Nodes
public ActionResult Nodes() {
List < DiagramNode > nodes = new List < DiagramNode > ();
List < DiagramNodeAnnotation > Node1 = new List < DiagramNodeAnnotation > ();
Node1.Add(new DiagramNodeAnnotation() {
Content = "node1", Style = new DiagramTextStyle() {
Color = "White", StrokeColor = "None"
}
});
List < DiagramNodeAnnotation > Node2 = new List < DiagramNodeAnnotation > ();
Node2.Add(new DiagramNodeAnnotation() {
Content = "node2", Style = new DiagramTextStyle() {
Color = "White", StrokeColor = "None"
}
});
List<DiagramPort> ports1 = new List<DiagramPort>();
ports1.Add(new CustomPort() { Id = "port1", Shape = PortShapes.Circle, Offset = new DiagramPoint() { X = 1, Y = 0.5 }, Visibility = PortVisibility.Visible });
List<DiagramPort> ports2 = new List<DiagramPort>();
ports2.Add(new CustomPort() { Id = "port2", Shape = PortShapes.Circle, Offset = new DiagramPoint() { X = 0, Y = 0.5 }, Visibility = PortVisibility.Visible });
nodes.Add(new DiagramNode() {
Id = "node1",
Width = 100,
Height = 100,
Style = new NodeStyleNodes() {
Fill = "darkcyan"
},
OffsetX = 100,
OffsetY = 100,
Annotations = Node1,
Ports = ports1
});
nodes.Add(new DiagramNode() {
Id = "node2",
Width = 100,
Height = 100,
Style = new NodeStyleNodes() {
Fill = "darkcyan"
},
OffsetX = 300,
OffsetY = 300,
Annotations = Node2,
Ports = port2
});
ViewBag.nodes = nodes;
List<DiagramConnector> Connectors = new List<DiagramConnector>();
Connectors.Add(new DiagramConnector() { Id = "connector", SourceID="node1", TargetID="node2", SourcePortID = "port1", TargetPortID = "port2" });
ViewBag.connectors = Connectors;
return View();
}
}
}
var diagram = document.getElementById("container").ej2_instances[0];
diagram.appendTo('#element');
// Update the target portID at the run time
diagram.connectors[0].targetPortID = 'newnodeport1'
port.constraints = PortConstraints.InConnect,
The path of the connector is defined with a collection of segments. There are three types of segments.
To create a straight line, specify the type
of the segment as straight and add a straight segment to segments
collection and need to specify type
for the connector. The following code example illustrates how to create a default straight segment.
The point
property of straight segment allows you to define the end point of it. The following code example illustrates how to define the end point of a straight segment.
Orthogonal segments is used to create segments that are perpendicular to each other.
Set the segment type
as orthogonal to create a default orthogonal segment and need to specify type
. The following code example illustrates how to create a default orthogonal segment.
Multiple segments can be defined one after another. To create a connector with multiple segments, define and add the segments to connector.segments
collection. The following code example illustrates how to create a connector with multiple segments.
<ejs-diagram id="container" width="100%" height="700px" connectors="@ViewBag.connectors">
</ejs-diagram>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.Drawing;
namespace EJ2MVCSampleBrowser.Controllers.Diagram {
public partial class DiagramController: Controller {
// GET: Nodes
public ActionResult Nodes() {
List<DiagramConnector> Connectors = new List<DiagramConnector>();
Connectors.Add(new DiagramConnector() { Id = "connector", SourcePoint = new DiagramPoint() { X = 100, Y = 100 }, TargetPoint = new DiagramPoint() { X = 300, Y = 300 }, Type = Segments.Orthogonal });
ViewBag.connectors = Connectors;
return View();
}
}
}
The length
and direction
properties allow to define the flow and length of segment. The following code example illustrates how to create customized orthogonal segments.
<ejs-diagram id="container" width="100%" height="700px" connectors="@ViewBag.connectors">
</ejs-diagram>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.Drawing;
namespace EJ2MVCSampleBrowser.Controllers.Diagram {
public partial class DiagramController: Controller {
// GET: Nodes
public ActionResult Nodes() {
List < DiagramConnector > Connectors = new List < DiagramConnector > ();
Connectors.Add(new DiagramConnector() {
Id = "connector", SourcePoint = new DiagramPoint() {
X = 100, Y = 100
}, TargetPoint = new DiagramPoint() {
X = 300, Y = 300
}, Type = Segments.Orthogonal, Segments = new Segments() {
Type = "Orthogonal",
Direction = "Bottom",
Length = 150
}
});
ViewBag.connectors = Connectors;
return View();
}
public class Segments {
[DefaultValue(null)]
[HtmlAttributeName("type")]
[JsonProperty("type")]
public string Type {
get;
set;
}
[DefaultValue(null)]
[HtmlAttributeName("direction")]
[JsonProperty("direction")]
public string Direction {
get;
set;
}
[DefaultValue(null)]
[HtmlAttributeName("length")]
[JsonProperty("length")]
public number Length {
get;
set;
}
}
}
}
Note: You need to mention the segment type as same as what you mentioned in connector type. There should be no contradiction between connector type and segment type.
Orthogonal segments are automatically re-routed, in order to avoid overlapping with the source and target nodes. The following preview illustrates how orthogonal segments are re-routed.
<ejs-diagram id="container" width="100%" height="700px" connectors="@ViewBag.connectors" nodes="@ViewBag.nodes">
</ejs-diagram>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.Drawing;
namespace EJ2MVCSampleBrowser.Controllers.Diagram {
public partial class DiagramController: Controller {
// GET: Nodes
public ActionResult Nodes() {
List < DiagramNode > nodes = new List < DiagramNode > ();
List < DiagramNodeAnnotation > Node1 = new List < DiagramNodeAnnotation > ();
Node1.Add(new DiagramNodeAnnotation() {
Content = "node1", Style = new DiagramTextStyle() {
Color = "White", StrokeColor = "None"
}
});
List < DiagramNodeAnnotation > Node2 = new List < DiagramNodeAnnotation > ();
Node2.Add(new DiagramNodeAnnotation() {
Content = "node2", Style = new DiagramTextStyle() {
Color = "White", StrokeColor = "None"
}
});
List<DiagramPort> ports1 = new List<DiagramPort>();
ports1.Add(new CustomPort() { Id = "port1", Shape = PortShapes.Circle, Offset = new DiagramPoint() { X = 1, Y = 0.5 }, Visibility = PortVisibility.Visible });
List<DiagramPort> ports2 = new List<DiagramPort>();
ports2.Add(new CustomPort() { Id = "port2", Shape = PortShapes.Circle, Offset = new DiagramPoint() { X = 0, Y = 0.5 }, Visibility = PortVisibility.Visible });
nodes.Add(new DiagramNode() {
Id = "node1",
Width = 100,
Height = 100,
Style = new NodeStyleNodes() {
Fill = "darkcyan"
},
OffsetX = 100,
OffsetY = 100,
Annotations = Node1,
Ports = ports1
});
nodes.Add(new DiagramNode() {
Id = "node2",
Width = 100,
Height = 100,
Style = new NodeStyleNodes() {
Fill = "darkcyan"
},
OffsetX = 300,
OffsetY = 300,
Annotations = Node2,
Ports = port2
});
ViewBag.nodes = nodes;
List<DiagramConnector> Connectors = new List<DiagramConnector>();
Connectors.Add(new DiagramConnector() { Id = "connector", SourceID="node1", TargetID="node2", SourcePortID = "port1", TargetPortID = "port2", Type = Segments.Orthogonal });
ViewBag.connectors = Connectors;
return View();
}
}
}
Bezier segments are used to create curve segments and the curves are configurable either with the control points or with vectors.
To create a bezier segment, the segment.type
is set as bezier
and need to specify type
for the connector. The following code example illustrates how to create a default bezier segment.
<ejs-diagram id="container" width="100%" height="700px" connectors="@ViewBag.connectors">
</ejs-diagram>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.Drawing;
namespace EJ2MVCSampleBrowser.Controllers.Diagram {
public partial class DiagramController: Controller {
// GET: Nodes
public ActionResult Nodes() {
List<vector> Stop = new List<vector>();
Stop.Add(new vector() { Distance = 100, Angle = 90 });
Stop.Add(new vector() { Distance = 90, Angle = 270 });
List < DiagramConnector > Connectors = new List < DiagramConnector > ();
Connectors.Add(new DiagramConnector() {
Id = "connector", SourcePoint = new DiagramPoint() {
X = 100, Y = 100
}, TargetPoint = new DiagramPoint() {
X = 300, Y = 300
}, Type = Segments.Besizer, Segments = new Segments() {
Type = "Besizer",
Vector = Stop
}
});
ViewBag.connectors = Connectors;
return View();
}
public class Segments {
[DefaultValue(null)]
[HtmlAttributeName("type")]
[JsonProperty("type")]
public string Type {
get;
set;
}
[DefaultValue(null)]
[HtmlAttributeName("vectors")]
[JsonProperty("vectors")]
public List<vector> Vector {
get;
set;
}
}
public class vector {
[DefaultValue(null)]
[HtmlAttributeName("distance")]
[JsonProperty("distance")]
public number Distance {
get;
set;
}
[DefaultValue(null)]
[HtmlAttributeName("angle")]
[JsonProperty("angle")]
public number Angle {
get;
set;
}
}
}
}
The point1
and point2
properties of bezier segment enable you to set the control points. The following code example illustrates how to configure the bezier segments with control points.
The vector1
and vector2
properties of bezier segment enable you to define the vectors. The following code illustrates how to configure a bezier curve with vectors.
<ejs-diagram id="container" width="100%" height="700px" connectors="@ViewBag.connectors">
</ejs-diagram>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.Drawing;
namespace EJ2MVCSampleBrowser.Controllers.Diagram {
public partial class DiagramController: Controller {
// GET: Nodes
public ActionResult Nodes() {
List<point> Stop = new List<vector>();
Stop.Add(new point() { X = 100, Y = 100 });
Stop.Add(new point() { X = 200, Y = 200 });
List < DiagramConnector > Connectors = new List < DiagramConnector > ();
Connectors.Add(new DiagramConnector() {
Id = "connector", SourcePoint = new DiagramPoint() {
X = 100, Y = 100
}, TargetPoint = new DiagramPoint() {
X = 300, Y = 300
}, Type = Segments.Besizer, Segments = new Segments() {
Type = "Besizer",
Vector = Stop
}
});
ViewBag.connectors = Connectors;
return View();
}
public class Segments {
[DefaultValue(null)]
[HtmlAttributeName("type")]
[JsonProperty("type")]
public string Type {
get;
set;
}
[DefaultValue(null)]
[HtmlAttributeName("points")]
[JsonProperty("points")]
public List<point> Point {
get;
set;
}
}
public class point {
[DefaultValue(null)]
[HtmlAttributeName("x")]
[JsonProperty("x")]
public double X {
get;
set;
}
[DefaultValue(null)]
[HtmlAttributeName("y")]
[JsonProperty("y")]
public double Y {
get;
set;
}
}
}
}
sourceDecorator
and targetDecorator
properties of the connector.shape
property of sourceDecorator
allows to define the shape of the decorators. Similarly, the shape property of targetDecorator
allows to define the shape of the decorators.pathData
property. Similarly, to create custom shape for target decorator, use pathData
property.<ejs-diagram id="container" width="100%" height="700px" connectors="@ViewBag.connectors">
</ejs-diagram>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.Drawing;
namespace EJ2MVCSampleBrowser.Controllers.Diagram {
public partial class DiagramController: Controller {
// GET: Nodes
public ActionResult Nodes() {
List < DiagramConnector > Connectors = new List < DiagramConnector > ();
Connectors.Add(new DiagramConnector() {
Id = "connector", SourcePoint = new DiagramPoint() {
X = 100, Y = 100
}, TargetPoint = new DiagramPoint() {
X = 300, Y = 300
}, Type = Segments.Straight, SourceDecorator = new DiagramDecorator() {
Shape = DecoratorShapes.Circle, Style = new DiagramShapeStyle() {
StrokeColor = "Red", StrokeWidth = 3
}
}, TargetDecorator = new DiagramDecorator() {
Shape = DecoratorShapes.Custom,
PathData = "M80.5,12.5 C80.5,19.127417 62.59139,24.5 40.5,24.5 C18.40861,24.5 0.5,19.127417 0.5,12.5 C0.5,5.872583 18.40861,0.5 40.5,0.5 C62.59139,0.5 80.5,5.872583 80.5,12.5 z",
Style = new DiagramShapeStyle() {
StrokeColor = "Red", StrokeWidth = 3, opacity = 0.8
}
}
});
Connectors.Add(new DiagramConnector() {
Id = "connector", SourcePoint = new DiagramPoint() {
X = 400, Y = 100
}, TargetPoint = new DiagramPoint() {
X = 600, Y = 300
}, Type = Segments.Straight, SourceDecorator = new DiagramDecorator() {
Shape = DecoratorShapes.IndentedArrow, Style = new DiagramShapeStyle() {
StrokeColor = "Blue", StrokeWidth = 3
}
},
TargetDecorator = new DiagramDecorator() {
Shape = DecoratorShapes.OutdentedArrow, Style = new DiagramShapeStyle() {
StrokeColor = "Yellow", StrokeWidth = 3
}
}
});
ViewBag.connectors = Connectors;
return View();
}
}
}
Padding is used to leave the space between the Connector’s end point and the object to where it is connected.
sourcePadding
property of connector defines space between the source point and the source node of the connector.targetPadding
property of connector defines space between the end point and the target node of the connector.<ejs-diagram id="container" width="100%" height="700px" connectors="@ViewBag.connectors" nodes="@ViewBag.nodes">
</ejs-diagram>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.Drawing;
namespace EJ2MVCSampleBrowser.Controllers.Diagram {
public partial class DiagramController: Controller {
// GET: Nodes
public ActionResult Nodes() {
List < DiagramNode > nodes = new List < DiagramNode > ();
List < DiagramNodeAnnotation > Node1 = new List < DiagramNodeAnnotation > ();
nodes.Add(new DiagramNode() {
Id = "node1",
Width = 100,
Height = 100,
OffsetX = 100,
OffsetY = 100,
});
nodes.Add(new DiagramNode() {
Id = "node2",
Width = 100,
Height = 100,
OffsetX = 300,
OffsetY = 300,
});
ViewBag.nodes = nodes;
List<DiagramConnector> Connectors = new List<DiagramConnector>();
Connectors.Add(new DiagramConnector() { Id = "connector", SourceID="node1", TargetID="node2",sourcePadding =20,
targetPadding =20 });
ViewBag.connectors = Connectors;
return View();
}
}
}
The diagram Provides support to flip the connector. The flip
is performed to give the mirrored image of the original element.
The flip types are as follows:
Horizontal
is used to interchange the connector source and target x points.Vertical
is used to interchange the connector source and target y points.Both
is used to interchange the source point as target point and target point as source point<ejs-diagram id="container" width="100%" height="700px" connectors="@ViewBag.connectors">
</ejs-diagram>
Note: The flip is not applicable when the connectors connect in nodes.
Line bridging creates a bridge for lines to smartly cross over the other lines, at points of intersection. By default, bridgeDirection
is set to top. Depending upon the direction given bridging direction appears.
Bridging can be enabled/disabled either with the connector.constraints
or diagram.constraints
. The following code example illustrates how to enable line bridging.
<ejs-diagram id="container" width="100%" height="700px" connectors="@ViewBag.connectors" nodes="@ViewBag.nodes" constraints="Default,Bridging">
</ejs-diagram>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.Drawing;
namespace EJ2MVCSampleBrowser.Controllers.Diagram {
public partial class DiagramController: Controller {
// GET: Nodes
public ActionResult Nodes() {
List < DiagramNode > nodes = new List < DiagramNode > ();
List < DiagramNodeAnnotation > Node1 = new List < DiagramNodeAnnotation > ();
Node1.Add(new DiagramNodeAnnotation() {
Content = "node1", Style = new DiagramTextStyle() {
Color = "White", StrokeColor = "None"
}
});
List < DiagramNodeAnnotation > Node2 = new List < DiagramNodeAnnotation > ();
Node2.Add(new DiagramNodeAnnotation() {
Content = "node2", Style = new DiagramTextStyle() {
Color = "White", StrokeColor = "None"
}
});
nodes.Add(new DiagramNode() {
Id = "node1",
Width = 150,
Height = 60,
Style = new NodeStyleNodes() {
Fill = "darkcyan"
},
OffsetX = 300,
OffsetY = 60,
Annotations = Node1
});
nodes.Add(new DiagramNode() {
Id = "node2",
Width = 150,
Height = 60,
Style = new NodeStyleNodes() {
Fill = "darkcyan"
},
OffsetX = 300,
OffsetY = 250,
Annotations = Node2
});
ViewBag.nodes = nodes;
List < DiagramConnector > Connectors = new List < DiagramConnector > ();
Connectors.Add(new DiagramConnector() {
Id = "connector", SourceID = "node1", TargetID = "node2", Type = Segments.Straight
});
Connectors.Add(new DiagramConnector() {
Id = "connector", SourcePoint = new DiagramPoint() {
X = 200, Y = 130
}, TargetPoint = new DiagramPoint() {
X = 400, Y = 130
}, Type = Segments.Straight
});
Connectors.Add(new DiagramConnector() {
Id = "connector", SourcePoint = new DiagramPoint() {
X = 200, Y = 170
}, TargetPoint = new DiagramPoint() {
X = 400, Y = 170
}, Type = Segments.Straight
});
ViewBag.connectors = Connectors;
return View();
}
}
}
Note: You need to inject connector bridging module into the diagram.
The bridgeSpace
property of connectors can be used to define the width for line bridging.
Limitation: Bezier segments do not support bridging.
Corner radius allows to create connectors with rounded corners. The radius of the rounded corner is set with the cornerRadius
property.
<ejs-diagram id="container" width="100%" height="700px" connectors="@ViewBag.connectors" nodes="@ViewBag.nodes">
</ejs-diagram>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.Drawing;
namespace EJ2MVCSampleBrowser.Controllers.Diagram {
public partial class DiagramController: Controller {
// GET: Nodes
public ActionResult Nodes() {
List < DiagramNode > nodes = new List < DiagramNode > ();
List < DiagramNodeAnnotation > Node1 = new List < DiagramNodeAnnotation > ();
Node1.Add(new DiagramNodeAnnotation() {
Content = "node1", Style = new DiagramTextStyle() {
Color = "White", StrokeColor = "None"
}
});
List < DiagramNodeAnnotation > Node2 = new List < DiagramNodeAnnotation > ();
Node2.Add(new DiagramNodeAnnotation() {
Content = "node2", Style = new DiagramTextStyle() {
Color = "White", StrokeColor = "None"
}
});
nodes.Add(new DiagramNode() {
Id = "node1",
Width = 100,
Height = 100,
Style = new NodeStyleNodes() {
Fill = "darkcyan"
},
OffsetX = 100,
OffsetY = 100,
Annotations = Node1
});
nodes.Add(new DiagramNode() {
Id = "node2",
Width = 100,
Height = 100,
Style = new NodeStyleNodes() {
Fill = "darkcyan"
},
OffsetX = 300,
OffsetY = 300,
Annotations = Node2
});
ViewBag.nodes = nodes;
List<DiagramConnector> Connectors = new List<DiagramConnector>();
Connectors.Add(new DiagramConnector() { Id = "connector", SourceID="node1", TargetID="node2", CornerRadius= 10, Type = Segments.Orthogonal });
ViewBag.connectors = Connectors;
return View();
}
}
}
strokeWidth
, strokeColor
, strokeDashArray
, and opacity
properties are used to customize the appearance of the connector segments.visible
property of the connector enables or disables the visibility of connector.connectors
can be set using the getConnectorDefaults
properties. For example, if all connectors have the same type or having the same property then such properties can be moved into getConnectorDefaults
.The following code example illustrates how to customize the segment appearance.
<ejs-diagram id="container" width="100%" height="700px" connectors="@ViewBag.connectors">
</ejs-diagram>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.Drawing;
namespace EJ2MVCSampleBrowser.Controllers.Diagram {
public partial class DiagramController: Controller {
// GET: Nodes
public ActionResult Nodes() {
List<DiagramConnector> Connectors = new List<DiagramConnector>();
Connectors.Add(new DiagramConnector() { Id = "connector", SourcePoint = new DiagramPoint() { X = 100, Y = 100 }, TargetPoint = new DiagramPoint() { X = 300, Y = 300 }, Type = Segments.Orthogonal, Style = new DiagramStrokeStyle() { StrokeDashArray = "2,2", StrokeColor = "Red", StrokeWidth = 2 }});
ViewBag.connectors = Connectors;
return View();
}
}
}
strokeColor
, strokeWidth
, and strokeDashArray
properties are used to customize the color, width, and appearance of the decorator.strokeColor
, strokeWidth
, and strokeDashArray
.The following code example illustrates how to customize the appearance of the decorator.
<ejs-diagram id="container" width="100%" height="700px" connectors="@ViewBag.connectors">
</ejs-diagram>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.Drawing;
namespace EJ2MVCSampleBrowser.Controllers.Diagram {
public partial class DiagramController: Controller {
// GET: Nodes
public ActionResult Nodes() {
List < DiagramConnector > Connectors = new List < DiagramConnector > ();
Connectors.Add(new DiagramConnector() {
Id = "connector", SourcePoint = new DiagramPoint() {
X = 100, Y = 100
}, TargetPoint = new DiagramPoint() {
X = 300, Y = 300
}, Type = Segments.Orthogonal, SourceDecorator = new DiagramDecorator() {
Shape = DecoratorShapes.IndentedArrow, Style = new DiagramShapeStyle() {
StrokeColor = "Blue", StrokeWidth = 3
}
},
TargetDecorator = new DiagramDecorator() {
Shape = DecoratorShapes.OutdentedArrow, Style = new DiagramShapeStyle() {
StrokeColor = "Yellow", StrokeWidth = 3
}
}
});
ViewBag.connectors = Connectors;
return View();
}
}
}
Connection Editing
.Diagram provides additional flexibility to re-route the diagram connectors. A connector will frequently re-route itself when a shape moves next to it. The following screenshot illustrates how the connector automatically re-routes the segments.
<ejs-diagram id="container" width="100%" height="700px" constraints="DiagramConstraints.Default | DiagramConstraints.LineRouting">
</ejs-diagram>
using System.Collections.Generic;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
namespace EJ2MVCSampleBrowser.Controllers.Diagram {
public partial class DiagramController: Controller {
// GET: Nodes
// GET: Connector
public ActionResult Connector()
{
List<DiagramConnector> connectors = new List<DiagramConnector>();
List<DiagramConnectorAnnotation> annotations = new List<DiagramConnectorAnnotation>();
annotations.Add(new DiagramConnectorAnnotation() { Offset = .7, Content = "Routing \n enabled" });
connectors.Add(new DiagramConnector() { Id = "connector", SourceID = "shape1", TargetID = "node2", Type = Segments.Orthogonal, Annotations = annotations });
annotations = new List<DiagramConnectorAnnotation>();
annotations.Add(new DiagramConnectorAnnotation() { Offset = .7, Content = "Routing \n disabled" });
connectors.Add(new DiagramConnector() { Id = "connector2", SourceID = "shape1", TargetID = "node2", Type = Segments.Orthogonal, Annotations = annotations });
List<Syncfusion.EJ2.Diagrams.DiagramNode> nodes = new List<Syncfusion.EJ2.Diagrams.DiagramNode>();
List<DiagramNode> Node1 = new List<DiagramNode>();
nodes.Add(new DiagramNode() { OffsetX = 100, OffsetY = 100, Height = 50, Width = 120 });
List<DiagramNode> Node1 = new List<DiagramNode>();
nodes.Add(new DiagramNode() { OffsetX = 300, OffsetY = 300, Height = 50, Width = 120 });
List<DiagramNode> Node1 = new List<DiagramNode>();
nodes.Add(new DiagramNode() { OffsetX = 150, OffsetY = 200, Height = 50, Width = 120 });
ViewBag.nodes = nodes;
ViewBag.connectors = connectors;
return View();
}
}
}
constraints
property of the connector like the following code snippet.<ejs-diagram id="container" width="100%" height="700px" constraints="DiagramConstraints.Default | DiagramConstraints.LineRouting">
</ejs-diagram>
using System.Collections.Generic;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
namespace EJ2MVCSampleBrowser.Controllers.Diagram {
public partial class DiagramController: Controller {
// GET: Nodes
// GET: Connector
public ActionResult Connector()
{
List<DiagramConnector> connectors = new List<DiagramConnector>();
List<DiagramConnectorAnnotation> annotations = new List<DiagramConnectorAnnotation>();
annotations.Add(new DiagramConnectorAnnotation() { Offset = .7, Content = "Routing \n enabled" });
connectors.Add(new DiagramConnector() { Id = "connector", SourceID = "shape1", TargetID = "node2", Type = Segments.Orthogonal, Annotations = annotations });
annotations = new List<DiagramConnectorAnnotation>();
annotations.Add(new DiagramConnectorAnnotation() { Offset = .7, Content = "Routing \n disabled" });
connectors.Add(new DiagramConnector() { Id = "connector2", SourceID = "shape1", TargetID = "node2", Constraints = ConnectorConstraints.Default & ~ConnectorConstraints.InheritLineRouting Type = Segments.Orthogonal, Annotations = annotations });
List<Syncfusion.EJ2.Diagrams.DiagramNode> nodes = new List<Syncfusion.EJ2.Diagrams.DiagramNode>();
List<DiagramNode> Node1 = new List<DiagramNode>();
nodes.Add(new DiagramNode() { OffsetX = 100, OffsetY = 100, Height = 50, Width = 120 });
List<DiagramNode> Node1 = new List<DiagramNode>();
nodes.Add(new DiagramNode() { OffsetX = 350, OffsetY = 350, Height = 50, Width = 120 });
List<DiagramNode> Node1 = new List<DiagramNode>();
nodes.Add(new DiagramNode() { OffsetX = 150, OffsetY = 200, Height = 50, Width = 120 });
List<DiagramNode> Node1 = new List<DiagramNode>();
nodes.Add(new DiagramNode() { OffsetX = 300, OffsetY = 200, Height = 50, Width = 120 });
ViewBag.nodes = nodes;
ViewBag.connectors = connectors;
return View();
}
}
}
constraints
property of connector allows to enable/disable certain features of connectors.constraints
.The following code illustrates how to disable selection.
<ejs-diagram id="container" width="100%" height="700px" connectors="@ViewBag.connectors">
</ejs-diagram>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.Drawing;
namespace EJ2MVCSampleBrowser.Controllers.Diagram {
public partial class DiagramController: Controller {
// GET: Nodes
public ActionResult Nodes() {
List<DiagramConnector> Connectors = new List<DiagramConnector>();
Connectors.Add(new DiagramConnector() { Id = "connector", SourcePoint = new DiagramPoint() { X = 100, Y = 100 }, TargetPoint = new DiagramPoint() { X = 300, Y = 300 }, Constraints = ConnectorConstraints.Default & ~ConnectorConstraints.Select });
ViewBag.connectors = Connectors;
return View();
}
}
}
addInfo
property of connectors allow you to maintain additional information to the connectors.var connectors = {
id: 'connector1',
// Defines the information about the connector
addInfo:'centralconnector',
type: 'Straight',
sourceID: 'Transaction',
targetID: 'Verification'
};
The connectors zIndex
property specifies the stack order of the connector. A connector with greater stack order is always in front of a connector with a lower stack order.
The following code illustrates how to render connector based on the stack order.
<ejs-diagram id="container" width="100%" height="700px" connectors="@ViewBag.connectors">
</ejs-diagram>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.Drawing;
namespace EJ2MVCSampleBrowser.Controllers.Diagram {
public partial class DiagramController: Controller {
// GET: Nodes
public ActionResult Nodes() {
List<DiagramConnector> Connectors = new List<DiagramConnector>();
Connectors.Add(new DiagramConnector() { Id = "connector", SourcePoint = new DiagramPoint() { X = 100, Y = 100 }, TargetPoint = new DiagramPoint() { X = 300, Y = 300 }, ZIndex = 1 });
ViewBag.connectors = Connectors;
return View();
}
}
}