Connector in Diagram
19 Sep 202424 minutes to read
Connectors are objects used to create link between two points, nodes or ports to represent the relationships between them.
Create connector
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.
Add connectors through connectors collection
The sourcePoint and targetPoint properties of connector allows to define the end points of a connector.
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();
}
}
}Add connector at runtime
Connectors can be added at runtime by using public method, diagram.add and can be removed at runtime by using public method, diagram.remove.
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)Add collection of connectors at runtime
- The collection of connectors can be dynamically added using
addElementsmethod.Each time an element is added to the diagram canvas, thecollectionChangeevent will be triggered.
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>([
{ id: 'connector1', sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 150, y: 150 } },
{id: 'connector2', type: 'Orthogonal', sourcePoint: { x: 170, y: 170 }, targetPoint: { x: 200, y: 200 }},
{ id: 'connector3', type: 'Bezier', sourcePoint: { x: 320, y: 320 }, targetPoint: { x: 400, y: 400 } }
];);
Connectors.addElemets(new DiagramConnector());
ViewBag.connectors = Connectors;
return View();
}
}
}Connectors from palette
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.
Draw connectors
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.
Update connector at runtime
Various connector properties such as sourcePoint, targetPoint, style, sourcePortID, targetPortID, etc., can be updated at the runtime.
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();Connect nodes
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();
}
}
}-
When you remove NodeConstraints InConnect from Default, the node accepts only an outgoing connection to dock in it. Similarly, when you remove NodeConstraints OutConnect from Default, the node accepts only an incoming connection to dock in it.
-
When you remove both InConnect and OutConnect NodeConstraints from Default, the node restricts connector to establish connection in it.
node.constraints = NodeConstraints.Default & ~NodeConstraints.InConnect,Connections with ports
The sourcePortID and targetPortID properties allow to create connections between some specific points of source/target nodes.
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.
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'- When you set PortConstraints to InConnect, the port accepts only an incoming connection to dock in it. Similarly, when you set PortConstraints to OutConnect, the port accepts only an outgoing connection to dock in it.
- When you set PortConstraints to None, the port restricts connector to establish connection in it.
port.constraints = PortConstraints.InConnect,Segments
The path of the connector is defined with a collection of segments. There are three types of segments.
Straight
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.
@(Html.EJS().Diagram("container").Width("100%").Height("580px"))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 });
ViewBag.connectors = Connectors;
return View();
}
}
}The point property of straight segment allows to define the end point of it.
@(Html.EJS().Diagram("container").Width("100%").Height("580px"))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 });
ViewBag.connectors = Connectors;
return View();
}
}
}Orthogonal
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.
Multiple segments can be defined one after another. To create a connector with multiple segments, define and add the segments to connector.segments collection.
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 allows to define the flow and length of segment.
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.
How to customize Orthogonal Segment Thumb Size
Orthogonal segment thumbs default to size 10. This can be adjusted globally or for individual connectors using the segmentThumbSize property.
To change the thumb size for all Orthogonal connectors, set the segmentThumbSize property in the diagram’s model.
To customize the thumb size for a specific connector, disable the InheritSegmentThumbSize constraint, then set the desired segmentThumbSize.
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()
{
// Create nodes
List<DiagramNode> nodes = new List<DiagramNode>
{
new DiagramNode { Id = "node1", Width = 100, Height = 100, OffsetX = 200, OffsetY = 200 },
new DiagramNode { Id = "node2", Width = 100, Height = 100, OffsetX = 400, OffsetY = 400 },
new DiagramNode { Id = "node3", Width = 100, Height = 100, OffsetX = 600, OffsetY = 200 },
new DiagramNode { Id = "node4", Width = 100, Height = 100, OffsetX = 800, OffsetY = 400 }
};
ViewBag.Nodes = nodes;
// Create connectors
List<DiagramConnector> connectors = new List<DiagramConnector>
{
new DiagramConnector
{
Id = "connector1",
SourceID = "node1",
TargetID = "node2",
Type = Segments.Orthogonal,
Segments = new List<ConnectorSegment>
{
new ConnectorSegment { Type = Segments.Orthogonal, Direction = "Right", Length = 70 },
new ConnectorSegment { Type = Segments.Orthogonal, Direction = "Bottom", Length = 50 }
},
Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb
},
new DiagramConnector
{
Id = "connector2",
SourceID = "node3",
TargetID = "node4",
Type = Segments.Orthogonal,
Segments = new List<ConnectorSegment>
{
new ConnectorSegment { Type = Segments.Orthogonal, Direction = "Right", Length = 70 },
new ConnectorSegment { Type = Segments.Orthogonal, Direction = "Bottom", Length = 50 }
},
Constraints = ConnectorConstraints.Default & ~(ConnectorConstraints.InheritSegmentThumbSize) | ConnectorConstraints.DragSegmentThumb,
SegmentThumbSize = 20
}
};
ViewBag.Connectors = connectors;
return View();
}
}
}Avoid overlapping
Orthogonal segments are automatically re-routed, in order to avoid overlapping with the source and target nodes.
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
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.
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 enables to set the control points.
The vector1 and vector2 properties of bezier segment enable you to define the vectors.
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;
}
}
}
}How to customize Bezier Segment Thumb Size
Bezier segment thumbs default to size 10. This can be adjusted globally or for individual connectors using the segmentThumbSize property.
To change the thumb size for all Bezier connectors, set the segmentThumbSize property in the diagram’s model.
To customize the thumb size for a specific connector, disable the InheritSegmentThumbSizeconstraint, then set the desired segmentThumbSize.
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() {
// Create nodes
List<DiagramNode> nodes = new List<DiagramNode>
{
new DiagramNode { Id = "node1", Width = 100, Height = 100, OffsetX = 150, OffsetY = 150 },
new DiagramNode { Id = "node2", Width = 100, Height = 100, OffsetX = 350, OffsetY = 400 },
new DiagramNode { Id = "node3", Width = 100, Height = 100, OffsetX = 550, OffsetY = 150 },
new DiagramNode { Id = "node4", Width = 100, Height = 100, OffsetX = 800, OffsetY = 400 }
};
ViewBag.Nodes = nodes;
// Create connectors
List<DiagramConnector> connectors = new List<DiagramConnector>
{
new DiagramConnector
{
Id = "connector1",
SourceID = "node1",
TargetID = "node2",
Type = Segments.Bezier,
Segments = new List<ConnectorSegment>
{
new ConnectorSegment { Type = Segments.Bezier, Point = new DiagramPoint { X = 200, Y = 300 } },
new ConnectorSegment { Type = Segments.Bezier, Point = new DiagramPoint { X = 320, Y = 400 } }
},
Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb
},
new DiagramConnector
{
Id = "connector2",
SourceID = "node3",
TargetID = "node4",
Type = Segments.Bezier,
Segments = new List<ConnectorSegment>
{
new ConnectorSegment { Type = Segments.Bezier, Point = new DiagramPoint { X = 600, Y = 300 } },
new ConnectorSegment { Type = Segments.Bezier, Point = new DiagramPoint { X = 320, Y = 400 } }
},
Constraints = ConnectorConstraints.Default & ~(ConnectorConstraints.InheritSegmentThumbSize) | ConnectorConstraints.DragSegmentThumb,
SegmentThumbSize = 20
}
};
ViewBag.Connectors = connectors;
return View();
}
}
}
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using Syncfusion.EJ2.Diagrams;
namespace YourNamespace.Controllers
{
public partial class DiagramController : Controller
{
public ActionResult Nodes()
{
// Create nodes
List<DiagramNode> nodes = new List<DiagramNode>
{
new DiagramNode { Id = "node1", Width = 100, Height = 100, OffsetX = 150, OffsetY = 150 },
new DiagramNode { Id = "node2", Width = 100, Height = 100, OffsetX = 350, OffsetY = 400 },
new DiagramNode { Id = "node3", Width = 100, Height = 100, OffsetX = 550, OffsetY = 150 },
new DiagramNode { Id = "node4", Width = 100, Height = 100, OffsetX = 800, OffsetY = 400 }
};
ViewBag.Nodes = nodes;
// Create connectors
List<DiagramConnector> connectors = new List<DiagramConnector>
{
new DiagramConnector
{
Id = "connector1",
SourceID = "node1",
TargetID = "node2",
Type = Segments.Bezier,
Segments = new List<ConnectorSegment>
{
new ConnectorSegment { Type = Segments.Bezier, Point = new DiagramPoint { X = 200, Y = 300 } },
new ConnectorSegment { Type = Segments.Bezier, Point = new DiagramPoint { X = 320, Y = 400 } }
},
Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb
},
new DiagramConnector
{
Id = "connector2",
SourceID = "node3",
TargetID = "node4",
Type = Segments.Bezier,
Segments = new List<ConnectorSegment>
{
new ConnectorSegment { Type = Segments.Bezier, Point = new DiagramPoint { X = 600, Y = 300 } },
new ConnectorSegment { Type = Segments.Bezier, Point = new DiagramPoint { X = 320, Y = 400 } }
},
Constraints = ConnectorConstraints.Default & ~(ConnectorConstraints.InheritSegmentThumbSize) | ConnectorConstraints.DragSegmentThumb,
SegmentThumbSize = 20
}
};
ViewBag.Connectors = connectors;
return View();
}
}
}Decorator
-
Starting and ending points of a connector can be decorated with some customizable shapes like arrows, circles, diamond, or path. The connection end points can be decorated with the
sourceDecoratorandtargetDecoratorproperties of the connector. -
The
shapeproperty ofsourceDecoratorallows to define the shape of the decorators. Similarly, the shape property oftargetDecoratorallows to define the shape of the decorators. -
To create custom shape for source decorator, use
pathDataproperty. Similarly, to create custom shape for target decorator, usepathDataproperty.
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
Padding is used to leave the space between the Connector’s end point and the object to where it is connected.
-
The
sourcePaddingproperty of connector defines space between the source point and the source node of the connector. -
The
targetPaddingproperty of connector defines space between the end point and the target node of the connector.
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();
}
}
}Flip
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:
-
HorizontalFlip -
Horizontalis used to interchange the connector source and target x points. -
VerticalFlip -
Verticalis used to interchange the connector source and target y points. -
Both -
Bothis used to interchange the source point as target point and target point as source point.
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
},flip = FilpDirection.Horizontal,
TargetDecorator = new DiagramDecorator() {
Shape = DecoratorShapes.OutdentedArrow, Style = new DiagramShapeStyle() {
StrokeColor = "Yellow", StrokeWidth = 3
}
}
});
ViewBag.connectors = Connectors;
return View();
}
}
}NOTE
The flip is not applicable when the connectors connect in nodes.
Bridging
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 or disabled either with the connector.constraints or diagram.constraints.
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
Corner radius allows to create connectors with rounded corners. The radius of the rounded corner is set with the cornerRadius property.
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();
}
}
}Appearance
-
The connector’s
strokeWidth,strokeColor,strokeDashArray, andopacityproperties are used to customize the appearance of the connector segments. -
The
visibleproperty of the connector enables or disables the visibility of connector. -
Default values for all the
connectorscan be set using thegetConnectorDefaultsproperties. For example, if all connectors have the same type or having the same property then such properties can be moved intogetConnectorDefaults.
Segment appearance
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();
}
}
}Decorator appearance
-
The source decorator’s
strokeColor,strokeWidth, andstrokeDashArrayproperties are used to customize the color, width, and appearance of the decorator. -
To set the border stroke color, stroke width, and stroke dash array for the target decorator, use
strokeColor,strokeWidth, andstrokeDashArray. -
To set the size for source and target decorator, use width and height property.
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();
}
}
}Interaction
- Diagram allows to edit the connectors at runtime. To edit the connector segments at runtime, refer to
Connection Editing.
Automatic line routing
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.
-
The line routing constraints must be included to the default diagram constraints to enable automatic line routing support like below.
-
The following code block shows how to create the diagram with specifying nodes, connectors, constraints, and necessary modules for line routing.
@(Html.EJS().Diagram("container").Width("100%").Height("580px")
.Constraints(DiagramConstraints.Default | DiagramConstraints.LineRouting)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();
}
}
}- In some situations, automatic line routing enabled diagram needs to ignore a specific connector from automatic line routing. So, in this case, auto routing feature can be disabled to the specific connector using the
constraintsproperty of the connector.
@(Html.EJS().Diagram("container").Width("100%").Height("580px")
.Constraints(DiagramConstraints.Default | DiagramConstraints.LineRouting)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
-
The
constraintsproperty of connector allows to enable or disable certain features of connectors. -
To enable or disable the constraints, refer
constraints.
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();
}
}
}Custom properties
- The
addInfoproperty of connectors allows 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'
};Stack order
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.
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();
}
}
}