Nodes are graphical objects used to visually represent the geometrical information, process flow, internal business procedure, entity, or any other kind of data.
A node can be created and added to the diagram, either programmatically or interactively. Nodes are stacked on the diagram area from bottom to top in the order they are added.
To create a node, define the node
object and add that to nodes collection of the diagram model. The following code example illustrates how to add a node to the diagram.
<ejs-diagram id="container" width="100%" height="700px">
<e-diagram-nodes>
<e-diagram-node id='node1' offsetX="100" offsetY="100" width="100" height="100" borderWidth="2">
<e-node-style fill="darkcyan">
</e-node-style>
</e-diagram-node>
</e-diagram-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"
}
});
nodes.Add(new Node() {
Id = "node1",
Width = 100,
Height = 100,
BorderWidth=2,
Style = new NodeStyleNodes() {
Fill = "darkcyan"
},
text = "node1",
OffsetX = 100,
OffsetY = 100,
Annotations = Node1
});
ViewBag.nodes = nodes;
return View();
}
}
public class Node: DiagramNode {
public string text;
}
}
collectionChange
event will trigger.The following code illustrates how to add a node.
<ejs-diagram id="container" width="100%" height="700px">
<e-diagram-nodes>
<e-diagram-node id='node1' offsetX="100" offsetY="100" width="100" height="100" borderWidth="2">
<e-node-style fill="darkcyan">
</e-node-style>
</e-diagram-node>
</e-diagram-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"
}
});
nodes.Add(new Node() {
Id = "node1",
Width = 100,
Height = 100,
BorderWidth=2,
Style = new NodeStyleNodes() {
Fill = "Darkcyan",
StrokeWidth = 2,
StrokeColor = "Black"
},
text = "node1",
OffsetX = 100,
OffsetY = 100,
Annotations = Node1
});
ViewBag.nodes = nodes;
return View();
}
}
public class Node: DiagramNode {
public string text;
}
}
var node = {
id: 'node1', offsetX = 100, offsetY = 100, height = 50, width = 100
};
diagram.add(node);
Nodes can be predefined and added to the palette, and can be dropped into the diagram when needed. For more information
about adding nodes from symbol palette, refer to Symbol Palette
.
dragEnter
event gets triggered.dragOver
event gets triggered.drop
event gets triggered.dragLeave
event gets triggered.Nodes can be generated automatically with the information provided through data source. The default properties for these nodes are fetched from default settings. For more information about data source, refer to Data Binding.
Nodes can be interactively drawn by clicking and dragging the diagram surface by using NodeDrawingTool
. For more
information about drawing nodes, refer to Draw Nodes.
offsetX
and offsetY
properties. By default, these offset properties represent the distance between the origin of the diagram’s page and node’s center point.pivot
point is (0.5, 0.5), that means center of the node.width
and
height
properties.rotateAngle
property.The following table illustrates how pivot relates offset values with node boundaries.
Pivot | Offset |
---|---|
(0.5,0.5) | offsetX and offsetY values are considered as the node’s center point. |
(0,0) | offsetX and offsetY values are considered as the top-left corner of the node. |
(1,1) | offsetX and offsetY values are considered as the bottom-right corner of the node. |
The following code illustrates how to change the pivot
value.
<ejs-diagram id="container" width="100%" height="700px">
<e-diagram-nodes>
<e-diagram-node id="bjb">
<e-node-pivot x="1" y="1"></e-node-pivot>
</e-diagram-node>
</e-diagram-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"
}
});
nodes.Add(new Node() {
Id = "node1",
Width = 100,
Height = 100,
Style = new NodeStyleNodes() {
Fill = "darkcyan"
},
text = "node1",
OffsetX = 100,
OffsetY = 100,
Annotations = Node1,
Pivot = new DiagramPoint() { X = 1, Y = 1 }
});
ViewBag.nodes = nodes;
return View();
}
}
public class Node: DiagramNode {
public string text;
}
}
The diagram Provides support to flip the node. flip
is performed to
give the mirrored image of the original element.
The flip types are as follows:
Horizontal
is used to change the element in horizontal direction.Vertical
is used to change the element in vertical directionBoth
which involves both vertical and horizontal changes of the element.The following code illustrates how to provide the mirror image of the original element.
<ejs-diagram id="container" width="100%" height="700px">
<e-diagram-nodes>
<e-diagram-node id="bjb">
<e-node-pivot x="1" y="1"></e-node-pivot>
</e-diagram-node>
</e-diagram-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"
}
});
nodes.Add(new Node() {
Id = "node1",
Width = 100,
Height = 100,
Style = new NodeStyleNodes() {
Fill = "darkcyan"
},
text = "node1",
flip = FilpDirection.Horizontal,
Shape = new { type = "Basic", shape = "RightTriangle"},
OffsetX = 100,
OffsetY = 100,
Annotations = Node1,
});
ViewBag.nodes = nodes;
return View();
}
}
public class Node: DiagramNode {
public string text;
}
}
Note: The flip is also applicable for group and BPMN shapes.
fill
color, borderColor
, borderWidth
, strokeDashArray
,
opacity
, and shadow
.visible
property of the node enables or disables the visibility of the node.The following code illustrates how to customize the appearance of the shape.
<ejs-diagram id="container" width="100%" height="700px">
<e-diagram-nodes>
<e-diagram-node id='node1' offsetX="100" offsetY="100" width="100" height="100" borderWidth="2">
<e-node-style fill="darkcyan", strokeColor="black" strokeWidth="2"></e-node-style>
</e-diagram-node>
</e-diagram-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"
}
});
nodes.Add(new Node() {
Id = "node1",
Width = 100,
Height = 100,
BorderWidth = 2,
Style = new NodeStyleNodes() {
Fill = "Darkcyan",
StrokeWidth = 2,
StrokeColor = "Black"
},
text = "node1",
OffsetX = 100,
OffsetY = 100,
Annotations = Node1
});
ViewBag.nodes = nodes;
return View();
}
}
public class Node: DiagramNode {
public string text;
}
}
The gradient
property of the node allows you to define and apply the gradient effect to that node.
The gradient stop property defines the color and a position, where the previous color transition ends and a new color transition starts.
The gradient stop’s opacity property defines the transparency level of the region.
There are two types of gradients as follows:
LinearGradient
defines a smooth transition between a set of colors (so-called stops) on a line.<ejs-diagram id="container" width="100%" height="700px" 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.ComponentModel;
using Syncfusion.EJ2;
using Newtonsoft.Json;
namespace sample1.Controllers
{
public class NodeController: Controller
{
// GET: Node
public ActionResult Node()
{
// Sets the Annotation for the Node
List<DiagramNode> Nodes = new List<DiagramNode>();
List<DiagramNodeAnnotation> Node1 = new List<DiagramNodeAnnotation>();
Node1.Add(new DiagramNodeAnnotation()
{
//Sets the offset for the content
Content = "Node1",
Style = new DiagramTextStyle()
{
Color = "black",
Fill = "transparent"
},
});
List<stop> Stop = new List<stop>();
Stop.Add(new stop() { Color = "white", Offset = 0 });
Stop.Add(new stop() { Color = "#6BA5D7", Offset = 100 });
linearGradient grade = new linearGradient()
{
x1 = 0,
y1 = 0,
x2 = 50,
y2 = 50,
type = GradientType.Linear,
Stops = Stop
};
Nodes.Add(new DefaultNode()
{
Id = "Node1",
OffsetY = 100,
OffsetX = 100,
Height = 100,
Width = 100,
Style = new NodeStyleNodes() { Gradient= grade },
// add the Annotation for the Node
Annotations = Node1,
});
ViewBag.nodes = Nodes;
return View();
}
}
public class linearGradient
{
[DefaultValue(null)]
[HtmlAttributeName("x1")]
[JsonProperty("x1")]
public double x1
{
get;
set;
}
[DefaultValue(null)]
[HtmlAttributeName("x2")]
[JsonProperty("x2")]
public double x2
{
get;
set;
}
[DefaultValue(null)]
[HtmlAttributeName("y1")]
[JsonProperty("y1")]
public double y1
{
get;
set;
}
[DefaultValue(null)]
[HtmlAttributeName("y2")]
[JsonProperty("y2")]
public double y2
{
get;
set;
}
[DefaultValue(null)]
[HtmlAttributeName("type")]
[JsonProperty("type")]
public GradientType type
{
get;
set;
}
[DefaultValue(null)]
[HtmlAttributeName("stops")]
[JsonProperty("stops")]
public List<stop> Stops
{
get;
set;
}
}
public class stop
{
[DefaultValue(null)]
[HtmlAttributeName("color")]
[JsonProperty("color")]
public string Color
{
get;
set;
}
[DefaultValue(null)]
[HtmlAttributeName("offset")]
[JsonProperty("offset")]
public double Offset
{
get;
set;
}
}
}
RadialGradient
defines a smooth transition between stops on a circle.<ejs-diagram id="container" width="100%" height="700px" 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.ComponentModel;
using Syncfusion.EJ2;
using Newtonsoft.Json;
namespace sample1.Controllers
{
public class NodeController: Controller
{
// GET: Node
public ActionResult Node()
{
// Sets the Annotation for the Node
List<DiagramNode> Nodes = new List<DiagramNode>();
List<DiagramNodeAnnotation> Node1 = new List<DiagramNodeAnnotation>();
Node1.Add(new DiagramNodeAnnotation()
{
//Sets the offset for the content
Content = "Node1",
Style = new DiagramTextStyle()
{
Color = "black",
Fill = "transparent"
},
});
List<stop> Stop = new List<stop>();
Stop.Add(new stop() { Color = "white", Offset = 0 });
Stop.Add(new stop() { Color = "#6BA5D7", Offset = 100 });
radialGradient grade = new radialGradient()
{
cx = 50,
cy = 50,
fx = 25,
fy = 25,
r=50,
type = GradientType.Radial,
Stops = Stop
};
Nodes.Add(new DefaultNode()
{
Id = "Node1",
OffsetY = 100,
OffsetX = 100,
Height = 100,
Width = 100,
Style = new NodeStyleNodes() { Gradient= grade },
// add the Annotation for the Node
Annotations = Node1,
});
ViewBag.nodes = Nodes;
return View();
}
}
public class radialGradient
{
[DefaultValue(null)]
[HtmlAttributeName("cx")]
[JsonProperty("cx")]
public double cx
{
get;
set;
}
[DefaultValue(null)]
[HtmlAttributeName("fx")]
[JsonProperty("fx")]
public double fx
{
get;
set;
}
[DefaultValue(null)]
[HtmlAttributeName("fy")]
[JsonProperty("fy")]
public double fy
{
get;
set;
}
[DefaultValue(null)]
[HtmlAttributeName("cy")]
[JsonProperty("cy")]
public double cy
{
get;
set;
}
[DefaultValue(null)]
[HtmlAttributeName("type")]
[JsonProperty("type")]
public GradientType type
{
get;
set;
}
[DefaultValue(null)]
[HtmlAttributeName("r")]
[JsonProperty("r")]
public double r
{
get;
set;
}
[DefaultValue(null)]
[HtmlAttributeName("stops")]
[JsonProperty("stops")]
public List<stop> Stops
{
get;
set;
}
}
public class stop
{
[DefaultValue(null)]
[HtmlAttributeName("color")]
[JsonProperty("color")]
public string Color
{
get;
set;
}
[DefaultValue(null)]
[HtmlAttributeName("offset")]
[JsonProperty("offset")]
public double Offset
{
get;
set;
}
}
}
Diagram provides support to add shadow
effect to a node that is disabled, by default. It can be enabled with the
constraints property of the node. The following code illustrates how to drop shadow.
<ejs-diagram id="container" width="100%" height="700px">
<e-diagram-nodes>
<e-diagram-node id='node1' offsetX="100" offsetY="100" width="100" height="100" constraints="Shadow">
</e-diagram-node>
</e-diagram-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"
}
});
nodes.Add(new Node() {
Id = "node1",
Width = 100,
Height = 100,
Style = new NodeStyleNodes() {
fill = "#6BA5D7",
strokeColor = "White"
},
text = "node1",
OffsetX = 100,
OffsetY = 100,
Annotations = Node1,
Constraints=NodeConstraints.Default | NodeConstraints.Shadow
});
ViewBag.nodes = nodes;
return View();
}
}
public class Node: DiagramNode {
public string text;
}
}
The angle, distance, and opacity of the shadow can be customized with the shadow property of the node. The following code example illustrates how to customize shadow.
<ejs-diagram id="container" width="100%" height="700px">
<e-diagram-nodes>
<e-diagram-node id='node1' offsetX="100" offsetY="100" width="100" height="100" constraints="Shadow">
<e-node-shadow angle="50" opacity="0.9"></e-node-shadow>
</e-diagram-node>
</e-diagram-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"
}
});
nodes.Add(new Node() {
Id = "node1",
Width = 100,
Height = 100,
Style = new NodeStyleNodes() {
fill = "#6BA5D7",
strokeColor = "White"
},
text = "node1",
OffsetX = 100,
OffsetY = 100,
Annotations = Node1,
Constraints=NodeConstraints.Default | NodeConstraints.Shadow,
Shadow= new DiagramShadow() { Angle=50, Opacity=0.9}
});
ViewBag.nodes = nodes;
return View();
}
}
public class Node: DiagramNode {
public string text;
}
}
Diagram provides support to describe the state of the node. i.e., the node is expanded or collapsed state.
Note: Icon can be created only when the node has outEdges.
expandIcon
and collapseIcon
.The following code example illustrates how to create an icon of various shapes.
<ejs-diagram id="container" width="100%" height="700px">
<e-diagram-nodes>
<e-diagram-node id='node1' offsetX="100" offsetY="100" width="100" height="100">
<e-node-expandicon shape="ArrowUp" height="10" width="10"></e-node-expandicon>
<e-node-collapseicon shape="ArrowUp" height="10" width="10"></e-node-collapseicon>
</e-diagram-node>
<e-diagram-node id='node2' offsetX="100" offsetY="300" width="100" height="100">
</e-diagram-node>
</e-diagram-nodes>
<e-diagram-connectors>
<e-diagram-connector id="connector1" sourceID="node1" targetID="node2"></e-diagram-connector>
</e-diagram-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 < 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" });
nodes.Add(new Node() {
Id = "node1",
Width = 100,
Height = 100,
Style = new NodeStyleNodes() {
fill = "#6BA5D7",
strokeColor = "White"
},
text = "node1",
OffsetX = 100,
OffsetY = 100,
Annotations = Node1,
ExpandIcon=new DiagramIconShape() { Shape=IconShapes.ArrowDown, Height=10, Width= 10},
CollapseIcon=new DiagramIconShape() { Shape=IconShapes.ArrowUp, Height=10, Width= 10}
});
nodes.Add(new Node() { Id = "node2", OffsetX = 100, OffsetY = 300, Annotations = Node2 });
ViewBag.nodes = nodes;
List<DiagramConnector> Connectors = new List<DiagramConnector>();
Connectors.Add(new DiagramConnector() { Id = "connector1", SourceID = "node1", TargetID = "node2" });
ViewBag.Connectors = Connectors;
return View();
}
}
public class Node: DiagramNode {
public string text;
}
}
borderColor
,
borderWidth
, background color for an collapseIcon using borderColor, borderWidth, and fill
properties.width
and
height
properties.Diagram provides support to drag, resize, or rotate the node interactively. For more information about editing a node at runtime, refer to Edit Nodes.
The constraints property of the node allows you to enable/disable certain features. For more information about node constraints, refer to Node Constraints
.
The addInfo
property of the node allows to maintain additional information to the node.
The nodes z-order property specifies the stack order of the node. A node with greater stack order is always in front of a node with a lower stack order.
Node has the InEdges and OutEdges read-only property. In this property, you can find what are all the connectors that are connected to the node, and then you can find these connectors by using the getObject
method in the diagram.
<ejs-diagram id="container" width="100%" height="700px" nodes="ViewBag.nodes" 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 < 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"
});
List < DiagramNodeAnnotation > Node3 = new List < DiagramNodeAnnotation > ();
Node3.Add(new DiagramNodeAnnotation() {
Content = "Node3"
});
List < DiagramNodeAnnotation > Node4 = new List < DiagramNodeAnnotation > ();
Node4.Add(new DiagramNodeAnnotation() {
Content = "Node4"
});
nodes.Add(new Node() {
Id = "node1",
Width = 100,
Height = 100,
Style = new NodeStyleNodes() {
fill = "#6BA5D7",
strokeColor = "White"
},
text = "node1",
OffsetX = 100,
OffsetY = 100,
Annotations = Node1,
});
nodes.Add(new Node() {
Id = "node2", OffsetX = 100, OffsetY = 300, Annotations = Node2
});
nodes.Add(new Node() {
Id = "node3", OffsetX = 100, OffsetY = 300, Annotations = Node3
});
nodes.Add(new Node() {
Id = "node4", OffsetX = 100, OffsetY = 300, Annotations = Node4
});
ViewBag.nodes = nodes;
List < DiagramConnector > Connectors = new List < DiagramConnector > ();
Connectors.Add(new DiagramConnector() {
Id = "connector1", SourceID = "node1", TargetID = "node2"
});
Connectors.Add(new DiagramConnector() {
Id = "connector2", SourceID = "node1", TargetID = "node3"
});
Connectors.Add(new DiagramConnector() {
Id = "connector3", SourceID = "node1", TargetID = "node4"
});
ViewBag.Connectors = Connectors;
return View();
}
}
public class Node: DiagramNode {
public string text;
}
}