Constraints in ASP.NET CORE Diagram Component
4 Dec 202424 minutes to read
Constraints are used to enable or disable certain behaviors of the diagram, nodes and connectors. Constraints are provided as flagged enumerations, so that multiple behaviors can be enabled or disabled using Bitwise operators (&, |, ~, <<, etc.).
To know more about Bitwise operators, refer to Bitwise Operations.
Diagram constraints
Diagram constraints allows to enable or disable the following behaviors:
- Page editing
- Bridging
- Zoom and pan
- Undo/redo
- Tooltip
<ejs-diagram id="container" width="100%" height="700px" nodes="@ViewBag.nodes" constraints="PageEditable,Default">
</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 > ();
nodes.Add(new Node() {
Id = "node1",
Width = 100,
Height = 100,
Style = new NodeStyleNodes() {
Fill = "#6BA5D7",
StrokeColor = "White"
},
text = "node1",
OffsetX = 100,
OffsetY = 100,
});
ViewBag.nodes = nodes;
return View();
}
}
public class Node: DiagramNode {
public string text;
}
}For more information about diagram constraints, refer to DiagramConstraints.
Node constraints
Node constraints allows to enable or disable the following behaviors of node. They are as follows:
- Selection
- Deletion
- Drag
- Resize
- Rotate
- Connect
- Shadow
- Tooltip
<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="Rotate">
</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 > ();
nodes.Add(new Node() {
Id = "node1",
Width = 100,
Height = 100,
Style = new NodeStyleNodes() {
Fill = "#6BA5D7",
StrokeColor = "White"
},
text = "node1",
OffsetX = 100,
OffsetY = 100,
// Set constraints for the node
constraints = NodeConstraints.Default & ~NodeConstraints.Rotate
});
ViewBag.nodes = nodes;
return View();
}
}
public class Node: DiagramNode {
public string text;
}
}For more information about node constraints, refer to NodeConstraints.
Connector constraints
Connector constraints allows to enable or disable certain behaviors of connectors.
- Selection
- Deletion
- Drag
- Segment editing
- Tooltip
- Bridging
<ejs-diagram id="container" width="100%" height="700px">
<e-diagram-connectors>
<e-diagram-connector constraints="DragSourceEnd" id="connector">
<e-connector-sourcepoint x="100" y="100"></e-connector-sourcepoint>
<e-connector-targetpoint x="300" y="300"></e-connector-targetpoint>
</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 < DiagramConnector > connectors = new List < DiagramConnector > ();
connectors.Add(new DiagramConnector() {
Id = "connector1",
SourcePoint = new DiagramPoint() { X = 100, Y = 100},
TargetPoint = new DiagramPoint() { X = 300, Y = 200},
Type = Segments.Orthogonal,
// Set constraints for the connector
constraints = ConnectorConstraints.Default & ~ConnectorConstraints.Select
});
ViewBag.Connectors = connectors;
return View();
}
}
}For more information about connector constraints, refer to ConnectorConstraints.
Port constraints
You can enable or disable certain behaviors of port. They are as follows:
- Connect
- ConnectOnDrag
<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="Rotate">
<e-node-ports>
<e-node-port constraints ="None" id="port1" visibility="Visible">
</e-node-port>
</e-node-ports>
</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 < DiagramPort > ports1 = new List < DiagramPort > ();
ports1.Add(new CustomPort() {
Id = "port1", Shape = PortShapes.Circle,
Offset = new DiagramPoint() {
X = 0.5, Y = 0.5
},
Constraints = PortConstraints.Nones
});
List < DiagramNode > nodes = new List < DiagramNode > ();
nodes.Add(new Node() {
Id = "node1",
Width = 100,
Height = 100,
Style = new NodeStyleNodes() {
Fill = "#6BA5D7",
StrokeColor = "White"
},
text = "node1",
OffsetX = 100,
OffsetY = 100,
Ports = ports1
});
ViewBag.nodes = nodes;
return View();
}
}
public class Node: DiagramNode {
public string text;
}
}For more information about port constraints, refer to PortConstraints.
Annotation constraints
You can enable or disable read-only mode for the annotations by using the annotation constraints.
<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.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"
}, Constraints = AnnotationConstraints.ReadOnly
});
nodes.Add(new Node() {
Id = "node1",
Width = 100,
Height = 100,
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;
}
}For more details about annotation constraints, refer to AnnotationConstraints.
Selector constraints
Selector visually represents the selected elements with certain editable thumbs. The visibility of the thumbs can be controlled with selector constraints. The part of selector is categorized as follows:
- Resizer
- Rotator
- User handles
<ejs-diagram id="container" width="100%" height="700px" nodes="@ViewBag.nodes">
<e-diagram-selecteditems constraints="Rotate"></e-diagram-selecteditems>
</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 > ();
nodes.Add(new Node() {
Id = "node1",
Width = 100,
Height = 100,
Style = new NodeStyleNodes() {
Fill = "#6BA5D7",
StrokeColor = "White"
},
text = "node1",
OffsetX = 100,
OffsetY = 100,
});
ViewBag.nodes = nodes;
return View();
}
}
public class Node: DiagramNode {
public string text;
}
}For more information about selector constraints, refer to SelectorConstraints.
Snap constraints
Snap constraints control the visibility of gridlines and enable or disable snapping. Snap constraints allow to set the following behaviors.
- Show only horizontal or vertical gridlines.
- Show both horizontal and vertical gridlines.
- Snap to either horizontal or vertical gridlines.
- Snap to both horizontal and vertical gridlines.
<ejs-diagram id="container" width="100%" height="700px" nodes="@ViewBag.nodes">
<e-diagram-snapsettings constraints="None"></e-diagram-snapsettings>
</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 > ();
nodes.Add(new Node() {
Id = "node1",
Width = 100,
Height = 100,
Style = new NodeStyleNodes() {
Fill = "#6BA5D7",
StrokeColor = "White"
},
text = "node1",
OffsetX = 100,
OffsetY = 100,
});
ViewBag.nodes = nodes;
return View();
}
}
public class Node: DiagramNode {
public string text;
}
}For more information about snap constraints, refer to SnapConstraints.
Boundary constraints
Boundary constraints defines a boundary for the diagram inside which the interaction should be done. Boundary constraints allow to set the following behaviors.
- Infinite boundary
- Diagram sized boundary
- Page sized boundary
<ejs-diagram id="container" width="100%" height="700px" nodes="@ViewBag.nodes">
<e-diagram-pagesettings boundaryConstraints="Page" width="300" height="300"></e-diagram-pagesettings>
</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 > ();
nodes.Add(new Node() {
Id = "node1",
Width = 100,
Height = 100,
Style = new NodeStyleNodes() {
Fill = "#6BA5D7",
StrokeColor = "White"
},
text = "node1",
OffsetX = 100,
OffsetY = 100,
});
ViewBag.nodes = nodes;
return View();
}
}
public class Node: DiagramNode {
public string text;
}
}For more information about selector constraints, refer to BoundaryConstraints.
Inherit behaviors
Some of the behaviors can be defined through both the specific object (node/connector) and diagram. When the behaviors are contradictorily defined through both, the actual behavior is set through inherit options.
<ejs-diagram id="container" width="100%" height="700px" constraints="Default,Bridging>
<e-diagram-connectors>
<e-diagram-connector constraints="DragSourceEnd,InheritBridging" id="connector">
<e-connector-sourcepoint x="100" y="100"></e-connector-sourcepoint>
<e-connector-targetpoint x="300" y="300"></e-connector-targetpoint>
</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 < DiagramConnector > connectors = new List < DiagramConnector > ();
connectors.Add(new DiagramConnector() {
Id = "connector1",
SourcePoint = new DiagramPoint() { X = 100, Y = 100},
TargetPoint = new DiagramPoint() { X = 300, Y = 200},
Type = Segments.Orthogonal,
// Set constraints for the connector
Constraints = ConnectorConstraints.Default & ~ConnectorConstraints.InheritBridging
});
ViewBag.Connectors = connectors;
return View();
}
}
}Bitwise operations
Bitwise operations are used to manipulate the flagged enumerations [enum]. In this section, Bitwise operations are illustrated by using node constraints. The same is applicable while working with node constraints, connector constraints, or port constraints.
Add operation
| You can add or enable multiple values at a time by using Bitwise ‘ | ’ (OR) operator. |
node.constraints = NodeConstraints.Select | NodeConstraints.Rotate;In the previous example, you can do both the selection and rotation operation.
Remove Operation
You can remove or disable values by using Bitwise ‘&~’ (XOR) operator.
node.constraints = node.constraints & ~(NodeConstraints.Rotate);In the previous example, rotation is disabled but other constraints are enabled.
Check operation
You can check any value by using Bitwise ‘&’ (AND) operator.
if ((node.constraints & (NodeConstraints.Rotate)) == (NodeConstraints.Rotate));In the previous example, check whether the rotate constraints are enabled in a node. When node constraints have rotate constraints, the expression returns a rotate constraint.