Constraints in EJ2 TypeScript Diagram control

5 Jul 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 the Bitwise operators (&,

, ~, «, etc.).

To know more about Bitwise operators, refer to Bitwise Operations.

Diagram constraints

Diagram constraints allows you to enable or disable the following behaviors:

The following table displays the list of all diagram constraints.

Constraints	Description
None	Disable all diagram functionalities.
Bridging	Enables or disables Bridging support for connector in diagram.
Undo/redo	Enables or disables the Undo/Redo support for the diagram.
UserInteraction	Enables or disables user interaction support for the diagram.
ApiUpdate	Enables or disables Api update support for the diagram.
PageEditable	Enables or disables Page Editable support for the diagram.
Zoom	Enables or disables Zoom support for the diagram.
PanX	Enables or disables Panning X coordinate support for the diagram.
PanY	Enables or disables Panning Y coordinate support for the diagram.
Pan	Enables or disables panning both X and Y coordinates support for the diagram.
ZoomTextEdit	Enables or disables zooming the text box while editing the text.
Tooltip	Enables or disables the tooltip for the diagram.
Virtualization	Enables or disables Virtualization support for the diagram.
LineRouting	Enables or disables the line routing.
Default	Enables or disables all constraints in diagram.

The following example illustrates how to disable page editing using the diagram constraints.

let diagram:Diagram = new Diagram({
    width: '100%', height: 600,
    constraints: DiagramConstraints.Default & ~DiagramConstraints.PageEditable
});

The following example shows how to enable Bridging constraint to the default constraints of diagram.

let diagram:Diagram = new Diagram({
    width: '100%', height: 600,
    constraints: DiagramConstraints.Default | DiagramConstraints.Bridging
});

Multiple behaviors can be added or removed from the default constraints using the Bitwise Operations in the diagram.

let diagram:Diagram = new Diagram({
    width: '100%', height: 600,
    constraints: DiagramConstraints.Default & ~(DiagramConstraints.PageEditable|DiagramConstraints.Zoom);
});

For more information about diagram constraints, refer to DiagramConstraints.

NOTE

By default, the following constraints are enabled in the diagram,

* Zoom

* ApiUpdate

* PanX

* PanY

* Pan

* Undo/Redo

* PageEditable

* Default

Node constraints

Node constraints allows to enable or disable the following behaviors of node. They are as follows:

Constraints	Description
None	Disable all node Constraints
Select	Enables or disables the node to be selected.
Drag	Enables or disables the node to be dragged.
Rotate	Enables or disables the node to be rotated.
Shadow	Enables or disables the node to display shadow.
PointerEvents	Enables or disables the node to provide pointer option.
Delete	Enables or disables node to be deleted.
InConnect	Enables or disables node to provide in connect option.
OutConnect	Enables or disables node to provide out connect option.
AllowDrop	Enables node to provide allow to drop option.
Individual	Enables node to provide individual resize option
ResizeNorthEast	Enable or disable to resize NorthEast side of the node.
ResizeEast	Enable or disable to resize East side of the node.
ResizeSouthEast	Enable or disable to resize SouthEast side of the node.
ResizeSouth	Enable or disable to resize South side of the node.
ResizeSouthWest	Enable or disable to resize SouthWest side of the node.
ResizeWest	Enable or disable to resize West side of the node.
ResizeNorthWest	Enable or disable to resize NorthWest side of the node.
ResizeNorth	Enable or disable to resize North side of the node.
AspectRatio	Enables the Aspect ratio of the node.
ReadOnly	Enables the ReadOnly support for annotation in the node.
HideThumbs	Enable to hide all resize thumbs for the node.
Tooltip	Enables or disables tooltip for the Nodes.
InheritTooltip	Enables or disables inherit tooltip option from the parent object.
Resize	Enables or Disables the expansion or compression of a node.
Inherit	Enables the node to inherit the interaction option from the parent object.
Expandable	Enables node to provide Expandable option
AllowMovingOutsideLane	Enables or disables child in parent for the swimLane node
Default	Enables all default constraints for the node.

The following example illustrates how to disable rotation using the node constraints.

let nodes :NodeModel[] = [{ id: 'node', offsetX: 100, offsetY: 100, constraints: NodeConstraints.Default & ~NodeConstraints.Rotate }];
let diagram:Diagram = new Diagram({
    width: '100%, height: 600, nodes: nodes,
},'#element');

The following example shows how to add Shadow constraint to the default constraints of node.

let node = { id: 'node', offsetX: 100, offsetY: 100, constraints: NodeConstraints.Default | NodeConstraints.Shadow };

The following code example shows how the tooltip can be enabled for the node.

//Enabled the tooltip constraints for the node.
let node = { id: 'node', offsetX: 100, offsetY: 100, tooltip:{content:'Node'}, constraints: NodeConstraints.Default | NodeConstraints.Tooltip };

Multiple behaviors can be added or removed from the default constraints using the Bitwise Operations.

The following code example shows how to remove rotate and resize constraints from node.

 //Removing multiple constraints from default.
let node = { id: 'node', offsetX: 100, offsetY: 100,constraints: NodeConstraints.Default &~ (NodeConstraints.Rotate | NodeConstraints.Resize) };

Refer sample below

index.ts
index.html
import {
  Diagram,
  NodeModel,
  ConnectorModel,
  NodeConstraints,
} from '@syncfusion/ej2-diagrams';
let diagram: Diagram;

function getNodeDefaults(obj: NodeModel): NodeModel {
  obj.width = 100;
  obj.height = 100;
  obj.shape = { type: 'Basic', shape: 'Ellipse' };
  return obj;
}

//Sets the default values of a Connector
function getConnectorDefaults(connector: ConnectorModel): ConnectorModel {
  connector.targetDecorator.style = { fill: '#024249', strokeColor: '#024249' };
  return { style: { strokeColor: '#024249', strokeWidth: 2 } };
}

// tslint:disable-next-line:max-func-body-length

let nodes: NodeModel[] = [
  {
    id: 'Node1',
    offsetX: 100,
    offsetY: 100,
    annotations: [{ content: 'Select disabled' }],
    constraints: NodeConstraints.Default & ~NodeConstraints.Select,
  },
  {
    id: 'Node2',
    offsetX: 250,
    offsetY: 100,
    annotations: [{ content: 'Rotate disabled' }],
    constraints: NodeConstraints.Default & ~NodeConstraints.Rotate,
  },
  {
    id: 'Node3',
    offsetX: 400,
    offsetY: 100,
    annotations: [{ content: 'Resize disabled' }],
    constraints: NodeConstraints.Default & ~NodeConstraints.Resize,
  },
  {
    id: 'Node4',
    offsetX: 550,
    offsetY: 100,
    annotations: [{ content: 'Drag disabled' }],
    constraints: NodeConstraints.Default & ~NodeConstraints.Drag,
  },
  {
    id: 'Node5',
    offsetX: 700,
    offsetY: 100,
    annotations: [{ content: 'Tooltip enabled' }],
    constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
    tooltip: { content: 'Node Tooltip', relativeMode: 'Object' },
  },
];
//Initializes diagram control
diagram = new Diagram({
  width: '100%',
  height: '645px',
  nodes: nodes,
  getNodeDefaults: getNodeDefaults,
});
diagram.appendTo('#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Diagram</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-diagrams/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

For more information about node constraints, refer to NodeConstraints.

NOTE

By default, the following constraints are enabled for the node,

* Select

* Drag

* Resize

* Rotate

* InConnect

* OutConnect

* PointerEvents

* ResizeNorthEast

* ResizeEast

* ResizeSouthEast

* ResizeSouth

* ResizeSouthWest

* ResizeWest

* ResizeNorthWest

* ResizeNorth

* Inherit

* Expandable

* Individual

* InheritTooltip

* Default

Connector constraints

Connector constraints allows you to enable or disable certain behaviors of connectors.

Constraints	Description
None	Disable all connector Constraints.
Select	Enables or disables connector to be selected.
Delete	Enables or disables connector to be deleted.
Drag	Enables or disables connector to be dragged.
DragSourceEnd	Enables connectors source end to be selected.
DragTargetEnd	Enables connectors target end to be selected.
DragSegmentThumb	Enables control point and end point of every segment in a connector for editing.
Interaction	Enables or disables Interaction for the connector.
AllowDrop	Enables allow drop support to the connector.
Bridging	Enables bridging to the connector.
InheritBridging	Enables to inherit bridging option from the parent object.
BridgeObstacle	Enables or Disables Bridge Obstacles with overlapping of connectors.
PointerEvents	Enables to set the pointer events.
ConnectToNearByNode	Enables to connect to the nearest node.
ConnectToNearByPort	Enables to connect to the nearest port.
Tooltip	Enables or disables tooltip for the connectors.
LineRouting	Enables or disables routing to the connector.
InheritLineRouting	Enables or disables routing to the connector.
InheritTooltip	Enables or disables inherit tooltip option from the parent object
ConnectToNearByElement	Enables to connect to the nearest elements.
InheritSegmentThumbShape	Enables or disables to inherit the value of segmentThumbShape.
ReadOnly	Enables or disables readonly for the connector.
Default	Enables all constraints for the connector.

The following code shows how to disable select constraint from the default constraints of connector.

let connectors :ConnectorModel[]= [{
    id: 'connector1',
    type: 'Straight',
    sourcePoint: { x: 100, y: 100 },
    targetPoint: { x: 200, y: 200 },
    constraints: ConnectorConstraints.Default & ~ConnectorConstraints.Select
}];
let diagram:Diagram = new Diagram({
    width: '100%', height: 600, connectors: connectors,
},'#element');

The following example shows how to add Bridging constraint to the default constraints of connector.

let connector = {
    id: 'connector1',
    type: 'Straight',
    sourcePoint: { x: 100, y: 100 },
    targetPoint: { x: 200, y: 200 },
    constraints: ConnectorConstraints.Default | ConnectorConstraints.Bridging
};

NOTE

To visualize connector bridging, we need to inject ConnectorBridgin module.

The following code example shows how the tooltip can be enabled for the connector.

let connector = {
        id: 'connector1',
        type: 'Straight',
        sourcePoint: { x: 100, y: 100 },
        targetPoint: { x: 200, y: 200 },
        tooltip:{content:'Connector'},
        constraints: ConnectorConstraints.Default | ConnectorConstraints.Tooltip
    };

The connector constraints are provided as flagged enumerations, so that multiple behaviors can be added or removed from the default constraints using the Bitwise Operations.

//Removing multiple constraints from default.
let connector = {
        id: 'connector1',
        type: 'Straight',
        sourcePoint: { x: 100, y: 100 },
        targetPoint: { x: 200, y: 200 },
        tooltip:{content:'Connector'},
        constraints: ConnectorConstraints.Default &~ (ConnectorConstraints.DragSourceEnd|ConnectorConstraints.DragTargetEnd)
    };

Refer sample below

index.ts
index.html
import {
  Diagram,
  ConnectorModel,
  ConnectorConstraints,
} from '@syncfusion/ej2-diagrams';
let diagram: Diagram;

let connectors: ConnectorModel[] = [
  {
    id: 'connector1',
    sourcePoint: { x: 100, y: 100 },
    targetPoint: { x: 200, y: 200 },
    type: 'Orthogonal',
    constraints: ConnectorConstraints.Default & ~ConnectorConstraints.Select,
    annotations: [{ content: 'Select disabled', alignment: 'After' }],
  },
  {
    id: 'connector2',
    sourcePoint: { x: 250, y: 100 },
    targetPoint: { x: 350, y: 200 },
    type: 'Orthogonal',
    constraints: ConnectorConstraints.Default & ~ConnectorConstraints.Drag,
    annotations: [{ content: 'Drag disabled', alignment: 'After' }],
  },
  {
    id: 'connector3',
    sourcePoint: { x: 400, y: 100 },
    targetPoint: { x: 500, y: 200 },
    type: 'Orthogonal',
    constraints:
      ConnectorConstraints.Default & ~ConnectorConstraints.DragSourceEnd,
    annotations: [{ content: 'Source end disabled', alignment: 'After' }],
  },
  {
    id: 'connector4',
    sourcePoint: { x: 550, y: 100 },
    targetPoint: { x: 650, y: 200 },
    type: 'Orthogonal',
    constraints:
      ConnectorConstraints.Default & ~ConnectorConstraints.DragTargetEnd,
    annotations: [{ content: 'Target end disabled', alignment: 'After' }],
  },
  {
    id: 'connector5',
    sourcePoint: { x: 700, y: 100 },
    targetPoint: { x: 800, y: 200 },
    type: 'Orthogonal',
    constraints: ConnectorConstraints.Default & ~ConnectorConstraints.Delete,
    annotations: [{ content: 'Delete disabled', alignment: 'After' }],
  },
];
//Initializes diagram control
diagram = new Diagram({
  width: '100%',
  height: '645px',
  connectors: connectors,
});
diagram.appendTo('#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Diagram</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-diagrams/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

For more information about connector constraints, refer to ConnectorConstraints.

NOTE

By default, the following constraints are enabled for the connector,

* Select

* Delete

* Drag

* Interaction

* ConnectToNearByNode

* ConnectToNearByPort

* ConnectToNearByElement

* BridgeObstacle

* InheritBridging

* PointerEvents

* InheritLineRouting

* InheritTooltip

* InheritSegmentThumbShape

* Default

Port constraints

The constraints property of the Port allows you to enable or disable the following behaviors of port.

Constraints	Description
None	Disable all port Constraints.
Draw	Enables to create the connection when mouse hover on the port.
Drag	Enables or disables port dragging
InConnect	Enables or disables to connect only the target end of connector.
OutConnect	Enables or disables to connect only the source end of connector.
ToolTip	Enables or disables the Tooltip for the ports.
InheritTooltip	Enables or disables the Tooltip for the ports.
Default	Enables all constraints for the port.

The following code illustrates how to disable creating connections with a port.

let nodes :NodeModel[] = [
    {
        id: 'node',
        offsetX: 100,
        offsetY: 100,
        ports: [
            {
                constraints: PortConstraints.None
            }
        ]
    }
];
let diagram:Diagram = new Diagram({
    width: '100%', height: 600, nodes: nodes,
});

The following code example shows how to modify the port constraints to accept target connection alone.

        ports: [
            {   //Enable to create target connection alone.
                constraints: PortConstraints.InConnect
            }
        ]

The port constraints are provided as flagged enumerations, so that multiple behaviors can be added or removed from the default constraints using the Bitwise Operations.

        ports: [
            {   //Enable to draw connector from port also accepts both in and out connections.
                constraints: PortConstraints.Default | PortConstraints.Draw;
            }
        ]

Refer sample below

index.ts
index.html
import {
  Diagram,
  NodeModel,
  PortVisibility,
  PortConstraints,
} from '@syncfusion/ej2-diagrams';
let diagram: Diagram;

function getNodeDefaults(obj: NodeModel): NodeModel {
  obj.width = 300;
  obj.height = 200;
  return obj;
}

let nodes: NodeModel[] = [
  {
    id: 'Node1',
    offsetX: 200,
    offsetY: 200,
    annotations: [
      { content: 'tooltip enabled', offset: { x: 0.5, y: 0.1 } },
      { content: 'draw enabled', offset: { x: 0.2, y: 0.5 } },
      { content: 'drg enabled', offset: { x: 0.8, y: 0.5 } },
      { content: 'InConnect disabled', offset: { x: 0.2, y: 0.9 } },
      { content: 'OutConnect disabled', offset: { x: 0.8, y: 0.9 } },
    ],
    ports: [
      {
        id: 'left',
        offset: { x: 0, y: 0.5 },
        visibility: PortVisibility.Visible,
        constraints: PortConstraints.Default | PortConstraints.Draw,
      },
      {
        id: 'right',
        offset: { x: 1, y: 0.5 },
        visibility: PortVisibility.Visible,
        constraints: PortConstraints.Default | PortConstraints.Drag,
      },
      {
        id: 'top',
        offset: { x: 0.5, y: 0 },
        visibility: PortVisibility.Visible,
        constraints: PortConstraints.Default | PortConstraints.ToolTip,
        tooltip: { content: 'Port tooltip' },
      },
      {
        id: 'bottomLeft',
        offset: { x: 0.2, y: 1 },
        visibility: PortVisibility.Visible,
        constraints: PortConstraints.Default & ~PortConstraints.InConnect,
      },
      {
        id: 'bottomRight',
        offset: { x: 0.8, y: 1 },
        visibility: PortVisibility.Visible,
        constraints: PortConstraints.Default & ~PortConstraints.OutConnect,
      },
    ],
  },
];
//Initializes diagram control
diagram = new Diagram({
  width: '100%',
  height: '645px',
  nodes: nodes,
  getNodeDefaults: getNodeDefaults,
});
diagram.appendTo('#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Diagram</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-diagrams/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

For more information about port constraints, refer to PortConstraints.

NOTE

By default, the following constraints are enabled for the port,

* InConnect

* OutConnect

Annotation constraints

The constraints property of the Annotations allows you to enable or disable certain behaviors of annotation.

Constraints	Description
ReadOnly	Enables or disables the ReadOnly Constraints,
InheritReadOnly	Enables or disables to inherit the ReadOnly option from the parent object.
Select	Enables or Disable select support for the annotation
Drag	Enables or Disable drag support for the annotation
Resize	Enables or Disable resize support for the annotation
Rotate	Enables or Disable rotate support for the annotation
Interaction	Enables interaction of annotation
None	Disables all constraints for the annotation.

The read-only mode for the annotation is enabled by settings ReadOnly constraints to the annotation.

The following code illustrates how to enable read-only mode for the annotations.

let nodes :NodeModel[] = [
    {
        id: 'node',
        offsetX: 100,
        offsetY: 100,
        annotations: [
            {
                id: 'anotation_1',
                content: 'annotation',
                constraints: AnnotationConstraints.ReadOnly,
            }
        ]
    }
];
let diagram:Diagram = new Diagram({
    width: '100%', height: 600, nodes: nodes,
});

Interactions such as select, drag, resize, and rotate can be enabled for the annotation as shown below.

 annotations: [
            {
                id: 'anotation_1',
                content: 'annotation',
                constraints: AnnotationConstraints.Select | AnnotationConstraints.Drag | AnnotationConstraints.Resize |
                AnnotationConstraints.Rotate,
            }
        ]

Refer sample below

index.ts
index.html
import {
  Diagram,
  NodeModel,
  AnnotationConstraints,
} from '@syncfusion/ej2-diagrams';
let diagram: Diagram;

function getNodeDefaults(obj: NodeModel): NodeModel {
  obj.width = 300;
  obj.height = 200;
  return obj;
}

let nodes: NodeModel[] = [
  {
    id: 'Node1',
    offsetX: 200,
    offsetY: 200,
    annotations: [
      {
        content: 'Interaction enabled',
        offset: { x: 0.5, y: 0.1 },
        constraints: AnnotationConstraints.Interaction,
      },
      {
        content: 'ReadOnly enabled',
        offset: { x: 0.2, y: 0.5 },
        constraints: AnnotationConstraints.ReadOnly,
      },
      {
        content: 'Select and drag enabled',
        offset: { x: 0.8, y: 0.5 },
        constraints: AnnotationConstraints.Select | AnnotationConstraints.Drag,
      },
      {
        content: 'Select and rotate enabled',
        offset: { x: 0.5, y: 0.9 },
        constraints:
          AnnotationConstraints.Select | AnnotationConstraints.Rotate,
      },
    ],
  },
];
//Initializes diagram control
diagram = new Diagram({
  width: '100%',
  height: '645px',
  nodes: nodes,
  getNodeDefaults: getNodeDefaults,
});
diagram.appendTo('#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Diagram</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-diagrams/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

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:

Constraints	Description
None	Hides all the selector elements.
ConnectorSourceThumb	Shows or hides the source thumb of the connector.
ConnectorTargetThumb	Shows or hides the target thumb of the connector.
ResizeSouthEast	Shows or hides the bottom right resize handle of the selector.
ResizeSouthWest	Shows or hides the bottom left resize handle of the selector.
ResizeNorthEast	Shows or hides the top right resize handle of the selector.
ResizeNorthWest	Shows or hides the top left resize handle of the selector.
ResizeEast	Shows or hides the middle right resize handle of the selector.
ResizeWest	Shows or hides the middle left resize handle of the selector.
ResizeSouth	Shows or hides the bottom center resize handle of the selector.
ResizeNorth	Shows or hides the top center resize handle of the selector.
Rotate	Shows or hides the rotate handle of the selector.
UserHandle	Shows or hides the user handles of the selector.
ToolTip	Shows or hides the default tooltip for the drag, resize, and rotate operation of nodes and connectors.
ResizeAll	Shows or hides all resize handles of the selector.
All	Shows all handles of the selector.

The following code illustrates how to hide rotator.

let diagram:Diagram = new Diagram({
    width: '100%', height: 600,
    selectedItems: { constraints: SelectorConstraints.All & ~SelectorConstraints.Rotate}
});

The following code demonstrates how to hide the default tooltip during the drag, resize, and rotate operations on nodes:

let diagram:Diagram = new Diagram({
    width: '100%', height: 600,
    selectedItems: { constraints: SelectorConstraints.All & ~SelectorConstraints.ToolTip}
});

The following code example shows how to disable the userhandle functionality for the selected item.

let diagram:Diagram = new Diagram({
    width: '100%', height: 600,
    selectedItems: { constraints: SelectorConstraints.All & ~SelectorConstraints.UserHandle}
});

Refer sample below

index.ts
index.html
import {
  Diagram,
  NodeModel,
  SelectorConstraints,
} from '@syncfusion/ej2-diagrams';
let diagram: Diagram;

function getNodeDefaults(obj: NodeModel): NodeModel {
  obj.width = 100;
  obj.height = 100;
  return obj;
}

let nodes: NodeModel[] = [
  {
    id: 'Node1',
    offsetX: 200,
    offsetY: 200,
    annotations: [
      { content: 'Resize handle disabled in selector constraints' },
    ],
  },
];
//Initializes diagram control
diagram = new Diagram({
  width: '100%',
  height: '645px',
  nodes: nodes,
  getNodeDefaults: getNodeDefaults,
  //Resize handles disabled
  selectedItems: {
    constraints: SelectorConstraints.All & ~SelectorConstraints.ResizeAll,
  },
});
diagram.appendTo('#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Diagram</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-diagrams/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

For more information about selector constraints, refer to SelectorConstraints.

NOTE

By default, the following constraints are enabled for the selected items,

* Rotate

* UserHandel

* ResizeAll

* All

* ToolTip

Snap constraints

Snap constraints control the visibility of gridlines and enable/disable snapping.

The following list of snapping constraints are used to enable or disable certain features of snapping.

Constraints	Description
None	Disable snapping for the nodes/connectors in diagram.
ShowHorizontalLines	Displays only the horizontal gridlines in diagram.
ShowVerticalLines	Displays only the Vertical gridlines in diagram.
ShowLines	Display both Horizontal and Vertical gridlines.
SnapToHorizontalLines	Enables the object to snap only with horizontal gridlines.
SnapToVerticalLines	Enables the object to snap only with Vertical gridlines.
SnapToLines	Enables the object to snap with both horizontal and Vertical gridlines.
SnapToObject	Enables the object to snap with the other objects in the diagram.
All	Shows gridlines and enables snapping.

The following code illustrates how to show only horizontal gridlines.

let diagram:Diagram = new Diagram({
    width: '100%', height: 600,
    snapSettings: {
        constraints: SnapConstraints.ShowHorizontalLines
    }
});

The snap constraints are provided as flagged enumerations, so that multiple behaviors can be added or removed from the default constraints using the Bitwise Operations.

  snapSettings: {
        constraints: SnapConstraints.ShowHorizontalLines | SnapConstraints.ShowVerticalLines
    };

Refer sample below

index.ts
index.html
import {
  Diagram,
  NodeModel,
  SnapConstraints,
  Snapping,
} from '@syncfusion/ej2-diagrams';
let diagram: Diagram;
Diagram.Inject(Snapping);
function getNodeDefaults(obj: NodeModel): NodeModel {
  obj.width = 100;
  obj.height = 100;
  return obj;
}

let nodes: NodeModel[] = [
  {
    id: 'Node1',
    offsetX: 200,
    offsetY: 200,
    annotations: [{ content: 'Node 1' }],
  },
  {
    id: 'Node2',
    offsetX: 400,
    offsetY: 200,
    annotations: [{ content: 'Node 2' }],
  },
];
//Initializes diagram control
diagram = new Diagram({
  width: '100%',
  height: '645px',
  nodes: nodes,
  getNodeDefaults: getNodeDefaults,
  //Snap to object and horizontal gridlines disabled
  snapSettings: {
    constraints:
      SnapConstraints.All &
      ~(SnapConstraints.ShowHorizontalLines | SnapConstraints.SnapToObject),
  },
});
diagram.appendTo('#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Diagram</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-diagrams/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

For more information about snap constraints, refer to SnapConstraints.

NOTE

By default, the following constraints are enabled for the snap functionality in the diagram,

* ShowLines

* ShowVerticalLines

* ShowHorizontalLines

* SnapToLines

* SnapToHorizontalLines

* SnapToVerticalLines

* SnapToObject

* All

Boundary constraints

Boundary constraints defines a boundary for the diagram inside which the interaction should be done.

The following list of constraints are used to enable or disable certain features of boundary interactions of the diagram.

Constraints	Description
Infinity	Allow the interactions to take place at the infinite height and width.
Diagram	Allow the interactions to take place around the diagram height and width.
Page	Allow the interactions to take place around the page height and width.

The following code illustrates how to limit the interaction done inside a diagram within a page.

let diagram:Diagram = new Diagram({
    width: '100%', height: 600,
    pageSettings: {
        boundaryConstraints: 'Page'
    }
});

Refer sample below

index.ts
index.html
import { Diagram, NodeModel, Snapping } from '@syncfusion/ej2-diagrams';
let diagram: Diagram;
Diagram.Inject(Snapping);
let nodes: NodeModel[] = [
  {
    id: 'Node1',
    offsetX: 200,
    offsetY: 200,
    width:100,
    height:100,
    annotations: [{ content: 'Node interactions restricted within page' }],
  },
];
//Initializes diagram control
diagram = new Diagram({
  width: '100%',
  height: '645px',
  nodes: nodes,
  pageSettings: {
    // Boundary set as page
    boundaryConstraints: 'Page',
    width: 500,
    height: 500,
    showPageBreaks: true,
    background: { color: 'grey' },
  },
});
diagram.appendTo('#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Diagram</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-diagrams/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

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.

The following code example illustrates how to inherit the line bridging behavior from the diagram model.

Diagram.Inject(ConnectorBridging);
let connectors :ConnectorModel[]= [
  {
    id: 'connector1',
    type: 'Straight',
    sourcePoint: { x: 100, y: 100 },
    targetPoint: { x: 200, y: 200 },
    constraints:
      ConnectorConstraints.Default |
      ConnectorConstraints.InheritBridging,
  },
  {
    id: 'connector2',
    type: 'Straight',
    sourcePoint: { x: 100, y: 200 },
    targetPoint: { x: 200, y: 100 },
    constraints:
      ConnectorConstraints.Default |
      ConnectorConstraints.InheritBridging,
  },
];
let diagram:Diagram = new Diagram({
  width: '100%',
  height: 600,
  connectors: connectors,
  constraints:
    DiagramConstraints.Default |
    DiagramConstraints.Bridging,
});

diagram.appendTo('#element');

Bitwise operations

Bitwise operations are used to manipulate the flagged enumerations enum.In this section, Bitwise operations are shown by using the node constraints. The same is applicable when working connector constraints, or port constraints.

Add operation

You can add or enable multiple values at a time by using Bitwise ‘

’ (OR) operator.

The following code demonstrates how to add tooltip constraints to the default node constraints, thereby enabling tooltip functionality for the node:

node.constraints = NodeConstraints.Default | NodeConstraints.Tooltip;

In the previous example, you can perform basic interactions with the node while also enabling tooltip functionality.

Remove Operation

You can remove or disable values by using Bitwise ‘&~’ (XOR) operator.

node.constraints = NodeConstraints.Default & ~(NodeConstraints.Rotate);

In the previous example, rotation is disabled from the default node constraints.

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.