Constraints in Angular Diagram component

10 Dec 202424 minutes to read

Constraints are used to enable/disable certain behaviors of the diagram, nodes and connectors. Constraints are provided as flagged enumerations, so that multiple behaviors can be enabled/disabled using Bitwise operators (&, |, ~, <<, etc.).

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

Diagram constraints

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 give page editing using the diagram constraints.

import { Component, ViewEncapsulation, ViewChild } from "@angular/core";
import { DiagramConstraints } from '@syncfusion/ej2-diagrams';
@Component({
  selector: "app-container",
  // specifies the template string for the diagram component
  template: `<ejs-diagram id="diagram" width="100%" height="580px" [constraints]='diagramConstraints'></ejs-diagram>`
})
export class AppComponent {
    @ViewChild("diagram")
    public diagramConstraints: DiagramConstraints;
    ngOnInit(): void {
        this.diagramConstraints = DiagramConstraints.Default & ~DiagramConstraints.PageEditable;
    }
}

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

import { Component, ViewEncapsulation, ViewChild } from "@angular/core";
import { DiagramConstraints } from '@syncfusion/ej2-diagrams';
@Component({
  selector: "app-container",
  // specifies the template string for the diagram component
  template: `<ejs-diagram id="diagram" width="100%" height="580px" [constraints]='diagramConstraints'></ejs-diagram>`
})
export class AppComponent {
    @ViewChild("diagram")
    public diagramConstraints: DiagramConstraints;
    ngOnInit(): void {
        this.diagramConstraints = DiagramConstraints.Default | DiagramConstraints.Bridging
    }
}

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

import { Component, ViewEncapsulation, ViewChild } from "@angular/core";
import { DiagramConstraints } from '@syncfusion/ej2-diagrams';
@Component({
  selector: "app-container",
  // specifies the template string for the diagram component
  template: `<ejs-diagram id="diagram" width="100%" height="580px" [constraints]='diagramConstraints'></ejs-diagram>`
})
export class AppComponent {
    @ViewChild("diagram")
    public diagramConstraints: DiagramConstraints;
    ngOnInit(): void {
        this.diagramConstraints = 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.

import { Component, ViewEncapsulation, ViewChild } from "@angular/core";
import { NodeConstraints } from "@syncfusion/ej2-angular-diagrams";

@Component({
    selector: "app-container",
    template: `<ejs-diagram id="diagram" width="100%" height="580px">
        <e-nodes>
            <e-node id='node1' [height]=60 [width]=100 [offsetX]=300 [offsetY]=80 [constraints]='nodeConstraints'>
            </e-node>
        </e-nodes>
    </ejs-diagram>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    @ViewChild("diagram")
    public nodeConstraints: NodeConstraints;
    ngOnInit(): void {
        this.nodeConstraints = NodeConstraints.Default & ~NodeConstraints.Rotate;
    }
}

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

import { Component, ViewEncapsulation, ViewChild } from "@angular/core";
import { NodeConstraints } from "@syncfusion/ej2-angular-diagrams";

@Component({
    selector: "app-container",
    template: `<ejs-diagram id="diagram" width="100%" height="580px">
        <e-nodes>
            <e-node id='node1' [height]=60 [width]=100 [offsetX]=300 [offsetY]=80 [constraints]='nodeConstraints'>
            </e-node>
        </e-nodes>
    </ejs-diagram>`,
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    @ViewChild("diagram")
    public nodeConstraints: NodeConstraints;
    ngOnInit(): void {
        this.nodeConstraints = NodeConstraints.Default | NodeConstraints.Shadow ;
    }
}

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

import { Component, ViewEncapsulation, ViewChild } from "@angular/core";
import { NodeConstraints, DiagramTooltipModel } from "@syncfusion/ej2-angular-diagrams";

@Component({
    selector: "app-container",
    template: `<ejs-diagram id="diagram" width="100%" height="580px">
        <e-nodes>
            <e-node id='node1' [height]=60 [width]=100 [offsetX]=300 [offsetY]=80 [constraints]='nodeConstraints' [tooltip]='tooltip'>
            </e-node>
        </e-nodes>
    </ejs-diagram>`,
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    @ViewChild("diagram")
    public nodeConstraints: NodeConstraints;
    public tooltip: DiagramTooltipModel;
    ngOnInit(): void {
        this.nodeConstraints = NodeConstraints.Default | NodeConstraints.Tooltip ;
        this.tooltip = {content: 'Node'},
    }
}

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.

@Component({
    selector: "app-container",
    template: `<ejs-diagram id="diagram" width="100%" height="580px">
        <e-nodes>
            <e-node id='node1' [height]=60 [width]=100 [offsetX]=300 [offsetY]=80 [constraints]='nodeConstraints' [tooltip]='tooltip'>
            </e-node>
        </e-nodes>
    </ejs-diagram>`,
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    @ViewChild("diagram")
    public nodeConstraints: NodeConstraints;
    ngOnInit(): void {
        this.nodeConstraints = NodeConstraints.Default &~ NodeConstraints.Rotate | NodeConstraints.Resize ;
    }
}

Refer sample below

import {
    DiagramModule,
    NodeConstraints, DiagramComponent, NodeModel
  } from '@syncfusion/ej2-angular-diagrams';
  import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
  
  @Component({
    imports: [DiagramModule],
  
    providers: [],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" [nodes]='nodes' [getNodeDefaults] ='getNodeDefaults'>
      </ejs-diagram>`,
    encapsulation: ViewEncapsulation.None,
  })
  export class AppComponent {
    @ViewChild('diagram')
    public diagram?: DiagramComponent;
    public nodes: NodeModel[] = [
      {
        id: 'node1',
        offsetX: 200,
        offsetY: 100,
        annotations: [{ content: 'Select disabled' }],
        constraints: NodeConstraints.Default & ~NodeConstraints.Select,
      },
      {
        id: 'node2',
        offsetX: 500,
        offsetY: 100,
        annotations: [{ content: 'Rotate disabled' }],
        constraints: NodeConstraints.Default & ~NodeConstraints.Rotate,
      },
      {
        id: 'node3',
        offsetX: 200,
        offsetY: 400,
        annotations: [{ content: 'Resize disabled' }],
        constraints: NodeConstraints.Default & ~NodeConstraints.Resize,
      },
      {
        id: 'node4',
        offsetX: 500,
        offsetY: 400,
        annotations: [{ content: 'Drag disabled' }],
        constraints: NodeConstraints.Default & ~NodeConstraints.Drag,
      },
      {
        id: 'node5',
        offsetX: 350,
        offsetY: 250,
        annotations: [{ content: 'Tooltip disabled' }],
        constraints: NodeConstraints.Default & ~NodeConstraints.Tooltip,
        tooltip: { content: 'Node Tooltip', relativeMode: 'Object' },
      },
    ];
  
    public getNodeDefaults(node: NodeModel): NodeModel {
      node.height = 100;
      node.width = 100;
      node.pivot = { x: 0, y: 0 };
      return node;
    }
  }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

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 allow 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 illustrates how to disable selection by using connector constraints.

import { Component, ViewEncapsulation, ViewChild } from "@angular/core";
import { ConnectorConstraints, PointModel } from "@syncfusion/ej2-angular-diagrams";

@Component({
    selector: "app-container",
    template: `<ejs-diagram id="diagram" width="100%" height="580px">
        <e-connectors>
            <e-connector id='connector' type='Straight' [sourcePoint]='sourcePoint' [targetPoint]='targetPoint' [constraints]='connectorConstraints'>
            </e-connector>
        </e-connectors>
    </ejs-diagram>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    @ViewChild("diagram")
    public connectorConstraints: ConnectorConstraints;
    public sourcePoint: PointModel;
    public targetPoint:PointModel;
    ngOnInit(): void {
        this.sourcePoint: { x: 100, y: 100 },
        this.targetPoint: { x: 200, y: 200 },
        this.connectorConstraints = ConnectorConstraints.Default & ~ConnectorConstraints.Select;
    }
}

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

import { Component, ViewEncapsulation, ViewChild } from "@angular/core";
import { ConnectorConstraints, PointModel } from "@syncfusion/ej2-angular-diagrams";

@Component({
    selector: "app-container",
    template: `<ejs-diagram id="diagram" width="100%" height="580px">
        <e-connectors>
            <e-connector id='connector' type='Straight' [sourcePoint]='sourcePoint' [targetPoint]='targetPoint' [constraints]='connectorConstraints'>
            </e-connector>
        </e-connectors>
    </ejs-diagram>`,
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    @ViewChild("diagram")
    public connectorConstraints: ConnectorConstraints;
    public sourcePoint: PointModel;
    public targetPoint:PointModel;
    ngOnInit(): void {
        this.sourcePoint: { x: 100, y: 100 },
        this.targetPoint: { x: 200, y: 200 },
        this.connectorConstraints = ConnectorConstraints.Default | ConnectorConstraints.Bridging;
    }
}

NOTE

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

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

import { Component, ViewEncapsulation, ViewChild } from "@angular/core";
import { ConnectorConstraints, DiagramTooltipModel, PointModel } from "@syncfusion/ej2-angular-diagrams";

@Component({
    selector: "app-container",
    template: `<ejs-diagram id="diagram" width="100%" height="580px">
        <e-connectors>
            <e-connector id='connector' type='Straight' [sourcePoint]='sourcePoint' [targetPoint]='targetPoint' [constraints]='connectorConstraints' [tooltip]='tooltip'>
            </e-connector>
        </e-connectors>
    </ejs-diagram>`,
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    @ViewChild("diagram")
    public connectorConstraints: ConnectorConstraints;
    public sourcePoint: PointModel;
    public targetPoint:PointModel;
    public tooltip: DiagramTooltipModel;
    ngOnInit(): void {
        this.sourcePoint: { x: 100, y: 100 },
        this.targetPoint: { x: 200, y: 200 },
        this.connectorConstraints = ConnectorConstraints.Default | ConnectorConstraints.Tooltip;
        this.tooltip = {content: 'Connector'},
    }
}

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.

import { Component, ViewEncapsulation, ViewChild } from "@angular/core";
import { ConnectorConstraints, PointModel } from "@syncfusion/ej2-angular-diagrams";

@Component({
    selector: "app-container",
    template: `<ejs-diagram id="diagram" width="100%" height="580px">
        <e-connectors>
            <e-connector id='connector' type='Straight' [sourcePoint]='sourcePoint' [targetPoint]='targetPoint' [constraints]='connectorConstraints'>
            </e-connector>
        </e-connectors>
    </ejs-diagram>`,
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    @ViewChild("diagram")
    public connectorConstraints: ConnectorConstraints;
    public sourcePoint: PointModel;
    public targetPoint:PointModel;
    ngOnInit(): void {
        this.sourcePoint: { x: 100, y: 100 },
        this.targetPoint: { x: 200, y: 200 },
        //Removing multiple constraints from default.
        this.connectorConstraints = ConnectorConstraints.Default &~ (ConnectorConstraints.DragSourceEnd | ConnectorConstraints.DragTargetEnd);
    }
}

Refer sample below

import {
  ConnectorConstraints,
  ConnectorModel,
    DiagramModule, DiagramComponent, NodeModel
  } from '@syncfusion/ej2-angular-diagrams';
  
  import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
  
  @Component({
    imports: [DiagramModule],
  
    providers: [],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" [connectors]='connectors' [getNodeDefaults] ='getNodeDefaults'>
      </ejs-diagram>`,
    encapsulation: ViewEncapsulation.None,
  })
  export class AppComponent {
    @ViewChild('diagram')
    public diagram?: DiagramComponent;
    public 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' }],
        },
    ];
  
    public getNodeDefaults(node: NodeModel): NodeModel {
      node.height = 100;
      node.width = 100;
      node.pivot = { x: 0, y: 0 };
      return node;
    }
  }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

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.

import { Component, ViewEncapsulation, ViewChild } from "@angular/core";
import { PointPortModel, PortConstraints } from "@syncfusion/ej2-angular-diagrams";

@Component({
    selector: "app-container",
    template: `<ejs-diagram id="diagram" width="100%" height="580px">
        <e-nodes>
            <e-node id='node1' [height]=60 [width]=100 [offsetX]=300 [offsetY]=80 [ports]='port1'>
            </e-node>
        </e-nodes>
    </ejs-diagram>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    @ViewChild("diagram")
    public port1: PointPortModel[];
    ngOnInit(): void {
        this.port1 = [{
            id: 'port1',
            shape: 'Circle',
            offset: { x: 0, y: 0.5 },
            text: 'In - 1',
            constraints: PortConstraints.None
        }];
    }
}

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

import { Component, ViewEncapsulation, ViewChild } from "@angular/core";
import { PointPortModel, PortConstraints } from "@syncfusion/ej2-angular-diagrams";

@Component({
    selector: "app-container",
    template: `<ejs-diagram id="diagram" width="100%" height="580px">
        <e-nodes>
            <e-node id='node1' [height]=60 [width]=100 [offsetX]=300 [offsetY]=80 [ports]='port1'>
            </e-node>
        </e-nodes>
    </ejs-diagram>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    @ViewChild("diagram")
    public port1: PointPortModel[];
    ngOnInit(): void {
        this.port1 = [{
            id: 'port1',
            shape: 'Circle',
            offset: { x: 0, y: 0.5 },
            text: 'In - 1',
            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.

import { Component, ViewEncapsulation, ViewChild } from "@angular/core";
import { PointPortModel, PortConstraints } from "@syncfusion/ej2-angular-diagrams";

@Component({
    selector: "app-container",
    template: `<ejs-diagram id="diagram" width="100%" height="580px">
        <e-nodes>
            <e-node id='node1' [height]=60 [width]=100 [offsetX]=300 [offsetY]=80 [ports]='port1'>
            </e-node>
        </e-nodes>
    </ejs-diagram>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    @ViewChild("diagram")
    public port1: PointPortModel[];
    ngOnInit(): void {
        this.port1 = [{
            id: 'port1',
            shape: 'Circle',
            offset: { x: 0, y: 0.5 },
            text: 'In - 1',
            constraints: PortConstraints.Default | PortConstraints.Draw;
        }];
    }
}

Refer sample below

import {
  DiagramModule,
PortConstraints,
PortVisibility,
DiagramComponent,
NodeModel
} from '@syncfusion/ej2-angular-diagrams';

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';

@Component({
  imports: [DiagramModule],

  providers: [],
  standalone: true,
  selector: 'app-container',
  template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" [nodes]='nodes' [getNodeDefaults] ='getNodeDefaults'>
    </ejs-diagram>`,
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  @ViewChild('diagram')
  public diagram?: DiagramComponent;
  public 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,
          },
        ],
      },
  ];

  public getNodeDefaults(node: NodeModel): NodeModel {
    node.height = 200;
    node.width = 300;
    node.pivot = { x: 0, y: 0 };
    return node;
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

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.

import { Component, ViewEncapsulation, ViewChild } from "@angular/core";
import { AnnotationConstraints } from "@syncfusion/ej2-angular-diagrams";

@Component({
    selector: "app-container",
    template: `<ejs-diagram id="diagram" width="100%" height="580px">
        <e-nodes>
            <e-node id='node1' [height]=60 [width]=100 [offsetX]=300 [offsetY]=80>
            <e-node-annotations>
                <e-node-annotation content='Start' [constraints]='annotationConstraints'></e-node-annotation>
            </e-node-annotations>
        </e-node>
        </e-nodes>
    </ejs-diagram>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    @ViewChild("diagram")
    public annotationConstraints: AnnotationConstraints;
    ngOnInit(): void {
        this.annotationConstraints = AnnotationConstraints.ReadOnly;
    }
}

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

import { Component, ViewEncapsulation, ViewChild } from "@angular/core";
import { AnnotationConstraints } from "@syncfusion/ej2-angular-diagrams";

@Component({
    selector: "app-container",
    template: `<ejs-diagram id="diagram" width="100%" height="580px">
        <e-nodes>
            <e-node id='node1' [height]=60 [width]=100 [offsetX]=300 [offsetY]=80>
            <e-node-annotations>
                <e-node-annotation content='Start' [constraints]='annotationConstraints'></e-node-annotation>
            </e-node-annotations>
        </e-node>
        </e-nodes>
    </ejs-diagram>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    @ViewChild("diagram")
    public annotationConstraints: AnnotationConstraints;
    ngOnInit(): void {
        this.annotationConstraints = AnnotationConstraints.Select | AnnotationConstraints.Drag | AnnotationConstraints.Resize | AnnotationConstraints.Rotate,
    }
}

Refer sample below

import {
  AnnotationConstraints,
  DiagramModule, DiagramComponent, NodeModel
} from '@syncfusion/ej2-angular-diagrams';

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';

@Component({
  imports: [DiagramModule],

  providers: [],
  standalone: true,
  selector: 'app-container',
  template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" [nodes]='nodes' [getNodeDefaults] ='getNodeDefaults'>
          </ejs-diagram>`,
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  @ViewChild('diagram')
  public diagram?: DiagramComponent;
  public 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,
        },
      ],
    },
  ];

  public getNodeDefaults(node: NodeModel): NodeModel {
    node.height = 200;
    node.width = 300;
    node.pivot = { x: 0, y: 0 };
    return node;
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

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.

import { Component, ViewEncapsulation, ViewChild } from "@angular/core";
import { SelectorModel, SelectorConstraints } from '@syncfusion/ej2-diagrams';
@Component({
  selector: "app-container",
  // specifies the template string for the diagram component
  template: `<ejs-diagram id="diagram" width="100%" height="580px" [selectedItems]='selectedItems'></ejs-diagram>`
})
export class AppComponent {
    @ViewChild("diagram")
    public selectedItems: SelectorModel;
    ngOnInit(): void {
        this.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:

import { Component, ViewEncapsulation, ViewChild } from "@angular/core";
import { SelectorModel, SelectorConstraints } from '@syncfusion/ej2-diagrams';
@Component({
  selector: "app-container",
  // specifies the template string for the diagram component
  template: `<ejs-diagram id="diagram" width="100%" height="580px" [selectedItems]='selectedItems'></ejs-diagram>`
})
export class AppComponent {
    @ViewChild("diagram")
    public selectedItems: SelectorModel;
    ngOnInit(): void {
        this.selectedItems = { constraints: SelectorConstraints.All & ~SelectorConstraints.Tooltip };
    }
}

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

import { Component, ViewEncapsulation, ViewChild } from "@angular/core";
import { SelectorModel, SelectorConstraints } from '@syncfusion/ej2-diagrams';
@Component({
  selector: "app-container",
  // specifies the template string for the diagram component
  template: `<ejs-diagram id="diagram" width="100%" height="580px" [selectedItems]='selectedItems'></ejs-diagram>`
})
export class AppComponent {
    @ViewChild("diagram")
    public selectedItems: SelectorModel;
    ngOnInit(): void {
        this.selectedItems = { constraints: SelectorConstraints.All & ~SelectorConstraints.UserHandle };
    }
}

Refer sample below

import {
  DiagramModule,
  SelectorConstraints,
  SelectorModel, DiagramComponent, NodeModel
} from '@syncfusion/ej2-angular-diagrams';

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';

@Component({
  imports: [DiagramModule],

  providers: [],
  standalone: true,
  selector: 'app-container',
  template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" [nodes]='nodes' [getNodeDefaults] ='getNodeDefaults' [selectedItems]='selectedItems'>
        </ejs-diagram>`,
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  @ViewChild('diagram')
  public diagram?: DiagramComponent;
  public selectedItems?: SelectorModel;
  public nodes: NodeModel[] = [
    {
      id: 'Node1',
      offsetX: 200,
      offsetY: 200,
      annotations: [
        { content: 'Resize handle disabled in selector constraints' },
      ],
    },
  ];
  ngOnInit(): void {
    this.selectedItems = {
      constraints: SelectorConstraints.All & ~SelectorConstraints.ResizeAll,
    };
  }
  public getNodeDefaults(node: NodeModel): NodeModel {
    node.height = 100;
    node.width = 100;
    node.pivot = { x: 0, y: 0 };
    return node;
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

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.

import { Component, ViewEncapsulation, ViewChild } from "@angular/core";
import { SnapSettingsModel, SnapConstraints } from '@syncfusion/ej2-diagrams';
@Component({
  selector: "app-container",
  // specifies the template string for the diagram component
  template: `<ejs-diagram id="diagram" width="100%" height="580px" [snapSettings]='snapSettings'></ejs-diagram>`
})
export class AppComponent {
    @ViewChild("diagram")
    public snapSettings: SnapSettingsModel;
    ngOnInit(): void {
        this.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.

import { Component, ViewEncapsulation, ViewChild } from "@angular/core";
import { SnapSettingsModel, SnapConstraints } from '@syncfusion/ej2-diagrams';
@Component({
  selector: "app-container",
  // specifies the template string for the diagram component
  template: `<ejs-diagram id="diagram" width="100%" height="580px" [snapSettings]='snapSettings'></ejs-diagram>`
})
export class AppComponent {
    @ViewChild("diagram")
    public snapSettings: SnapSettingsModel;
    ngOnInit(): void {
        this.snapSettings: {
            constraints: SnapConstraints.ShowHorizontalLines | SnapConstraints.ShowVerticalLines
        };
    }
}

Refer sample below

import {
  DiagramModule,
  SnapConstraints,
  SnapSettingsModel,
  DiagramComponent, 
  NodeModel
} from '@syncfusion/ej2-angular-diagrams';

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';

@Component({
  imports: [DiagramModule],

  providers: [],
  standalone: true,
  selector: 'app-container',
  template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" [nodes]='nodes' [getNodeDefaults] ='getNodeDefaults' [snapSettings]='snapSettings'>
        </ejs-diagram>`,
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  @ViewChild('diagram')
  public diagram?: DiagramComponent;
  public snapSettings?: SnapSettingsModel;
  ngOnInit(): void {
    this.snapSettings = {
      constraints: SnapConstraints.ShowHorizontalLines | SnapConstraints.SnapToObject
    };
  }
  public nodes: NodeModel[] = [
    {
      id: 'Node1',
      offsetX: 200,
      offsetY: 200,
      annotations: [{ content: 'Node 1' }],
    },
    {
      id: 'Node2',
      offsetX: 400,
      offsetY: 200,
      annotations: [{ content: 'Node 2' }],
    },
  ];
  public getNodeDefaults(node: NodeModel): NodeModel {
    node.height = 100;
    node.width = 100;
    node.pivot = { x: 0, y: 0 };
    return node;
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

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.

import { Component, ViewEncapsulation, ViewChild } from "@angular/core";
import { PageSettingsModel, BoundaryConstraints } from '@syncfusion/ej2-diagrams';
@Component({
  selector: "app-container",
  template: `<ejs-diagram id="diagram" width="100%" height="580px" [pageSettings]='pageSettings'></ejs-diagram>`
})
export class AppComponent {
    @ViewChild("diagram")
    public pageSettings: PageSettingsModel;
    ngOnInit(): void {
        this.pageSettings: {
            boundaryConstraints: 'Page'
        };
    }
}

Refer sample below

import {
  DiagramModule,
  PageSettingsModel, DiagramComponent, NodeModel
} from '@syncfusion/ej2-angular-diagrams';

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';

@Component({
  imports: [DiagramModule],

  providers: [],
  standalone: true,
  selector: 'app-container',
  template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" [nodes]='nodes' [getNodeDefaults] ='getNodeDefaults' [pageSettings]='pageSettings'>
        </ejs-diagram>`,
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  @ViewChild('diagram')
  public diagram?: DiagramComponent;
  public pageSettings?: PageSettingsModel;
  ngOnInit(): void {
    this.pageSettings = {
      boundaryConstraints: 'Page',
      width: 500,
      height: 500,
      showPageBreaks: true,
      background: { color: 'grey' },
    };
  }
  public nodes: NodeModel[] = [
    {
      id: 'Node1',
      offsetX: 200,
      offsetY: 200,
      annotations: [{ content: 'Node 1' }],
    }
  ];
  public getNodeDefaults(node: NodeModel): NodeModel {
    node.height = 100;
    node.width = 100;
    node.pivot = { x: 0, y: 0 };
    return node;
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

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.

import { Component, ViewEncapsulation, ViewChild } from "@angular/core";
import { DiagramConstraints, ConnectorBridging, ConnectorConstraints, PointModel } from "@syncfusion/ej2-angular-diagrams";
Diagram.Inject(ConnectorBridging);

@Component({
    selector: "app-container",
    template: `<ejs-diagram id="diagram" width="100%" height="580px" [constraints]='diagramConstraints'>
        <e-connectors>
            <e-connector id='connector' type='Straight' [sourcePoint]='sourcePoint' [targetPoint]='targetPoint' [constraints]='connectorConstraints'>
            </e-connector>
        </e-connectors>
    </ejs-diagram>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    @ViewChild("diagram")
    public diagramConstraints: DiagramConstraints;
    public connectorConstraints: ConnectorConstraints;
    public sourcePoint: PointModel;
    public targetPoint:PointModel;
    ngOnInit(): void {
        this.diagramConstraints = DiagramConstraints.Default | DiagramConstraints.Bridging;
        this.sourcePoint: { x: 100, y: 100 },
        this.targetPoint: { x: 200, y: 200 },
        this.connectorConstraints = ConnectorConstraints.Default & ConnectorConstraints.InheritBridging;
    }
}

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.